canvas和JavaScript制作《飞机大战》未完待续更新中.....
飞机大战
1.声明初始值
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
const START = 0;
var STARTING = 1;
var RUNNING = 2;
var PAUSE = 3;
var GAMEOVER = 4;
var WIDTH = 480;
var HEIGHT = 650; //常量名全为大写
var state = START; //设置初始状态为START
var score = 0; //初始分数为0
var life = 3; //设置飞机有三条生命
2.设置动态背景
var bg=new Image();
bg.src="images/background.png"
var BG={
width:480,
height:852,
imgs:bg
}
function Bg(config){
this.imgs=config.imgs;
this.width=config.width;
this.height=config.height;
this.x1=0;
this.y1=0;
this.x2=0;
this.y2=-this.height;
this.paint = function(){
ctx.drawImage(this.imgs,this.x1,this.y1);
ctx.drawImage(this.imgs,this.x2,this.y2);
}
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="images/start.png";
2.
var loadings = [];
loadings[0] = new Image();
loadings[0].src = "images/game_loading1.png";
loadings[1] = new Image();
loadings[1].src = "images/game_loading2.png";
loadings[2] = new Image();
loadings[2].src = "images/game_loading3.png";
loadings[3] = new Image();
loadings[3].src = "images/game_loading4.png";
var LOADINGS = {
imgs :loadings,
length:loadings.length,
width:186,
height:38
}
function Loadings(config){
this.imgs=config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.startIndex = 0;
this.paint = function(){
ctx.drawImage(this.imgs[this.startIndex],0,HEIGHT-this.height)
}
this.time=0;
this.step = function(){
this.time++;
if(this.time%3==0){
this.startIndex++;
}
if(this.startIndex==this.length){
state=RUNNING;
}
}
}
var loading = new Loadings(LOADINGS);
canvas.onclick = function(){
if(state == START){
state = STARTING;
}
}
4.
var heros=[];
heros[0]=new Image();
heros[0].src="images/hero1.png";
heros[1]=new Image();
heros[1].src="images/hero2.png";
heros[2]=new Image();
heros[2].src="images/hero_blowup_n1.png";
heros[3]=new Image();
heros[3].src="images/hero_blowup_n2.png";
heros[4]=new Image();
heros[4].src="images/hero_blowup_n3.png";
heros[5]=new Image();
heros[5].src="images/hero_blowup_n4.png";
var HEROS={
imgs:heros,
length:heros.length,
width : 99,
height: 124,
frame : 2
}
function Heros(config){
this.imgs=config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.frame = config.frame;
this.startIndex = 0;
this.x=WIDTH/2-this.width/2;
this.y=HEIGHT-150;
this.down = false; //碰撞
this.candel = false; //HP是否空
this.bang = function(){
this.down = true;
}
this.paint = function(){
ctx.drawImage(this.imgs[this.startIndex],this.x,this.y);
}
this.step = function(){
if(!this.down){
this.startIndex++;
this.startIndex=this.startIndex % 2;
}else{
this.startIndex++;
if(this.startIndex==this.length){
life--;
if(life==0){
state = GAMEOVER;
this.startIndex = this.length - 1;
}else{
hero = new Heros(HEROS);
}
}
}
}
this.time=0;
this.shoot=function(){
this.time++;
if(this.time % 3 ==0){
bullets.push(new Bullet(BULLET));
}
}
}
var hero=new Heros(HEROS);
canvas.onmousemove=function(event){
canvas.style.cursor="none";
var event=event||window.event;
if(state==RUNNING){
var x=event.offsetX;
var y=event.offsetY;
hero.x= x-hero.width/2;
hero.y= y-hero.height/2;
}
}
5.
var bullet=new Image(); bullet.src="images/bullet1.png"; var BULLET={ imgs:bullet, width:9, height:21 } function Bullet(config){ this.imgs=config.imgs; this.width = config.width; this.height = config.height; this.x = hero.x + hero.width/2 - this.width/2; this.y = hero.y - this.height - 10; this.paint = function(){ ctx.drawImage(this.imgs,this.x,this.y); } this.step = function(){ this.y -= 10; } this.candel = false; this.bang = function(){ this.candel = true; } } var bullets=[]; function bulletsPaint(){ for(var i=0;i<bullets.length;i++){ bullets[i].paint(); } } function bulletsStep(){ for(var i=0;i<bullets.length;i++){ bullets[i].step(); } } function bulletsDelete(){ for(var i=0;i<bullets.length;i++){ if(bullets[i].candel||bullets[i].y<-bullets[i].height){ bullets.splice(i,1); } } }
6.
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 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 enemy3 = []; enemy3[0] = new Image(); enemy3[0].src = "images/enemy3_n1.png"; enemy3[1] = new Image(); enemy3[1].src = "images/enemy3_n2.png"; enemy3[2] = new Image(); enemy3[2].src = "images/enemy3_down1.png" enemy3[3] = new Image(); enemy3[3].src = "images/enemy3_down2.png" enemy3[4] = new Image(); enemy3[4].src = "images/enemy3_down3.png" enemy3[5] = new Image(); enemy3[5].src = "images/enemy3_down4.png" enemy3[6] = new Image(); enemy3[6].src = "images/enemy3_down5.png" enemy3[7] = new Image(); enemy3[7].src = "images/enemy3_down6.png" var ENEMY1 = { imgs : enemy1, length : enemy1.length, width : 57, height : 51, type : 1, frame : 1, life : 1, score : 1 } var ENEMY2 = { imgs : enemy2, length : enemy2.length, width : 69, height : 95, type : 2, frame : 1, life : 3, score: 3 } var ENEMY3 = { imgs : enemy3, length : enemy3.length, width : 169, height : 258, type : 3, frame : 2, life : 10, score: 100 } function Enemy(config){ this.imgs=config.imgs; this.length=config.length; this.width=config.width; this.height=config.width; this.type=config.type; this.frame = config.frame; 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(){ ctx.drawImage(this.imgs[this.startIndex],this.x,this.y); } this.step=function(){ if(!this.down){ this.startIndex++; this.startIndex=this.startIndex % this.frame; this.y++; }else{ this.startIndex++; if(this.startIndex == this.length){ this.candel = true; this.startIndex=this.length-1; } } } this.bang = function(){ this.life --; if(this.life == 0){ this.down = true; score += this.score; } } 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; } } var enemies = []; function enterEnemies(){ var rand = Math.floor(Math.random()*100); if(rand <= 10){ enemies.push(new Enemy(ENEMY1)); }else if(rand == 11){ enemies.push(new Enemy(ENEMY2)); }else if(rand == 70){ if(enemies[0].type != 3 && enemies.length > 2){ enemies.splice(0,0,new Enemy(ENEMY3)) } } } function paintEnemies(){ for(var i = 0;i<enemies.length;i++){ enemies[i].paint(); } } function stepEnemies(){ for(var i = 0;i<enemies.length;i++){ enemies[i].step(); } } function delEnemies(){ for(var i = 0;i<enemies.length;i++){ if(enemies[i].candel || enemies[i].y > HEIGHT){ enemies.splice(i,1) } } } function hitEnemies(){ for(var i = 0;i<enemies.length;i++){ if(enemies[i].checkHit(hero)){ enemies[i].bang(); hero.bang(); } for(var j = 0;j < bullets.length;j++){ if(enemies[i].checkHit(bullets[j])){ enemies[i].bang(); bullets[j].bang(); } } } }
7.
function paintText(){
ctx.font="bold 24px Arial";
ctx.beginPath();
ctx.fillStyle="black"
ctx.fillText("SCORE:"+score,10,30);
ctx.closePath();
ctx.beginPath();
ctx.fillStyle="red"
ctx.fillText("LIFE:"+life,400,30);
ctx.closePath();
}
canvas.onmouseover=function(){
if(state==PAUSE){
state=RUNNING;
}
}
canvas.onmouseout=function(){
if(state==RUNNING){
state=PAUSE
}
}
var pasue = new Image();
pasue.src = "images/game_pause_nor.png";
function gameoverText(){
ctx.font="bold 50px Arial";
ctx.fillText("废 物",100,300)
}
8.
setInterval(function(){
sky.paint();
sky.step();
if(state == START){
ctx.drawImage(logo,40,0)
}else if(state== STARTING){
loading.paint();
loading.step();
}else if(state== RUNNING){
hero.paint();
hero.step();
hero.shoot();
bulletsPaint();
bulletsStep();
bulletsDelete();
enterEnemies();
paintEnemies();
stepEnemies();
delEnemies();
hitEnemies();
paintText()
}else if(state== PAUSE){
paintText()
ctx.drawImage(pasue,10,60)
hero.paint();
bulletsPaint();
paintEnemies();
}else if(state== GAMEOVER){
gameoverText()
}
},100)
飞机大战源代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>飞机大战</title> </head> <body> <div style="text-align: center;"> <canvas id="canvas" width="480px" height="650px"></canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); const START = 0; var STARTING = 1; var RUNNING = 2; var PAUSE = 3; var GAMEOVER = 4; var WIDTH = 480; var HEIGHT = 650; var state = START; var score = 0; var life = 1; var bg=new Image(); bg.src="images/background.png" var BG={ width:480, height:852, imgs:bg } function Bg(config){ this.imgs=config.imgs; this.width=config.width; this.height=config.height; this.x1=0; this.y1=0; this.x2=0; this.y2=-this.height; this.paint = function(){ ctx.drawImage(this.imgs,this.x1,this.y1); ctx.drawImage(this.imgs,this.x2,this.y2); } 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="images/start.png"; var loadings = []; loadings[0] = new Image(); loadings[0].src = "images/game_loading1.png"; loadings[1] = new Image(); loadings[1].src = "images/game_loading2.png"; loadings[2] = new Image(); loadings[2].src = "images/game_loading3.png"; loadings[3] = new Image(); loadings[3].src = "images/game_loading4.png"; var LOADINGS = { imgs :loadings, length:loadings.length, width:186, height:38 } function Loadings(config){ this.imgs=config.imgs; this.length = config.length; this.width = config.width; this.height = config.height; this.startIndex = 0; this.paint = function(){ ctx.drawImage(this.imgs[this.startIndex],0,HEIGHT-this.height) } this.time=0; this.step = function(){ this.time++; if(this.time%3==0){ this.startIndex++; } if(this.startIndex==this.length){ state=RUNNING; } } } var loading = new Loadings(LOADINGS); canvas.onclick = function(){ if(state == START){ state = STARTING; } } var heros=[]; heros[0]=new Image(); heros[0].src="images/hero1.png"; heros[1]=new Image(); heros[1].src="images/hero2.png"; heros[2]=new Image(); heros[2].src="images/hero_blowup_n1.png"; heros[3]=new Image(); heros[3].src="images/hero_blowup_n2.png"; heros[4]=new Image(); heros[4].src="images/hero_blowup_n3.png"; heros[5]=new Image(); heros[5].src="images/hero_blowup_n4.png"; var HEROS={ imgs:heros, length:heros.length, width : 99, height: 124, frame : 2 } function Heros(config){ this.imgs=config.imgs; this.length = config.length; this.width = config.width; this.height = config.height; this.frame = config.frame; this.startIndex = 0; this.x=WIDTH/2-this.width/2; this.y=HEIGHT-150; this.down = false; //碰撞 this.candel = false; //HP是否空 this.bang = function(){ this.down = true; } this.paint = function(){ ctx.drawImage(this.imgs[this.startIndex],this.x,this.y); } this.step = function(){ if(!this.down){ this.startIndex++; this.startIndex=this.startIndex % 2; }else{ this.startIndex++; if(this.startIndex==this.length){ life--; if(life==0){ state = GAMEOVER; this.startIndex = this.length - 1; }else{ hero = new Heros(HEROS); } } } } this.time=0; this.shoot=function(){ this.time++; if(this.time % 3 ==0){ bullets.push(new Bullet(BULLET)); } } } var hero=new Heros(HEROS); canvas.onmousemove=function(event){ canvas.style.cursor="none"; var event=event||window.event; if(state==RUNNING){ var x=event.offsetX; var y=event.offsetY; hero.x= x-hero.width/2; hero.y= y-hero.height/2; } } var bullet=new Image(); bullet.src="images/bullet1.png"; var BULLET={ imgs:bullet, width:9, height:21 } function Bullet(config){ this.imgs=config.imgs; this.width = config.width; this.height = config.height; this.x = hero.x + hero.width/2 - this.width/2; this.y = hero.y - this.height - 10; this.paint = function(){ ctx.drawImage(this.imgs,this.x,this.y); } this.step = function(){ this.y -= 10; } this.candel = false; this.bang = function(){ this.candel = true; } } var bullets=[]; function bulletsPaint(){ for(var i=0;i<bullets.length;i++){ bullets[i].paint(); } } function bulletsStep(){ for(var i=0;i<bullets.length;i++){ bullets[i].step(); } } function bulletsDelete(){ for(var i=0;i<bullets.length;i++){ if(bullets[i].candel||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 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 enemy3 = []; enemy3[0] = new Image(); enemy3[0].src = "images/enemy3_n1.png"; enemy3[1] = new Image(); enemy3[1].src = "images/enemy3_n2.png"; enemy3[2] = new Image(); enemy3[2].src = "images/enemy3_down1.png" enemy3[3] = new Image(); enemy3[3].src = "images/enemy3_down2.png" enemy3[4] = new Image(); enemy3[4].src = "images/enemy3_down3.png" enemy3[5] = new Image(); enemy3[5].src = "images/enemy3_down4.png" enemy3[6] = new Image(); enemy3[6].src = "images/enemy3_down5.png" enemy3[7] = new Image(); enemy3[7].src = "images/enemy3_down6.png" var ENEMY1 = { imgs : enemy1, length : enemy1.length, width : 57, height : 51, type : 1, frame : 1, life : 1, score : 1 } var ENEMY2 = { imgs : enemy2, length : enemy2.length, width : 69, height : 95, type : 2, frame : 1, life : 3, score: 3 } var ENEMY3 = { imgs : enemy3, length : enemy3.length, width : 169, height : 258, type : 3, frame : 2, life : 10, score: 100 } function Enemy(config){ this.imgs=config.imgs; this.length=config.length; this.width=config.width; this.height=config.width; this.type=config.type; this.frame = config.frame; 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(){ ctx.drawImage(this.imgs[this.startIndex],this.x,this.y); } this.step=function(){ if(!this.down){ this.startIndex++; this.startIndex=this.startIndex % this.frame; this.y++; }else{ this.startIndex++; if(this.startIndex == this.length){ this.candel = true; this.startIndex=this.length-1; } } } this.bang = function(){ this.life --; if(this.life == 0){ this.down = true; score += this.score; } } 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; } } var enemies = []; function enterEnemies(){ var rand = Math.floor(Math.random()*100); if(rand <= 10){ enemies.push(new Enemy(ENEMY1)); }else if(rand == 11){ enemies.push(new Enemy(ENEMY2)); }else if(rand == 70){ if(enemies[0].type != 3 && enemies.length > 2){ enemies.splice(0,0,new Enemy(ENEMY3)) } } } function paintEnemies(){ for(var i = 0;i<enemies.length;i++){ enemies[i].paint(); } } function stepEnemies(){ for(var i = 0;i<enemies.length;i++){ enemies[i].step(); } } function delEnemies(){ for(var i = 0;i<enemies.length;i++){ if(enemies[i].candel || enemies[i].y > HEIGHT){ enemies.splice(i,1) } } } function hitEnemies(){ for(var i = 0;i<enemies.length;i++){ if(enemies[i].checkHit(hero)){ enemies[i].bang(); hero.bang(); } for(var j = 0;j < bullets.length;j++){ if(enemies[i].checkHit(bullets[j])){ enemies[i].bang(); bullets[j].bang(); } } } } function paintText(){ ctx.font="bold 24px Arial"; ctx.beginPath(); ctx.fillStyle="black" ctx.fillText("SCORE:"+score,10,30); ctx.closePath(); ctx.beginPath(); ctx.fillStyle="red" ctx.fillText("LIFE:"+life,400,30); ctx.closePath(); } canvas.onmouseover=function(){ if(state==PAUSE){ state=RUNNING; } } canvas.onmouseout=function(){ if(state==RUNNING){ state=PAUSE } } var pasue = new Image(); pasue.src = "images/game_pause_nor.png"; function gameoverText(){ ctx.font="bold 50px Arial"; ctx.fillText("游戏结束",100,300) } setInterval(function(){ sky.paint(); sky.step(); if(state == START){ ctx.drawImage(logo,40,0) }else if(state== STARTING){ loading.paint(); loading.step(); }else if(state== RUNNING){ hero.paint(); hero.step(); hero.shoot(); bulletsPaint(); bulletsStep(); bulletsDelete(); enterEnemies(); paintEnemies(); stepEnemies(); delEnemies(); hitEnemies(); paintText() }else if(state== PAUSE){ paintText() ctx.drawImage(pasue,10,60) hero.paint(); bulletsPaint(); paintEnemies(); }else if(state== GAMEOVER){ gameoverText() } },100) </script> </body> </html>
