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 相关文章推荐
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
React组件的三种写法总结
Jan 12 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
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多图上传小程序代码
2011/07/17 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Javascript操作cookie的函数代码
2012/10/03 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
Python操作MySQL简单实现方法
2015/01/26 Python
利用python实现数据分析
2017/01/11 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python监控进程脚本
2018/04/12 Python
基于python的Paxos算法实现
2019/07/03 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
好好学习保证书
2015/02/26 职场文书
2015年助残日活动总结
2015/03/27 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
幼儿园见习总结
2015/06/23 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android