首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript原生编写《飞机大战坦克》游戏完整实例

Posted in Javascript onJanuary 04, 2017

先来看看开始的界面图

JavaScript原生编写《飞机大战坦克》游戏完整实例

实现思路：

      1.打开页面，背景开始走动；

      2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；

      3.当敌人碰到子弹，敌人消失；

      4.当敌人和飞机相遇，飞机死亡，结束游戏；

html页面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>飞机大战</title>
 <link rel="stylesheet" type="text/css" href="飞机大战.css">
</head>
<body>
 <div id="mainScreen">
<!-- 背景图片 -->
 <div id="bgImg1" class="bg"></div>
 <div id="bgImg2" class="bg"></div>
<!-- 飞机 -->
 <div id="airplane"></div>
<!-- 开始按钮 -->
 <div id="startMenu">
  <a href="#" id="start">Start</a>
 </div>
<!-- 重新开始按钮 -->
 <div id="restartMenu">
  <a href="#" id="restart">Game Over!<br/>重新开始</a>
 </div>
<!-- 敌人 -->
 <div class="enemy"></div>
 <div class="enemy"></div>
 <div class="enemy"></div>
 <div class="enemy"></div>
 <div class="enemy"></div>
<!-- 子弹 -->
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 <div class="bullet"></div>
 </div>

 <script type="text/javascript" src="sunckBase.js"></script>
 <script type="text/javascript" src="飞机大战.js"></script>
</body>
</html>

css样式

*{
 margin: 0;
 padding: 0;
 font-family: "微软雅黑";
}
#mainScreen{
 width: 512px;
 height: 768px;
 margin:0 auto;
 position: relative;
 overflow: hidden;
}
.bg{
 width: 512px;
 height:768px;
 position: absolute;
 background: url(bg.jpg);
}
#bgImg2{
 top:-768px;
}

#airplane{
 width: 109px;
 height: 82px;
 position: absolute;
 background: url(hero.png);
 left: 215px;
 top: 668px;
}

.enemy{
 position: absolute;
 width: 30px;
 height: 30px;
 left: -100px;
 top: 0px;

 background: url(enemy.png);
 background-size: 30px 30px;
}

.bullet{
 position: absolute;
 width: 5px;
 height: 10px;
 left: -100px;
 top: -100px;
 background: url(bullet.png);
 background-size: 5px 10px;
}
#startMenu, #restartMenu{
 position: absolute; 
 width: 512px; 
 text-align: center; 
 left: 0; 
 top: 300px;
}
#start, #restart{
 line-height:50px; 
 font-size:30px; 
 font-weight:bold; 
 color:#F00; 
 display:block; 
 text-decoration:none;
}
#restartMenu{
 display: none;
}

进入页面时，背景开始动

//给背景设置定时器，让背景不停的动，形成动感
var bgTimer = setInterval(bgRun, 10);
function bgRun() {
 jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
 jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
 if (jsBg1.offsetTop >= 768) {
 jsBg1.style.top = "-768px";
 } else {
 if (jsBg2.offsetTop >= 768) {
  jsBg2.style.top = "-768px";
 }
 }
}

点击开始，进入游戏

JavaScript原生编写《飞机大战坦克》游戏完整实例
游戏中

注：其实子弹和敌人的标签没有几个，但是我们使用定时器，开始之前，现将表现都放在屏幕外，进入游戏需要时候再改变标签定位，将其放入到页面中。

var jsStartBox=document.getElementById("startMenu")
jsStart.onclick = function startGame(){
 jsStartBox.style.display="none";
 var baseX = 0;
 var baseY = 0;
 var moveX = 0;
 var moveY = 0;
 jsAirplane.onmousedown = function(e) {
 var evt = e || window.event;
 baseX = evt.pageX;
 baseY = evt.pageY;
 jsDivBox.onmousemove = function(v) {
  var vt = v || window.event;
  moveX = vt.pageX - baseX;
  baseX = vt.pageX;
  moveY = vt.pageY - baseY;
  baseY = vt.pageY;
  jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px";
  jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px";
 };
 };
 jsAirplane.onmouseup = function() {
 mainScreen.onmousemove = null;
 }
 //找到可用的子弹
 var findBulletTimer = setInterval(findBullet, 300);
 function findBullet() {
 for (var i = 0; i < jsBullets.length; i++) {
  if (jsBullets[i]["isShow"] == false) {
  jsBullets[i]["isShow"] = true;
  //将子弹移动到飞机头
  jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px";
  jsBullets[i].style.top = jsAirplane.offsetTop + "px";
  break;
  }
 }
 }
 // //让子弹飞
 var bulletFlyTimer = setInterval(bulletFlay, 100);
 function bulletFlay() {
 for (var j = 0; j < jsBullets.length; j++) {
  if (jsBullets[j]["isShow"] == true) {
  if (jsBullets[j].offsetTop > -20) {
   jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px";
  } else {
   jsBullets[j].style.left = "-100px";
   jsBullets[j].style.top = "-100px";
   jsBullets[j]["isShow"] = false;
  }
  }
 }
 }



 //找到可用敌人
 var findEnemyTimer = setInterval(findEnemy, 500);
 function findEnemy(){
 //找到一个没有在屏幕中的敌人
 for (var i = 0; i < jsEnemys.length; i++) {
  if (jsEnemys[i]["isShow"] == false) {
  //标记敌人已经使用
  jsEnemys[i]["isShow"] = true;
  //将敌人移动到屏幕
  var left = randomNum(0, 482);
  jsEnemys[i].style.left = left + "px";
  jsEnemys[i].style.top = 0 + "px";
  break;
  }
 }
 }
 // //让敌人下落
 var enemyLandTimer = setInterval(enemyLand, 100);
 function enemyLand() {
 for (var j = 0; j < jsEnemys.length; j++) {
  if (jsEnemys[j]["isShow"] == true) {
  var a = randomNum(4, 20);
  if (jsEnemys[j].offsetTop <= 768) {
   jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px";
  } else {
   jsEnemys[j].style.left = "-100px";
   jsEnemys[j].style.top = "0px";
   jsEnemys[j]["isShow"] = false;
  }
  }
 }
 } 
}

打中怪物

用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失

var perishEnemyTimer = setInterval(perishEnemy, 50);
function perishEnemy() {
 for (var i = 0; i < jsBullets.length; i++) {
 if (jsBullets[i]["isShow"] == true) {
  for (var j = 0; j < jsEnemys.length; j++) {
  if (jsEnemys[j]["isShow"] == true) {
   var ret = pzjcFunc(jsBullets[i], jsEnemys[j]);
   if (ret) {
   jsBullets[i].style.left = "-100px";
   jsBullets[i].style.top = "-100px";
   jsBullets[i]["isShow"] = false;

   jsEnemys[j].style.left = "-100px";
   jsEnemys[j].style.top = "-100px";
   jsEnemys[j]["isShow"] = false;
   }
  }
  }
 }
 }
}

死亡检测

JavaScript原生编写《飞机大战坦克》游戏完整实例
游戏结束

用页面上存在每一个敌人和飞机的定位进行检测，如果两者相遇，那么结束游戏。

注：检测时考虑取反，坦克在飞机上面，在飞机下面，在飞机左边，在飞机右边是没有碰到的时候，那么我们取反就是说明两者已经相遇了。

//死亡检测
var dieTimer = setInterval(die, 50);
var jsStop = document.getElementById("restartMenu")
function die() {
 for (var i = 0; i < jsEnemys.length; i++) {
 if (jsEnemys[i]["isShow"] == true) {
  var isDie = pzjcFunc(jsAirplane, jsEnemys[i]);
  if (isDie) {
  jsStop.style.display="block";
  jsAirplane.onmouseup = function() {
   mainScreen.onmousemove = null;
  }
  }
 }
 }
}

上述两步中用到的检测两者是否碰撞的函数

//死亡检测的函数
function pzjcFunc(obj1, obj2){
 var obj1Left = obj1.offsetLeft;
 var obj1Width = obj1Left + obj1.offsetWidth;
 var obj1Top = obj1.offsetTop;
 var obj1Height = obj1Top + obj1.offsetHeight;

 var obj2Left = obj2.offsetLeft;
 var obj2Width = obj2Left + obj2.offsetWidth;
 var obj2Top = obj2.offsetTop;
 var obj2Height = obj2Top + obj2.offsetHeight;

 if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
 return true;
 } 
 return false;
}

点击重新开始之后刷新页面

var jsRestart=document.getElementById("restart");
jsRestart.onclick=function(){
 jsStop.style.display="none";
 window.location.reload();//刷新页面
}

好的，现在我们的游戏就可以玩了，这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如，页面之外的空间的运用；比如，检测碰撞。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Javascript能带来一定的帮助，如果有疑问大家可以留言交流。

JavaScript原生编写《飞机大战坦克》游戏完整实例

- Author -

范小饭_

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
javascript 快速排序函数代码
May 30 Javascript
ExtJS自定义主题（theme）样式详解
Nov 18 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
js操作两个json数组合并、去重，以及删除某一项元素
Sep 22 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
jQuery实现联动下拉列表查询框
Jan 04 #Javascript
JavaScript中String对象的方法介绍
Jan 04 #Javascript
js select下拉联动 更具级联性!
Apr 17 #Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 #Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 #Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 #Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 #Javascript
单向链表(1) TypeScript(2) 区块链(2) Date(1) 模拟登录(1) 扫雷(1) 双向链表(6) text-shadow(1) Scheduled(1) NumPy(2)
You might like
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
XENON基于JSON变种
2010/07/27 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
xmlplus组件设计系列之列表（4）
2017/04/26 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python3 求约数的实例
2019/12/05 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
LN-CC英国：伦敦时尚生活的缩影
2019/09/01 全球购物
美国波西米亚风格精品店：South Moon Under
2019/10/26 全球购物
学生宿舍管理制度
2014/01/30 职场文书
人事文员岗位职责
2014/02/16 职场文书
组织鉴定材料
2014/06/02 职场文书
党的群众路线教育实践活动对照检查材料（教师）
2014/09/24 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
党员年度个人总结
2015/02/14 职场文书
会议主持词开场白
2015/05/28 职场文书
《比的意义》教学反思
2016/02/18 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
Go语言基础知识点介绍
2021/07/04 Golang