利用HTML5 Canvas实现打飞机游戏

之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。

　　闲话不多说，先上DEMO撒：飞机游戏 楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。

　　步入主题啦：打飞机游戏文件有index.html入口文件，allSprite.js精灵的逻辑处理文件，loading.js加载处理文件以及data.js（初始化的一些数据）。

　　首先，正常的游戏基本上都需要一个loading，loading页面就是用来预加载数据的，包括精灵表图片，音频等，因为这是个小游戏，要加载的就只有一些音频和图片。里面的加载代码主要就下面这些，其他是制作loading动画的，那个比较简单，就不贴了，如果有兴趣的直接在DEMO里看控制台就行了：

loadImg:function(datas){                var _this = this;                var dataIndex = 0;                li();                function li(){                    if(datas[dataIndex].indexOf("mp3")>=0){                        var audio = document.createElement("audio");                        document.body.appendChild(audio);                        audio.preload = "auto";                        audio.src = datas[dataIndex];                        audio.oncanplaythrough = function(){                            this.oncanplaythrough = null;                            dataIndex++;                            if(dataIndex===datas.length){                                _this.percent = 100;                            }else {                                _this.percent = parseInt(dataIndex/datas.length*100);                                li.call(_this);                            }                        }                    }else {                        preLoadImg(datas[dataIndex] , function(){                            dataIndex++;                            if(dataIndex===datas.length){                                _this.percent = 100;                            } else {                                _this.percent = parseInt(dataIndex/datas.length*100);                                li.call(_this);                            }                        })                    }                }            },    //再贴出preLoadImg的方法    function preLoadImg(src , callback){        var img = new Image();        img.src = src;        if(img.complete){            callback.call(img);        }else {            img.onload = function(){                callback.call(img);            }        }    }

　　游戏开始了，一个游戏，会需要很多的对象，所以我就统一写成了一个精灵对象，不同对象之间的每一帧的运动情况直接用behavior来分别编写就行了。

W.Sprite = function(name , painter , behaviors , args){        if(name !== undefined) this.name = name;        if(painter !== undefined) this.painter = painter;        this.top = 0;        this.left = 0;        this.width = 0;        this.height = 0;        this.velocityX = 3;        this.velocityY = 2;        this.visible = true;        this.animating = false;        this.behaviors = behaviors;        this.rotateAngle = 0;        this.blood = 50;        this.fullBlood = 50;        if(name==="plan"){            this.rotateSpeed = 0.05;            this.rotateLeft = false;            this.rotateRight = false;            this.fire = false;            this.firePerFrame = 10;            this.fireLevel = 1;        }else if(name==="star"){            this.width = Math.random()*2;            this.speed = 1*this.width/2;            this.lightLength = 5;            this.cacheCanvas = document.createElement("canvas");            thisthis.cacheCtx = this.cacheCanvas.getContext('2d');            thisthis.cacheCanvas.width = this.width+this.lightLength*2;            thisthis.cacheCanvas.height = this.width+this.lightLength*2;            this.painter.cache(this);        }else if(name==="badPlan"){            this.badKind = 1;            this.speed = 2;            this.rotateAngle = Math.PI;        }else if(name==="missle"){            this.width = missleWidth;        }else if(name==="boom"){            this.width = boomWidth;        }else if(name==="food"){            this.width = 40;            this.speed = 3;            this.kind = "LevelUP"     }        this.toLeft = false;        this.toTop = false;        this.toRight = false;        this.toBottom = false;        this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);        if(args){            for(var arg in args){                this[arg] = args[arg];            }        }    }    Sprite.prototype = {        constructor:Sprite,        paint:function(){            if(this.name==="badPlan"){this.update();}            if(this.painter !== undefined && this.visible){                if(this.name!=="badPlan") {                    this.update();                }                if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){                    ctx.save();                    ctx.translate(this.left , this.top);                    ctx.rotate(this.rotateAngle);                    this.painter.paint(this);                    ctx.restore();                }else {                    this.painter.paint(this);                }            }        },        update:function(time){            if(this.behaviors){                for(var i=0;i<this.behaviors.length;i++){                    this.behaviors[i].execute(this,time);                }            }        }    }

写出精灵类后，就可以通过编写每个的painter以及behavior来生成不同的对象了。接下来就是写painter了，painter分成两种，一种是普通的painter，一种就是精灵表painter，因为像爆炸动画，飞机开枪动画，都不是一张图片就能搞定的，所以就需要用到精灵表了：

而绘制这些就要为他们定制一个精灵表绘制器，下面这个是最简单的精灵表绘制器，针对游戏的复杂性可以相对的修改精灵表写法，直到合适，不过原理都大同小异，就是小修小改而已：

var SpriteSheetPainter = function(cells){                this.cells = cells || [];                this.cellIndex = 0;            }            SpriteSheetPainter.prototype = {                advance:function(){                    if(this.cellIndex === this.cells.length-1){                        this.cellIndex = 0;                    }                    else this.cellIndex++;                },                paint:function(sprite){                    var cell = this.cells[this.cellIndex];                    context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);                }            }

有了精灵类和精灵表绘制器后，我们就可以把星星，飞机，子弹，爆炸对象都写出来了：下面是整个allSprite.js的代码：

(function(W){        "use strict"     var planWidth = 24,            planHeight = 24,            missleWidth = 70,            missleHeight = 70,            boomWidth = 60;        //精灵类      W.Sprite = function(name , painter , behaviors , args){            if(name !== undefined) this.name = name;            if(painter !== undefined) this.painter = painter;            this.top = 0;            this.left = 0;            this.width = 0;            this.height = 0;            this.velocityX = 3;            this.velocityY = 2;            this.visible = true;            this.animating = false;            this.behaviors = behaviors;            this.rotateAngle = 0;            this.blood = 50;            this.fullBlood = 50;            if(name==="plan"){                this.rotateSpeed = 0.05;                this.rotateLeft = false;                this.rotateRight = false;                this.fire = false;                this.firePerFrame = 10;                this.fireLevel = 1;            }else if(name==="star"){                this.width = Math.random()*2;                this.speed = 1*this.width/2;                this.lightLength = 5;                this.cacheCanvas = document.createElement("canvas");                this.cacheCtx = this.cacheCanvas.getContext('2d');                this.cacheCanvas.width = this.width+this.lightLength*2;                this.cacheCanvas.height = this.width+this.lightLength*2;                this.painter.cache(this);            }else if(name==="badPlan"){                this.badKind = 1;                this.speed = 2;                this.rotateAngle = Math.PI;            }else if(name==="missle"){                this.width = missleWidth;            }else if(name==="boom"){                this.width = boomWidth;            }else if(name==="food"){                this.width = 40;                this.speed = 3;                this.kind = "LevelUP"         }            this.toLeft = false;            this.toTop = false;            this.toRight = false;            this.toBottom = false;            this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);            if(args){                for(var arg in args){                    this[arg] = args[arg];                }            }        }        Sprite.prototype = {            constructor:Sprite,            paint:function(){                if(this.name==="badPlan"){this.update();}                if(this.painter !== undefined && this.visible){                    if(this.name!=="badPlan") {                        this.update();                    }                    if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){                        ctx.save();                        ctx.translate(this.left , this.top);                        ctx.rotate(this.rotateAngle);                        this.painter.paint(this);                        ctx.restore();                    }else {                        this.painter.paint(this);                    }                }            },            update:function(time){                if(this.behaviors){                    for(var i=0;i<this.behaviors.length;i++){                        this.behaviors[i].execute(this,time);                    }                }            }        }        // 精灵表绘制器      W.SpriteSheetPainter = function(cells , isloop , endCallback , spritesheet){            this.cells = cells || [];            this.cellIndex = 0;            this.dateCount = null;            this.isloop = isloop;            this.endCallback = endCallback;            this.spritesheet = spritesheet;        }        SpriteSheetPainter.prototype = {            advance:function(){                this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1);            },            paint:function(sprite){                if(this.dateCount===null){                    this.dateCount = new Date();                }else {                    var newd = new Date();                    var tc = newd-this.dateCount;                    if(tc>40){                        this.advance();                        this.dateCount = newd;                    }                }                if(this.cellIndex<this.cells.length || this.isloop){                    var cell = this.cells[this.cellIndex];                    ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left-sprite.width/2 , sprite.top-sprite.width/2 , cell.w , cell.h);                } else if(this.endCallback){                    this.endCallback.call(sprite);                    this.cellIndex = 0;                }            }        }        //特制飞机精灵表绘制器      W.controllSpriteSheetPainter = function(cells , spritesheet){            this.cells = cells || [];            this.cellIndex = 0;            this.dateCount = null;            this.isActive = false;            this.derection = true;            this.spritesheet = spritesheet;        }        controllSpriteSheetPainter.prototype = {            advance:function(){                if(this.isActive){                    this.cellIndex++;                    if(this.cellIndex === this.cells.length){                        this.cellIndex = 0;                        this.isActive = false;                    }                }            },            paint:function(sprite){                if(this.dateCount===null){                    this.dateCount = new Date();                }else {                    var newd = new Date();                    var tc = newd-this.dateCount;                    if(tc>sprite.firePerFrame){                        this.advance();                        this.dateCount = newd;                    }                }                var cell = this.cells[this.cellIndex];                ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/2 , cell.w , cell.h);            }        }        W.planBehavior = [            {execute:function(sprite,time){                if(sprite.toTop){                    sprite.top = sprite.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY;                }                if(sprite.toLeft){                    sprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX;                }                if(sprite.toRight){                    sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;                }                if(sprite.toBottom){                    sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;                }                if(sprite.rotateLeft){                    sprite.rotateAngle -= sprite.rotateSpeed;                }                if(sprite.rotateRight){                    sprite.rotateAngle += sprite.rotateSpeed;                }                if(sprite.fire&&!sprite.painter.isActive){                    sprite.painter.isActive = true;                    this.shot(sprite);                }            },            shot:function(sprite){                this.addMissle(sprite , sprite.rotateAngle);                var missleAngle = 0.1                for(var i=1;i<sprite.fireLevel;i++){                    this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);                    this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);                }                var audio = document.getElementsByTagName("audio");                for(var i=0;i<audio.length;i++){                    console.log(audio[i].paused)                    if(audio[i].src.indexOf("shot")>=0&&audio[i].paused){                        audio[i].play();                        break;                    }                }            },            addMissle:function(sprite , angle){                    for(var j=0;j<missles.length;j++){                        if(!missles[j].visible){                            missles[j].left = sprite.left;                            missles[j].top = sprite.top;                            missles[j].rotateAngle = angle;                            var missleSpeed = 20;                            missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);                            missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);                            missles[j].visible = true;                            break;                        }                    }                }            }        ]        W.starBehavior = [            {execute:function(sprite,time){                if(sprite.top > canvas.height){                    sprite.left = Math.random()*canvas.width;                    sprite.top = Math.random()*canvas.height - canvas.height;                }                sprite.top += sprite.speed;            }}        ]        W.starPainter = {            paint:function(sprite){                ctx.drawImage(sprite.cacheCanvas , sprite.left-sprite.width/2-sprite.lightLength , sprite.top-sprite.width/2-sprite.lightLength)            },            cache:function(sprite){                sprite.cacheCtx.save();                var opacity = 0.5,addopa = 1/sprite.lightLength;                sprite.cacheCtx.fillStyle = "rgba(255,255,255,0.8)";                sprite.cacheCtx.beginPath();                sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2 , 0 , 2*Math.PI);                sprite.cacheCtx.fill();                for(var i=1;i<=sprite.lightLength;i+=2){                    opacity-=addopa;                    sprite.cacheCtx.fillStyle = "rgba(255,255,255,"+opacity+")";                    sprite.cacheCtx.beginPath();                    sprite.cacheCtx.arc(sprite.width/2+sprite.lightLength , sprite.width/2+sprite.lightLength , sprite.width/2+i , 0 , 2*Math.PI);                    sprite.cacheCtx.fill();                }            }        }        W.foodBehavior = [            {execute:function(sprite,time){                sprite.top += sprite.speed;                if(sprite.top > canvas.height+sprite.width){                    sprite.visible = false;                }            }}        ]        W.foodPainter = {            paint:function(sprite){                ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"             ctx.font="15px 微软雅黑"             ctx.textAlign = "center";                ctx.textBaseline = "middle";                ctx.fillText(sprite.kind , sprite.left , sprite.top);            }        }        W.missleBehavior = [{            execute:function(sprite,time){                sprite.left -= sprite.velocityX;                sprite.top -= sprite.velocityY;                if(sprite.left<-missleWidth/2||sprite.top<-missleHeight/2||sprite.left>canvas.width+missleWidth/2||sprite.top<-missleHeight/2){                    sprite.visible = false;                }            }        }];        W.misslePainter = {            paint:function(sprite){                var img = new Image();                img.src="../planGame/image/plasma.png"             ctx.drawImage(img , -missleWidth/2+1 , -missleHeight/2+1 , missleWidth , missleHeight);            }        }        W.badPlanBehavior = [{            execute:function(sprite,time){                if(sprite.top > canvas.height || !sprite.visible){                    var random = Math.random();                    if(point>=200&&point<400){                        sprite.fullBlood = 150;                        if(random<0.1){                            sprite.badKind = 2;                            sprite.fullBlood = 250;                        }                    }else if(point>=400&&point<600){                        sprite.fullBlood = 250;                        if(random<0.2){                            sprite.badKind = 2;                            sprite.fullBlood = 400;                        }                        if(random<0.1){                            sprite.badKind = 3;                            sprite.fullBlood = 600;                        }                    }else if(point>=600){                        sprite.fullBlood = 500;                        if(random<0.4){                            sprite.badKind = 2;                            sprite.fullBlood = 700;                        }                        if(random<0.2){                            sprite.badKind = 3;                            sprite.fullBlood = 1000;                        }                    }                    sprite.visible = true;                    sprite.blood = sprite.fullBlood;                    sprite.left = Math.random()*(canvas.width-2*planWidth)+planWidth;                    sprite.top = Math.random()*canvas.height - canvas.height;                }                sprite.top += sprite.speed;            },            shot:function(sprite){                this.addMissle(sprite , sprite.rotateAngle);                var missleAngle = 0.1                for(var i=1;i<sprite.fireLevel;i++){                    this.addMissle(sprite , sprite.rotateAngle-i*missleAngle);                    this.addMissle(sprite , sprite.rotateAngle+i*missleAngle);                }            },            addMissle:function(sprite , angle){                for(var j=0;j<missles.length;j++){                    if(!missles[j].visible){                        missles[j].left = sprite.left;                        missles[j].top = sprite.top;                        missles[j].rotateAngle = angle;                        var missleSpeed = 20;                        missles[j].velocityX = missleSpeed*Math.sin(-missles[j].rotateAngle);                        missles[j].velocityY = missleSpeed*Math.cos(-missles[j].rotateAngle);                        missles[j].visible = true;                        break;                    }                }            }        }];        W.badPlanPainter = {            paint:function(sprite){                var img = new Image();                img.src="../planGame/image/ship.png"             switch(sprite.badKind){                    case 1:ctx.drawImage(img , 96 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);                    break;                    case 2:ctx.drawImage(img , 120 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);                    break;                    case 3:ctx.drawImage(img , 144 , 0 , planWidth , planWidth , -planWidth/2 , -planHeight/2 , planWidth , planWidth);                    break;                }                ctx.strokeStyle = "#FFF";                ctx.fillStyle = "#F00";                var bloodHeight = 1;                ctx.strokeRect(-planWidth/2-1 , planHeight+bloodHeight+3 , planWidth+2 , bloodHeight+2);                ctx.fillRect(planWidth/2-planWidth*sprite.blood/sprite.fullBlood , planHeight+bloodHeight+3 , planWidth*sprite.blood/sprite.fullBlood , bloodHeight);            }        }        W.planSize = function(){            return {                w:planWidth,                h:planHeight            }            }    })(window);

　　主要说一下飞机的运动以及对象数量的控制，飞机怎么运动？毫无疑问，通过键盘控制它运动，可能很多人就会想到通过keydown这个方法按下的时候通过判断keyCode来让飞机持续运动。但是有个问题，keydown事件不支持多键按下，也就是说，当你按下X键时，keyCode是88，与此同时你按下方向键后，keyCode会瞬间变成37，也就是说，如果你单纯的想靠keydown来控制飞机运动，飞机就只能做一件事，要么只可以往某个方向移动，要么只会开枪。

　　所以，我们要通过keydown和keyup来实现飞机的运动，原理很容易理解：当我们按下往左的方向键时，我们给飞机一个往左的状态，也就是让飞机的toLeft属性为true，而在动画循环中，判断飞机的状态，如果toLeft为true则飞机的x值不停地减少，飞机也就会不停地往左移动，然后当我们抬起手指时触发keyup事件，我们就再keyup事件中解除飞机往左的状态。飞机也就停止往左移动了。其他状态也一样的原理，这样写的话，就能够让飞机多种状态于一生了。可以同时开枪同时到处跑了。

实现的代码如下：

//keydown/keyup事件的绑定        window.onkeydown = function(event){                switch(event.keyCode){                    case 88:myplan.fire = true;                    break;                    case 90:myplan.rotateLeft=true;                    break;                    case 67:myplan.rotateRight=true;                    break;                    case 37:myplan.toLeft = true;                    break;                    case 38:myplan.toTop = true;                    break;                    case 39:myplan.toRight = true;                    break;                    case 40:myplan.toBottom = true;                    break;                }            }            window.onkeyup = function(event){                switch(event.keyCode){                    case 88:myplan.fire = false;                    break;                    case 90:myplan.rotateLeft=false;                    break;                    case 67:myplan.rotateRight=false;                    break;                    case 37:myplan.toLeft = false;                    break;                    case 38:myplan.toTop = false;                    break;                    case 39:myplan.toRight = false;                    break;                    case 40:myplan.toBottom = false;                    break;                }            }        //飞机每一帧的状态更新处理代码    execute:function(sprite,time){                if(sprite.toTop){                    spritesprite.top = sprite.top<planHeight/2? sprite.top : sprite.top-sprite.velocityY;                }                if(sprite.toLeft){                    spritesprite.left = sprite.left<planWidth/2? sprite.left : sprite.left-sprite.velocityX;                }                if(sprite.toRight){                    spritesprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;                }                if(sprite.toBottom){                    spritesprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;                }                if(sprite.rotateLeft){                    sprite.rotateAngle -= sprite.rotateSpeed;                }                if(sprite.rotateRight){                    sprite.rotateAngle += sprite.rotateSpeed;                }                if(sprite.fire&&!sprite.painter.isActive){                    sprite.painter.isActive = true;                    this.shot(sprite);                }

　　然后说下对象控制，打飞机游戏，会发射大量子弹，产生大量对象，包括爆炸啊，飞机啊，子弹等，如果不停地进行对象的生成和销毁，会让浏览器的负荷变得很大，运行了一段时间后就会卡出翔了。所以，我们要用可以循环利用的对象来解决这个问题，不进行对象的销毁，对所有对象进行保存，循环利用。

　　我的做法就是，在游戏初始化的时候，直接生成一定数量的对象，存放在数组里面。当我们需要一个对象的时候，就从里面取，当用完后，再放回数组里面。数组里的所有对象都有一个属性，visible，代表对象当前是否可用。

　　举个例子，当我的飞机发射一发炮弹，我需要一发炮弹，所以我就到炮弹数组里遍历，如果遍历到的炮弹visible为true，也就说明该对象正在使用着，不能拿来用，所以继续遍历，直到遍历到visible为false的炮弹对象，说明这个对象暂时没人用。然后就可以拿过来重新设置属性，投入使用了。当炮弹击中敌人或者打出画布外的时候，把炮弹的visible设成false，又成了一个没人用的炮弹在数组里存放起来等待下一次调用。

　　所以，我们要预算算好页面大概要用到多少个对象，然后就预先准备好对象，这样，在游戏进行中，不会有对象进行生成和销毁，对游戏性能方面就有了提升了。

　　　　最后再说下音频，游戏里面要用到多个同样的audio才能保证音效的不间断性：

var audio = document.getElementsByTagName("audio");                                                for(var i=0;i<audio.length;i++){                                                    console.log(audio[i].paused)                                                    if(audio[i].src.indexOf("boom")>=0&&audio[i].paused){                                                        audio[i].play();                                                        break;                                                    }                                                }

好吧，基本上就这样了。技术或许还不够好，纯碎做个记录，如果代码有不当正处，欢迎指出，共同学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

html5和css3 动态气泡按钮的实现

如何使用jQuery和HTML5实现手机摇一摇的换衣特效

以上就是利用HTML5 Canvas实现打飞机游戏的详细内容，更多内容请关注技术你好其它相关文章！