js实例--飞机大战
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>飞机大战</title>
<style>
#did{
width:500px;height:500px;
background:url("./images/bg2.png") no-repeat 0px -1036px;
position:relative;overflow:hidden;}
#gid{position:absolute;top:350px;left:100px;}
#p0,#p1,#p2,#p3,#p4,#e1,#e2,#e3,#boom{position:absolute;}
</style>
</head>
<body>
<h2>JavaScript实例:飞机大战</h2>
<div id="did">
<img id="p0" src="./images/eshot.png" style="display:none;"/>
<img id="p1" src="./images/eshot.png" style="display:none;"/>
<img id="p2" src="./images/eshot.png" style="display:none;"/>
<img id="p3" src="./images/eshot.png" style="display:none;"/>
<img id="p4" src="./images/eshot.png" style="display:none;"/> <img id="e1" src="./images/e1.png" style="display:none;"/>
<img id="e2" src="./images/e2.png" style="display:none;"/>
<img id="e3" src="./images/e3.png" style="display:none;"/> <img id="boom" src="./images/boom.gif" style="display:none;"/> <img id="gid" src="./images/me.png"/>
</div>
<script type="text/javascript">
var btop=-1036;
var m=0,b=0;
var did = document.getElementById("did");
var gid = document.getElementById("gid");
var boom = document.getElementById("boom");
window.document.onkeydown = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//alert(event.keyCode);
//根据键盘值执行对应操作
switch(event.keyCode){
case 37: //左方向键
gid.style.left = Math.max(0,gid.offsetLeft-5)+"px";
break;
case 38: //上方向键
gid.style.top = Math.max(0,gid.offsetTop-5)+"px";
break;
case 39: //右方向键
gid.style.left = Math.min(450,gid.offsetLeft+5)+"px";
break;
case 40: //下方向键
gid.style.top = Math.min(440,gid.offsetTop+5)+"px";
break;
case 32: //空格键
shoot(gid.offsetLeft+51,gid.offsetTop); //发射炮弹
break;
}
} //发射炮弹方法
function shoot(x,y){
//遍历所有炮弹
for(var i=0;i<5;i++){
var p = document.getElementById("p"+i);
//判断炮弹是否可用
if(p.style.display=="none"){
p.style.top = y+"px";
p.style.left = x+"px";
p.style.display = "block";
return;
}
}
} //碰撞检测函数
function doCheckP(p,e){
//获取检测坐标
var x1 = e.offsetLeft+3;
var x2 = e.offsetLeft+93;
var y1 = e.offsetTop+35;
var y2 = e.offsetTop+59;
var x = p.offsetLeft+1;
var y = p.offsetTop;
//判断是否有像素重叠
if(x>x1 && x<x2 && y>y1 && y<y2){
return true;
}
return false;
} //游戏主线程
function running(){
//负责移动可见炮弹
for(var i=0;i<5;i++){
var p = document.getElementById("p"+i);
//判断炮弹是否可用
if(p.style.display=="block"){
p.style.top = p.offsetTop-5+"px";
//回收出了屏幕的炮弹
if(p.offsetTop<-10){
p.style.display = "none";
} //碰撞检测
//遍历所有敌机
for(var j=1;j<=3;j++){
var e = document.getElementById("e"+j);
//判断是否可见
if(e.style.display=="block"){
if(doCheckP(p,e)){ //设置爆炸位置
boom.style.top = p.offsetTop-170+"px";
boom.style.left = p.offsetLeft-200+"px";
boom.style.display ="block";
b=0; //隐藏敌机和炮弹
p.style.display = "none";
e.style.display = "none";
}
}
}
}
} //随机设置出现敌机
var n = Math.ceil(Math.random()*10000)%20;
if(n==5){
for(var i=1;i<=3;i++){
var e = document.getElementById("e"+i);
//判断而是否可用
if(e.style.display=="none"){
e.style.display="block";
e.style.top=-85+"px";
e.style.left=Math.ceil(Math.random()*10000)%400+"px";
break;
}
}
} //负责移动可见飞机
for(var i=1;i<=3;i++){
var e = document.getElementById("e"+i);
//判断而是否可用
if(e.style.display=="block"){
e.style.top = e.offsetTop+4+"px";
//判断是否出界
if(e.offsetTop>500){
e.style.display = "none";
}
}
} //控制爆炸时间
if(b>=0){
b++;
}
if(b>10){
boom.style.display ="none";
b=-1;
} //负责无缝滚动背景图片
m+=2;
did.style.backgroundPosition="0px "+(btop+m)+"px";
if(m>768){
m=0;
} setTimeout("running()",33);
} running();
</script>
</body>
</html>
js实例--飞机大战的更多相关文章
- JS 实现飞机大战
这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识.可以将代码直接引入到HTML中就可以看到效果 //编写背景对象 function Background(width,hei ...
- js 飞机大战
完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...
- 微信小游戏 demo 飞机大战 代码分析 （三）(spirit.js, animation.js)
微信小游戏 demo 飞机大战 代码分析(三)(spirit.js, animation.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码 ...
- JS+html实现简单的飞机大战
摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）
接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（上）
最近接触过几个版本的cocos2dx,决定每个大变动的版本都尝试一下.本实例模仿微信5.0版本中的飞机大战游戏,如图: 一.工具 1.素材:飞机大战的素材(图片.声音等)来自于网络 2.引擎:coco ...
- 微信小游戏 demo 飞机大战 代码分析（四）(enemy.js， bullet.js, index.js)
微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...
- 微信小游戏 demo 飞机大战 代码分析 （二）(databus.js)
微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
- 微信小游戏 demo 飞机大战 代码分析 （一）(game.js, main.js)
微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
随机推荐
- Android InputStream接收 字符串乱码 问题
各个国家和地区所制定的不同 ANSI 编码标准中,都只规定了各自语言所需的“字符”.比如:汉字标准(GB2312)中没有规定韩国语字符怎样存储.这些 ANSI 编码标准所规定的内容包含两层含义:1. ...
- Bitmap转换成BitmapImage
public BitmapImage BitmapToBitmapImage(System.Drawing.Bitmap bitmap) { MemoryStream ms = new MemoryS ...
- 【Beta】Scrum09
Info 考试周,暂停工作 时间:2016.12.26 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.31 21:30 Task Rep ...
- 论php数组合并
注:尽量不要在循环中操作数据库. 1.两个一维数组合并成一个一维数组 $a = array('morning','afternoon','night'); $b = array('breakfast' ...
- HTML之CSS学习
学前预备 <!DOCTYPE html> <html> <head> <title>标题</title> <meta charset= ...
- java 学习框架
例如 Jsp.Velocity.Tiles.iText 和 POI.Spring MVC框架并不知道使用的视图,所以不会强迫您只使用 JSP 技术.
- svn提交时提示 Aborting commit: remains in conflict 解决办法
出现在rename一个目录时,再提交时一直报错 Aborting commit: remains in conflict 使用右键菜单 svn - resolve 即可解决.用cleanup之类的都没 ...
- sql 注入问题
1. 关于使用intval强制转换成数字的问题.数字大于2147483647会出现溢出出现负数.使用个方法来替代这个吧$n="\n";$a=2147483648.05555;ech ...
- 在 .NET 中开发基于 Chrome 内核的浏览器－创建一个简单浏览器
首先在 http://www.cftea.com/tools/downloads/Cef.zip 下载文件包. 一.将文件解压拖入到 Visual Studio 对应的 WinForm 项目中. 二. ...
- 影响postgresql性能的几个重要参数
转载 一篇蛮老的文章了,但是还是很有用,可参考修补. PG的配置文件是数据库目录下的postgresql.conf文件,8.0以后的版本可支持K,M,G这样的参数,只要修改相应参数后重新启动PG服务就 ...