JavaScript編寫實現(xiàn)飛機大戰(zhàn)
更新時間：2022年05月08日 10:30:24 作者：不像話i
這篇文章主要為大家詳細介紹了JavaScript編寫實現(xiàn)飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)飛機大戰(zhàn)的具體代碼，供大家參考，具體內(nèi)容如下
一.飛機大戰(zhàn)游戲介紹：
游戲中，玩家駕駛飛機，在空中進行戰(zhàn)斗。點擊并移動自己的飛機，發(fā)射炮彈，打掉敵小型飛機、中型飛機和大型飛機，來獲得分數(shù)和獎勵，打掉一架小型飛機贏得3分，打掉一架中型飛機贏得5分，打掉一架大型飛機贏得10分，累加得分。撞到敵飛機命減1，當(dāng)命數(shù)為0時，則游戲結(jié)束。
二. 效果圖頁面展示：
初始界面如圖-1所示:
玩家在如圖-1所示的界面的任意位置，按下鼠標(biāo)左鍵，開始游戲。
圖-1
默認分數(shù)為0，默認5條命，請看如圖-2所示具體介紹：
圖-2
在游戲進行過程中，鼠標(biāo)離開游戲界面,游戲?qū)⑦M入暫停狀態(tài)，界面效果如圖-3所示：
圖-3
當(dāng)鼠標(biāo)再次移入界面時，游戲?qū)⒗^續(xù)進行。
三. 完整代碼如下：
畫布樣式：
<style>
? ? ? ? canvas {
? ? ? ? ? ? border: 1px solid #f8c1ab;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? right: 0;
? ? ? ? ? ? margin: auto;
? ? ? ? }
</style>設(shè)置畫布，定義初始狀態(tài)，準(zhǔn)備階段：
// 畫布
? ? ? ? var canvas = document.getElementById('canvas')
? ? ? ? var ctx = canvas.getContext('2d');
? ? ? ? // 存儲畫布寬高
? ? ? ? var width = canvas.width;
? ? ? ? var height = canvas.height;
? ? ? ? var height = 852;
? ? ? ? // 準(zhǔn)備初始化
? ? ? ? var ready = 0;
? ? ? ? var loading = 1;
? ? ? ? var running = 2;
? ? ? ? var pause = 3;
? ? ? ? var over = 4;
? ? ? ? var life = 3;
? ? ? ? var score = 0;
? ? ? ? // 定義初始狀態(tài)
? ? ? ? var state = ready;
?
? ? ? ? // 一. 準(zhǔn)備階段,在畫布上以圖片的形式畫出背景圖片
? ? ? ? var bg = new Image();
? ? ? ? bg.src = 'img/background.png';
? ? ? ? // 1. 創(chuàng)建一個對象,用來存儲當(dāng)前圖片繪制的等信息
? ? ? ? var bgParam = {
? ? ? ? ? ? bg: bg, //對象里的第一個參數(shù)為構(gòu)建的image對象,.src屬性存儲了圖片的信息
? ? ? ? ? ? x: 0,
? ? ? ? ? ? y: 0,
? ? ? ? ? ? width: 480,
? ? ? ? ? ? height: 852
? ? ? ? }
? ? ? ? // 2 .創(chuàng)建構(gòu)造函數(shù),調(diào)用函數(shù)時繪制這張圖,將圖片繪制的信息傳遞給這個函數(shù)時,根據(jù)傳遞的信息繪制出圖片
? ? ? ? function bgPaint(param) {
? ? ? ? ? ? this.bg = param.bg;
? ? ? ? ? ? this.x = param.x;
? ? ? ? ? ? this.y = param.y;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
?
? ? ? ? ? ? // 兩張圖片交替繪制,實現(xiàn)滾動效果
? ? ? ? ? ? this.y1 = -this.height;
?
? ? ? ? ? ? // 繪制圖片
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.bg, this.x, this.y, this.width, this.height)
? ? ? ? ? ? ? ? ctx.drawImage(this.bg, this.x, this.y1, this.width, this.height)
? ? ? ? ? ? }
? ? ? ? ? ? // 讓圖片不斷下移,實現(xiàn)動態(tài)滾動效果
? ? ? ? ? ? this.scroll = function () {
? ? ? ? ? ? ? ? this.y += 7;
? ? ? ? ? ? ? ? this.y1 += 7;
? ? ? ? ? ? ? ? // 每張圖片到達底部后重新回到上面
? ? ? ? ? ? ? ? if (this.y >= this.height) {
? ? ? ? ? ? ? ? ? ? this.y = -this.height
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (this.y1 >= this.height) {
? ? ? ? ? ? ? ? ? ? this.y1 = -this.height
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 創(chuàng)建背景圖片對象
? ? ? ? var bgObj = new bgPaint(bgParam);繪制游戲開始前：
?// 二. 繪制游戲開始前l(fā)ogo
var logo = new Image();
? ? ? ? logo.src = 'img/start.png'
? ? ? ? var logoParam = {
? ? ? ? ? ? logo: logo,
? ? ? ? ? ? x: 0,
? ? ? ? ? ? y: 0,
? ? ? ? ? ? width: 480,
? ? ? ? ? ? height: 852
? ? ? ? }
?
? ? ? ? function logoPaint(param) {
? ? ? ? ? ? this.logo = param.logo;
? ? ? ? ? ? this.x = param.x;
? ? ? ? ? ? this.y = param.y;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
?
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.logo, this.x, this.y, this.width, this.height)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var logoObj = new logoPaint(logoParam);
?
? ? ? ? // 點擊后改變游戲狀態(tài)
? ? ? ??
? ? ? ? canvas.addEventListener('click',function () {
? ? ? ? ? ? if (state == ready) {
? ? ? ? ? ? ? ? state = loading;
? ? ? ? ? ? }else if (state == loading){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }else if (state == running){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }else if (state == pause){
? ? ? ? ? ? ? ? if(state != over){
? ? ? ? ? ? ? ? ? ? state = running;
? ? ? ? ? ? ? ? ? ? console.log(22);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? canvas.addEventListener('mouseleave',function(){
? ? ? ? ? ? if(state == loading){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }else if (state == running){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }
? ? ? ? })游戲加載階段：
// 三. 游戲加載階段
// ?定義數(shù)組存放圖片的信息
var imgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png',
? ? ? ? ? ? 'img/game_loading4.png']
? ? ? ? var loadingImg = [];
? ? ? ? for (var i = 0; i < imgArr.length; i++) {
? ? ? ? ? ? loadingImg[i] = new Image();
? ? ? ? ? ? loadingImg[i].src = imgArr[i]
? ? ? ? }
? ? ? ? var loadingParam = {
? ? ? ? ? ? loadingImg: loadingImg, //第一個參數(shù)為一個數(shù)組,數(shù)組里存放了一系列new Image()所new出來的圖片對象,圖片對象.src為地址
? ? ? ? ? ? width: 186,
? ? ? ? ? ? height: 38
? ? ? ? }
?
? ? ? ? function loadingPaint(param) {
? ? ? ? ? ? this.loadingImg = param.loadingImg;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.x = 0;
? ? ? ? ? ? this.y = height - param.height;
?
? ? ? ? ? ? // 定義繪制的下標(biāo)
? ? ? ? ? ? this.index = 0;
? ? ? ? ? ? this.times = 0;
? ? ? ? ? ? // 繪制圖片
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height)
? ? ? ? ? ? }
? ? ? ? ? ? // 每隔一段時間通過改變下標(biāo)來改變圖片以使圖片動起來
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? // 定時器累計一定次數(shù)后才改變下一張圖片,避免加載圖片更換太快
? ? ? ? ? ? ? ? this.times++;
? ? ? ? ? ? ? ? if (this.times % 2 == 0) {
? ? ? ? ? ? ? ? ? ? this.index++;
? ? ? ? ? ? ? ? ? ? if (this.index == this.loadingImg.length) {
? ? ? ? ? ? ? ? ? ? ? ? // 繪制完加載圖片后,改變游戲狀態(tài)
? ? ? ? ? ? ? ? ? ? ? ? state = running;
?
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 在繪制完加載圖片后自動更換了游戲運行狀態(tài)
? ? ? ? var loadingObj = new loadingPaint(loadingParam);游戲進行階段：
// 四. 游戲進行階段
// 繪制我方飛機
var heroArr = ['img/hero1.png', 'img/hero2.png', 'img/hero_blowup_n1.png', 'img/hero_blowup_n2.png',
? ? ? ? ? ? 'img/hero_blowup_n3.png', 'img/hero_blowup_n4.png'
? ? ? ? ]
? ? ? ? var heroPlane = [];
? ? ? ? for (var i = 0; i < heroArr.length; i++) {
? ? ? ? ? ? heroPlane[i] = new Image();
? ? ? ? ? ? heroPlane[i].src = heroArr[i]
? ? ? ? }
? ? ? ? // 定義飛機的圖像信息
? ? ? ? var heroParam = {
? ? ? ? ? ? heroPlane: heroPlane,
? ? ? ? ? ? width: 99,
? ? ? ? ? ? height: 124,
? ? ? ? ? ? life:5
? ? ? ? }
? ? ? ? var flag = true;
? ? ? ? function heroPaint(param) {
? ? ? ? ? ? this.heroPlane = param.heroPlane;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.life = param.life;
? ? ? ? ? ??
? ? ? ? ? ? flag = false;
? ? ? ? ? ? this.x = width / 2 - this.width / 2;
? ? ? ? ? ? this.y = height - this.height;
?
? ? ? ? ? ? // 存儲切換圖片的下標(biāo)
? ? ? ? ? ? this.index = 0;
?
? ? ? ? ? ? // 判斷是否被撞擊
? ? ? ? ? ? this.down = false;
?
? ? ? ? ? ? // 切換頻率
? ? ? ? ? ? this.times = 0;
?
? ? ? ? ? ? // 繪制hero函數(shù)
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.heroPlane[this.index], this.x, this.y, this.width, this.height)
?
? ? ? ? ? ? }
?
? ? ? ? ? ? // 判斷飛機是否被撞擊以及被撞擊后的狀態(tài)改變
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? // 沒有被撞擊時飛機的狀態(tài)只會在hero1和hero2之間切換
? ? ? ? ? ? ? ? if (!this.down) {
? ? ? ? ? ? ? ? ? ? if (this.index == 0) {
? ? ? ? ? ? ? ? ? ? ? ? this.index = 1;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? this.index = 0;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 被撞擊后狀態(tài)的改變加上爆炸的樣子
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? this.index++;
? ? ? ? ? ? ? ? ? ? if (this.index == this.heroPlane.length) {
? ? ? ? ? ? ? ? ? ? ? ? // 游戲結(jié)束后飛機停留在冒煙狀態(tài)
? ? ? ? ? ? ? ? ? ? ? ? this.index = this.heroPlane.length - 1;
? ? ? ? ? ? ? ? ? ? ? ? heroParam.life--;
? ? ? ? ? ? ? ? ? ? ? ? if (heroParam.life <= 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? state = over;
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 還有生命值時重新開始游戲
? ? ? ? ? ? ? ? ? ? ? ? ? ? heroObj = new heroPaint(heroParam)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? ? ? this.shoot = function () {
? ? ? ? ? ? ? ? this.times++;
? ? ? ? ? ? ? ? if (this.times % 2 === 0) {
? ? ? ? ? ? ? ? ? ? // 飛機在就源源不斷地補充子彈
? ? ? ? ? ? ? ? ? ? bullets.push(new Bullet(bulletParam));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? }
?
? ? ? ? var heroObj = new heroPaint(heroParam);
?
? ? ? ? // 讓飛機跟著鼠標(biāo)動
? ? ? ? canvas.onmousemove = function (e) {
? ? ? ? ? ? if(state === pause){
? ? ? ? ? ? ? ? state = running;
? ? ? ? ? ? }
? ? ? ? ? ? if (state === running) {
? ? ? ? ? ? ? ? // 獲取鼠標(biāo)移動后的位置
? ? ? ? ? ? ? ? heroObj.x = e.offsetX - heroObj.width / 2;
? ? ? ? ? ? ? ? heroObj.y = e.offsetY - heroObj.height / 2;
? ? ? ? ? ? }
? ? ? ? }設(shè)置子彈和敵機狀態(tài)：
// 子彈
var bullet = new Image();
bullet.src = 'img/bullet1.png';
? ? ? ? var bulletParam = {
? ? ? ? ? ? bullet: bullet,
? ? ? ? ? ? width: 9,
? ? ? ? ? ? height: 21
? ? ? ? }
? ? ? ? function Bullet(param) {
? ? ? ? ? ? this.bullet = param.bullet;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.x = heroObj.x + heroObj.width / 2 - this.width / 2;
? ? ? ? ? ? this.y = heroObj.y - this.height - 10;
?
? ? ? ? ? ? // 判斷是否被撞擊的標(biāo)志
? ? ? ? ? ? this.down = false;
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.bullet, this.x, this.y, this.width, this.height);
? ? ? ? ? ? }
?
? ? ? ? ? ? // 運動
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? this.y -= 25;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var bullets = [];
?
?
? ? ? ? // 繪制子彈
? ? ? ? function bulletsPaint() {
? ? ? ? ? ? for (var i = 0; i < bullets.length; i++) {
? ? ? ? ? ? ? ? bullets[i].draw();
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? function bulletsSport() {
? ? ? ? ? ? for (var i = 0; i < bullets.length; i++) {
? ? ? ? ? ? ? ? bullets[i].sport();
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 刪除子彈
? ? ? ? // 1. 子彈飛出屏幕外面
? ? ? ? // 2. 子彈敵機碰撞了
? ? ? ? function bulletsDelete() {
? ? ? ? ? ? for (var i = 0; i < bullets.length; i++) {
? ? ? ? ? ? ? ? if (bullets[i].y < -bullets[i].height || bullets[i].down) {
? ? ? ? ? ? ? ? ? ? bullets.splice(i, 1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 繪制敵機
? ? ? ? // 敵方小號飛機
? ? ? ? var enemy1Arr = ['img/enemy1.png', 'img/enemy1_down1.png', 'img/enemy1_down2.png', 'img/enemy1_down3.png',
? ? ? ? ? ? 'img/enemy1_down4.png'
? ? ? ? ];
? ? ? ? var enemy1Plane = [];
? ? ? ? for (var i = 0; i < enemy1Arr.length; i++) {
? ? ? ? ? ? enemy1Plane[i] = new Image();
? ? ? ? ? ? enemy1Plane[i].src = enemy1Arr[i];
? ? ? ? }
?
? ? ? ? // 小號飛機信息
? ? ? ? var enemy1 = {
? ? ? ? ? ? enemyPlane: enemy1Plane,
? ? ? ? ? ? width: 57,
? ? ? ? ? ? height: 51,
? ? ? ? ? ? life: 3
? ? ? ? }
? ? ? ? // 敵方中號飛機
? ? ? ? var enemy2Arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png',
? ? ? ? ? ? 'img/enemy2_down4.png'
? ? ? ? ];
? ? ? ? var enemy2Plane = [];
? ? ? ? for (var i = 0; i < enemy2Arr.length; i++) {
? ? ? ? ? ? enemy2Plane[i] = new Image();
? ? ? ? ? ? enemy2Plane[i].src = enemy2Arr[i];
? ? ? ? }
?
? ? ? ? // 中號飛機信息
? ? ? ? var enemy2 = {
? ? ? ? ? ? enemyPlane: enemy2Plane,
? ? ? ? ? ? width: 69,
? ? ? ? ? ? height: 95,
? ? ? ? ? ? life: 5
? ? ? ? }
? ? ? ? // 敵方大號飛機
? ? ? ? var enemy3Arr = ['img/enemy3_n1.png', 'img/enemy3_n2.png', 'img/enemy3_hit.png', 'img/enemy3_down1.png',
? ? ? ? ? ? 'img/enemy3_down2.png', 'img/enemy3_down3.png', 'img/enemy3_down4.png', 'img/enemy3_down5.png',
? ? ? ? ? ? 'img/enemy3_down6.png'
? ? ? ? ];
? ? ? ? var enemy3Plane = [];
? ? ? ? for (var i = 0; i < enemy3Arr.length; i++) {
? ? ? ? ? ? enemy3Plane[i] = new Image();
? ? ? ? ? ? enemy3Plane[i].src = enemy3Arr[i];
? ? ? ? }
?
? ? ? ? // 大號飛機信息
? ? ? ? var enemy3 = {
? ? ? ? ? ? enemyPlane: enemy3Plane,
? ? ? ? ? ? width: 169,
? ? ? ? ? ? height: 258,
? ? ? ? ? ? life: 10
? ? ? ? }
?
?
? ? ? ? // 敵機的構(gòu)造函數(shù)
? ? ? ? function Enemy(param) {
? ? ? ? ? ? this.enemyPlane = param.enemyPlane;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.life = param.life;
?
? ? ? ? ? ? this.x = Math.random() * (width - this.width);
? ? ? ? ? ? this.y = -this.height;
?
? ? ? ? ? ? this.index = 0;
? ? ? ? ? ? // 判斷敵機是否發(fā)生碰撞
? ? ? ? ? ? this.down = false;
? ? ? ? ? ? // 是否爆照完成
? ? ? ? ? ? this.bang = false;
?
? ? ? ? ? ? this.paint = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.enemyPlane[this.index], this.x, this.y, this.width, this.height);
? ? ? ? ? ? }
?
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? if (!this.down) {
? ? ? ? ? ? ? ? ? ? // 當(dāng)前敵機未被碰撞時
? ? ? ? ? ? ? ? ? ? this.y += 5;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? this.index++;
? ? ? ? ? ? ? ? ? ? if (this.index === this.enemyPlane.length) {
? ? ? ? ? ? ? ? ? ? ? ? this.index = this.enemyPlane.length - 1;
? ? ? ? ? ? ? ? ? ? ? ? this.bang = true;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? ? ? // 判斷是否被碰撞
? ? ? ? ? ? this.hit = function (obj) {
? ? ? ? ? ? ? ? return obj.x + obj.width >= this.x && obj.x <= this.x + this.width &&
? ? ? ? ? ? ? ? ? ? obj.y <= this.y + this.height && obj.y + obj.height >= this.y;
? ? ? ? ? ? }
?
? ? ? ? }
? ? ? ? var enemies = [];
? ? ? ? var times = 0
?
? ? ? ? function pushEnemy() {
? ? ? ? ? ? times++;
? ? ? ? ? ? if (times % 10 == 0) {
? ? ? ? ? ? ? ? var random = Math.random();
? ? ? ? ? ? ? ? if (random < 0.5) {
? ? ? ? ? ? ? ? ? ? enemies.push(new Enemy(enemy1));
? ? ? ? ? ? ? ? } else if (random < 0.8) {
? ? ? ? ? ? ? ? ? ? // 中號飛機
? ? ? ? ? ? ? ? ? ? enemies.push(new Enemy(enemy2));
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 大號飛機
? ? ? ? ? ? ? ? ? ? enemies.push(new Enemy(enemy3));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? }
? ? ? ? // 繪制、運動飛機對象
? ? ? ? function enemyPaint() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? enemies[i].paint();
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function enemySport() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? enemies[i].sport();
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? function enemyDelete() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? if (enemies[i].y >= height || enemies[i].bang) {
? ? ? ? ? ? ? ? ? ? enemies.splice(i, 1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 如何檢測每一個敵機是否被（每一個子彈 hero）碰撞
? ? ? ? function checkHit() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? // 子彈和敵機撞擊
? ? ? ? ? ? ? ? for (var j = 0; j < bullets.length; j++) {
? ? ? ? ? ? ? ? ? ? if (enemies[i].hit(bullets[j])) {
? ? ? ? ? ? ? ? ? ? ? ? bullets[j].down = true;
? ? ? ? ? ? ? ? ? ? ? ? enemies[i].life--;
? ? ? ? ? ? ? ? ? ? ? ? if (enemies[i].life == 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? enemies[i].down = true;
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(enemies[i].width == 169){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 10;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else if(enemies[i].width == 69){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 5;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 3;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 敵機和hero
? ? ? ? ? ? ? ? if (enemies[i].hit(heroObj)) {
? ? ? ? ? ? ? ? ? ? enemies[i].life -= heroObj.life;
? ? ? ? ? ? ? ? ? ? heroObj.down = true;
? ? ? ? ? ? ? ? ? ? if(enemies[i].life <= 0){
? ? ? ? ? ? ? ? ? ? ? ? enemies[i].down = true;
? ? ? ? ? ? ? ? ? ? ? ? if(enemies[i].width == 169){
? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 10;
? ? ? ? ? ? ? ? ? ? ? ? }else if(enemies[i].width == 69){
? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 5;
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 3;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }設(shè)置游戲暫停和生命值、分數(shù)：
// 游戲暫停畫面信息
var pauseImg = new Image();
? ? ? ? pauseImg.src = 'img/game_pause_nor.png';
? ? ? ?
?
? ? ? ? function gameoverfn() {
? ? ? ? ? ? ctx.font = "50px bold"
? ? ? ? ? ? ctx.fillText("GAME OVER !!!", 80, 300);
? ? ? ? ? ? ctx.fillText("ONCE MORE !!!", 80, 400);
? ? ? ? };
?
? ? ? ? // 分數(shù)和生命值
? ? ? ? var score = 0;
? ? ? ? // 繪制分數(shù)和生命值
? ? ? ? function scoreText() {
? ? ? ? ? ? ctx.font = "30px bold"
? ? ? ? ? ? ctx.strokeText(`Score:${score}`, 10, 30)
? ? ? ? ? ? ctx.fillText("life:" + heroParam.life, 300, 30);
? ? ? ? };
?
?
? ? ? ? // 在定時器中繪制每一幀的圖像
? ? ? ? var timer = setInterval(function () {
? ? ? ? ? ? // 調(diào)用背景圖片繪制函數(shù)繪制
? ? ? ? ? ? bgObj.draw()
? ? ? ? ? ? bgObj.scroll()
?
? ? ? ? ? ? // 判斷游戲狀態(tài),state為ready時繪制logo圖形
? ? ? ? ? ? switch (state) {
? ? ? ? ? ? ? ? case ready:
? ? ? ? ? ? ? ? ? ? logoObj.draw();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case loading:
? ? ? ? ? ? ? ? ? ? loadingObj.draw();
? ? ? ? ? ? ? ? ? ? loadingObj.sport();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case running:
? ? ? ? ? ? ? ? ? ? heroObj.draw();
? ? ? ? ? ? ? ? ? ? heroObj.sport();
? ? ? ? ? ? ? ? ? ? heroObj.shoot();
?
? ? ? ? ? ? ? ? ? ? // 繪制子彈
? ? ? ? ? ? ? ? ? ? bulletsPaint();
? ? ? ? ? ? ? ? ? ? bulletsSport();
? ? ? ? ? ? ? ? ? ? bulletsDelete();
?
? ? ? ? ? ? ? ? ? ? // 繪制敵機
? ? ? ? ? ? ? ? ? ? pushEnemy();
? ? ? ? ? ? ? ? ? ? enemyPaint();
? ? ? ? ? ? ? ? ? ? enemySport();
?
? ? ? ? ? ? ? ? ? ? checkHit();
? ? ? ? ? ? ? ? ? ? enemyDelete();
? ? ? ? ? ? ? ? ? ? scoreText();
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case pause:
? ? ? ? ? ? ? ? ? ? ctx.drawImage(pauseImg, 210, 376, 60, 45);
? ? ? ? ? ? ? ? ? ? heroObj.draw();0
? ? ? ? ? ? ? ? ? ? heroObj.shoot();
?
? ? ? ? ? ? ? ? ? ? // 繪制子彈
? ? ? ? ? ? ? ? ? ? bulletsPaint();
? ? ? ? ? ? ? ? ? ? bulletsDelete();
?
? ? ? ? ? ? ? ? ? ? // 繪制敵機
? ? ? ? ? ? ? ? ? ? enemyPaint();
? ? ? ? ? ? ? ? ? ? scoreText()
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case over:
? ? ? ? ? ? ? ? ? ? heroObj.draw();
? ? ? ? ? ? ? ? ? ? gameoverfn();
? ? ? ? ? ? ? ? ? ? scoreText();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
?
? ? ? ? }, 60)整體代碼：
<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? canvas {
? ? ? ? ? ? border: 1px solid #f8c1ab;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? right: 0;
? ? ? ? ? ? margin: auto;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <canvas id="canvas" width="480" height="852"></canvas>
? ? <script>
? ? ? ? ?// 畫布
? ? ? ? var canvas = document.getElementById('canvas')
? ? ? ? var ctx = canvas.getContext('2d');
? ? ? ? // 存儲畫布寬高
? ? ? ? var width = canvas.width;
? ? ? ? var height = canvas.height;
? ? ? ? var height = 852;
? ? ? ? // 準(zhǔn)備初始化
? ? ? ? var ready = 0;
? ? ? ? var loading = 1;
? ? ? ? var running = 2;
? ? ? ? var pause = 3;
? ? ? ? var over = 4;
? ? ? ? var life = 3;
? ? ? ? var score = 0;
? ? ? ? // 定義初始狀態(tài)
? ? ? ? var state = ready;
?
? ? ? ? // 一. 準(zhǔn)備階段,在畫布上以圖片的形式畫出背景圖片
? ? ? ? var bg = new Image();
? ? ? ? bg.src = 'img/background.png';
? ? ? ? // 1. 創(chuàng)建一個對象,用來存儲當(dāng)前圖片繪制的等信息
? ? ? ? var bgParam = {
? ? ? ? ? ? bg: bg, //對象里的第一個參數(shù)為構(gòu)建的image對象,.src屬性存儲了圖片的信息
? ? ? ? ? ? x: 0,
? ? ? ? ? ? y: 0,
? ? ? ? ? ? width: 480,
? ? ? ? ? ? height: 852
? ? ? ? }
? ? ? ? // 2 .創(chuàng)建構(gòu)造函數(shù),調(diào)用函數(shù)時繪制這張圖,將圖片繪制的信息傳遞給這個函數(shù)時,根據(jù)傳遞的信息繪制出圖片
? ? ? ? function bgPaint(param) {
? ? ? ? ? ? this.bg = param.bg;
? ? ? ? ? ? this.x = param.x;
? ? ? ? ? ? this.y = param.y;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
?
? ? ? ? ? ? // 兩張圖片交替繪制,實現(xiàn)滾動效果
? ? ? ? ? ? this.y1 = -this.height;
?
? ? ? ? ? ? // 繪制圖片
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.bg, this.x, this.y, this.width, this.height)
? ? ? ? ? ? ? ? ctx.drawImage(this.bg, this.x, this.y1, this.width, this.height)
? ? ? ? ? ? }
? ? ? ? ? ? // 讓圖片不斷下移,實現(xiàn)動態(tài)滾動效果
? ? ? ? ? ? this.scroll = function () {
? ? ? ? ? ? ? ? this.y += 7;
? ? ? ? ? ? ? ? this.y1 += 7;
? ? ? ? ? ? ? ? // 每張圖片到達底部后重新回到上面
? ? ? ? ? ? ? ? if (this.y >= this.height) {
? ? ? ? ? ? ? ? ? ? this.y = -this.height
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (this.y1 >= this.height) {
? ? ? ? ? ? ? ? ? ? this.y1 = -this.height
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 創(chuàng)建背景圖片對象
? ? ? ? var bgObj = new bgPaint(bgParam);
?
? ? ? ? // 二. 繪制游戲開始前l(fā)ogo
? ? ? ? var logo = new Image();
? ? ? ? logo.src = 'img/start.png'
? ? ? ? var logoParam = {
? ? ? ? ? ? logo: logo,
? ? ? ? ? ? x: 0,
? ? ? ? ? ? y: 0,
? ? ? ? ? ? width: 480,
? ? ? ? ? ? height: 852
? ? ? ? }
?
? ? ? ? function logoPaint(param) {
? ? ? ? ? ? this.logo = param.logo;
? ? ? ? ? ? this.x = param.x;
? ? ? ? ? ? this.y = param.y;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
?
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.logo, this.x, this.y, this.width, this.height)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var logoObj = new logoPaint(logoParam);
?
? ? ? ? // 點擊后改變游戲狀態(tài)
? ? ? ??
? ? ? ? canvas.addEventListener('click',function () {
? ? ? ? ? ? if (state == ready) {
? ? ? ? ? ? ? ? state = loading;
? ? ? ? ? ? }else if (state == loading){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }else if (state == running){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }else if (state == pause){
? ? ? ? ? ? ? ? if(state != over){
? ? ? ? ? ? ? ? ? ? state = running;
? ? ? ? ? ? ? ? ? ? console.log(22);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? canvas.addEventListener('mouseleave',function(){
? ? ? ? ? ? if(state == loading){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }else if (state == running){
? ? ? ? ? ? ? ? state = pause;
? ? ? ? ? ? }
? ? ? ? })
?
? ? ? ? // ?三. 游戲加載階段
? ? ? ? // ?定義數(shù)組存放圖片的信息
? ? ? ? var imgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png',
? ? ? ? ? ? 'img/game_loading4.png']
? ? ? ? var loadingImg = [];
? ? ? ? for (var i = 0; i < imgArr.length; i++) {
? ? ? ? ? ? loadingImg[i] = new Image();
? ? ? ? ? ? loadingImg[i].src = imgArr[i]
? ? ? ? }
? ? ? ? var loadingParam = {
? ? ? ? ? ? loadingImg: loadingImg, //第一個參數(shù)為一個數(shù)組,數(shù)組里存放了一系列new Image()所new出來的圖片對象,圖片對象.src為地址
? ? ? ? ? ? width: 186,
? ? ? ? ? ? height: 38
? ? ? ? }
?
? ? ? ? function loadingPaint(param) {
? ? ? ? ? ? this.loadingImg = param.loadingImg;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.x = 0;
? ? ? ? ? ? this.y = height - param.height;
?
? ? ? ? ? ? // 定義繪制的下標(biāo)
? ? ? ? ? ? this.index = 0;
? ? ? ? ? ? this.times = 0;
? ? ? ? ? ? // 繪制圖片
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height)
? ? ? ? ? ? }
? ? ? ? ? ? // 每隔一段時間通過改變下標(biāo)來改變圖片以使圖片動起來
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? // 定時器累計一定次數(shù)后才改變下一張圖片,避免加載圖片更換太快
? ? ? ? ? ? ? ? this.times++;
? ? ? ? ? ? ? ? if (this.times % 2 == 0) {
? ? ? ? ? ? ? ? ? ? this.index++;
? ? ? ? ? ? ? ? ? ? if (this.index == this.loadingImg.length) {
? ? ? ? ? ? ? ? ? ? ? ? // 繪制完加載圖片后,改變游戲狀態(tài)
? ? ? ? ? ? ? ? ? ? ? ? state = running;
?
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 在繪制完加載圖片后自動更換了游戲運行狀態(tài)
? ? ? ? var loadingObj = new loadingPaint(loadingParam);
?
? ? ? ? // 四. 游戲進行階段
? ? ? ? // 繪制我方飛機
? ? ? ? var heroArr = ['img/hero1.png', 'img/hero2.png', 'img/hero_blowup_n1.png', 'img/hero_blowup_n2.png',
? ? ? ? ? ? 'img/hero_blowup_n3.png', 'img/hero_blowup_n4.png'
? ? ? ? ]
? ? ? ? var heroPlane = [];
? ? ? ? for (var i = 0; i < heroArr.length; i++) {
? ? ? ? ? ? heroPlane[i] = new Image();
? ? ? ? ? ? heroPlane[i].src = heroArr[i]
? ? ? ? }
? ? ? ? // 定義飛機的圖像信息
? ? ? ? var heroParam = {
? ? ? ? ? ? heroPlane: heroPlane,
? ? ? ? ? ? width: 99,
? ? ? ? ? ? height: 124,
? ? ? ? ? ? life:5
? ? ? ? }
? ? ? ? var flag = true;
? ? ? ? function heroPaint(param) {
? ? ? ? ? ? this.heroPlane = param.heroPlane;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.life = param.life;
? ? ? ? ? ??
? ? ? ? ? ? flag = false;
? ? ? ? ? ? this.x = width / 2 - this.width / 2;
? ? ? ? ? ? this.y = height - this.height;
?
? ? ? ? ? ? // 存儲切換圖片的下標(biāo)
? ? ? ? ? ? this.index = 0;
?
? ? ? ? ? ? // 判斷是否被撞擊
? ? ? ? ? ? this.down = false;
?
? ? ? ? ? ? // 切換頻率
? ? ? ? ? ? this.times = 0;
?
? ? ? ? ? ? // 繪制hero函數(shù)
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.heroPlane[this.index], this.x, this.y, this.width, this.height)
?
? ? ? ? ? ? }
?
? ? ? ? ? ? // 判斷飛機是否被撞擊以及被撞擊后的狀態(tài)改變
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? // 沒有被撞擊時飛機的狀態(tài)只會在hero1和hero2之間切換
? ? ? ? ? ? ? ? if (!this.down) {
? ? ? ? ? ? ? ? ? ? if (this.index == 0) {
? ? ? ? ? ? ? ? ? ? ? ? this.index = 1;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? this.index = 0;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 被撞擊后狀態(tài)的改變加上爆炸的樣子
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? this.index++;
? ? ? ? ? ? ? ? ? ? if (this.index == this.heroPlane.length) {
? ? ? ? ? ? ? ? ? ? ? ? // 游戲結(jié)束后飛機停留在冒煙狀態(tài)
? ? ? ? ? ? ? ? ? ? ? ? this.index = this.heroPlane.length - 1;
? ? ? ? ? ? ? ? ? ? ? ? heroParam.life--;
? ? ? ? ? ? ? ? ? ? ? ? if (heroParam.life <= 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? state = over;
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 還有生命值時重新開始游戲
? ? ? ? ? ? ? ? ? ? ? ? ? ? heroObj = new heroPaint(heroParam)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? ? ? this.shoot = function () {
? ? ? ? ? ? ? ? this.times++;
? ? ? ? ? ? ? ? if (this.times % 2 === 0) {
? ? ? ? ? ? ? ? ? ? // 飛機在就源源不斷地補充子彈
? ? ? ? ? ? ? ? ? ? bullets.push(new Bullet(bulletParam));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? }
?
? ? ? ? var heroObj = new heroPaint(heroParam);
?
? ? ? ? // 讓飛機跟著鼠標(biāo)動
? ? ? ? canvas.onmousemove = function (e) {
? ? ? ? ? ? if(state === pause){
? ? ? ? ? ? ? ? state = running;
? ? ? ? ? ? }
? ? ? ? ? ? if (state === running) {
? ? ? ? ? ? ? ? // 獲取鼠標(biāo)移動后的位置
? ? ? ? ? ? ? ? heroObj.x = e.offsetX - heroObj.width / 2;
? ? ? ? ? ? ? ? heroObj.y = e.offsetY - heroObj.height / 2;
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 子彈
? ? ? ? var bullet = new Image();
? ? ? ? bullet.src = 'img/bullet1.png';
? ? ? ? var bulletParam = {
? ? ? ? ? ? bullet: bullet,
? ? ? ? ? ? width: 9,
? ? ? ? ? ? height: 21
? ? ? ? }
? ? ? ? function Bullet(param) {
? ? ? ? ? ? this.bullet = param.bullet;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.x = heroObj.x + heroObj.width / 2 - this.width / 2;
? ? ? ? ? ? this.y = heroObj.y - this.height - 10;
?
? ? ? ? ? ? // 判斷是否被撞擊的標(biāo)志
? ? ? ? ? ? this.down = false;
? ? ? ? ? ? this.draw = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.bullet, this.x, this.y, this.width, this.height);
? ? ? ? ? ? }
?
? ? ? ? ? ? // 運動
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? this.y -= 25;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var bullets = [];
?
?
? ? ? ? // 繪制子彈
? ? ? ? function bulletsPaint() {
? ? ? ? ? ? for (var i = 0; i < bullets.length; i++) {
? ? ? ? ? ? ? ? bullets[i].draw();
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? function bulletsSport() {
? ? ? ? ? ? for (var i = 0; i < bullets.length; i++) {
? ? ? ? ? ? ? ? bullets[i].sport();
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 刪除子彈
? ? ? ? // 1. 子彈飛出屏幕外面
? ? ? ? // 2. 子彈敵機碰撞了
? ? ? ? function bulletsDelete() {
? ? ? ? ? ? for (var i = 0; i < bullets.length; i++) {
? ? ? ? ? ? ? ? if (bullets[i].y < -bullets[i].height || bullets[i].down) {
? ? ? ? ? ? ? ? ? ? bullets.splice(i, 1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 繪制敵機
? ? ? ? // 敵方小號飛機
? ? ? ? var enemy1Arr = ['img/enemy1.png', 'img/enemy1_down1.png', 'img/enemy1_down2.png', 'img/enemy1_down3.png',
? ? ? ? ? ? 'img/enemy1_down4.png'
? ? ? ? ];
? ? ? ? var enemy1Plane = [];
? ? ? ? for (var i = 0; i < enemy1Arr.length; i++) {
? ? ? ? ? ? enemy1Plane[i] = new Image();
? ? ? ? ? ? enemy1Plane[i].src = enemy1Arr[i];
? ? ? ? }
?
? ? ? ? // 小號飛機信息
? ? ? ? var enemy1 = {
? ? ? ? ? ? enemyPlane: enemy1Plane,
? ? ? ? ? ? width: 57,
? ? ? ? ? ? height: 51,
? ? ? ? ? ? life: 3
? ? ? ? }
? ? ? ? // 敵方中號飛機
? ? ? ? var enemy2Arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png',
? ? ? ? ? ? 'img/enemy2_down4.png'
? ? ? ? ];
? ? ? ? var enemy2Plane = [];
? ? ? ? for (var i = 0; i < enemy2Arr.length; i++) {
? ? ? ? ? ? enemy2Plane[i] = new Image();
? ? ? ? ? ? enemy2Plane[i].src = enemy2Arr[i];
? ? ? ? }
?
? ? ? ? // 中號飛機信息
? ? ? ? var enemy2 = {
? ? ? ? ? ? enemyPlane: enemy2Plane,
? ? ? ? ? ? width: 69,
? ? ? ? ? ? height: 95,
? ? ? ? ? ? life: 5
? ? ? ? }
? ? ? ? // 敵方大號飛機
? ? ? ? var enemy3Arr = ['img/enemy3_n1.png', 'img/enemy3_n2.png', 'img/enemy3_hit.png', 'img/enemy3_down1.png',
? ? ? ? ? ? 'img/enemy3_down2.png', 'img/enemy3_down3.png', 'img/enemy3_down4.png', 'img/enemy3_down5.png',
? ? ? ? ? ? 'img/enemy3_down6.png'
? ? ? ? ];
? ? ? ? var enemy3Plane = [];
? ? ? ? for (var i = 0; i < enemy3Arr.length; i++) {
? ? ? ? ? ? enemy3Plane[i] = new Image();
? ? ? ? ? ? enemy3Plane[i].src = enemy3Arr[i];
? ? ? ? }
?
? ? ? ? // 大號飛機信息
? ? ? ? var enemy3 = {
? ? ? ? ? ? enemyPlane: enemy3Plane,
? ? ? ? ? ? width: 169,
? ? ? ? ? ? height: 258,
? ? ? ? ? ? life: 10
? ? ? ? }
?
?
? ? ? ? // 敵機的構(gòu)造函數(shù)
? ? ? ? function Enemy(param) {
? ? ? ? ? ? this.enemyPlane = param.enemyPlane;
? ? ? ? ? ? this.width = param.width;
? ? ? ? ? ? this.height = param.height;
? ? ? ? ? ? this.life = param.life;
?
? ? ? ? ? ? this.x = Math.random() * (width - this.width);
? ? ? ? ? ? this.y = -this.height;
?
? ? ? ? ? ? this.index = 0;
? ? ? ? ? ? // 判斷敵機是否發(fā)生碰撞
? ? ? ? ? ? this.down = false;
? ? ? ? ? ? // 是否爆照完成
? ? ? ? ? ? this.bang = false;
?
? ? ? ? ? ? this.paint = function () {
? ? ? ? ? ? ? ? ctx.drawImage(this.enemyPlane[this.index], this.x, this.y, this.width, this.height);
? ? ? ? ? ? }
?
? ? ? ? ? ? this.sport = function () {
? ? ? ? ? ? ? ? if (!this.down) {
? ? ? ? ? ? ? ? ? ? // 當(dāng)前敵機未被碰撞時
? ? ? ? ? ? ? ? ? ? this.y += 5;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? this.index++;
? ? ? ? ? ? ? ? ? ? if (this.index === this.enemyPlane.length) {
? ? ? ? ? ? ? ? ? ? ? ? this.index = this.enemyPlane.length - 1;
? ? ? ? ? ? ? ? ? ? ? ? this.bang = true;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? ? ? // 判斷是否被碰撞
? ? ? ? ? ? this.hit = function (obj) {
? ? ? ? ? ? ? ? return obj.x + obj.width >= this.x && obj.x <= this.x + this.width &&
? ? ? ? ? ? ? ? ? ? obj.y <= this.y + this.height && obj.y + obj.height >= this.y;
? ? ? ? ? ? }
?
? ? ? ? }
? ? ? ? var enemies = [];
? ? ? ? var times = 0
?
? ? ? ? function pushEnemy() {
? ? ? ? ? ? times++;
? ? ? ? ? ? if (times % 10 == 0) {
? ? ? ? ? ? ? ? var random = Math.random();
? ? ? ? ? ? ? ? if (random < 0.5) {
? ? ? ? ? ? ? ? ? ? enemies.push(new Enemy(enemy1));
? ? ? ? ? ? ? ? } else if (random < 0.8) {
? ? ? ? ? ? ? ? ? ? // 中號飛機
? ? ? ? ? ? ? ? ? ? enemies.push(new Enemy(enemy2));
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 大號飛機
? ? ? ? ? ? ? ? ? ? enemies.push(new Enemy(enemy3));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? }
? ? ? ? // 繪制、運動飛機對象
? ? ? ? function enemyPaint() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? enemies[i].paint();
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function enemySport() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? enemies[i].sport();
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? function enemyDelete() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? if (enemies[i].y >= height || enemies[i].bang) {
? ? ? ? ? ? ? ? ? ? enemies.splice(i, 1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 如何檢測每一個敵機是否被（每一個子彈 hero）碰撞
? ? ? ? function checkHit() {
? ? ? ? ? ? for (var i = 0; i < enemies.length; i++) {
? ? ? ? ? ? ? ? // 子彈和敵機撞擊
? ? ? ? ? ? ? ? for (var j = 0; j < bullets.length; j++) {
? ? ? ? ? ? ? ? ? ? if (enemies[i].hit(bullets[j])) {
? ? ? ? ? ? ? ? ? ? ? ? bullets[j].down = true;
? ? ? ? ? ? ? ? ? ? ? ? enemies[i].life--;
? ? ? ? ? ? ? ? ? ? ? ? if (enemies[i].life == 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? enemies[i].down = true;
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(enemies[i].width == 169){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 10;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else if(enemies[i].width == 69){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 5;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 3;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 敵機和hero
? ? ? ? ? ? ? ? if (enemies[i].hit(heroObj)) {
? ? ? ? ? ? ? ? ? ? enemies[i].life -= heroObj.life;
? ? ? ? ? ? ? ? ? ? heroObj.down = true;
? ? ? ? ? ? ? ? ? ? if(enemies[i].life <= 0){
? ? ? ? ? ? ? ? ? ? ? ? enemies[i].down = true;
? ? ? ? ? ? ? ? ? ? ? ? if(enemies[i].width == 169){
? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 10;
? ? ? ? ? ? ? ? ? ? ? ? }else if(enemies[i].width == 69){
? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 5;
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? score += 3;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? // 游戲暫停畫面信息
? ? ? ? var pauseImg = new Image();
? ? ? ? pauseImg.src = 'img/game_pause_nor.png';
? ? ? ?
?
? ? ? ? function gameoverfn() {
? ? ? ? ? ? ctx.font = "50px bold"
? ? ? ? ? ? ctx.fillText("GAME OVER !!!", 80, 300);
? ? ? ? ? ? ctx.fillText("ONCE MORE !!!", 80, 400);
? ? ? ? };
?
? ? ? ? // 分數(shù)和生命值
? ? ? ? var score = 0;
? ? ? ? // 繪制分數(shù)和生命值
? ? ? ? function scoreText() {
? ? ? ? ? ? ctx.font = "30px bold"
? ? ? ? ? ? ctx.strokeText(`Score:${score}`, 10, 30)
? ? ? ? ? ? ctx.fillText("life:" + heroParam.life, 300, 30);
? ? ? ? };
?
?
? ? ? ? // 在定時器中繪制每一幀的圖像
? ? ? ? var timer = setInterval(function () {
? ? ? ? ? ? // 調(diào)用背景圖片繪制函數(shù)繪制
? ? ? ? ? ? bgObj.draw()
? ? ? ? ? ? bgObj.scroll()
?
? ? ? ? ? ? // 判斷游戲狀態(tài),state為ready時繪制logo圖形
? ? ? ? ? ? switch (state) {
? ? ? ? ? ? ? ? case ready:
? ? ? ? ? ? ? ? ? ? logoObj.draw();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case loading:
? ? ? ? ? ? ? ? ? ? loadingObj.draw();
? ? ? ? ? ? ? ? ? ? loadingObj.sport();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case running:
? ? ? ? ? ? ? ? ? ? heroObj.draw();
? ? ? ? ? ? ? ? ? ? heroObj.sport();
? ? ? ? ? ? ? ? ? ? heroObj.shoot();
?
? ? ? ? ? ? ? ? ? ? // 繪制子彈
? ? ? ? ? ? ? ? ? ? bulletsPaint();
? ? ? ? ? ? ? ? ? ? bulletsSport();
? ? ? ? ? ? ? ? ? ? bulletsDelete();
?
? ? ? ? ? ? ? ? ? ? // 繪制敵機
? ? ? ? ? ? ? ? ? ? pushEnemy();
? ? ? ? ? ? ? ? ? ? enemyPaint();
? ? ? ? ? ? ? ? ? ? enemySport();
?
? ? ? ? ? ? ? ? ? ? checkHit();
? ? ? ? ? ? ? ? ? ? enemyDelete();
? ? ? ? ? ? ? ? ? ? scoreText();
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case pause:
? ? ? ? ? ? ? ? ? ? ctx.drawImage(pauseImg, 210, 376, 60, 45);
? ? ? ? ? ? ? ? ? ? heroObj.draw();0
? ? ? ? ? ? ? ? ? ? heroObj.shoot();
?
? ? ? ? ? ? ? ? ? ? // 繪制子彈
? ? ? ? ? ? ? ? ? ? bulletsPaint();
? ? ? ? ? ? ? ? ? ? bulletsDelete();
?
? ? ? ? ? ? ? ? ? ? // 繪制敵機
? ? ? ? ? ? ? ? ? ? enemyPaint();
? ? ? ? ? ? ? ? ? ? scoreText()
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case over:
? ? ? ? ? ? ? ? ? ? heroObj.draw();
? ? ? ? ? ? ? ? ? ? gameoverfn();
? ? ? ? ? ? ? ? ? ? scoreText();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
?
? ? ? ? }, 60)
? ? </script>
?
</body>
?
</html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項卡效果
這篇文章主要介紹了js實現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項卡效果,涉及javascript鼠標(biāo)事件及頁面元素遍歷調(diào)用的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
layui select動態(tài)添加option的實例
下面小編就為大家分享一篇layui select動態(tài)添加option的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
JavaScript實現(xiàn)六種網(wǎng)頁圖片輪播效果詳解
在網(wǎng)頁中，我們經(jīng)常會看到各種輪播圖的效果，它們到底是怎樣實現(xiàn)的呢？本文將為大家詳細介紹一下六種不同的輪播效果的實現(xiàn)，需要的可以參考一下2021-12-12
淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題
下面小編就為大家?guī)硪黄獪\談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了如何在頁面中可以簡單的測試一些簡單的JavaScript語句,需要的朋友可以參考下2010-04-04
javascript之鎖定表格欄位...2007-06-06
JavaScript 保存數(shù)組到Cookie的代碼
大部分的瀏覽器一個網(wǎng)站只支持保存20個Cookie，超過20個Cookie，舊的Cookie會被最新的Cookie代替。那么如果要有超過20個Cookie要保存只能將Cookie存為數(shù)組然后保存到Cookie。2010-04-04
JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
網(wǎng)頁中的ajax請求越來越多，或者應(yīng)用開始就一直使用ajax與后端進行數(shù)據(jù)交換,本文將詳細介紹，需要的朋友可以參考下2012-12-12
這篇文章主要為大家詳細介紹了Javascript中的作用域，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10