<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 50px auto;
width: 480px;
height: 800px;
background-color: black;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="480" height="800"></canvas>
</div>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d");
var START = 0; //游戏初始阶段
var STARTING = 1; //游戏加载阶段
var RUNNING = 2; //游戏运行阶段
var PAUSE = 3; //游戏暂停阶段
var GAMEOVER = 4; //游戏结束阶段
//标识，当前游戏阶段
var state = START;
//画布高度
var WIDTH = 480;
var HEIGHT = 650;
//定义游戏的分数和 生命值
var score = 0;
var life = 3;
var bg = new Image()
bg.src = "img/background.png"
var Bg = {
imgs: bg,
width: 480,
height: 800
}
function BG(temp) {
this.imgs = temp.imgs;
this.width = temp.width;
this.height = temp.height;
//第一张图片位置
this.x1 = 0;
this.y1 = 0;
//第二张图片位置
this.x2 = 0;
this.y2 = -this.height;
//定义paint函数绘制背景图片
this.paint = function () {
context.drawImage(this.imgs, this.x1, this.y1);
context.drawImage(this.imgs, this.x2, this.y2);
}
//定义step函数移动背景图片
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"
//游戏加载状态
var loadings = [] //定义加载状态图片数组
// for(let i=0;i<4;i++){
// loadings[i] = new Image();
// loadings[i].src = "img/game_loading"+i+".png"
// }
loadings[0] = new Image();
loadings[0].src = "img/game_loading0.png"
loadings[1] = new Image();
loadings[1].src = "img/game_loading1.png"
loadings[2] = new Image();
loadings[2].src = "img/game_loading2.png"
loadings[3] = new Image();
loadings[3].src = "img/game_loading3.png"
var Loading = {
img: loadings,
length: loadings.length,
width: 186,
height: 38
}
//定义函数绘制加载状态的动画
//当Loading的索引长度达到最大游戏开始
function Load(temp) {
this.img = temp.img;
this.length = temp.length;
this.height = temp.height;
this.index = 0;
this.x = 110;
this.y = 400;
this.paint = function () {
context.drawImage(this.img[this.index], this.x, this.y)
}
this.cnt = 0
this.step = function () {
this.cnt++;
if (this.cnt % 3 == 0) {
this.index++
}
if (this.index == this.length) {
state = RUNNING
}
}
}
var loadImg = new Load(Loading);
canvas.onclick = function () {
state = STARTING;
}
//创建玩家飞机
var myPlane = []
myPlane[0] = new Image()
myPlane[0].src = "img/hero1.png"
myPlane[1] = new Image()
myPlane[1].src = "img/hero2.png"
myPlane[2] = new Image()
myPlane[2].src = "img/hero_blowup_n3.png"
myPlane[3] = new Image()
myPlane[3].src = "img/hero_blowup_n4.png"
myPlane[4] = new Image()
myPlane[4].src = "img/hero_blowup_n5.png"
myPlane[5] = new Image()
myPlane[5].src = "img/hero_blowup_n6.png"
var plane = {
img: myPlane,
length: myPlane.length,
width: 99,
height: 124,
collider: 2
}
function Plane(my) {
this.img = my.img;
this.length = my.length;
this.width = my.width;
this.height = my.height;
this.collider = my.collider;
this.index = 0;
this.x = (WIDTH - this.width) / 2
this.y = HEIGHT - 150;
var dash = false;
this.bang = function () {
dash = true
}
this.paint = function () {
context.drawImage(this.img[this.index], this.x, this.y)
}
this.step = function () {
if (dash == false) {
this.index++;
this.index = this.index % 2
} else {
this.index++;
if (this.index == this.length) {
life--;
if (life == 0) {
state = GAMEOVER;
this.index = this.length - 1
} else {
player = new Plane(plane)
}
}
}
}
this.cnt = 0;
this.shoot = function () {
this.cnt++;
if (this.cnt % 3 == 0) {
but.push(new Bullet(bullet))
}
}
}
var player = new Plane(plane)
//玩家飞机位置随鼠标移动
canvas.onmousemove = function (e) {
var e = event || window.event;
if (state == RUNNING) {
var x = e.offsetX;
var y = e.offsetY;
player.x = x - player.width / 2
player.y = y - player.height / 2
}
}
bullets = new Image()
bullets.src = "img/bullet1.png"
var bullet = {
img: bullets,
length: bullets.length,
width: 9,
height: 21,
}
//子弹构造
function Bullet(mybts) {
this.img = mybts.img
this.length = mybts.length;
this.width = mybts.width;
this.height = mybts.height;
this.x = player.x + player.width / 2
this.y = player.y - player.height / 2 + 20
this.paint = function () {
context.drawImage(this.img, this.x, this.y)
}
this.step = function () {
this.y -= 10
}
this.candel = false;
this.bang = function () {
this.candel = true
}
}
var but = []
//绘制子弹
function bullet_pait() {
for (var i = 0; i < but.length; i++) {
but[i].paint()
}
}
//子弹移动
function bullet_step() {
for (var i = 0; i < but.length; i++) {
but[i].step()
}
}
//删除无用的子弹
function bullet_vanish() {
for (var i = 0; i < but.length; i++) {
if (but[i].y < -but[i].height || but[i].candel) {
but.splice(i, 1)
}
}
}
//储存敌方飞机
var enermy1 = []
enermy1[0] = new Image()
enermy1[0].src = "img/enemy1.png"
enermy1[1] = new Image()
enermy1[1].src = "img/enemy1_down1.png"
enermy1[2] = new Image()
enermy1[2].src = "img/enemy1_down2.png"
enermy1[3] = new Image()
enermy1[3].src = "img/enemy1_down3.png"
enermy1[4] = new Image()
enermy1[4].src = "img/enemy1_down4.png"
var enermy2 = []
enermy2[0] = new Image()
enermy2[0].src = "img/enemy2.png"
enermy2[1] = new Image()
enermy2[1].src = "img/enemy2_down1.png"
enermy2[2] = new Image()
enermy2[2].src = "img/enemy2_down2.png"
enermy2[3] = new Image()
enermy2[3].src = "img/enemy2_down3.png"
enermy2[4] = new Image()
enermy2[4].src = "img/enemy2_down4.png"
var enermy3 = []
enermy3[0] = new Image()
enermy3[0].src = "img/enemy3_n1.png"
enermy3[1] = new Image()
enermy3[1].src = "img/enemy3_n2.png"
enermy3[2] = new Image()
enermy3[2].src = "img/enemy3_down1.png"
enermy3[3] = new Image()
enermy3[3].src = "img/enemy3_down2.png"
enermy3[4] = new Image()
enermy3[4].src = "img/enemy3_down3.png"
enermy3[5] = new Image()
enermy3[5].src = "img/enemy3_down4.png"
enermy3[6] = new Image()
enermy3[6].src = "img/enemy3_down5.png"
enermy3[7] = new Image()
enermy3[7].src = "img/enemy3_down6.png"
var Enermy1 = {
img: enermy1,
length: enermy1.length,
width: 57,
height: 51,
type: 1,
frame: 1,
life: 1,
score: 1
}
var Enermy2 = {
img: enermy2,
length: enermy2.length,
width: 69,
height: 95,
type: 2,
frame: 1,
life: 3,
score: 3
}
var Enermy3 = {
img: enermy3,
length: enermy3.length,
width: 165,
height: 261,
type: 3,
frame: 2,
score: 10
}
//创建敌方飞机
function Enermy(config) {
this.imgs = config.img;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.type = config.type;
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 () {
context.drawImage(this.imgs[0], this.x, this.y)
}
//运动方法
this.step = function () {
if (!this.down) {
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.y < this.y + this.height &&
wo.x + wo.width > this.x &&
wo.x < this.x + this.width
}
this.bang = function () {
this.life--;
if (life == 0) {
this.down = true;
score += this.score;
}
}
}
var enemies = []
//储存所有敌方函数
function enterEnemies() {
var rand = Math.floor(Math.random() * 100)
if (rand <= 8) {
enemies.push(new Enermy(Enermy1))
} else if (rand == 9) {
enemies.push(new Enermy(Enermy2))
} else if (rand == 10) {
enemies.push(new Enermy(Enermy3))
}
}
function enermyPaint() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].paint()
}
}
function enemyStep() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].step()
}
}
function enemtDel() {
for (var i = 0; i < enemies.length; i++) {
if (enemies[i].y > HEIGHT || enemies[i].candel) {
enemies.splice(i, 1)
}
}
}
function hitEnemies() {
for (var i = 0; i < enemies.length; i++) {
if (enemies[i].checkHit(player)) {
enemies[i].bang()
player.bang()
}
for (var j = 0; j < but.length; j++) {
if (enemies[i].checkHit(but[j])) {
enemies[i].bang()
but[j].bang()
}
}
}
}
setInterval(function () {
sky.paint()
sky.step()
switch (state) {
case 0:
context.drawImage(logo, 40, 0)
break;
case 1:
loadImg.paint()
loadImg.step();
break;
case 2:
player.paint()
player.step()
player.shoot()
bullet_pait()
bullet_step()
bullet_vanish()
enterEnemies()
enermyPaint()
enemyStep()
enemtDel()
hitEnemies()
break;
}
}, 100)
</script>
</body>
</html>
扫一扫
10-24
992
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
