首页
所有分类
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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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) JDBC(3) pdf(1) 变量提升(1) Eclipse(1) 弹窗(1) cypress(1) openGauss(1) ant design(2) form表单(1)
You might like
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP 微信支付类 demo
2015/11/30 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
详解nodejs 文本操作模块-fs模块（五）
2016/12/23 NodeJs
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
layui table 参数设置方法
2018/08/14 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
用python读写excel的方法
2014/11/18 Python
Python求解平方根的方法
2015/03/11 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
django正续或者倒序查库实例
2020/05/19 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
实习生体会的自我评价范文
2013/11/28 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
大学生求职计划书
2014/04/30 职场文书
广告学专业求职信
2014/06/19 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
学生自我评语
2015/01/04 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript