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

站长资源 2024/11/24 佚名

2 0 1

先来看看开始的界面图

实现思路：

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="/UploadFiles/2021-04-02/sunckBase.js">

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";
 }
 }
}


点击开始，进入游戏


游戏中


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


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;
   }
  }
  }
 }
 }
}


死亡检测


游戏结束


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


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


//死亡检测
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能带来一定的帮助，如果有疑问大家可以留言交流。

js飞机大战,js如何做飞机大战思路,js简单实现飞机大战

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

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

jQuery和CSS仿京东仿淘宝列表导航菜单

jQuery实现联动下拉列表查询框

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接