Canvas Shooting Game

by vishalvasani

HTML

<button class="startBtn">Start</button>
Score = <input type="text" class="scoreInput" value="0" style="width:30px" /><br/>
<canvas class='myCanvas' width='480' height='480'></canvas>
<img class="playerImg" src="http://authorcafe-dev-files.s3.amazonaws.com/4/assets/ic_local_airport_48px_128_55ed95cf47b27.png" style="display:none">
<img class="enemyImg" src="http://authorcafe-dev-files.s3.amazonaws.com/4/assets/thumbs/plane_simple_55f4fc25ef02a.png" style="display:none">
<img class="enemyBoomImg" src="http://www.clker.com/cliparts/N/Q/b/F/B/E/pow-hi.png" style="display:none">

CSS

.myCanvas{
    border:1px solid #000;
}

JavaScript

//Ref : http://www.html5rocks.com/en/tutorials/canvas/notearsgame/
    $(function(){
        var canvasElem = $(".myCanvas");
        var canvas = canvasElem.get(0).getContext("2d");
        var canvasWidth = canvasElem[0].width;
        var canvasHeight = canvasElem[0].height;
        var playerImg = $(".playerImg")[0];
        var enemyImg = $(".enemyImg")[0];
        var boomImg = $(".enemyBoomImg")[0];
        var playerBullets = [];
        var playerEnemys = [];
        var startTimer;
        var score = 0;
        Number.prototype.clamp = function(min, max) { // http://stackoverflow.com/a/11409944/4733275
            return Math.min(Math.max(this, min), max);
        };
        var FPS = 31;

        function startGame(){
            startTimer = setInterval(function() {
                update();
                draw();
            }, 1000/FPS);
        }

        function endGame(){
            clearInterval(startTimer);
            console.log("Your score is " + score);
            $(".scoreInput").val("");
            playerBullets = [];
            playerEnemys = [];
            player.img = playerImg;
            canvas.clearRect(0, 0, canvasWidth, canvasHeight);
        }

        $(".startBtn").click(function(){
            startGame();
        });

        $("body").bind({
            keydown: function(e) {
                var key = e.keyCode;
                player.update(key);
            }
        });

        function draw(){
            canvas.clearRect(0, 0, canvasWidth, canvasHeight);
            player.draw();
            playerBullets.forEach(function(bullet) {
                bullet.draw();
            });
            playerEnemys.forEach(function(enemy) {
                enemy.draw();
            });
        }
        function update(){
            $(".scoreInput").val(score);
            playerBullets.forEach(function(bullet, index, object) {
                bullet.y -= bullet.speed;
                if(bullet.y < 0 || bullet.active ){
...