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源码——Activity进程内启动
进程内启动Activity MainActivity组件向ActivityManagerService发送一个启动SubActivityInProcess组件的进程间通信请求: ActivityMan ...
- Chrome 开发工具之Timeline
之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...
- Django基础，Day2 - 编写urls,views,models
编写views views:作为MVC中的C,接收用户的输入,调用数据库Model层和业务逻辑Model层,处理后将处理结果渲染到V层中去. polls/views.py: from django.h ...
- Java集合之HashMap
1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现(Hashtable跟HashMap很像,唯一的区别是Hashtalbe中的方法是线程安全的,也就是同步的).此实现提供所 ...
- Node.js API 初解读（一）
Node.JS API 初解读 Version: NodeJs v6.2.0 一. Assert 1.简介 Assert模块主要用于断言.如果表达式不符合预期,就抛出一个错误. 该模块用于编写程序的单 ...
- CDDA 源码解析
一.编译1:从 https://github.com/CleverRaven/Cataclysm-DDA 下载源码2:下载IDE CodeBlocks,http://pan.baidu.com/s/1 ...
- 【WP8.1】类似“IT之家” 自定义消息 的实现
曾经在WP7.WP8下的消息 使用的都是Coding4Fun.Phone.Toolkit里面的ToastPrompt类来实现的. 现在我们来自己做个类似IT之家的这种效果:从右边弹出,经过几秒后会自动 ...
- 为什么Java不适合游戏开发
Strawberry Cow Bear: why java sucks for game developmenthttp://strawberrycowbear.blogspot.jp/2011/02 ...
- ASP.NET中Ajax的用法
在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...
- c# socket 编程
转 http://www.cnblogs.com/cailangwei/archive/2011/11/21/2258191.html 基于Socket服务器端实现本例主要是建立多客户端与服务器之 ...