用JS實現飛機大戰小遊戲
阿新 • • 發佈：2021-06-11
本文例項為大家分享了js實現飛機大戰小遊戲的具體程式碼，供大家參考，具體內容如下
小的時候玩的飛機大戰感覺還蠻神奇，今天自己就學著做了一個
先製作好要做好的幾步以及背景樣式
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var start = 0; // 開始階段
var starting = 1; // 開始的載入階段
var running = 2; // 遊戲階段
var pause = 3; // 暫停階段
var gameover = 4; // 結束階段
var state = start; // 目前狀態
var width = canvas.width; // 獲取畫布的寬度
var height = canvas.height; // 獲取畫布的高度
var score = 0; // 分數
var life = 3; // 我放飛機生命值
var bg = new Image(); // 建立背景圖片
bg.src = "img/background.png";
var BG = {
imgs: bg,width: 480,height: 852,};
// 建立生成背景圖片的建構函式
function Bg(config) { // 引數為BG物件
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 定義兩張背景圖片，用於動畫
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
//第二張背景圖的初始高度放在背景高度(固定)的上面
this.y2 = -this.height;
// 背景圖片繪製方法
this.paint = function() {
//分別繪製了兩張背景圖
ctx.drawImage(this.imgs,this.x1,this.y1);
ctx.drawImage(this.imgs,this.x2,this.y2);
};
// 背景圖片運動的方法
this.step = function() {
//背景圖片位置向下移動一個，然後利用定時器讓背景圖動起來
this.y1++;
this.y2++;
//判斷圖片高度的臨界點，
if (this.y1 == this.height) {
this.y1 = -this.height;
}
if (this.y2 == this.height) {
this.y2 = -this.height;
}
}
};
// 建立背景圖片物件
var sky = new Bg(BG);
// 生成遊戲名文字
var logo = new Image();
logo.src = "img/start.png";
// 遊戲載入過程的4張圖片存入一個數組中
var loadings = [];
loadings[0] = new Image();
loadings[0].src = "img/game_loading1.png";
loadings[1] = new Image();
loadings[1].src = "img/game_loading2.png";
loadings[2] = new Image();
loadings[2].src = "img/game_loading3.png";
loadings[3] = new Image();
loadings[3].src = "img/game_loading4.png";
var LOADING = {
imges: loadings,length: loadings.length,width: 186,height: 38,};
// 建構函式
function Loading(config) {
this.imges = config.imges;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.startIndex = 0; // 用於判斷需要顯示的圖片是哪個
// 繪製方法
this.paint = function() {
ctx.drawImage(this.imges[this.startIndex],height - this.height)
};
this.time = 0; // 載入時圖片切換速度
// 圖片切換方法
this.step = function() {
this.time++;
if (this.time % 4 === 0) {
this.startIndex++;
}
if (this.startIndex === this.length) {
// 載入階段結束，進入遊戲階段
state = running;
}
}
};
// 建立載入階段的物件
var loading = new Loading(LOADING);在製作我方飛機
// 我方飛機
var heros = [];
heros[0] = new Image();
heros[0].src = "img/hero1.png";
heros[1] = new Image();
heros[1].src = "img/hero2.png";
heros[2] = new Image();
heros[2].src = "img/hero_blowup_n1.png";
heros[3] = new Image();
heros[3].src = "img/hero_blowup_n2.png";
heros[4] = new Image();
heros[4].src = "img/hero_blowup_n3.png";
heros[5] = new Image();
heros[5].src = "img/hero_blowup_n4.png";
var HEROS = {
imgs: heros,length: heros.length,width: 99,height: 124,frame: 2
};
// 我方飛機的建構函式
function Hero(config) {
this.imgs = config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.frame = config.frame;
this.startIndex = 0; // 用於判斷我方飛機當前狀態
// 定義我方飛機的位置
this.x = width / 2 - this.width / 2;
this.y = height - this.height;
// 定義飛機撞擊的標誌,表示飛機沒有被撞擊
this.down = false;
// 定義飛機是否爆破完成,表示飛機還沒有完全爆炸
繪製子彈狀態
var bullet = new Image();
bullet.src = "img/bullet1.png";
// 初始化
var BULLETS = {
imgs: bullet,width: 9,height: 21,};
// 建立子彈的建構函式
function Bullet(config) {
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// 子彈座標
this.x = hero.x + hero.width / 2 - this.width / 2;
this.y = hero.y - this.height;
// 繪製方法
this.paint = function() {
ctx.drawImage(this.imgs,this.y)
};
// 運動方法
this.step = function() {
this.y -= 10;
};
this.candel = false; // 用於判斷子彈是否碰撞
// 子彈碰撞方法
this.bang = function() {
this.candel = true;
}
};
// 所有new的子彈物件放到一個數組
var bullets = [];
// 遍歷繪製子彈
程式設計客棧 function bulletdPaint() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint();
}
};
// 遍歷呼叫子彈的運動;
function bulletdStep() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].step();
}
};
// 子彈的刪除函式
function bulletDel() {
// 碰撞的時候刪除子彈
// 超出畫布的高度，即負的子彈的高度
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].candel || bullets[i].y < -bullets[i].height) {
bullets.splice(i,1)
}
}
};
子彈跟隨飛機的移動而移動
// 子彈發射
this.time = 0; // 設計速度初始為0
this.shoot = function() {
this.time++;
if (this.time % 2 === 0) { // 每2步移動射擊一次
bullets.push(new Bullet(BULLETS))
}
};
};
// 建立我方飛機的物件例項
var hero = new Hero(HEROS);
// 滑鼠移動事件
canvas.onmousemove = function(event) {
// console.log("onmousemove");
var event = event || window.event;
if (state == running) { //判斷當前遊戲狀態
//把獲取到的頁面中的滑鼠橫座標的值賦給飛機的橫座標（位置）
hero.x = event.offsetX - hero.width / 2;
//把獲取到的頁面中的滑鼠縱座標的值賦給飛機的縱座標（位置）
hero.y = event.offsetY - hero.height / 2;
}
};
繪製敵方飛機
// 敵方飛機的繪製
var enemy1 = []; //小飛機
enemy1[0] = new Image();
enemy1[0].src = "img/enemy1.png";
enemy1[1] = new Image();
enemy1[1].src = 'img/enemy1_down1.png';
enemy1[2] = new Image();
enemy1[2].src = 'img/enemy1_down2.png';
enemy1[3] = new Image();
enemy1[3].src = 'img/enemy1_down3.png';
enemy1[4] = new Image();
enemy1[4].src = 'img/enemy1_down4.png';
var enemy2 = []; //中飛機
enemy2[0] = new Image();
enemy2[0].src = "img/enemy2.png";
enemy2[1] = new Image();
enemy2[1].src = "img/enemy2_down1.png";
enemy2[2] = new Image();
enemy2[2].src = "img/enemy2_down2.png";
enemy2[3] = new Image();
enemy2[3].src = "img/enemy2_down3.png";
enemy2[4] = new Image();
enemy2[4].src = "img/enemy2_down4.png";
var enemy3 = []; //大飛機
enemy3[0] = new Image();
enemy3[0].src = "img/enemy3_n1.png";
enemy3[1] = new Image();
enemy3[1].src = "img/enemy3_n2.png";
enemy3[2] = new Image();
enemy3[2].src = "img/enemy3_down1.png";
enemy3[3] = new Image();
enemy3[3].src = "img/enemy3_down2.png";
enemy3[4] = new Image();
enemy3[4].src = "img/enemy3_down3.png";
enemy3[5] = new Image();
enemy3[5].src = "img/enemy3_down4.png";
enemy3[6] = new Image();
enemy3[6].src = "img/enemy3_down5.png";
enemy3[7] = new Image();
enemy3[7].src = "img/enemy3_down6.png";
// 初始化資料
var ENEMY1 = {
imgs: enemy1,length: enemy1.length,width: 57,height: 51,type: 1,frame: 2,life: 1,score: 1,};
var ENEMY2 = {
imgs: enemy2,length: enemy2.length,width: 69,height: 95,type: 2,life: 5,scorwww.cppcns.come: 5,};
var ENEMY3 = {
imgs: enemy3,length: enemy3.length,width: 165,height: 261,type: 3,life: 15,score: 20,};
// 敵方飛機的建構函式
function Enemy(config) {
this.imgs = config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.type = config.type;
this.frame = config.frame;
this.life = config.life;
this.score = config.score;
// 敵方飛機的座標
this.x = Math.random() * (width - this.width);
this.y = -this.height;
this.startIndex = 0; // 用於判斷的下標
this.down = false; // 用於判斷是否碰撞
this.candel = false; // 用於判斷是否爆炸完成
//繪製方法
this.paint = function() {
ctx.drawImage(this.imgs[this.startIndex],this.y);
};
//運動方法
this.step = function() {
if (!this.down) { // 敵方飛機處於正常狀態
// 小飛機，中飛機的下標始終都是0
// 大飛機的下標是在0和1之間進行切換
this.startIndex++;
this.startIndex = this.startIndex % this.frame;
// 飛機向下的動畫
this.y += 2;
} else { //飛機發生碰撞以後
this.startIndex++;
if (this.startIndex == this.length) {
this.candel = true;
this.startIndex = this.length - 1;
}
}
};
// 判斷是否被碰撞
this.checkHit = function(wo) { //判斷四個邊
return wo.y + wo.height > this.y &&
wo.x + wo.width > this.x &&
wo.y < this.y + this.height &&
wo.x < this.x + this.width;
};
//敵方飛機碰撞後
this.bang = function() {
this.life--;
if (this.life === 0) {
this.down = true;
score += this.score;
}
}
};
// 陣列存放敵方飛機
var enemise = [];
// 往敵方飛機陣列中新增資料
function enterEnemise() {
var rand = Math.floor(Math.random() * 100)
if (rand < 10) {
// 新增小飛機
enemise.push(new Enemy(ENEMY1));
} else if (rand < 55 && rand > 50) {
// 新增中飛機
enemise.push(new Enemy(ENEMY2));
} else if (rand === 88) {
// 新增大飛機
if (enemise[0].type !== 3 && enemise.length > 0) {
enemise.splice(0,new Enemy(ENEMY3));
}
}
};
// 繪製敵方飛機函式
function enemyPaint() {
for (var i = 0; i < enemise.length; i++) {
en程式設計客棧emise[i].paint();
}
};
// 敵方飛機的運動函式
function enemyStep() {
for (var i = 0; i < enemise.length; i++) {
enemise[i].step();
}
};
// 刪除敵方飛機函式
function delenemy() {
for (var i = 0; i < enemise.length; i++) {
// console.log(enemise[i].candel)
if (enemise[i].y > height || enemise[i].candel) {
enemise.splice(i,1)
}
}
};
// 碰撞以後的函式
function hitEnemise() {
for (var i = 0; i < enemise.length; i++) {
// 如果我放飛機撞到了敵方飛機以後
if (enemise[i].checkHit(hero)) {
// 敵方飛機碰撞後，碰撞狀態改變
enemise[i].bang();
// 我方飛機碰撞後，碰撞狀態改變
hero.bang();
};
// 子彈碰到敵方飛機
for (var j = 0; j < bullets.length; j++) {
if (enemise[i].checkHit(bullets[j])) {
enemise[i].bang();
// 子彈的碰撞後，碰撞狀態改變
bullets[j].bang();
}
http://www.cppcns.com }
}
};
最後的收尾階段
// 繪製分數和生命值
function scoreText() {
ctx.font = "30px bold"
ctx.fillText("score:" + score,10,30);
ctx.fillText("life:" + life,300,30);
};
// 遊戲暫停的階段
canvas.onmouseout = function() {
if (state === running) {
state = pause;
}
};
// 呼叫畫布的滑鼠移入事件
canvas.onmouseover = function() {
if (state === pause) {
state = running;
}
};
// 暫停圖片
var pause = new Image()
pause.src = "img/game_pause_nor.png";
// 遊戲結束
function gameoverfn() {
ctx.font = "50px bold"
ctx.fillText("GAME OVER !!!",80,300);
ctx.fillText("ONCE MORE !!!",400);
};
// 畫布點選事件
canvas.addEventListener("click",function(e) {
p = getEventPosition(e);
// 點選畫布時,判斷遊戲是否開始
if (state === start) {
state = starting;
}
console.log(123);
// 重新開始遊戲有問題？？？
if (state === gameover) {
if (p.y >= 350 && p.y < 450) {
console.log('你點選了ONCE MORE !!!');
state = running;
}
}
});
function getEventPosition(e) {
var x,y;
if (e.layerX || ev.layerX === 0) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || ev.offsetX === 0) {
x = e.offsetX;
y = e.offsetY;
}
return {
x: x,y: y
};
};
後面就是基本的每個階段的呼叫問題叻
setInterval(function() {
//背景圖片無論在哪個狀態都有背景圖片以及它的動態效果
sky.paint(); // 繪製背景
sky.step(); // 背景動畫
if (state === start) { // 第一階段
ctx.drawImage(logo,35,0)
} else if (state === starting) { // 第二階段
loading.paint(); // 繪製背景
loading.step(); // 背景動畫
} else if (state === running) { // 第三狀態
// 繪製我放飛機
hero.paint();
// 我方飛機的運動
hero.step();
// 我方飛機的射擊方法
hero.shoot();
// 子彈的繪製
bulletdPaint();
// 子彈的運動
bulletdStep();
// 子彈的刪除
bulletDel();
// 建立敵方飛機
enterEnemise();
// 繪製敵方飛機
enemyPaint();
// 繪製敵方飛機的運動
enemyStep();
// 刪除敵方飛機
delenemy();
// 判斷是否撞擊
hitEnemise();
// 繪製分數和生命值
scoreText()
} else if (state === pause) { // 第四狀態
sky.paint(); // 繪製背景
sky.step(); // 背景動畫
// 繪製我放飛機
hero.paint();
// 子彈的繪製
bulletdPaint();
// 繪製敵方飛機
enemyPaint();
// 繪製分數和生命值
scoreText();
ctx.drawImage(pause,220,300)
} else if (state === gameover) { // 第五狀態
sky.paint(); // 繪製背景
sky.step(); // 背景動畫
hero.paint();
// 子彈的繪製
bulletdPaint();
// 繪製敵方飛機
enemyPaint();
// 繪製分數和生命值
scoreText();
// 遊戲結束
gameoverfn();
}
},10)
})()
這個也就是飛機大戰的全部原始碼了，僅供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。