JavaScript原生編寫《飛機大戰(zhàn)坦克》游戲完整實例
更新時間：2017年01月04日 15:43:42 作者：范小飯_
飛機大戰(zhàn)坦克是一款小游戲，相信很多朋友都有玩過，由于最近在深入學(xué)習(xí)Javascript，所以想著用利用Javascript來實現(xiàn)這個游戲，下面這篇文章主要介紹了如何利用JavaScript原生編寫《飛機大戰(zhàn)坦克》游戲,需要的朋友可以參考下
先來看看開始的界面圖
實現(xiàn)思路：
1.打開頁面，背景開始走動；
2.點擊開始，飛機開始不斷發(fā)射子彈，敵人隨機出現(xiàn)在上方；
3.當(dāng)敵人碰到子彈，敵人消失；
4.當(dāng)敵人和飛機相遇，飛機死亡，結(jié)束游戲；
html頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飛機大戰(zhàn)</title> <link rel="stylesheet" type="text/css" href="飛機大戰(zhàn).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="飛機大戰(zhàn).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;
}
進入頁面時，背景開始動
//給背景設(shè)置定時器，讓背景不停的動，形成動感
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";
}
}
}
點擊開始，進入游戲
游戲中
注：其實子彈和敵人的標簽沒有幾個，但是我們使用定時器，開始之前，現(xiàn)將表現(xiàn)都放在屏幕外，進入游戲需要時候再改變標簽定位，將其放入到頁面中。
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) {
//標記敵人已經(jīng)使用
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;
}
}
}
}
}
}
死亡檢測
游戲結(jié)束
用頁面上存在每一個敵人和飛機的定位進行檢測，如果兩者相遇，那么結(jié)束游戲。
注：檢測時考慮取反，坦克在飛機上面，在飛機下面，在飛機左邊，在飛機右邊是沒有碰到的時候，那么我們?nèi)》淳褪钦f明兩者已經(jīng)相遇了。
//死亡檢測
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;
}
}
}
}
}
上述兩步中用到的檢測兩者是否碰撞的函數(shù)
//死亡檢測的函數(shù)
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();//刷新頁面
}
好的，現(xiàn)在我們的游戲就可以玩了，這個游戲的有些寫作思想有些是我們在以后的項目中可以學(xué)習(xí)的。比如，頁面之外的空間的運用；比如，檢測碰撞。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)向表格中動態(tài)添加行的方法,涉及javascript針對表格行的動態(tài)添加技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
js實現(xiàn)單層數(shù)組轉(zhuǎn)多層樹
這篇文章主要介紹了js實現(xiàn)單層數(shù)組轉(zhuǎn)多層樹方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
編寫了一個js插件，要使用該插件需要先在html中引入該插件Js,然后再添加一個script標簽，在里面調(diào)用，需要的朋友可以看看2014-09-09
js檢測標題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面
這篇文章主要介紹了js檢測標題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面的實現(xiàn)方法，主要是分享它的編程思路與加密方法2021-06-06
在很多網(wǎng)站都有這樣的功能，當(dāng)點擊一個全選按鈕之后，所有的復(fù)選框都會被選中，再點擊之后會取消全選，功能非常的人性化，可以省卻很多人力，本文將簡單介紹一下JS如何實現(xiàn)此功能2017-01-01
jsMind通過鼠標拖拽的方式調(diào)整節(jié)點位置
這篇文章主要介紹了jsMind通過鼠標拖拽的方式調(diào)整節(jié)點位置的方法，十分的簡單實用，推薦給有需要的小伙伴參考下。2015-04-04
THREE.JS使用TransformControls對模型拖拽的代碼實例
拖拽是前端實現(xiàn)中比較常用的一種效果,下面這篇文章主要給大家介紹了關(guān)于THREE.JS使用TransformControls對模型拖拽的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
JavaScript+Html5實現(xiàn)按鈕復(fù)制文字到剪切板功能(手機網(wǎng)頁兼容)
在學(xué)習(xí)javascript的過程中，遇到一個問題就是基于JavaScript+Html5實現(xiàn)按鈕復(fù)制文字到剪切板功能，下面小編給大家分享下我的實現(xiàn)思路，感興趣的朋友可以參考下2017-03-03
Bootstrap table 服務(wù)器端分頁功能實現(xiàn)方法示例
這篇文章主要介紹了Bootstrap table 服務(wù)器端分頁功能實現(xiàn)方法,結(jié)合實例形式詳細分析了Bootstrap table 服務(wù)器端后臺交互與分頁功能相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了分析javascript中9 個常見錯誤阻礙你進步的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09