使用HTML5 Canvas制作一个容易的打飞机游戏

!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事件中解除飞机往左的状态。飞机也就停止往左移动了。其他状态也一样的原理，这样写的话，就能够让飞机多种状态于一生了。可以同时开枪同时到处跑了。

实现的代码如下：

XML/HTML Code复制内容到剪贴板

//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才能保证音效的不间断性：
复制代码

XML/HTML Code复制内容到剪贴板

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;   
                                                }   
                                            }

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

相关推荐：

HTML5 Video/Audio播放本地文件

以上就是利用HTML5 Canvas制作一个简单的打飞机游戏的详细内容，更多请关注php中文网其它相关文章！

关键词：运用HTML5 Canvas制作一个容易的打飞机游戏