加载游戏资源
制作打飞机小游戏，首要任务就是准备好要用到的图片呀、音乐之类的东西。聪明的方法就是预先加载它们，这不就在data.js里用数组存好了！然后，如果是图片就用preLoadImg，音频的话咱们就用HTML5 audio dom创建出来，再通过监测音频播放”canplaythrough”这个事件，确认差不多加载完了，最后就可以开始玩~
加载完后就叫回调呗，然后就让游戏开始初始化工作！别小看这步，资源没全加载好，游戏是玩不成哒。
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);
}
}
}
}
打飞机游戏里头那个叫“绘制器”的东西举足轻重的嘞。绘制器，有2种，普通绘制器跟精灵表绘制器。像炸弹爆炸，手枪射击啦这种复杂点的动画特效就得靠精灵表搞定了。
这款精灵绘图神器就是专门对付各种复杂情况的，画个过程中得不停换图像，这样才有顺畅自然的动画效果。用好了的话，游戏画面就能活起来！
循环利用对象
在玩儿游戏的时候，反复使用同一个对象就是一种能让游戏更流畅的好办法！首先，我们可以在开始玩游戏前，先创建足够多的对象，然后把它们都塞进一个数组里。到要用这些对象的时候，只需要从这个数组里把已经存在的拿来继续用就行了。
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);
}
}
比如玩飞机打靶游戏时，只要在炮弹数组里找找能用的炮弹就能开火了，只要炮弹出了画面或者打到目标了，就让它变成看不见回到数组里就行。这样做，既能让游戏运行得更快，还能避免因为老是重复创建和回收对象导致的资源浪费！
多个音频处理
玩动漫游戏的时候有时候要放好几个声音文件才能让音效听起来更自然。所以，在这个过程中就得想想怎么处理这些声音文件才行，要确保他们能准确无误地放出来。
(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;i40){
this.advance();
this.dateCount = newd;
}
}
if(this.cellIndexsprite.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.leftcanvas.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
搞好多个音频文件的管理，适时激发它们的演奏，游戏音效就会变得丰富多彩。当然，处理音频的过程中还要注意考虑到性能和使用资源这些因素。
技术总结与展望
看了这个教你用HTML5Canvas做打飞机小游戏的文章，你会发现玩个游戏还挺复杂的，首先得考虑怎么加载素材，设计精灵造型，运用画图工具，让不同的对象能重复利用还有处理好多声音等等这些问题。其实，这是搞出完整的游戏所必须要掌握的技能！
//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.leftcanvas.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);
}
科技日新月异，HTML5 Canvas游戏肯定会越来越好玩，越来越创新！希望这篇文章能帮到新手们入门，大家可以随时一起切磋、共同成长！
原文链接：https://www.icz.com/technicalinformation/web/2024/04/13343.html，转载请注明出处~~~
评论0