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. ...
随机推荐
- MySQL隐式转化整理
MySQL隐式转化整理 前几天在微博上看到一篇文章:价值百万的 MySQL 的隐式类型转换感觉写的很不错,再加上自己之前也对MySQL的隐式转化这边并不是很清楚,所以就顺势整理了一下.希望对大家有所帮 ...
- 不要遍历dom
function selectProvince() { $.ajax( { type: "post", url: "/province/getStrType", ...
- 传统瀑布式&敏捷开发
---传统瀑布式 瀑布模型式是最典型的预见性的方法,严格遵循预先计划的需求.分析.设计.编码.测试的步骤顺序进行. 步骤成果作为衡量进度的方法,例如需求规格,设计文档,测试计划和代码审阅等等. 瀑布式 ...
- php获得远程信息到本地使用的3个函数:file_get_contents和curl函数和stream_get_contents
1:file_get_contents echo file_get_contents("http://www.php.com/index.php"); 2:curl funct ...
- [Android]快捷键
小技巧,快捷键 快捷键创建资源: Windows下是 alt+enter; Mac下是Option+enter 创建构造函数,Get/Set:Command+N,Windows环境中Alt + Ins ...
- php登录主机机制
注册机制 //用户名需过滤的字符的正则 $stripChar = '?<*.>\'"'; ){ $this->error('用户名中包含'.$stripChar.'等非法字 ...
- bootstrap1
让bootstarp3 支持ie的兼容模式: 支持浏览器的响应式布局: 是指网页既可以用在pc上,也可以用在手机上, 而且不需要修改源文件. bootstrap包括: css文件, 只需要加载: cs ...
- jQuery学习过程问题笔记
1. jQuery中,$('selector').click(function(){})和用bind绑定:$('selector').bind('click',function(){})有什么区别? ...
- Block formatting context(块级格式化上下文)
今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只 ...
- jvm--1.class文件结构
1.字节码(1)bytecode是构成平台无关性的基石 (2)当jvm发展到1.7-1.8的时候,jvm设计者通过,JSR-292,基本可以让其他语言运行在jvm上面. 如,Clojure , Gro ...