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. ...
随机推荐
- label中设置某些指定的字体的属性设置（Color，Size,FontColor）
不知道大家有没有遇到要设置某些字体的颜色和大小等属性的设置,下面就让我们一起走进字体的变形王国吧!!! 1.在storyboard中拖一个控件label,拖线设置属性为: @property (wea ...
- PHP异步调用多线程
$data["name"] = 'godlike';$data["age"] = 18; $post = http_build_query($data);$le ...
- 【转】TensorFlow练习20: 使用深度学习破解字符验证码
验证码是根据随机字符生成一幅图片,然后在图片中加入干扰象素,用户必须手动填入,防止有人利用机器人自动批量注册.灌水.发垃圾广告等等 . 验证码的作用是验证用户是真人还是机器人:设计理念是对人友好,对机 ...
- Spring MVC学习笔记——返回JSON对象
1.想要GET请求返回JSON对象,首先需要导入jackson-all-1.9.4.jar包 2.在控制器中添加不同的show()方法 //show()方法返回JSON对象 @RequestMappi ...
- Java学习笔记之方法重载
被重载的方法必须具有不同的参数列表.不能基于不同修饰符或返回值类型来重载方法. package welcome; public class TestMethodOverloading { public ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- diff生成补丁与patch打补丁
1.使用diff生成补丁: diff是Linux下的文件比较命令,参数这里就不说了,直接man一下就行了,不仅可以比较文件,也可以比较两个目录,并且可以将不同之处生成补丁文件,其实就是一种打补丁的命令 ...
- Tomcat 利用server.xml进行其他盘符的其他项目映射的部署以及JSP引用其他盘符的图片（虚拟目录及虚拟路径）
Tomcat 利用server.xml进行项目映射的部署 2013-07-17 15:14 12843人阅读 评论(4) 收藏 举报 分类: web 开发(5) 版权声明:本文为博主原创文章,欢迎 ...
- iOS 动态化
来自bang's blog http://blog.cnbang.net/tech/3286/ 问题 在开发模式上,web 的方式是比较先进的,有各种优点,包括跨平台/UI开发效率高,最重要的是可以时 ...
- GCD总结
//用block只有两种:同步执行/异步执行(参数1:队列;参数二:任务) dispatch_async(dispatch_get_global_queue(0, 0),^{ });//异步在新的线程 ...