<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
canvas {
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="canvas" height="700px" width="400">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var game = canvas.getContext("2d");
//定义游戏状态
// 第一阶段：游戏欢迎状态 0
// 第二阶段：游戏加载状态 1
// 第三阶段：游戏运行状态 2
// 第四阶段：游戏暂停阶段 3
// 第五阶段：游戏结束阶段 4
const START = 0,
LOADING = 1,
RUNNING = 2,
PASUE = 3,
GAMEOVER = 4;
var score = 0; //游戏得分
var life = 10; //我的生命值
var start_up = START; //游戏开关
//加载游戏背景
var w = 400,
h = 700;
//第一阶段开始：游戏欢迎阶段
var Img = new Image();
Img.src = "../images/06.png";
//定义游戏背景
var obj = {
height: 771,
width: 400,
imgs: Img,
}
//定义背景对象的构造器
function Bg(ppt) {
this.imgs = ppt.imgs;
this.width = ppt.width;
this.height = ppt.height
this.x1 = 0;
this.x2 = 0;
this.y1 = 0;
this.y2 = -this.height
this.draw = function() {
game.drawImage(ppt.imgs, this.x1, this.y1);
game.drawImage(ppt.imgs, this.x2, this.y2);
}
this.sport = function() {
this.y1++;
this.y2++;
if (this.y1 == this.height) {
this.y1 = -(this.height)
}
if (this.y2 == this.height) {
this.y2 = -this.height;
}
}
}
var _bg = new Bg(obj);
var logo = new Image();
logo.src = "../images/07.png"
// 第二阶段开始
var lodings = [];
lodings[0] = new Image();
lodings[0].src = "../images/12.png";
lodings[1] = new Image();
lodings[1].src = "../images/13.png";
lodings[2] = new Image();
lodings[2].src = "../images/14.png";
lodings[3] = new Image();
lodings[3].src = "../images/15.png";
var enter = {
imgs: lodings,
width: 196,
height: 176,
length: lodings.length
}
function ENTER(ppd) {
this.startIndex = 0;
this.paint = function() {
game.drawImage(ppd.imgs[this.startIndex], (w - ppd.width) / 2, (h - ppd.height) / 2);
}
//定义速度
this.time = 0;
//定义动画
this.step = function() {
this.time++
if (this.time % 25 == 0) {
this.startIndex++;
}
if (this.startIndex == ppd.length) {
start_up = RUNNING;
}
}
}
var loding = new ENTER(enter);
// 第三阶段游戏运行阶段
//我方飞机数据
var plane = [];
plane[0] = new Image();
plane[0].src = "../images/2.png";
plane[1] = new Image();
plane[1].src = "../images/boom1.png";
plane[2] = new Image();
plane[2].src = "../images/boom2.png";
plane[3] = new Image();
plane[3].src = "../images/boom3.png";
plane[4] = new Image();
plane[4].src = "../images/boom4.png";
var PLANE = {
imgs: plane,
length: plane.length,
width: 84,
height: 104,
frame: 2
}
function PLANES(pdd) {
this.width = pdd.width;
this.length = pdd.length;
this.height = pdd.height;
this.x = (w - pdd.width) / 2 // 定义我方飞机的位置
this.y = h - pdd.height;
this.frame = pdd.frame;
this.imgs = pdd.imgs;
this.down = false; //用来判断飞机是否被撞击
this.candel = false; // 定义飞机是否爆破完成,表示飞机还没有完全爆炸
this.startIndex = 0;
this.paint = function() {
game.drawImage(this.imgs[this.startIndex], this.x, this.y);
}
this.step = function() {
// 我方飞机的运动状态:（所以在此处要判断状态）
// 1.正常状态
// 2.爆破状态
if (!this.down) {
this.startIndex = 0;
} else { //被撞击了
this.startIndex++;
this.LIFE = 0;
if (this.startIndex == this.length) {
this.LIET++;
if (this.LIFE % 6 == 0) {
//生命减少了
life--;
if (life == 0) {
start_up = GAMEOVER;
//虽然游戏结束了但是还停留在最后一张图的状态
this.startIndex = this.length - 1;
} else {
PLANES1 = new PLANES(PLANE);
}
}
}
}
}
// 定义我方飞机碰撞的方法
this.bang = function() {
this.down = true;
}
// 增加我方飞机射击的方法
//定义射击速度初始值为0
this.time = 0;
this.shoot = function() {
this.time++;
if (this.time % 7 == 0) {
bullets.push(new BULLETS(BULLET));
}
}
}
//3.1.4创建我方飞机的对象实例
var PLANES1 = new PLANES(PLANE);
//飞机移动事件
canvas.onmousemove = function(event) {
if (start_up == RUNNING) {
var x = event.offsetX;
var y = event.offsetY;
PLANES1.x = x - PLANES1.width / 2;
PLANES1.y = y - PLANES1.height / 2;
}
}
//制作子弹
var bullet = new Image();
bullet.src = "../images/011.png";
var BULLET = {
imgs: bullet,
width: 127,
height: 127
}
//创建子弹的构造器
function BULLETS(pdd) {
this.imgs = pdd.imgs;
this.width = pdd.width;
this.height = pdd.height;
//子弹绘制的坐标
this.x = PLANES1.x + PLANES1.width * 0.5 - this.width * 0.5;
this.y = PLANES1.y * 1.1 - this.height * 1.1;
this.paint = function() {
game.drawImage(this.imgs, this.x, this.y);
game.drawImage(this.imgs, this.x + 40, this.y + 20);
game.drawImage(this.imgs, this.x - 40, this.y + 20);
}
this.step = function() {
this.y -= 10;
}
// 定义子弹碰撞属性 ，false表示没有碰撞
this.candel = false;
this.bang = function() {
this.candel = true;
}
}
//创建存储子弹的数组
var bullets = [];
// 3.2.5 创建函数,用于绘制所有子弹
function bulletpaint() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint();
}
}
// 3.2.6 创建函数,用于控制所有子弹运动
function bulletsStep() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].step();
}
}
// 3.2.7 当子弹移动到画布之外时,删除该子弹
function bulletsDel() {
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].y < -bullets[i].height) {
bullets.splice(i, 1);
}
}
}
//制作敌方飞机，(三种)
var enemy1 = [];
enemy1[0] = new Image();
enemy1[0].src = "../images/enemy1.png";
enemy1[1] = new Image();
enemy1[1].src = "../images/enemy1_down1.png";
enemy1[2] = new Image();
enemy1[2].src = "../images/enemy1_down2.png";
enemy1[3] = new Image();
enemy1[3].src = "../images/enemy1_down3.png";
enemy1[4] = new Image();
enemy1[4].src = "../images/enemy1_down4.png";
var enemy1s = {
imgs: enemy1,
width: 57,
height: 51,
length: enemy1.length,
type: 1,
frame: 1,
life: 50,
score: 1
}
//第二种飞机
var enemy2 = [];
enemy2[0] = new Image();
enemy2[0].src = "../images/enemy2.png";
enemy2[1] = new Image();
enemy2[1].src = "../images/enemy2_down1.png";
enemy2[2] = new Image();
enemy2[2].src = "../images/enemy2_down2.png";
enemy2[3] = new Image();
enemy2[3].src = "../images/enemy2_down3.png";
enemy2[4] = new Image();
enemy2[4].src = "../images/enemy2_down4.png";
var enemy2s = {
imgs: enemy2,
width: 69,
height: 95,
length: enemy2.length,
type: 2,
frame: 1,
life: 200,
score: 5
}
//第三种飞机
var enemy3 = [];
enemy3[0] = new Image();
enemy3[0].src = "../images/enemy3_hit.png";
enemy3[1] = new Image();
enemy3[1].src = "../images/enemy3_n1.png";
enemy3[2] = new Image();
enemy3[2].src = "../images/enemy3_n2.png";
enemy3[3] = new Image();
enemy3[3].src = "../images/enemy3_down1.png";
enemy3[4] = new Image();
enemy3[4].src = "../images/enemy3_down2.png";
enemy3[5] = new Image();
enemy3[5].src = "../images/enemy3_down3.png";
enemy3[6] = new Image();
enemy3[6].src = "../images/enemy3_down4.png";
var enemy3s = {
imgs: enemy3,
width: 169,
height: 260,
length: enemy3.length,
type: 3,
frame: 2,
life: 300,
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() * (w - this.width);
this.y = -this.height;
// 定义数组角标
this.startIndex = 0;
// 新增属性 - 表示当前绘制的图片
//this.img = this.imgs[this.startIndex];
// 新增状态 - 表示敌机是否被撞击
this.down = false;
// 新增状态 - 表示敌机是否被删除
this.candel = false;
this.paint = function() {
game.drawImage(this.imgs[this.startIndex], this.x, this.y);
}
this.step = function() {
if (!this.down) {
/*
* 小、中飞机(1) - 角标为0
* 大飞机(2) - 角标在0和1之间切换
*/
this.startIndex++;
this.startIndex = this.startIndex % this.frame;
this.y += 2;
} else {
// 爆破
/*
* 小和中飞机 - 1
* 大飞机 - 2
*/
// 问题 - 刚进入爆破,只能执行一次
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.LIET = 0;
this.LIET++;
if (this.LIET % 1 == 0) {
console.log(123);
this.life--;
if (this.life == 0) {
this.down = true;
score += this.score;
}
}
}
}
// 3.3.4创建数组存放敌方飞机
var enemise = [];
// 3.3.5创建函数，往数组中添加数据
function enterEnemise() {
var rand = Math.floor(Math.random() * 100)
if (rand < 10) {
enemise.push(new Enemy(enemy1s));
} else if (rand < 55 && rand > 50) {
enemise.push(new Enemy(enemy2s));
} else if (rand == 88) {
//添加大飞机
//大飞机尤其只有一个
//并且把大飞机放在数组的第一位
if (enemise[0].type != 3 && enemise.length > 0) {
enemise.splice(0, 0, new Enemy(enemy3s));
}
}
}
//函数绘制敌方飞机(因为敌方飞机在数组中，所以要循环遍历画出)
function enemyPaint() {
for (var i = 0; i < enemise.length; i++) {
enemise[i].paint();
}
}
// 3.3.7创建函数敌方飞机的运动
function enemyStep() {
for (var i = 0; i < enemise.length; i++) {
enemise[i].step();
}
}
// 3.3.8创建函数删除敌方飞机
function delenemy() {
for (var i = 0; i < enemise.length; i++) {
// console.log(enemise[i].candel)
if (enemise[i].y > h || enemise[i].candel) {
enemise.splice(i, 1)
// arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述
// index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
// howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
// item1, ..., itemX 可选。向数组添加的新项目。
}
}
}
// 3.3.9绘制碰撞以后的函数
// (在上面3.3.3敌方飞机的对象中定义了一个检测{我方飞机wo}是否碰撞的方法)
// (那个wo作为形参)(那么下面的hero作为我方飞机的实参传进去)(子弹的数组中的元素对象{bullets[j]}作为实参传进去)
function hitEnemise() {
for (var i = 0; i < enemise.length; i++) {
// 如果我方飞机撞到了敌方飞机以后
if (enemise[i].checkHit(PLANES1)) {
// 处理敌方飞机碰撞以后的逻辑
enemise[i].bang();
// 处理我方飞机碰撞以后的逻辑
PLANES1.bang()
}
// 子弹如果碰到敌方飞机以后
for (var j = 0; j < bullets.length; j++) {
if (enemise[i].checkHit(bullets[j])) {
enemise[i].bang();
// 子弹的碰撞逻辑
bullets[j].bang();
}
}
}
}
// 3.4绘制分数和生命值
function scoreText() {
game.font = "bold 24px 微软雅黑"
game.fillText("score:" + score, 10, 30)
game.fillText("life:" + life, 300, 30)
// game.fillText("fill",red);
var ziti = game.createLinearGradient(150, 0, 0, 150)
// 2.设置渐变颜色及偏移度
ziti.addColorStop(0, "blue");
ziti.addColorStop(0.5, "pink");
ziti.addColorStop(1, "red");
game.fillStyle = ziti;
}
//游戏第四阶段游戏暂停
canvas.onmouseout = function(event) {
if (start_up == RUNNING) {
start_up = PASUE;
//创建暂停
}
}
canvas.onmouseover = function(event) {
if (start_up == PASUE) {
start_up = RUNNING;
}
}
var pauseimg = new Image();
pauseimg.src = "../images/16.png";
var suspend = {
imgs: pauseimg,
width: 187,
height: 107
}
//绘制GAMEOVER文本
function paintGO() {
game.font = "bold 48px 微软雅黑";
game.fillText("GAME OVER", (h / 2 * 0.15), (w / 2 * 1.6));
var ziti = game.createLinearGradient(150, 0, 0, 150)
// 2.设置渐变颜色及偏移度
ziti.addColorStop(0, "blue");
ziti.addColorStop(0.5, "pink");
ziti.addColorStop(1, "red");
game.fillStyle = ziti;
}
//创建暂停构造器
function SUSPEND(pdd) {
this.width = pdd.width;
this.height = pdd.height;
this.imgs = pdd.imgs;
this.paint = function() {
game.drawImage(pdd.imgs, (w - pdd.width * 1.5), (h - pdd.height) / 2);
}
}
var SUSPEND = new SUSPEND(suspend);
//游戏重新启动
var imgS = new Image();
imgS.src = "../images/17.png";
imgS.onclick = function() {
console.log(999)
}
canvas.addEventListener("click",function(e=e||window.e){
console.log(e.offsetX,e.offsetY);
if(start_up === START){
if(e.offsetX>137 && e.offsetX <261 && e.offsetY >304 && e.offsetY<334){
start_up = LOADING;
}
}
if(start_up === GAMEOVER){
if(e.offsetX>137 && e.offsetX <205 && e.offsetY >356 && e.offsetY<438){
start_up = LOADING;
// window.go(0);
score = 0; //游戏得分
life = 10;
}
}
})
//定义游戏核心控制器
setInterval(function() {
_bg.draw();
_bg.sport();
if (start_up == START) {
game.drawImage(logo, 125, 300)
} else if (start_up == LOADING) {
loding.paint();
loding.step();
} else if (start_up == RUNNING) {
PLANES1.paint();
PLANES1.step();
PLANES1.shoot();
bulletpaint();
bulletsStep();
bulletsDel();
//创建敌方飞机
enterEnemise()
//绘制敌方飞机
enemyPaint();
//绘制敌方飞机的运动
enemyStep();
//删除敌方飞机
delenemy();
//判断是否撞击
hitEnemise();
//绘制分数和生命值
scoreText()
} else if (start_up == PASUE) {
PLANES1.paint();
bulletpaint();
enemyPaint();
PLANES1.shoot();
SUSPEND.paint();
} else if (start_up == GAMEOVER) {
PLANES1.paint();
bulletpaint();
enemyPaint();
paintGO();
scoreText();
game.drawImage(imgS, 125, 350);
loding.startIndex = 0;
}
}, 20)
</script>
</body>
</html>
09-15
285
285
06-27
03-09
536
536
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
