html5+canvas+javascript开发打灰机小游戏

今天不出太阳，整个人都有点颓废。为了我的大前端计划，不得已找点代码练练手。

打灰机是很早就流行的手机游戏，那时候智能手机还很贵，我还是学生一枚。现在出来工作了，发现别人写的打灰机游戏，然后游戏逻辑很差劲的我，开始了学习之路。

游戏使用html5+canvas+javascript写成，效果一般，游戏逻辑略坑。

可能下次就不再进行游戏练习了，按照计划，得闷头扎进bootstarp zepto vue中去。按照原计划，学会使用它们，了解它们的API，然后开始啃zepto的源码。提高原生js能力，势在必得！

打灰机游戏唯一难点，子弹。

子弹这里我采用的是不成熟的做法，建立坐标对象数组（感觉建立子弹对象好过子弹坐标对象）{x:0,y:0} 然后插入坐标数组，这样就得到指定的子弹数量，然后按照一定间隔取出子弹，画出子弹。

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>javascript版打灰机小游戏</title><style type="text/css">#fly{width: 600px;height: 600px;margin: 0 auto;}#can{background: #c3c8ca;box-shadow:15px 15px 10px #888;}</style><script type="text/javascript" src="js/selfPlane.js"></script><script type="text/javascript" src="js/bullets.js"></script><script type="text/javascript" src="js/enemyPlane.js"></script><script type="text/javascript" src="js/fly.js"></script>
</head>
<body><div id="fly"><canvas id="can"></canvas></div>
</body>
</html>

fly.js

var canvas;//画布
var ctx;//画笔
var doc=document;//加快js效率
var play;//玩家实例
var bul;//子弹实例
var enemy;//敌机实例
var key={};//按键对象
var reset;//是否停止游戏
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {return window.setTimeout(callback, 1000 / 60);};
})();//浏览器计时器API，效率高window.οnlοad=function(){canvas=doc.getElementById('can');ctx=canvas.getContext('2d');canvas.width=600;canvas.height=600;init();flygame();//运行函数
}//游戏运行函数
function flygame(){ctx.clearRect(0,0,600,600);//清除画布play.draw();bul.draw();enemy.draw();if(!reset){requestAnimFrame(flygame);}
}
//初始化函数
function init(){play=playerPlane.createNew();//实例化玩家飞机bul=bulletFactory.createNew();enemy=enemyPlane.createNew();
}//键盘事件
window.addEventListener('keydown',function(e){e=event||window.event;key[e.keyCode]=true;switch(e.keyCode){case 37://leftif(playerPlane.x<=0){return}playerPlane.x-=4;breakcase 38://upif(playerPlane.y<=play.pic.height){return}playerPlane.y-=4;breakcase 39://rightif(playerPlane.x>=canvas.width-play.pic.width){return}playerPlane.x+=4;breakcase 40://downif(playerPlane.y>=canvas.height-play.pic.height){return}playerPlane.y+=4;break}
});window.addEventListener('keyup',function(e){delete key[e.keyCode];//释放按键对象
});

enemyPlane.js

//敌机类var enemyPlane={createNew:function(){var enemy={};enemy.pic=new Image();enemy.pic.src='img/boss.gif';enemy.length=18;//敌机数量enemy.arr=[{x:Math.random()*(600-enemy.pic.width),y:-Math.random()*400,born:false}];//坐标数组enemy.speed=3;if(enemy.arr.length<=enemy.length){for(var i=0;i<enemy.length;i++){enemy.arr.push({x:Math.random()*(600-enemy.pic.width),y:-Math.random()*400,born:false});if(enemy.arr[i].x>=540){enemy.arr[i].x=Math.random()*(600-enemy.pic.width);}}}enemy.draw=function(){for(var i in enemy.arr){if(enemy.arr[i].y>=600||enemy.arr[i].born){enemy.arr.splice(i,1,{x:Math.random()*(600-enemy.pic.width),y:-Math.random()*400,born:false});}for(var j in bul.arr){if(bul.arr[j].x+bul.pic.width<=enemy.arr[i].x+enemy.pic.width&&enemy.arr[i].x<=bul.pic.width+bul.arr[j].x&&enemy.arr[i].y+enemy.pic.height>=bul.arr[j].y&&enemy.arr[i].y+enemy.pic.height<=bul.arr[j].y+bul.pic.height){bul.arr[j].born=true;enemy.arr[i].born=true;}}if(playerPlane.x<=enemy.arr[i].x+enemy.pic.width&&enemy.arr[i].x<=play.pic.width+playerPlane.x&&enemy.arr[i].y+enemy.pic.height>=playerPlane.y&&enemy.arr[i].y+enemy.pic.height<=playerPlane.y+play.pic.height){if(confirm('是否重新开始游戏？')){location.reload();}else{reset=true;}}ctx.drawImage(enemy.pic,enemy.arr[i].x,enemy.arr[i].y+=Math.random());}}return enemy;//返回敌机}
}

bullets.js

//子弹类var Bullets={createNew:function(){//继承玩家飞机坐标var bul={};bul.pic=new Image();//子弹图片bul.pic.src="img/bullet.jpg";//路径bul.speed=4;return bul;//返回子弹}
}//子弹工厂类
var bulletFactory={createNew:function(){var bulfac=Bullets.createNew();//继承子弹类bulfac.length=50;//子弹个数bulfac.arr=[{x:playerPlane.x+32,y:playerPlane.y-20,born:false}];//数组bulfac.draw=function(){for(var j in bulfac.arr){if(bulfac.arr[j].y<=0){bulfac.arr[j].y=bulfac.y-20;bulfac.arr.shift();}if(bulfac.arr[bulfac.arr.length-1].y<=playerPlane.y-80){if(bulfac.arr.length<bulfac.length){//大于指定子弹数量则不添加子弹bulfac.arr.push({x:playerPlane.x+32,y:playerPlane.y-20,born:false});//下一颗子弹} }if(bulfac.arr[j].born){bulfac.arr.splice(j,1,{x:playerPlane.x+32,y:playerPlane.y-20,born:false})}ctx.drawImage(bulfac.pic,bulfac.arr[j].x,bulfac.arr[j].y-=bulfac.speed,15,24);}}return bulfac;//返回子弹工厂}
}

selfPlane.js

//玩家飞机类
//极简主义法模拟强类型语言类
var playerPlane={x:250,y:500,//坐标createNew:function(){var player={};//玩家飞机player.pic=new Image();//图片player.pic.src='img/self.jpg';//绘制玩家飞机player.draw=function(){ctx.drawImage(player.pic,playerPlane.x,playerPlane.y,player.pic.width,player.pic.height);}return player;//返回闭包中的player对象}
}

完整代码下载

html5+canvas+javascript开发打灰机小游戏相关推荐

html5标签云,TagCanvas - HTML5 Canvas技术开发的标签云动画
TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本.它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcy ...
html小游戏代码_研发实践：Mozilla分享如何开发一款WebVR小游戏
文章相关引用及参考:mozvr 本文来自Mozilla的Josh Marinacci (映维网 2019年02月06日)在倡导新技术时,我总是尝试采用现实世界开发者的方式,而对于WebVR,开发一款游 ...
使用HTML5 canvas和光线投影算法创建伪3D 游戏
为什么80%的码农都做不了架构师?>>> 作者 Jacob Seidelin · 2008年11月28日本文翻译自 Creating pseudo 3D games with ...
云起实验室：零基础入门Serverless：一键部署红白机小游戏
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个红白机小游戏. 点击立即参与云产品场景体验https://developer.aliyun.com/adc/scenario/5796ce32 ...
视频|如何通过 LeanCloud 快速开发实时对战小游戏
实时对战是 LeanCloud 专门针对多人在线对战游戏推出的后端服务.开发者不需要自己搭建后端系统,利用云服务就可以轻松实现游戏内玩家匹配.在线对战消息同步等功能.本期直播课程我们将通过此服务来实现 ...
单机手机消消乐php游戏源码,html5做出叠房子消消乐小游戏代码
html5做出叠房子消消乐小游戏代码 js代码 // The game configuration var qici = {}; qici.config = { projectName: 'Subar ...
编程语言用 Java 开发一个打飞机小游戏（附完整源码）
编程语言用 Java 开发一个打飞机小游戏(附完整源码) 上图写在前面技术源于分享,所以今天抽空把自己之前用java做过的小游戏整理贴出来给大家参考学习.java确实不适合写桌面应用,这里只是通过 ...
经典怀旧FCgame红白机小游戏在线网页合集版畅玩HTML网站源码
经典怀旧FCgame红白机小游戏在线网页合集版畅玩HTML网站源码 ☑️ 编号:ym468 ☑️ 品牌:无 ☑️ 语言:ThinkPHP ☑️ 大小:4.7MB ☑️ 类型:经典怀旧FCgame ☑️ ...
云开发谁是卧底线下小游戏发牌助手微信小程序源码-亲测可用
云开发谁是卧底线下小游戏源码,发牌助手微信小程序源码. "谁是卧底OL"是一个非常有趣,风靡全国的比拼语言表述能力.知识面与想象力的游戏. 谁是卧底OL是一款由开发商北游科技倾力打 ...

html5+canvas+javascript开发打灰机小游戏

html5+canvas+javascript开发打灰机小游戏相关推荐

最新文章

热门文章