<!DOCTYPE html><html><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 { display: block; margin: 0 auto; border: 1px solid #000; } </style></head><body> <canvas></canvas> <script> // 获取 canvas元素 var canvas = document.getElementsByTagName('canvas')[0]; // 获取画笔 var ctx = canvas.getContext('2d'); // 画布信息 var canvasParam = { width: 480, height: 852 } canvas.width = canvasParam.width; canvas.height = canvasParam.height; // 初始化游戏状态 var ready = 0; // 准备中 var loading = 1; // 载入中 var running = 2; // 游戏中 var pause = 3; // 暂停 var gameOver = 4; // 结束 // 判断当前游戏状态 var gameState = ready; // 初始化生命值 var life = 3; // 初始化游戏得分 var score = 0; // 背景 / // 创建背景图片 var bgSrc = new Image(); bgSrc.src = 'img/background.png'; // 背景图片信息 var bgParam = { bgSrc: bgSrc, x: 0, y: 0, width: 480, height: 852 } // 构造函数: 背景 function Bg(param) { this.bgSrc = param.bgSrc; this.x = param.x; this.y = param.y; this.y1 = param.y1; this.width = param.width; this.height = param.height; // 交替图片的坐标 this.y1 = -this.height; // 绘制背景图 this.paint = function() { ctx.drawImage(this.bgSrc, this.x, this.y, this.width, this.height); ctx.drawImage(this.bgSrc, this.x, this.y1, this.width, this.height); } // 背景图片交替移动 this.sport = function() { this.y += 5; this.y1 += 5; if (this.y >= this.height) { this.y = -this.height; } if (this.y1 >= this.height) { this.y1 = -this.height; } } } // 实例化背景图片 var bgObj = new Bg(bgParam); // 创建logo var logoSrc = new Image(); logoSrc.src = 'img/start.png'; // logo信息 var logoParam = { logoSrc: logoSrc, x: 0, y: 0, width: 480, height: 852 } // 构造函数 Logo function Logo(param) { this.logoSrc = param.logoSrc; this.x = param.x; this.y = param.y; this.width = param.width; this.height = param.height; // 绘制logo this.paint = function() { ctx.drawImage(this.logoObj, this.x, this.y, this.width, this.height); } } // 实例化logo对象 var logoObj = new Logo(logoParam); // 点击画布，进入下一阶段 loading canvas.onclick = function() { if (gameState === ready) { gameState = loading; } } // 游戏加载阶段 loading // 飞机进场 // 飞机进场图片 var loadImgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png', 'img/game_loading4.png'] // 一个空数组，用来存放飞机进场的图片 var loadingImg = []; // 循环创建飞机进场图片，将其存入数组loadingImg中 for (var i = 0; i < loadImgArr.length; i++) { loadingImg[i] = new Image(); loadingImg[i].src = loadImgArr[i]; } // 飞机进场图片信息 var loadingParam = { loadingImg: loadingImg, x: 0, width: 186, height: 38 } // 构造函数：飞机进场信息 function Loading(param) { this.loadingImg = loadingImg; this.width = param.width; this.height = param.height; this.x = param.x; this.y = canvasParam.height - param.height; // 定义载入中图片下标 this.index = 0; // 定义 num 判断定时器的执行次数 this.num = 0; // 绘制载入中图片 this.paint = function() { ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height); } // 改变载入中图片 this.sport = function() { this.num++; if (this.num % 5 == 0) { this.index++; if (this.index === this.loadingImg.length) { gameState = running; } } } } // 实例化 载入中飞机对象 var loadingObj = new Loading(loadingParam); // 我方飞机 /// // 我方飞机各个状态的图片 var heroImgs = [ 'img/hero1.png', 'img/hero2.png', 'img/hero1.png', 'img/hero_blowup_n1.png', 'img/hero_blowup_n2.png', 'img/hero_blowup_n3.png', 'img/hero_blowup_n4.png' ] // 创建一个空数组，存放我方飞机各个状态的图片 var heroRunning = []; // 循环创建我方飞机图片，存入数组heroRunning中 for (var i = 0; i < heroImgs.length; i++) { heroRunning[i] = new Image(); heroRunning[i].src = heroImgs[i]; } // 我方飞机信息 var heroParam = { haroRunning: heroRunning, width: 99, height: 124 } // 我方飞机 构造函数 function Hero(param) { this.heroRunning = heroRunning; this.x = canvasParam.width / 2 - param.width / 2; this.y = canvasParam.height - param.height * 1.2; this.width = param.width; this.height = param.height; // 我方飞机图片下标 this.index = 0; // 判断飞机是否被撞击 this.down = false; // 间隔触发 this.num = 0; // 绘制我方飞机 this.paint = function() { ctx.drawImage(this.heroRunning[this.index], this.x, this.y, this.width, this.height); } // 交替绘制我方飞机执行时的图片 this.sport = function() { if (!this.down) { this.num++; // 定时器每执行3次，我方飞机飞行图片交替一次 if (this.num % 3 === 0) { if (this.index === 0) { this.index = 1; } else { this.index = 0; } } } else { // 我方飞机被撞击了 this.index++; // 图片数组下标+1，显示被撞击的图片 if (this.index === this.heroRunning.length) { life--; // 生命值-1 if (life == 0) { // 游戏状态变为 结束 gamerState = gameOver; // 游戏结束之后 让飞机停留在冒烟状态 this.index = this.heroRunning.length - 1; } else { // 创建一个新的我方飞机 heroObj = new Hero(heroParam); } } } } // 创建子弹间隔 this.bulletTime = 0; // 创建子弹 this.newBullet = function() { this.bulletTime++; // 定时器执行3次，创建一个子弹 if (this.bulletTime % 2 === 0) { bullets.push(new Bullet(bulletParam)); } } } // 实例化 我方飞机 var heroObj = new Hero(heroParam); // 给画布绑定移动事件我方飞机随鼠标移动 canvas.onmousemove = function(e) { if (gameState === running) { heroObj.x = e.offsetX - heroObj.width / 2; heroObj.y = e.offsetY - heroObj.height / 2; } } // 子弹 // var bulletImg = new Image(); bulletImg.src = 'img/bullet1.png'; var bulletParam = { bulletImg: bulletImg, width: 9, height: 21 } // 构造函数：子弹 function Bullet(param) { this.bulletImg = param.bulletImg; this.x = heroObj.x + heroObj.width / 2 - param.width / 2; this.y = heroObj.y - param.height; this.width = param.width; this.height = param.height; // 绘制子弹 this.paint = function() { ctx.drawImage(this.bulletImg, this.x, this.y, this.width, this.height); } // 判断子弹是否碰到敌机 this.down = false; // 子弹移动速度 this.sport = function() { this.y -= 50; } } // 弹夹 var bullets = []; // 制造子弹 function bulletsPaint() { for (var i = 0; i < bullets.length; i++) { bullets[i].paint(); } } // 发射子弹 function bulletsSport() { for (var i = 0; i < bullets.length; i++) { bullets[i].sport(); } } // 子弹飞出屏幕外面 // 子弹与敌机碰撞 function bulletsDelete() { for (var i = 0; i < bullets.length; i++) { if (bullets[i].y < -this.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 enemy1Img = []; for (var i = 0; i < enemy1Arr.length; i++) { enemy1Img[i] = new Image(); enemy1Img[i].src = enemy1Arr[i]; } // 中型敌机 var enemy2Arr = [ 'img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png', 'img/enemy2_down4.png' ]; var enemy2Img = []; for (var i = 0; i < enemy2Arr.length; i++) { enemy2Img[i] = new Image(); enemy2Img[i].src = enemy2Arr[i]; } // 大型敌机 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 enemy3Img = []; for (var i = 0; i < enemy3Arr.length; i++) { enemy3Img[i] = new Image(); enemy3Img[i].src = enemy3Arr[i]; } // 小型敌机信息 var enemy1Param = { enemyImg: enemy1Img, width: 57, height: 51, life: 3, score: 1 } // 中型敌机信息 var enemy2Param = { enemyImg: enemy2Img, width: 69, height: 95, life: 10, score: 3 } // 大型敌机信息 var enemy3Param = { enemyImg: enemy3Img, width: 169, height: 258, life: 20, score: 10 } // 构造函数：敌机 function Enemy(param) { this.enemyImg = param.enemyImg; this.width = param.width; this.height = param.height; this.life = param.life; this.score = param.score; this.x = Math.random() * (canvasParam.width - this.width); this.y = -this.height; // 图片下标 this.index = 0; // 判断敌机是否发生碰撞 this.down = false; // 是否完成爆炸 this.bang = false; // 绘制敌机 this.paint = function() { ctx.drawImage(this.enemyImg[this.index], this.x, this.y, this.width, this.height); } // 敌机移动 this.sport = function() { if (!this.down) { // 当前敌机未被碰撞时 this.y += 3; } else { // 敌机碰后生命值-1 this.life--; // 生命值-1后，碰撞变为false this.down = false; // 生命值变为0时，变为敌机爆炸图片 if (this.life <= 0) { this.index++; this.down = true; if (this.index === this.enemyImg.length) { this.index = this.enemyImg.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 = []; // 随机创建小型、中型、大型敌机 function pushEnemy() { var random = Math.random(); if (random < 0.65) { enemies.push(new Enemy(enemy1Param)); } else if (random < 0.9) { // 中号飞机 enemies.push(new Enemy(enemy2Param)); } else { // 大号飞机 enemies.push(new Enemy(enemy3Param)); } } // 绘制、运动敌机对象 function enemyPaint() { for (var i = 0; i < enemies.length; i++) { enemies[i].paint(); enemies[i].sport(); } } // 绘制暂停时的敌机 function enemyPaint1() { for (var i = 0; i < enemies.length; i++) { enemies[i].paint(); } } // 删除敌机 和增加分数 function enemyDelete() { for (var i = 0; i < enemies.length; i++) { if (enemies[i].bang) { score += enemies[i].score; } if (enemies[i].y >= canvasParam.height || enemies[i].bang) { enemies.splice(i, 1); // score += enemies[i].score; } } } // 如何检测每一个敌机是否被 子弹或我方飞机 碰撞 function checkHit() { for (var i = 0; i < enemies.length; i++) { // 子弹和敌机撞击 for (var j = 0; j < bullets.length; j++) { if (enemies[i].hit(bullets[j])) { enemies[i].down = true; bullets[j].down = true; } } // 敌机和hero if (enemies[i].hit(heroObj)) { enemies[i].down = true; heroObj.down = true; } } } // 分数 function scoreText() { ctx.font = '20px bold'; ctx.fillText('得分: ' + score, 20, 30); ctx.fillText('生命值：' + life, 360, 30) } // 鼠标移出游戏暂停 canvas.onmouseout = function() { if (gameState === running) { gameState = pause; } }; // 鼠标移入游戏开始 canvas.onmouseover = function() { if (gameState === pause) { gameState = running; } }; // 游戏暂停界面 function pausePanit() { var pauseImg = new Image() pauseImg.src = "img/game_pause_nor.png"; heroObj.paint(); // 绘制子弹 bulletsPaint(); // 绘制敌机 enemyPaint1(); scoreText(); ctx.drawImage(pauseImg, 220, 420); } // 游戏结束 function gameOverText() { ctx.font = '50px bold'; ctx.fillText('game over', 120, 420); ctx.font = '30px bold'; ctx.fillText('点击重新开始', 160, 520); } // 点击事件，重新开始游戏 canvas.addEventListener("click", function(e) { if (gameState === gameOver) { gameState = ready; loadingObj.num = 0; loadingObj.index = 0; enemies = []; bullets = []; life = 3; score = 0; heroObj.down = false; } }); // 创建敌机的时间间隔 var enemyNum = 0; // 开启定时器， 绘制图片 setInterval(function() { bgObj.paint(); bgObj.sport(); if (gameState === ready) { ctx.drawImage(logoSrc, 0, 0, 480, 852); // logoObj.paint(); } else if (gameState === loading) { loadingObj.paint(); loadingObj.sport(); } else if (gameState === running) { canvas.style.cursor = 'none'; heroObj.paint(); heroObj.sport(); heroObj.newBullet(); // 绘制子弹 bulletsPaint(); bulletsSport(); // 删除子弹 bulletsDelete(); // 绘制敌机 enemyNum++; if (enemyNum % 20 === 0) { pushEnemy(); } enemyPaint(); checkHit(); enemyDelete(); scoreText(); if (life === 0) { gameState = gameOver; } } else if (gameState === pause) { pausePanit(); } else if (gameState === gameOver) { canvas.style.cursor = 'pointer'; gameOverText(); heroObj.paint(); } }, 60) </script></body></html>
