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. ...
随机推荐
- nodejs异步处理
采用Async.Q.Promise等第三方库处理异步回调 Async 安装 npm install async --save-dev
- python的错误和异常
python错误和异常 错误 错误分为语法错误和逻辑错误 语法错误 >>> if File "<stdin>", line 1 if ^ Syntax ...
- CSS的常见属性
1. css是cascading style sheet 层叠式样式表的简写."层叠式"的意思,我们将慢慢的去理解. 1 <style type ...
- cygwin 安装完后不能进入think问题，网上99%都是错误的
正确的做法是首次进入的时候,显示的是哪个用户名就修改哪个用户名 比如我的电脑是 默认显示的是think 那么就去修改think 为 root 并把unused 后的2个数字改成0 然后在home下新建 ...
- 使用Python解析JSON数据
使用Python解析百度API返回的JSON格式的数据 # coding:utf-8 # !/usr/bin/env python import matplotlib.pyplot as plt fr ...
- nginx之location匹配优先级和安全问题
最近一直在做location的配置,遇到优先级别问题(如有配置不当,会存在安全隐患),以下是个人的一些学习体会 一.location 匹配符 1.等于匹配符: ##"=" ...
- 堆排序分析及php实现
堆排序:是一种特殊形式的选择排序,他是简单选择排序的一种改进. 什么是堆? 具有n个元素的序列:{k1,k2,ki,…,kn} (ki <= k2i,ki <= k2i+1) 或者 (ki ...
- javascript 日期操作
1.获取指定年月有多少周 /** * 获得一个月的周数 * @param {} y {xxxx}4位数 * @param {} m {0-11} * @return {} */ function ge ...
- 第一章 Part 2/2 Git 一览
被跟踪文件(Tracked files) 被跟踪文件是 Git 管理的工作目录 (存储库) 中的文件.当你添加新文件或使更新现有文件时,Git都会跟踪这些文件变化.在某个时间点,你将通过命令将这些文件 ...
- 3MyBatis配置--深入浅出MyBatis技术原理与实践(笔记)
XML 映射配置文件 configuration 配置 properties 属性 settings 设置 typeAliases 类型命名 typeHandlers 类型处理器 objectFact ...