jQuery實現飛機大戰小遊戲
阿新 • • 發佈:2020-07-07
本文例項為大家分享了jQuery實現飛機大戰的具體程式碼,供大家參考,具體內容如下
遊戲規則:
WSAD鍵控制大飛機移動方向,按下J鍵可發射子彈消滅敵機,每殲滅一架敵機可得10分;
與敵機相撞或者有遺漏敵機沒有殲滅,則遊戲結束
遊戲顯示如下圖:
css部分:
<style> .container { width: 800px; height: 500px; margin: 10vh auto; background: #000; position: relative; overflow: hidden; } .plane { color: #fff; width: 70px; height: 70px; position: absolute; bottom: 10px; left: calc(50% - 30px); background: url(img/戰鬥機.png) no-repeat; background-size: 70px 70px; } .bullet { width: 25px; height: 30px; background: url(img/子彈.png) no-repeat; background-size: 100% 100%; position: absolute; } .enemy { width: 40px; height: 40px; background: url(img/戰鬥機.png) no-repeat; transform: rotate(180deg); background-size: 100% 100%; position: absolute; top: 0; } .again { width: 220px; height: 160px; border: 1px solid #ccc; box-shadow: 5px 5px #ccc; background: rgb(252,187,187); text-align: center; line-height: 80px; color: #fff; font-size: 20px; position: absolute; top: calc(50% - 80px); left: calc(50% - 110px); margin: 0 auto; cursor: pointer; } i { font-style: normal; } .sorce { height: 30px; font-size: 20px; text-align: center; font-weight: bold; margin: 0 auto; position: absolute; top: 65px; left: calc(50% - 100px); color: #fff; z-index: 100; background: linear-gradient(to right,rgb(255,163,220),rgb(243,176,213)); -webkit-background-clip: text; color: transparent; } </style>
html部分:
<div class="sorce"> 擊敗:<i class="ok">0</i> 得分:<i class="get">0</i> </div> <div class="container"> <div class="plane"> </div> </div>
js部分:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function () { let maxtop = $(".container").innerHeight() - $(".plane").innerHeight() let maxleft = $(".container").innerWidth() - $(".plane").innerWidth() let ok = 0,get = 0; $(window).keydown(function ({ keyCode }) { let { top: t,left: l } = $(".plane").position() switch (keyCode) { case 87: t -= 10 break; case 83: t += 10 break; case 65: l -= 10 break; case 68: l += 10 break; case 74: shoot(); break; default: break; } if (t < 0) t = 0 if (t > maxtop) t = maxtop if (l < 0) l = 0 if (l > maxleft) l = maxleft $(".plane").css("top",t).css("left",l) }) let endTime = new Date() function shoot() { if (new Date() - endTime < 500) return let bullet = $('<div/>').addClass("bullet") $('.container').append(bullet) bullet.css('top',$('.plane').position().top - 30) bullet.css('left',$('.plane').position().left + $('.plane').innerWidth() / 2 - bullet .innerWidth() / 2) endTime = new Date() } let timer1 = setInterval(() => { $('.bullet').each(function () { let bullet = $(this) let { top } = bullet.position() if (top < 0) bullet.remove() else bullet.css('top',bullet.position().top - 10) }) },100); let timer2 = setInterval(() => { $('.enemy').each(function () { let enemy = this if (calc(enemy,$('.plane').get(0)) || calc($('.plane').get(0),enemy)) { let again = $('<div/>').html(`GAME OVER<br/>點選重新開始`).addClass( 'again') $('.container').append(again) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) clearInterval(timer4) } $('.again').click(function () { location.reload() }) $('.bullet').each(function () { let bullet = this if (calc(enemy,bullet) || calc(bullet,enemy)) { bullet.remove() enemy.remove() get += 10 ok++ $('.ok').html(ok) $('.get').html(get) } }) }) },50) let timer3 = setInterval(() => { let enemy = $('<div/>').addClass("enemy") $('.container').append(enemy) enemy.css('left',Math.round(Math.random() * ($('.container').innerWidth() - enemy .innerWidth()))) },2000) let timer4 = setInterval(() => { $('.enemy').each(function () { let enemy = $(this) let { top } = enemy.position() if (top > $('.container').innerHeight() - enemy.innerHeight()) { clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) clearInterval(timer4) let again = $('<div/>').html(`GAME OVER<br/>點選重新開戰`).addClass( 'again') $('.container').append(again) $('.again').click(function () { location.reload() }) } else enemy.css('top',enemy.position().top + 10) }) },200); function getLTRB(node) { return { l: node.offsetLeft,t: node.offsetTop,r: node.offsetLeft + node.offsetWidth,b: node.offsetTop + node.offsetHeight } } //獲取上下左右位置 function calc(a,b) { a = getLTRB(a) b = getLTRB(b) //判斷飛機與敵機是否相撞 if (a.l > a.l && b.l < a.r && b.t > a.t && b.t < a.b) return true else if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return true else if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return true else if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return true else return false } }) </script>
更多有趣的經典小遊戲實現專題,分享給大家:
C++經典小遊戲彙總
python經典小遊戲彙總
python俄羅斯方塊遊戲集合
JavaScript經典遊戲 玩不停
java經典小遊戲彙總
javascript經典小遊戲彙總
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。