请选择 进入手机版 | 继续访问电脑版

影子论坛

搜索
查看: 3065|回复: 0

[JavaScript] 分享一个飞机大战坦克的源码

[复制链接]

4

主题

5

帖子

120

积分

倔强青铜Ⅱ

积分
120
发表于 2019-11-30 11:21:14 | 显示全部楼层 |阅读模式
作为所有学习编程的同学来说,飞机大战坦克基本是每个同学都会编写的,这儿分享一个我自己做的飞机大战坦克的程序,还有几个功能没有实现(设置难度,div裁边)不过现在基本能完了,重点是可以写出来直接放在云服务器上,在线可以玩,需要体验的可以访问www.stolenzc.com/game1访问玩耍。
以下源代码:
html:
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.                 <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.                 <title>飞机大战坦克</title>
  8.                 <link rel="stylesheet" type="text/css" href="css/style.css"/>
  9.         </head>
  10.         <body>
  11.                 <div id="mainScreen">
  12.                         <div id="bg1" class="bg"></div>
  13.                         <div id="bg2" class='bg'></div>
  14.                        
  15.                         <div id="airplane"></div>
  16.                 </div>
  17.                 <div id="gameoverdiv" >
  18.                         <h2 class="gameoverh2">游戏结束</h2>
  19.                         <h2 class="gameoverh2">分数:<span id="scorll"></span></h2>
  20.                         <button id="gameoverbutton" type="button">点击重试</button>
  21.                 </div>
  22.         </body>
  23.         <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
  24. </html>
复制代码
js:
  1. var scorll = 0

  2. var mainScreen = document.getElementById("mainScreen")
  3. // 让背景图片动起来
  4. var jsBg1 = document.getElementById('bg1')
  5. var jsBg2 = document.getElementById('bg2')
  6. var timerBg = setInterval(function(){
  7.         jsBg1.style.top = jsBg1.offsetTop + 1 +'px'
  8.         jsBg2.style.top = jsBg2.offsetTop + 1 +'px'
  9.        
  10.         if(jsBg1.offsetTop >= 800){
  11.                 jsBg1.style.top = '-800px'
  12.         }
  13.         if(jsBg2.offsetTop >= 800){
  14.                 jsBg2.style.top = '-800px'
  15.         }
  16.         // 如果图片小于屏幕框,在css中设置overflow: hidden即可解决
  17. }, 10)

  18. // 让飞机动起来
  19. // 拖拽效果

  20. var airplane = document.getElementById("airplane")

  21. // 给飞机添加鼠标按下事件
  22. airplane.addEventListener("mousedown", clickairplane, false)
  23. function clickairplane(e){
  24.         var ev = e || window.event
  25.         var basex = ev.pageX
  26.         var basey = ev.pageY
  27.        
  28.         movex = 0
  29.         movey = 0
  30.         // 给主屏幕添加鼠标移动事件
  31.         mainScreen.onmousemove = function(e2){
  32.                 var en = e2 || window.event
  33.                 movex = en.pageX - basex
  34.                 basex = en.pageX
  35.                 movey = en.pageY - basey
  36.                 basey = en.pageY
  37.                
  38.                 // console.log("movex = %d, offsetLeft = %d",movex, airplane.offsetLeft)
  39.                 // console.log("movey = %d, offsetTop = %d",movey, airplane.offsetTop)
  40.                 airplane.style.left = airplane.offsetLeft + movex + "px"
  41.                 airplane.style.top = airplane.offsetTop + movey + "px"
  42.                
  43.                 // 判断控制飞机不能飞出地图
  44.                 if(airplane.offsetLeft < 0){
  45.                         airplane.style.left = 0 + "px"
  46.                 }
  47.                 if(airplane.offsetLeft > 420){
  48.                         airplane.style.left = 420 + "px"
  49.                 }
  50.                
  51.         }
  52.        
  53. }

  54. airplane.addEventListener("mouseup",function(){
  55.         mainScreen.onmousemove = null
  56. }, false)


  57. // 发射子弹
  58. var timerBullent = setInterval(function(){
  59.         // 创建子弹
  60.         var bullent = document.createElement("div")
  61.         bullent.className = "bullent"
  62.         bullent.style.left = airplane.offsetLeft + 15 + 'px'
  63.         bullent.style.top = airplane.offsetTop - 15 + 'px'
  64.         mainScreen.appendChild(bullent)
  65.        
  66.         // 让子弹飞
  67.         var timerBullertFly = setInterval(function(){
  68.                 bullent.style.top = bullent.offsetTop - 5 + 'px'
  69.                 if(bullent.offsetTop <= -20){
  70.                         clearInterval(timerBullertFly)
  71.                         mainScreen.removeChild(bullent)
  72.                 }
  73.         bullent.timer = timerBullertFly
  74.         },50)
  75. }, 800)

  76. // 敌人下落
  77. var timertank = setInterval(function(){
  78.         // 创建坦克
  79.         var tank = document.createElement("div")
  80.         tank.className = "tank"
  81.         tank.style.left = Math.random() * 434 + 23 + 'px'
  82.         tank.style.top = '0px'
  83.         mainScreen.appendChild(tank)
  84.        
  85.         // 让坦克飞
  86.         var timertankFly = setInterval(function(){
  87.                 tank.style.top = tank.offsetTop + 5 + 'px'
  88.                 if(tank.offsetTop >= 800){
  89.                         clearInterval(timertankFly)
  90.                         mainScreen.removeChild(tank)
  91.                 }
  92.         tank.timer = timertankFly
  93.         },40)
  94. }, 1500)

  95. // 子弹和坦克碰撞
  96. var timerpzjc = setInterval(function(){
  97.         var alltanks = document.getElementsByClassName("tank")
  98.         var allbullents = document.getElementsByClassName("bullent")
  99.         // console.log(alltanks, allbullents)
  100.         for(i=0;i<alltanks.length;i++){
  101.                 for(j=0;j<allbullents.length;j++){
  102.                         // console.log(pzjcfunc(alltanks[i], allbullents[j]))
  103.                         if(pzjcfunc(alltanks[i], allbullents[j])){
  104.                                 // console.log("碰撞了")
  105.                                 clearInterval(alltanks[i].timer)
  106.                                 clearInterval(allbullents[j].timer)
  107.                                 mainScreen.removeChild(alltanks[i])
  108.                                 mainScreen.removeChild(allbullents[j])
  109.                                 scorll++
  110.                                 break
  111.                         }
  112.                 }
  113.         }
  114. },20)

  115. // 死亡检测
  116. var timerpzjc = setInterval(function(){
  117.         var alltanks = document.getElementsByClassName("tank")
  118.         for(i=0;i<alltanks.length;i++){
  119.                 // console.log(pzjcfunc(alltanks[i], airplane))
  120.                 if(pzjcfunc(alltanks[i], airplane)){
  121.                         // console.log("碰撞了")
  122.                         gameoverfunc()
  123.                         // console.log("游戏结束")
  124.                 }
  125.         }
  126. },20)

  127. function gameoverfunc(){
  128.         mainScreen.style.opacity = 0.5
  129.         var gameoverDiv = document.getElementById("gameoverdiv")
  130.         // console.log(gameoverDiv.style.position)
  131.         var gameoverscorll = document.getElementById('scorll')
  132.         gameoverscorll.innerHTML = scorll
  133.         gameoverDiv.style.display = "inline"
  134.         var gameoverbutton = document.getElementById("gameoverbutton")
  135.         gameoverbutton.onclick = restart
  136.        
  137.         airplane.removeEventListener("mousedown", clickairplane, false)
  138.        
  139.         var alltanks = document.getElementsByClassName("tank")
  140.         var allbullents = document.getElementsByClassName("bullent")
  141.         for(i=0;i<alltanks.length;i++){
  142.                 clearInterval(alltanks[i].timer)
  143.         }
  144.         for(j=0;j<allbullents.length;j++){
  145.                 clearInterval(allbullents[j].timer)
  146.         }
  147.         clearInterval(timerBullent)
  148.         clearInterval(timertank)
  149.         clearInterval(timerBg)
  150.        
  151.        
  152. }

  153. function restart(){
  154.         console.log("调用我了")
  155.         window.location.reload(true)
  156. }

  157. // 碰撞检测函数:返回false不碰撞,返回true碰撞
  158. function pzjcfunc(obj1, obj2){
  159.         if(obj1.offsetLeft > obj2.offsetLeft + obj2.offsetWidth){
  160.                 return false
  161.         }else if(obj2.offsetLeft > obj1.offsetLeft + obj1.offsetWidth){
  162.                 return false
  163.         }else if(obj1.offsetTop > obj2.offsetTop + obj2.offsetHeight){
  164.                 return false
  165.         }else if(obj2.offsetTop > obj1.offsetTop +obj1.offsetHeight){
  166.                 return false
  167.         }else{
  168.                 return true
  169.         }
  170. }
复制代码
css:
  1. *{
  2.         margin: 0;
  3.         padding: 0;
  4.        
  5.         /* 移除屏幕外的显示 */
  6.         overflow: hidden;
  7. }

  8. #mainScreen{
  9.         width: 480px;
  10.         height: 800px;
  11.         margin: 0 auto;
  12.         position: relative;
  13.         /*background-color: red;*/
  14. }

  15. .bg{
  16.         width: 480px;
  17.         height: 800px;
  18.         position: absolute;
  19.         background-image: url(../img/background.jpg);
  20. }

  21. #bg2{
  22.         top: -800px;
  23. }

  24. #airplane{
  25.         width: 64px;
  26.         height: 79px;
  27.         background-image: url(../img/myair.png);
  28.         position: absolute;
  29.         /* position: relative; */
  30.         left: 210px;
  31.         top: 500px;
  32.         display: block;
  33. }

  34. .bullent{
  35.         position: absolute;
  36.         width: 29px;
  37.         height: 29px;
  38.         background-image: url(../img/子弹发光图片.png);
  39.         /* background-size: 5px 10px; */
  40. }

  41. .tank{
  42.         position: absolute;
  43.         width: 46px;
  44.         height: 32px;
  45.         background-image: url(../img/otherair.png);
  46.         background-size: 46px 32px;
  47. }
  48.        

  49. #gameoverdiv{
  50.        
  51.         width: 200px;
  52.         height: 150px;
  53.         background-color: #C0C0C0;
  54.         margin: 0 auto;
  55.         position: fixed;
  56.         left: 40%;
  57.         top: 40%;
  58.         border-radius:20px;
  59.         text-align: center;
  60.         display: none;
  61.        
  62. }
  63. .gameoverh2{
  64.         text-align: center;
  65. }
  66. #gameoverbutton{
  67.         margin: 0 auto;
  68.         text-align: center;
  69.         font-size: large;
  70. }
复制代码


影子论坛是一个高度自由简约的资源共享平台
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表