Shooting Exercise
Trying to get shooting to work properly
HTML
<body>
<!--Game Res-->
<img id="alienW" src="http://i.imgur.com/JsICPiM.png"/>
<img id="alienB" src="http://i.imgur.com/lAZKLpc.png"/>
<img id="alienR" src="http://i.imgur.com/k9B3guu.png"/>
<img id="shot" src="http://i.imgur.com/MxYI25K.png"/>
<img id="player" src="http://i.imgur.com/x59FP55.png"/>
<imd id="player_explode" src="http://i.imgur.com/iMTkTfj.png"/>
<img id="dead_alien" src="http://i.imgur.com/BIi4AXe.png"/>
<img id="missile" scr="http://i.imgur.com/alTQPXw.png"/>
<img id="missile_wave" src="http://i.imgur.com/6UNQBWv.png"/>
<div>
<canvas id="canvas">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
<script type='text/javascript' src='script.js'></script>
</div>
</body>
CSS
/* Add your CSS below! */
div {
margin:auto;
width:400px;
height:400px;
border:1px dotted black;
background-color:black;
}
canvas {
margin:auto;
width:400px;
height:400px;
border:1px dotted black;
background-color:black;
}
img {
display:none;
}
JavaScript
// Add your JavaScript below!
var canvas = document.getElementById("canvas");
var board = canvas.getContext("2d");
//Directional Shortcuts
var Right = 1;
var Left = 2;
var Up = 3;
var Down = 4;
//Edges
var LeftEdge = 0;
var RightEdge = canvas.width - 10;
var BottomEdge = canvas.height - 10;
//All alien array
var aliens = [];
//KeyCodes
var LeftArrow = 37;
var RightArrow = 39;
var UpArrow = 38;
var AKey = 65;
var DKey = 68;
var Spacebar = 32;
//Player/Shot variable
var shooting;
//Aliens
var moveAlien = function(alien){
board.fillStyle = "black";
board.fillRect(alien.x - 1, alien.y - 1, alien.img.width + 2, alien.img.height + 2);
if(alien.state == Right && alien.x >= RightEdge){
for(var i = 0; i < aliens.length; i++){
moveAlienDown(aliens[i]);
aliens[i].state = Left;
}
}else if(alien.state == Left && alien.x <= LeftEdge){
for(var j = 0; j < aliens.length; j++){
moveAlienDown(aliens[j]);
aliens[j].state = Right;
}
}
alien.setMoveDirection();
board.drawImage(alien.img, alien.x, alien.y);
};
var moveAlienDown = function(alien){
for(var i = 0;i < 10;i++){
board.fillStyle = "black";
board.fillRect(alien.x - 1, alien.y - 1, alien.img.width + 2, alien.img.height + 2);
alien.y += 1;
board.drawImage(alien.img, alien.x, alien.y);
}
};
function Alien(x, y, scoreVar, pic){
this.x = x;
this.y = y;
this.scoreVar = scoreVar;
this.img = document.getElementById(pic);
board.drawImage(this.img, this.x, this.y);
this.path;
this.moveDown;
this.state;
aliens.push(this);
this.setMoveDirection = function(){
switch(this.state){
case Right:
this.x += 1;
break;
case Left:
this.x -= 1;
break;
case Up:
this.y -= 1;
break;
case Down:
...