JS: SpaceInvaders

based upon: https://github.com/whostolemyhat/space-invaders https://github.com/pjnovas/invaders404 https://github.com/gregquat/inbeda more at: https://github.com/lkvsky/canvas-space-invaders https://github.com/Jivings/CanvasInvaders

HTML

<h1>Inbeda, the amazing javascript Space Invaders | Interval : <span id="inter"></span> ms</h1>

<div id="levelDiv">
    	<h2>Level :</h2>
	<span id="level"></span>

</div>
<div id="scoreDiv">
    	<h2>Score :</h2>
	<span id="score"></span>

</div>
<div id="alivesDiv">
    	<h2>Aliens :</h2>
	<span id="alives"></span>

</div>
<canvas id="aliensCanvas" class="mesCanvas" width="530" height="500">Votre navigateur ne supporte pas les Canvas :(</canvas>

CSS

canvas {
    position:absolute;
    left:20px;
    top:60px;
}
#aliensCanvas {
    background-color:black;
}
#gunraysCanvas {
    background-color:transparent;
}
#scoreDiv, #alivesDiv, #levelDiv {
    position:absolute;
    top:100px;
    left:650px;
}
#score, #alives, #level {
    display:block;
    width:90px;
    height:30px;
    border:2px solid #333;
    border-radius:7px 7px 7px;
    text-align:center;
    font-size: 25px;
    line-height:30px;
}
#scoreDiv {
    top:160px;
}
#alivesDiv {
    top:320px;
}
h2 {
    margin:0;
}

JavaScript

var Alien = function (aType, aLine, aCol) {
    this.type = aType;
    this.points = 40 - 10 * aType;
    this.line = aLine;
    this.column = aCol;
    this.alive = true;
    this.height = 20;
    this.width = 28;
    this.positionX = 100 + this.width * this.column;
    this.positionY = 100 + 30 * this.line;
    this.direction = 1;
    this.state = 0;

    this.changeState = function () { //change the state (2 different images for each alien)
        this.state = !this.state ? 20 : 0;
    };

    this.down = function () { //down the alien after changing direction
        this.positionY = this.positionY + 10;

    };

    this.move = function () { //set new position after moving and draw the alien
        if (this.positionY >= Game.height - 50) {
            Game.over();
        }
        this.positionX = this.positionX + 5 * Game.direction;
        this.changeState();
        if (this.alive) this.draw();
    };

    this.checkCollision = function () { //Check if the alien is killed by gun ray
        if (Gun.ray.active == true && this.alive == true) {
            if ((Gun.ray.positionX >= this.positionX && Gun.ray.positionX <= (this.positionX + this.width)) && (Gun.ray.positionY >= this.positionY && Gun.ray.positionY <= (this.positionY + this.height))) {
                this.kill();
                Gun.ray.destroy();
            }
        }
    };

    this.draw = function () { //draw the alien to his new position
        if (this.alive) { //draw the alien
            canvas.drawImage(
            pic,
            this.width * (this.type - 1),
            this.state,
            this.width,
            this.height,
            this.positionX,
            this.positionY,
            this.width,
            this.height);
        } else if (this.alive == null) { //draw the explosion
            canvas.drawImage(
            pic,
            85,
            20,
            28,
            20,
            this.positionX,
            this.positionY,
           ...