<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>飞机大战</title>
</head>
<body style="background-color: black">
<div>
<img align="left" src="images/hero2.png"/>
<img align="right" src="images/hero2.png"/>
<h1 style="text-align: center;color:blue; ">飞机大战</h1>
<img align="left" src="images/ufo1.png">
<img align="right" src="images/ufo2.png"/>
<hr/>
<br/>
<div id="stage" style="margin: 0 auto; width: 480px; height: 650px; text-align: center; vertical-align: middle" >
<canvas id="canvas" style="border:0px solid red;" width="480" height="650">
不支持画板对象
</canvas>
</div>
</div>
<script>
//飞机大战
/*
调整生命 112——112
控制生产对象 184——213
发射子弹(hero) 366——383
设置画板 10——11
画角色 230——244
角色移动 216——227
创建角色 34——105
*/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var background = new Image();
background.src = "images/background.png";
var sky = new Sky();
//导入Enemy1角色
var e1 = [];
e1[0] = new Image();
e1[0].src = "images/enemy1.png";
e1[1] = new Image();
e1[1].src = "images/enemy1_down1.png";
e1[2] = new Image();
e1[2].src = "images/enemy1_down2.png";
e1[3] = new Image();
e1[3].src = "images/enemy1_down3.png";
e1[4] = new Image();
e1[4].src = "images/enemy1_down4.png";
//导入Enemy2角色
var e2 = [];
e2[0] = new Image();
e2[0].src = "images/enemy2.png";
e2[1] = new Image();
e2[1].src = "images/enemy2_down1.png";
e2[2] = new Image();
e2[2].src = "images/enemy2_down2.png";
e2[3] = new Image();
e2[3].src = "images/enemy2_down3.png";
e2[4] = new Image();
e2[4].src = "images/enemy2_down4.png";
var e3 = [];
e3[0] = new Image();
e3[0].src = "images/enemy3_n1.png";
e3[1] = new Image();
e3[1].src = "images/enemy3_n2.png";
e3[2] = new Image();
e3[2].src = "images/enemy3_down1.png";
e3[3] = new Image();
e3[3].src = "images/enemy3_down2.png";
e3[4] = new Image();
e3[4].src = "images/enemy3_down3.png";
e3[5] = new Image();
e3[5].src = "images/enemy3_down4.png";
e3[6] = new Image();
e3[6].src = "images/enemy3_down5.png";
e3[7] = new Image();
e3[7].src = "images/enemy3_down6.png";
var h = [];
h[0] = new Image();
h[0].src = "images/hero1.png";
h[1] = new Image();
h[1].src = "images/hero2.png";
h[2] = new Image();
h[2].src = "images/hero_blowup_n1.png";
h[3] = new Image();
h[3].src = "images/hero_blowup_n2.png";
h[4] = new Image();
h[4].src = "images/hero_blowup_n3.png";
h[5] = new Image();
h[5].src = "images/hero_blowup_n4.png";
var copyright = new Image();
copyright.src = "images/shoot_copyright.png";
var pause = new Image();
pause.src = "images/game_pause_nor.png";
var b = [];
b[0] = new Image();
b[0].src = "images/bullet1.png";
b[1] = new Image();
b[1].src = "images/bullet2.png";
var u=[]
u[0]=new Image();
u[0].src="images/ufo1.png";
var enemies = [];
var hero = new Hero(0, 0, 99, 124, 1, h, 2);
var bullets = [];
var score= 0;
var ufo=[];
var heroes = 3;
var START = 1;
var RUNNING = 2;
var PAUSE = 3;
var GAME_OVER = 4;
var state = START;
var s_c=true
setInterval(function() {
controlState(ctx);
}, 10);
function controlState(ctx) {
switch(state) {
case START:
sky.paint(ctx);
sky.step();
var x = 20;
var y = 130;
ctx.drawImage(copyright, x, y);
break;
case RUNNING:
paintComponent(ctx);
sky.step();
componentStep();
componentEnter();
hero.shoot();
checkHit();
deleteComponent();
break;
case PAUSE:
paintComponent(ctx);
sky.step();
ctx.drawImage(pause, 0, 0);
break;
case GAME_OVER:
paintComponent(ctx);
sky.step();
var x = 480 / 2 - 245 / 2;
var y = 852 * (1 - 0.6);
ctx.font = "40px 微软雅黑";
ctx.fillText("GAME OVER", x, y);
if(s_c){
alert("YOUSCORE:"+score);
s_c=false;
}
break;
}
}
canvas.onclick = function() {
if (state == START) {
state = RUNNING;
}
}
canvas.onmouseout = function() {
if (state == RUNNING) {
state = PAUSE;
}
}
canvas.onmouseover = function() {
if (state == PAUSE) {
state = RUNNING;
}
}
function isActionTime(lastTime, interval) {
if (lastTime == 0) {
return true;
}
var currentTime = new Date().getTime();
return currentTime - lastTime >= interval;
}
var lastTime = 0;
var interval = 400;
function componentEnter() {
if (! isActionTime(lastTime, interval)) {
return;
}
lastTime = new Date().getTime();
var n = parseInt(Math.random() * 10);
switch(n) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
enemies[enemies.length] = new Enemy(0, -51, 57, 51, 1, 1, 1, e1, 1);
break;
case 8:
enemies[enemies.length] = new Enemy(0, -95, 69, 95, 2, 3, 5, e2, 1);
break;
case 9:
if (enemies[0] == undefined || enemies[0].type != 3) {
enemies.splice(0, 0, new Enemy(0, -258, 169, 258, 3, 20, 20, e3, 2));
}
}
var random=parseInt(Math.random()*15);
if(random==1){
ufo[ufo.length]=new Ufo(0,0,58,88,1,u,1);
}
}
function componentStep() {
sky.step();
for (var i = 0; i < enemies.length; i++) {
enemies[i].step();
}
for (var i = 0; i < bullets.length; i++) {
bullets[i].step();
}
hero.step();
for(var i = 0;i < ufo.length;i++){
ufo[i].step();
}
}
function paintComponent(ctx) {
sky.paint(ctx);
for (var i = 0; i < enemies.length; i++) {
enemies[i].paint(ctx);
}
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint(ctx);
}
hero.paint(ctx);
for(var i = 0;i < ufo.length;i++){
ufo[i].paint(ctx);
}
ctx.font = "20px 微软雅黑";
ctx.fillText("SCORE:" + score, 10, 20);
ctx.fillText("LIFE:" + heroes, 400, 20);
}
function Sky() {
this.img = background;
this.width = 480;
this.height = 852;
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = -this.height;
this.interval = 400;
this.lastTime = 0;
this.paint = function(ctx) {
ctx.drawImage(this.img, this.x1, this.y1);
ctx.drawImage(this.img, this.x2, this.y2);
}
this.step = function() {
if (! isActionTime(this.lastTime, this.interval)) {
return;
}
this.lastTime = new Date().getTime();
this.y1 = this.y1 + 1;
this.y2 = this.y2 + 1;
if (this.y1 > this.height) {
this.y1 = -this.height;
}
if (this.y2 > this.height) {
this.y2 = -this.height;
}
}
}
function getPointOnCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x : x - bbox.left,
y : y - bbox.top
};
}
canvas.onmousemove = function(e) {
if (state == RUNNING) {
var mpoint = getPointOnCanvas(e.x, e.y);
hero.x = mpoint.x - hero.width / 2;
hero.y = mpoint.y - hero.height / 2;
}
}
/*飞行函数(x坐标,y坐标,宽度,长度,生命,图片帧,图片帧计数)*/
function FlyingObject(x, y, width, height, life, frames, baseFrameCount) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.life = life;
this.interval = 10;
this.lastTime = 0;
this.down = false;
this.canDelete = false;
this.frames = frames;
this.img = this.frames[0];
this.frameIndex = 0;
this.frameCount = baseFrameCount;
this.paint = function(ctx) {
ctx.drawImage(this.img, this.x, this.y);
}
this.step = function() {
if (! isActionTime(this.lastTime, this.interval)) {
return;
}
this.lastTime = new Date().getTime();
if (this.down) {
if (this.frameIndex == frames.length) {
this.canDelete = true;
} else {
this.img = this.frames[this.frameIndex];
this.frameIndex++;
}
} else {
this.move();
this.img = this.frames[this.frameIndex % this.frameCount];
this.frameIndex++;
}
}
this.move = function() {
this.y++;
}
this.hit = function(component) {
var c = component;
return c.x > this.x - c.width && c.x < this.x + this.width && c.y > this.y - c.height && c.y < this.y + this.height;
}
this.bang = function() {
this.life--;
if (this.life == 0) {
this.down = true;
if (this.score) {
score = score + this.score;
}
this.frameIndex = this.frameCount;
}
}
this.outOfBounds = function() {
return this.y >= 852;
}
}
function Enemy(x, y, width, height, type, life, score, frames, baseFrameCount) {
FlyingObject.call(this, x, y, width, height, life, frames, baseFrameCount);
this.x = Math.random() * (480 - this.width);
this.y = -this.height;
this.score = score;
this.type = type;
}
function Hero(x, y, width, height, life, frames, baseFrameCount) {
FlyingObject.call(this, x, y, width, height, life, frames, baseFrameCount);
this.x = 480 / 2 - this.width / 2;
this.y = 650 - this.height - 30;
this.shootInterval = 300;
this.shootLastTime = 0;
this.multipleFire = false;
this.power = 0;
this.shoot = function() {
if (!isActionTime(this.shootLastTime, this.shootInterval)) {
return;
}
this.shootLastTime = new Date().getTime();
if(this.multipleFire&&this.power!=0){
bullets[bullets.length] = new Bullet(this.x + 45, this.y, 9, 21,1, b,1, 1);
bullets[bullets.length] = new Bullet(this.x + 45, this.y, 9, 21,1, b,1, 2);
bullets[bullets.length] = new Bullet(this.x + 45, this.y, 9, 21,1, b,1, 3);
bullets[bullets.length] = new Bullet(this.x + 45, this.y, 9, 21,1, b,1, 4);
bullets[bullets.length] = new Bullet(this.x + 45, this.y, 9, 21,1, b,1, 5);
this.power--;
}else{
bullets[bullets.length] = new Bullet(this.x + 45, this.y, 9, 21,1, b, 1,3);
}
}
this.move = function() {
}
}
function Bullet(x, y, width, height, life, frames, baseFrameCount,type) {
FlyingObject.call(this, x, y, width, height, life, frames, baseFrameCount);
this.move = function() {
/*子弹的发射速度(需要将减去的值+1才是真正的移动值)*/this.y -= 10;
/*判断子弹种类*/switch(type){
case 1:
/*往左偏*/
this.x-=1;
break;
case 2:
/*稍往左偏*/
this.x-=0.45;
break;
case 3:
/*正中心*/
break;
case 4:
/*稍往右偏*/
this.x+=0.45;
break;
case 5:
/*往右偏*/
this.x+=1;
}
}
this.outOfBounds = function() {
return this.y < -this.height;
}
}
function Ufo(x,y,width,height,life,frames, baseFrameCount){
FlyingObject.call(this,x,y,width,height,life,frames, baseFrameCount);
this.x=Math.random()*(480-this.width);
this.y=-this.height;
}
function reload(number){
hero.power += number;
if(hero.power>0){
hero.multipleFire = true;
}
}
function checkHit() {
for(var i = 0;i < ufo.length;i++){
if(ufo[i].hit(hero)){
ufo[i].bang();
reload(5);
}
}
for (var i = 0; i < enemies.length; i++) {
var enemy = enemies[i];
if (enemy.canDelete || enemy.down) {
continue;
}
for (var j = 0; j < bullets.length; j++) {
var bullet = bullets[j];
if (bullet.canDelete || bullet.down) {
continue;
}
if (enemy.hit(bullet)) {
enemy.bang();
bullet.bang();
}
}
if (enemy.hit(hero)) {
enemy.bang();
hero.bang();
}
}
}
function deleteComponent() {
var ary = [];
var idx = 0;
for (var i = 0; i < enemies.length; i++) {
if (!(enemies[i].canDelete || enemies[i].outOfBounds())) {
ary[idx] = enemies[i];
idx++;
}
}
enemies = ary;
ary = [];
idx = 0;
for (var i = 0; i < bullets.length; i++) {
if (!(bullets[i].canDelete || bullets[i].outOfBounds())) {
ary[idx] = bullets[i];
idx++;
}
}
bullets = ary;
ary = [];
idx = 0;
for(var i = 0;i < ufo.length;i++){
if(!(ufo[i].canDelete||ufo[i].outOfBounds())){
ary[idx] = ufo[i];
idx++;
}
}
ufo = ary;
if (hero.canDelete) {
heroes--;
if (heroes == 0) {
state = GAME_OVER;
} else {
hero = new Hero(0, 0, 99, 124, 4, h, 2);
}
}
}
</script>
</body>
</html>
[复制链接]
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-2-1 16:00:51
显身卡
发表于 2019-2-20 23:27:05
学习