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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
js生成随机数方法和实例
Jan 17 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 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
You might like
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python中的面向对象编程详解(下)
2015/04/13 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
如何清空python的变量
2020/07/05 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
关于青春的演讲稿800字
2014/08/22 职场文书
学校端午节活动方案
2014/08/23 职场文书
毕业横幅标语
2014/10/08 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
教师节联欢会主持词
2015/07/04 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书