雷电html代码,基于HTML5的游戏制作(雷电飞机设计游戏)
雷电飞机设计游戏
游戏演示:
游戏设计步骤
1.导入素材
2.参考代码:
飞机大战
你的浏览器不支持canves画布元素,请更新浏览器获得演示效果。
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
document.addEventListener('keydown',onKeydown);
//飞机类和其属性
var Plan=function(image,x,y,n){
this.image=image;
this.x=x;
this.y=y;
this.orignx=x;
this.origny=y;
this.width=image.width/n;
this.height=image.height;
this.isCaught=false;
this.frm=0;
this.dis=0;
this.n=n;
};
Plan.prototype.getCaught=function(bool){
this.isCaught=bool;
if (bool==false){
this.orignx=0;
this.origny=this.y;
}
};
Plan.prototype.testPoint=function(x,y){
var betweenX=(x>=this.x)&&(x<=this.x+this.width);
var betweenY=(y>=this.y)&&(y<=this.y+this.height);
return betweenX&&betweenY;
};
Plan.prototype.move=function(dx,dy){
this.x+=dx;
this.y+=dy;
};
Plan.prototype.Y=function(){
return this.y;
};
//不断下移飞机
Plan.prototype.draw=function(ctx){
ctx.save();
ctx.translate(this.x,this.y);
ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);
ctx.restore();
this.y++;
this.x=this.orignx+20*Math.sin(Math.PI/100*this.y);
this.dis++;
if(this.dis>=3){
this.dis=0;
this.frm++;
if(this.frm>=this.n) this.frm=0;
}
};
//原地不动画飞机
Plan.prototype.draw2=function(ctx){
ctx.save();
ctx.translate(this.x,this.y);
ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);
ctx.restore();
this.dis++;
//3帧换一次图片
if(this.dis>=3){
this.dis=0;
this.frm++;
if(this.frm>=this.n) this.frm=0;
}
};
//检测飞机碰撞
Plan.prototype.hitTestObject=function(planobj){
if(iscolliding(this.x,this.y,this.width,this.height,planobj.x,planobj.y,planobj.width,planobj.height))
return true;
else
return false;
}
function iscolliding(ax,ay,aw,ah,bx,by,bw,bh){
if(ay>by+bh||by>ay+ah||ax>bx+bw||bx>ax+aw)
return false;
else
return true;
}
//子弹类和其属性
var Bullet=function(image,x,y){
this.image=image;
this.x=x;
this.y=y;
this.orignx=x;
this.orignx=y;
this.width=image.width/4;
this.height=image.height;
this.isCaught=false;
this.frm=0;
this.dis=0;
}
Bullet.prototype.testPoint=function(x,y){
var betweenX=(x>=this.x)&&(x
var betweenY=(y>=this.y)&&(y
return betweenX&&betweenY;
};
Bullet.prototype.move=function(dx,dy){
this.x+=dx;
this.y+=dy;
};
Bullet.prototype.Y=function(){
return this.y;
};
Bullet.prototype.draw=function(ctx){
ctx.save();
ctx.translate(this.x,this.y);
ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);
ctx.restore();
this.y--;
this.dis++;
if(this.dis>=10){
this.dis=0;
this.frm++;
if(this.frm>=4) this.frm=0;
}
};
//检测子弹与敌人的碰撞
Bullet.prototype.hitTestObject=function(planobj){
if(iscolliding(this.x,this.y,this.width,this.height,planobj.x,planobj.y,planobj.width,planobj.height))
return true;
else
return false;
}
//爆炸动画类和属性
var Bomb=function(image,x,y){
this.image=image;
this.x=x;
this.y=y;
this.width=image.width/6;
this.height=image.height;
this.frm=0;
this.dis=0;
};
Bomb.prototype.draw2=function(ctx){
ctx.save();
ctx.translate(this.x,this.y);
if(this.frm>=6) return ;
ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);
ctx.restore();
this.dis++;
if(this.dis>=10){
this.dis=0;
this.frm++;
}
};
var plan1,plan2,plan3,plan4,caughtplan=null;
var isClick=false;
var mouseX,mouseY,preX,preY;
var plans=[];
var bullets=[];
var bombs=[];
var score=0;
var overflag=false;
var myplane;
//导入外部材料图
var image=new Image();
var image2=new Image();
var image3=new Image();
var image4=new Image();
var image5=new Image();
var bakground=new Image();
bakground.src='map_0.png';
image.src='plan.png';
image.οnlοad=function(){
}
image2.src='bomb.png';
image2.οnlοad=function(){
}
image3.src='enemy.png';
image3.οnlοad=function(){
myplane=new Plan(image,300*Math.random(),400,6);
plan_interval=setInterval(function(){
plans.push(new Plan(image,300*Math.random(),20*Math.random(),2));
},3000);//3秒产生一架敌机
setInterval(function(){
context.clearRect(0,0,320,480);
context.drawImage(bakground,0,0);
//画己方飞机
if(!overflag)
myplane.draw2(context);
//画敌机
for(var i=plans.length-1;i>=0;i--){
if (plans[i].Y()>400){
plans.splice(i,1);//删除敌机
}
else{
plans[i].draw(context);
}
}
//画子弹
for (var i=bullets.length-1;i>=0;i--){
if (bullets[i].Y()<100){
bullets.splice(i,1);//删除子弹
}
else{
bullets[i].draw(context);
}
}
//检测玩家是否撞到敌机
for (vari=plans.length-1;i>=0;i--){
e1=plans[i];
if(e1!=null && myplane!=null && myplane.hitTestObject(e1)){
clearInterval(plan_interval);
plans.splice(i,1);//删除敌机
bombs.push(new Bomb(image2,myplane.x,myplane.y));
message_txt.innerHTML='敌机碰到玩家自己飞机,游戏结束';
overflag=true;
}
}
//判断子弹击中没有
for(var j=bullets.length-1;j>=0;j--){
var b1=bullets[j];
for(var i=plans.length-1;i>=0;i--){
e1=plans[i];
if (e1!=null && b1!=null && b1.hitTestObject(e1)){
plans.splice(i,1);
bullets.splice(i,1);
bombs.push(new Bomb(image2,b1.x,b1.y-36));
message_txt.innerHTML='敌机被击中,加20分';
score+=20;
score_txt.innerHTML='分数:'+score+'分';
}
}
}
//画爆炸
for (var i=bombs.length-1;i>=0;i--){
if (bombs[i].frm>=6){
bombs.splice(i,1);
}
else{
bombs[i].draw2(context);
}
}
},1000/60);
};
image4.src='bullet.png';
image4.οnlοad=function(){
};
//飞机移动控制
function onKeydown(e){
if(e.keyCode==32){
bullets.push(new Bullet(image4,myplane.x,myplane.y-36));
}else if(e.keyCode==37){
myplane.move(-10,0);
}else if(e.keyCode==39){
myplane.move(10,0);
}else if(e.keyCode==38){
myplane.move(0,-10);
}else if(e.keyCode==40){
myplane.move(0,10);
}
}
雷电html代码,基于HTML5的游戏制作(雷电飞机设计游戏)相关推荐
- html制作打飞机的游戏,JavaScript 小型打飞机游戏实现原理说明
玩法说明:上下左右控制移动,空格发弹. 每打中一个敌机就加100分,每提升5000分,玩家的飞机的一次发弹数就加一,最多四,被敌机撞到或者让敌机飞到底部就算输.... 演示代码:http://demo ...
- java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
- 基于html5的在线教育,基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现 发布时间:2019-11-18所属分类:科技论文浏览:1次 摘 要: 摘 要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...
- html5管理开题报告,基于HTML5的响应式网站的设计与实现(论文)开题报告
[9] Brad Dayley,jQuery与JavaScript入门经典 [M].北京:人民邮电出版社,2014. [10] 王映龙,刘春阳,熊曾刚,Java EE实用教程 [M].北京:清华大学出 ...
- html5设计博客论文,基于HTML5的综合类博客设计与实现-计算机本科毕业论文
基于HTML5的综合类博客设计与实现-计算机本科毕业论文 (35页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.9 积分 HUNAN JtfSlVE ...
- html制作婚礼策划机构首页,基于HTML5的婚礼策划项目的软件设计.doc
PAGE 56 基于HTML5婚礼策划项目的软件设计 摘 要 婚礼策划项目 1.网站有以下导航,网站首页,定制案例,婚礼视频,最新活动,服务报价,策划团队,关于我们,联系我们 2.实现婚礼业务图文信息 ...
- 用HTML5制作买火车票的页面,基于HTML5手机预订火车票系统的设计与实现_问答库...
在信息化时代高速发展的今天,手机普及.应用.延伸的发展是飞速的,为旅客提供火车票预订服务将是移动互联网发展的重要竞争点.使用手机预订火车票能够大幅度的缩短旅客购票的时间,还能减缓铁路的压力.因而,针对 ...
- 基于p2p点播html5源码,毕业论文-基于HTML5的P2P流媒体传输系统的设计与实现.docx...
PAGE 单位代码 学号 分类号 毕业设计(论文) 基于HTML5的P2P流媒体传输技术的 设计与实现 院(系)名称 专业名称 计算机科学与技术 学生姓名 指导教师 2014年6月 北京航空航天大学毕 ...
- Unity游戏制作:2D弹球游戏 Pong(附完整项目)
介绍 这里,又来做弹球游戏了--(^_^) 之前自学了一段时间的 unity,还是先做一款 2D 的小游戏吧,运行效果如下: 目录 下载 项目制作过程 一.拼界面 二.主程序Game.cs 1)显示初 ...
最新文章
- additive tree
- python写前端代码_哪种ide能同时写java和前端代码?
- error C3859: 超过了PCH的虚拟内存范围;请使用“-Zm33”或更大的命令行选项重新编译
- 在mysql-workbench中运行function
- 使用 Blazor 开发内部后台(二):了解 Blazor 组件
- 非华为电脑配对华为手机(RMB+5899¥)
- python整数类型与数学-Python类型和运算--数字
- Struts框架面试题
- Windows无法连接到打印机、打印机连接出现0X00000bcb错误应该如何解决?这应该是是最全面的解决方法啦~~
- 苹果手机投影到墙上_针对商业用户倾情打造,明基E582智能无线投影仪体验
- 软件工程专业要考c语言吗,【干货】软件工程专业课到底考什么?
- 如何去掉PDF右下角的全能扫描王水印
- [ROS]一些传感器数据读取融合问题的思考
- windows10配置WSL(Ubuntu)环境
- 华硕天选3 和 rog 魔霸新锐 2022选哪个好
- 处理器后面的字母含义_和机农一起探寻辅音字母f的含义
- 零基础如何学习自动化测试
- 第十八次CCF计算机软件能力认证
- 10 条关于 2018 年软件开发的预测,不仅仅是区块链……
- 计算机管理员没设密码忘了怎么办,没有电脑路由器密码忘记了怎么办?