├── bomberman submission ├── index.html ├── scripts.js └── style.css └── README.md /bomberman submission/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Blank Template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | bomber man 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bomberman 2 | 3 | ![bomberman](https://user-images.githubusercontent.com/22990146/36992439-ea7eca9e-2078-11e8-8368-94aae167d751.PNG) 4 | 5 | How It's Made: 6 | Tech used: HTML, CSS, JavaScript 7 | I created event listeners, captured the event in parameters in a function, and used key up-down-left-right functions to move my character. I also added audio noises for fun, by putting the audio into the html and using the method .play() at certain keydown events. 8 | 9 | Optimizations 10 | (optional) 11 | 12 | I would love to have the maze not be a background only. This way the character is moving through the maze and not just across the background. I would also make the code more dry. 13 | 14 | Lessons Learned: 15 | I learned about key events, which was super cool! Did not know that keys had certain numbers assigned to them. 16 | -------------------------------------------------------------------------------- /bomberman submission/scripts.js: -------------------------------------------------------------------------------- 1 | //check to see if my Javascript is successful with an alert 2 | 3 | alert("Time to play a game!") 4 | 5 | //What are my items, bomber and the container that it is in 6 | 7 | var bomber= document.getElementById('bomber') 8 | var container= document.getElementById('container') 9 | //key presses 10 | var bomberLeft= 0; 11 | var bomberTop=0; 12 | //user moves bomber man left, right, down, up with arrow keys 13 | //up 38 14 | //down 40 15 | //left 37 16 | //right 39 17 | function moveBomber(e){ 18 | //when the user presses right arrow, bomber will move right 19 | if (e.keyCode==39){ 20 | bomberLeft++; 21 | bomber.style.left = bomberLeft + 'px'; 22 | } 23 | //when the user presses left arrow, bomber will move left 24 | else if (e.keyCode==37){ 25 | bomberLeft--; 26 | bomber.style.left = bomberLeft + 'px'; 27 | } 28 | 29 | //when the user presses up arrow, bomber man will move up 30 | else if (e.keyCode==38){ 31 | bomberTop--; 32 | bomber.style.top = bomberTop + 'px'; 33 | } 34 | //when user presses down arrow, bomber man will move down 35 | else if (e.keyCode==40){ 36 | bomberTop++; 37 | bomber.style.top = bomberTop + 'px'; 38 | } 39 | } 40 | 41 | document.onkeydown = moveBomber; 42 | 43 | //make sounds when the player is going left , right , up, down 44 | document.addEventListener('keydown', function(e) { 45 | 46 | }); 47 | 48 | document.addEventListener('keydown', function(e) { 49 | if (e.keyCode == 37) { 50 | document.getElementById('cheering').play(); 51 | } 52 | if (e.keyCode == 39) { 53 | document.getElementById('cheering').play(); 54 | } 55 | if (e.keyCode == 38) { 56 | document.getElementById('cheering').play(); 57 | } 58 | if (e.keyCode ==40) { 59 | document.getElementById('cheering').play(); 60 | } 61 | }); 62 | -------------------------------------------------------------------------------- /bomberman submission/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Project Name: Blank Template 3 | Client: Your Client 4 | Author: Your Name 5 | Developer @GA in NYC 6 | */ 7 | 8 | 9 | /****************************************** 10 | /* SETUP 11 | /*******************************************/ 12 | 13 | /* Box Model Hack */ 14 | * { 15 | -moz-box-sizing: border-box; /* Firexfox */ 16 | -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */ 17 | box-sizing: border-box; /* IE */ 18 | } 19 | 20 | /* Clear fix hack */ 21 | .clearfix:after { 22 | content: "."; 23 | display: block; 24 | clear: both; 25 | visibility: hidden; 26 | line-height: 0; 27 | height: 0; 28 | } 29 | 30 | .clear { 31 | clear: both; 32 | } 33 | 34 | .alignright { 35 | float: right; 36 | padding: 0 0 10px 10px; /* note the padding around a right floated image */ 37 | } 38 | 39 | .alignleft { 40 | float: left; 41 | padding: 0 10px 10px 0; /* note the padding around a left floated image */ 42 | } 43 | 44 | /****************************************** 45 | /* BASE STYLES 46 | /*******************************************/ 47 | 48 | body { 49 | color: #000; 50 | font-size: 12px; 51 | line-height: 1.4; 52 | font-family: Helvetica, Arial, sans-serif; 53 | } 54 | 55 | 56 | /****************************************** 57 | /* LAYOUT 58 | /*******************************************/ 59 | 60 | /* Center the container */ 61 | #container { 62 | width:100%; 63 | margin: auto; 64 | position: relative; 65 | } 66 | 67 | body{ 68 | background-image: url(https://courses.cs.washington.edu/courses/cse473/14sp/pacman/search/maze.png); 69 | background-repeat: no-repeat; 70 | background-size: cover; 71 | } 72 | 73 | 74 | #bomber{ 75 | height: 110px; 76 | width: 20%; 77 | position: absolute; 78 | left:0; 79 | top: 0; 80 | } 81 | /****************************************** 82 | /* ADDITIONAL STYLES 83 | /*******************************************/ 84 | --------------------------------------------------------------------------------