飞机大战

Posted 2021-03-20 zhanghaifeng123

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d");
var START = 0;
var LOADING = 1;
var RUNNING = 2;
var PAUSE = 3;
var GAMEOVER = 4;
// 起始得分
var score = 0;
// 生命值
var life = 3;
// 游戏状态
var State = 0;
var Height = 650;
var Width = 480;

// 游戏开始状态
var bg = new Image()
bg.src = "images/background.png";
var obj = {
img: bg,
width: 480,
height: 852
}

function Fun(config) {
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = -config.height;

this.paint = function() {
context.drawImage(config.img, this.x1, this.y1)
context.drawImage(config.img, this.x2, this.y2)
}
this.step = function() {
this.y1++;
this.y2++;
if (this.y1 == config.height) {
this.y1 = -config.height;
}
if (this.y2 == config.height) {
this.y2 = -config.height;
}
}

}
var fun = new Fun(obj)
var logo = new Image()
logo.src = "images/start.png";

//游戏加载阶段

// arr[0] = new Image();
// arr[0].src = "images/game_loading1.png";
// arr[1] = new Image();
// arr[1].src = "images/game_loading2.png";
// arr[2] = new Image();
// arr[2].src = "images/game_loading3.png";
// arr[3] = new Image();
// arr[3].src = "images/game_loading4.png";
for (var i = 0, arr = []; i < 3; i++) {
arr[i] = new Image();
arr[i].src = "images/game_loading" + (i + 1) + ".png";
arr.push(arr[i])
}
// console.log(arr)
var load = {
img: arr,
width: 186,
height: 38,
length: arr.length
}

function Load(config) {
this.index = 0;
this.img = config.img;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.paint = function() {
context.drawImage(this.img[this.index], (Width - this.width) / 2, (Height - this.height))
}
// 定义四张加载时的图片的加载速度
var time = 0;
this.step = function() {
time++;
if (time % 3 == 0) {
this.index++;
}
if (this.index == config.length) {
State = RUNNING;
}
}
}
var loading = new Load(load)

// 3.游戏运行状态
for (var j = 0, arr = []; j < 5; j++) {
arr[j] = new Image();
arr[j].src = "images/hero" + (j + 1) + ".png";
arr.push(arr[j])
}
// console.log(arr)
var run = {
img: arr,
width: 99,
height: 124,
length: arr.length
}

function Run(config) {
this.img = config.img;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.index = 0;
this.x = (Width - config.width) / 2;
this.y = Height - config.height;
this.down = false;
this.cancel = false;
this.paint = function() {
context.drawImage(this.img[this.index], this.x, this.y)
}
this.step = function() {
if (!this.down) {
if (this.index == 0) {
this.index = 1
} else {
this.index = 0;
}
} else {
this.index++;
if (this.index == config.length) {

life--;
if (life == 0) {
State = GAMEOVER;
this.index = this.length - 1;
} else {
running = new Run(run)
}
}
}
}
// 子弹射击
this.time = 0
this.shoot = function() {
this.time++
if (this.time % 5 == 0) {
bullets.push(new Bul(bul))
}
}
this.bang = function() {
this.down = true;
}
}
var running = new Run(run);
canvas.onmousemove = function(event) {
if (State == RUNNING) {
var x = event.offsetX;
var y = event.offsetY;
// console.log(x, y)
running.x = x - run.width / 2
running.y = y - run.height / 2
// console.log(running.x, running.y)
}
}

var bullet = new Image()
bullet.src = "images/bullet1.png";
var bul = {
img: bullet,
width: 9,
height: 21
}

function Bul(config) {
this.down = false;
this.img = config.img;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.cancel = false
this.x = running.x + run.width / 2 - config.width / 2;
this.x = running.x + run.width / 6
this.y = running.y - config.height / 2;
this.x1 = running.x + run.width / 4 * 3
this.y1 = running.y - config.height / 2;
this.paint = function() {
context.drawImage(config.img, this.x, this.y)
context.drawImage(config.img, this.x1, this.y1)

}
this.step = function() {
this.y -= 10;
this.y1 -= 10;
}
this.bang = function() {
this.cancel = true;
}
}

var bullets = [];

function bulletpaint() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint()
}
}

function bulletStep() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].step()
}
}

function bulletDel() {
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].y < -bullets[i].height) {
bullets.splice(i, 1)
}
}
}

 

// 小飞机图片
for (var i = 0, arr = []; i < 4; i++) {
arr[i] = new Image()
arr[i].src = "images/enemy" + (i + 1) + ".png"
arr.push(arr[i])
}
// console.log(arr)
var senemy = {
img: arr,
width: 57,
height: 51,
score: 1,
length: arr.length,
type: 1,
frame: 1,
life: 8,
}

for (var i = 0, arr1 = []; i < 4; i++) {
arr1[i] = new Image()
arr1[i].src = "images/enemys" + (i + 1) + ".png"
arr1.push(arr1[i])
}
// console.log(arr1)
var menemy = {
img: arr1,
width: 69,
height: 95,
score: 3,
type: 2,
life: 15,
frame: 1,
length: arr1.length
}
for (var i = 0, arr2 = []; i < 7; i++) {
arr2[i] = new Image()
arr2[i].src = "images/enemyss" + (i + 1) + ".png"
arr2.push(arr2[i])
}
// console.log(arr2)
var lenemy = {
img: arr2,
width: 169,
height: 258,
score: 50,
type: 3,
life: 35,
frame: 2,
length: arr2.length
}

function Enemy(config) {
this.img = config.img;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.life = config.life;
this.frame = config.frame;
this.type = config.type;
this.score = config.score;
this.x = Math.floor(Math.random() * (Width - this.width));
this.y = -config.height;
this.index = 0;
this.down = false;
this.cancel = false
this.paint = function() {
context.drawImage(this.img[this.index], this.x, this.y)
}
this.step = function() {
if (!this.down) {
this.index++;
this.index = this.index % this.frame;
this.y += 10;
// if (this.y + this.height > Height) {
// State = GAMEOVER;
// }

} else {
this.index++;
if (this.index == this.length) {
this.cancel = true;
this.index = this.length - 1;
}
}

}
this.bang = function() {
this.life--;
if (this.life == 0) {
this.down = true;
score += this.score;
}
}

this.checkHit = function(obj1) {
return (this.x < obj1.x + obj1.width && this.x + this.width > obj1.x && this.y < obj1.y + obj1.height && this.y + this.height > obj1.y) || (this.x < obj1.x1 + obj1.width && this.x + this.width > obj1.x1 && this.y < obj1.y + obj1.height && this.y + this.height > obj1.y)

}

}

var enemies = []

function enemiesCreat() {
var ran = Math.floor(Math.random() * 100);
if (ran <= 5) {
enemies.push(new Enemy(senemy))
} else if (ran == 6) {
enemies.push(new Enemy(menemy))
} else if (ran == 7) {
if (enemies[0]) {
if (enemies[0].type != 3) {
enemies.splice(0, 0, new Enemy(lenemy))
}
}
}
}

function enemiesPaint() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].paint();
}
}

function enemiesStep() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].step();
}
}

function enemiesDel() {
for (var i = 0; i < enemies.length; i++) {
if (enemies[i].cancel || enemies[i].y1 > Height) {
enemies.splice(i, 1); //删除当前元素
}

}
}

function checkHitBoth() { //碰撞处理函数
for (var i = 0; i < enemies.length; i++) {
//我方和敌方飞机碰撞
if (enemies[i].checkHit(running)) { //调用敌方飞机的碰撞检测函数
enemies[i].bang();
running.bang();
}
//子弹和敌方飞机碰撞
for (var j = 0; j < bullets.length; j++) {
if (enemies[i].checkHit(bullets[j])) { //调用敌方飞机的碰撞检测函数
enemies[i].bang();
bullets[j].bang();

// console.log(1221)
}
}
}
}

// 4.游戏暂停
var pas = new Image()
pas.src = "images/game_pause_nor.png"
// console.log(pas.width)
canvas.onmouseout = function() {
if (State == RUNNING) {
State = PAUSE;
}
}
canvas.onmouseover = function() {
if (State == PAUSE) {
State = RUNNING;
}
}

// function begin() {

// }

function paintText() {
context.font = "bold 36px 微软雅黑";
context.fillStyle = "red";
context.fillText("SCORE:" + score, 0, 30)
context.fillText("LIFE:" + life, 370, 30)
}

function paintGameover() {
context.font = "bold 36px 微软雅黑";
context.fillStyle = "#333"
context.fillText("GAME OVER!!!", 130, 320)
context.fillStyle = "#5F9EA0"
context.fillText("你的得分:" + score, 165, 360)

}

// var restart = document.getElementById("restart")
// restart.onclick = function() {
// if (State == GAMEOVER) {
// window.history.go(0)
// }
// }
setInterval(function() {
fun.paint()
fun.step()

if (State == START) {
// begin()
canvas.onclick = function(event) {
var x = event.offsetX;
var y = event.offsetY;
// console.log(x, y)
if (x > 180 && x < 320 && y > 320 && y < 350) {
if (State == START) {
State = LOADING;
}
}

}
context.font = "bold 36px 微软雅黑";
context.fillStyle = "red";
context.fillText("开始游戏", 180, 350)
context.drawImage(logo, 40, -2)
} else if (State == LOADING) {
loading.paint()
loading.step()
} else if (State == RUNNING) {
running.paint()
running.step()
running.shoot()
// 子弹
// bulletpaint()
bulletpaint()
bulletStep()
bulletDel()

// enemiesCheck();
enemiesCreat();
enemiesPaint();
enemiesStep()
enemiesDel();
checkHitBoth();
paintText()
// checkhit();

} else if (State == PAUSE) {
running.paint()
bulletpaint()
enemiesPaint();
paintText()
context.drawImage(pas, (Width - 60) / 2, (Height - 45) / 2)
} else if (State == GAMEOVER) {
running.paint()
bulletpaint()
enemiesPaint();
paintText()
paintGameover();
context.font = "bold 36px 微软雅黑";
context.fillStyle = "red";
context.fillText("重新开始", 180, 270)
canvas.onclick = function(event) {
var x = event.offsetX;
var y = event.offsetY;
console.log(x, y)
if (x > 180 && x < 320 && y > 240 && y < 270) {
if (State == GAMEOVER) {
window.history.go(0)
// State = RUNNING
}
}

}
// restart.style.display = "block";
}
}, 100)