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>

猜你喜欢

转载自www.cnblogs.com/fushuxin/p/10139020.html
今日推荐