随笔- 15 文章- 0 评论- 4 阅读- 27205
canvas+js接金币小游戏

忙里偷闲，让UI小伙伴帮忙搞了几个图片元素，利用飞机大战代码进行修改，做个接金币小游戏～
var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        var imgWidth = window.innerWidth;
        var imgHeight = window.innerHeight;

        canvas.setAttribute('width',imgWidth);
        canvas.setAttribute('height',imgHeight-8);

        const START = 0;
        const STARTTING = 1;
        const RUNNING = 2;
        const PAUSED = 3;
        const GAMEOVER = 4;

        var state = START;

        const WIDTH = canvas.width;
        const HEIGHT = canvas.height;


        var life = 1;

        var score = 0;

        var countdown=3100;                 //定义总的倒计时时长

        var bg = new Image();
        bg.src = "img/background1.png";          //初始背景图片
        var SKY = {
            imgs : bg,
            width : imgWidth,
            height : imgHeight
        }

        function Sky(config){
            this.imgs = config.imgs;
            this.width = config.width;
            this.height = config.height;
            this.time = 0;

            this.paint = function(){
                context.drawImage(this.imgs,0,0,imgWidth,imgHeight);
            }

            this.step = function(){
                this.time++;
            }
        }

        var sky = new Sky(SKY);

        var logo = new Image();         //加载游戏logo
        logo.src = "img/game-name1.png";

        canvas.onclick = function(){
            if(state == START){
                state = STARTTING;
            }
        }


        var loadings = [];               //加载动画
        loadings[0] = new Image();
        loadings[0].src = "img/run1.png";
        loadings[1] = new Image();
        loadings[1].src = "img/run2.png";
        loadings[2] = new Image();
        loadings[2].src = "img/run3.png";
        loadings[3] = new Image();
        loadings[3].src = "img/run4.png";

        var LOADING = {
            imgs : loadings,
            width : 320,
            height : 72,
            sum : loadings.length
        }

        function Loading(config){
            this.imgs = config.imgs;
            this.width = config.width;
            this.height = config.height;
            this.sum = config.sum;

            this.index = 0;
            this.time = 0;
            this.paint = function(){
                context.drawImage(this.imgs[this.index],0,HEIGHT-this.height-20);
            }

            this.step = function(){
                this.time++;
                if(this.time%20==0){
                    this.index++;
                }
                if(this.index == this.sum){
                    state = RUNNING;
                }
            }
        }

        var loading = new Loading(LOADING);

        var heros = [];
        heros[0] = new Image();
        heros[0].src = "img/pople3.png";
        heros[1] = new Image();
        heros[1].src = "img/pople3.png";


        heros[2] = new Image();
        heros[2].src = "img/pople1.png";
        heros[3] = new Image();
        heros[3].src = "img/pople2.png";

        var HERO = {
            imgs : heros,
            width : 78,
            height : 109,
            sum : heros.length,
            length : 2
        }

        function Hero(config){
            this.imgs = config.imgs;
            this.width = config.width;
            this.height = config.height;
            this.sum = config.sum;

            this.index = 0;

            this.x = (WIDTH-this.width)/2;
            this.y = HEIGHT-this.height-20;

            this.down = false;
            this.length = config.length;

            this.paint = function(){
                context.drawImage(this.imgs[this.index],this.x,this.y);
            }

            this.step = function(){
                if(this.down){
                    this.index++;
                    if(this.index == this.sum){
                        state = GAMEOVER;
                        this.index = this.sum-1;
                    }
                }else{
                    this.index++;
                    this.index = this.index%2;
                }
            }


            this.bang = function(){
                this.down = true;
                this.index = this.length;
            }
        }


        var hero = new Hero(HERO);
        
        canvas.addEventListener('touchstart',function(e){
            var touch = e.touches[0], posX = touch.clientX - 39;               
            if(state == RUNNING){
            e.preventDefault();
            hero.x = posX;
            }
        },false);
        
        canvas.addEventListener('touchmove',function(e){
            e.preventDefault();
            var touch = e.touches[0], posX = touch.clientX - 39; 
             if(state == RUNNING){         
                 hero.x = posX;
                 }
        },false)        

        var enemies1 = [];
        enemies1[0] = new Image();
        enemies1[0].src = "img/cion-1.png";

        enemies1[1] = new Image();
        enemies1[1].src = "img/cion-2.png";
        enemies1[2] = new Image();
        enemies1[2].src = "img/cion-3.png";
        enemies1[3] = new Image();
        enemies1[3].src = "img/cion-4.png";
        enemies1[4] = new Image();
        enemies1[4].src = "img/+2-1.png";
        enemies1[5] = new Image();
        enemies1[5].src = "img/+2-2.png";

        var enemies2 = [];
        enemies2[0] = new Image();
        enemies2[0].src = "img/red1.png";

        enemies2[1] = new Image();
        enemies2[1].src = "img/red2.png";
        enemies2[2] = new Image();
        enemies2[2].src = "img/red2.png";
        enemies2[3] = new Image();
        enemies2[3].src = "img/red2.png";
        enemies2[4] = new Image();
        enemies2[4].src = "img/+5-1.png";
        enemies2[5] = new Image();
        enemies2[5].src = "img/+5-1.png";
        enemies2[6] = new Image();
        enemies2[6].src = "img/+5-1.png";
        enemies2[7] = new Image();
        enemies2[7].src = "img/+5-2.png";

        var enemies3 = [];
        enemies3[0] = new Image();
        enemies3[0].src = "img/boom1.png";
        enemies3[1] = new Image();
        enemies3[1].src = "img/boom2.png";
        enemies3[2] = new Image();
        enemies3[2].src = "img/boom3.png";

        enemies3[3] = new Image();
        enemies3[3].src = "img/pow.png";
        enemies3[4] = new Image();
        enemies3[4].src = "img/pow.png";
        enemies3[5] = new Image();
        enemies3[5].src = "img/pow.png";
        enemies3[6] = new Image();
        enemies3[6].src = "img/-10-1.png";
        enemies3[7] = new Image();
        enemies3[7].src = "img/-10-1.png";
        enemies3[8] = new Image();
        enemies3[8].src = "img/-10-2.png";


        var ENEMY1 = {
            imgs : enemies1,
            width : 33,
            height : 39,
            sum : enemies1.length,
            length : 1,
            type : 0,
            life : 1,
            score : 2
        }

        var ENEMY2 = {
            imgs : enemies2,
            width : 41,
            height : 58,
            sum : enemies2.length,
            length : 1,
            type : 1,
            life : 1,
            score : 5
        }

        var ENEMY3 = {
            imgs : enemies3,
            width : 48,
            height : 48,
            sum : enemies3.length,
            length : 3,
            type : 2,
            life : 1,
            score : -10
        }


        function Enemy(config){
            this.imgs = config.imgs;
            this.width = config.width;
            this.height = config.height;
            this.sum = config.sum;

            this.type = config.type;
            this.life = config.life;

            this.x = Math.random() * (WIDTH - this.width);
            this.y = -this.height;

            this.time = 0;
            this.index = 0;

            this.down = false;
            this.canDelete = false;
            this.length = config.length;
            this.score = config.score;


            this.paint = function(){
                context.drawImage(this.imgs[this.index],this.x,this.y);
            }

            this.step = function(){            //可以通过元素运动速度控制难易程度this.y++
                if(this.down){
                    this.time++;
                    if(this.time%5==0){
                        this.index++;
                    }
                    if(this.index == this.sum){
                        this.canDelete = true;
                        this.index = this.sum-1;
                        score += this.score;
                        if(score <= 0){
                            score = 0;
                        }
                    }
                    if(this.score == -10){                     //碰到炸弹就嗝屁
                        countdown = 0;
                    }
                }else{
                    this.time++;
                    switch (this.type){
                        case 0:
                            this.y+=0.8;
                            break;
                        case 1:
                            if(this.time%2==0){
                                this.y+=2;
                            }
                            break;
                        case 2:
                            this.index++;
                            this.index = this.index%2;
                            if(this.time%5==0){
                                this.y+=8;
                            }
                            break;
                    }
                }
            }


            this.hit = function(compant){
                return compant.x + compant.width > this.x &&
                        compant.y < this.y + this.height &&
                        compant.x < this.x + this.width &&
                        compant.y + hero.height > this.y;
            }

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


        var enemies = [];

        function createEmeies(){         //控制不同元素出现的概率
            var num = Math.floor(Math.random()*100);
            if(num <= 60){
                var enemy = new Enemy(ENEMY1);
                enemies[enemies.length] = enemy;
            }else if(num < 75){
                var enemy = new Enemy(ENEMY2);
                enemies[enemies.length] = enemy;
            }else{
                if(enemies.length > 0 && enemies[0].type != 2){
                    var enemy = new Enemy(ENEMY3);
                    enemies[enemies.length] = enemy;
//                    enemies.splice(0,0,enemy);              //控制炸弹数量
                }
            }
        }


        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].y > HEIGHT || enemies[i].canDelete){
                    enemies.splice(i,1);
                }
            }
        }

        function checkHit(){
            for(var i=0;i<enemies.length;i++){
                var enemy = enemies[i];
                if(enemy.hit(hero)){
                    if(!enemy.down && !hero.down){
                        enemy.bang();
//                        hero.bang();
                    }
                }
            }
        }


        function paintText(){
            countdown--;                          //显示时间倒计时
            if(countdown <= 0){
                countdown = 0;
            }
            context.font = "bold 20px 微软雅黑";
            context.fillText("SCORE: "+score,10,30);
            context.fillText("TIME: "+Math.floor(countdown/100),10,60);
                              //  Math.floor(countdown/100)    //倒计时以秒计算
        }

        canvas.onmouseover = function(){
            if(state == PAUSED){
                state = RUNNING;
            }
        }

        canvas.onmouseout = function(){
            if(state == RUNNING){
                state = PAUSED;
            }
        }

        var paused = new Image();
        paused.src = "";

        function gameOver(){
            context.font = "bold 48px 微软雅黑";
            context.fillText("GAME OVER",WIDTH/2-130,HEIGHT/2-30);
            context.font = "bold 32px 微软雅黑";
            context.fillText("你的得分:"+score,WIDTH/2-75,HEIGHT/2+40);
        }


        var time = 0;

        setInterval(function(){
            sky.paint();
            sky.step();

            switch (state){
                case START:
                    context.drawImage(logo,0,0,imgWidth,imgHeight);
                    break;
                case STARTTING:
                    loading.paint();
                    loading.step();
                    break;
                case RUNNING:
                    hero.paint();
                    hero.step();
                    time++;
                    if(time%50==0){
                        createEmeies();
                    }
                    paintEnemies();
                    stepEnemies();
                    delEnemies();
                    checkHit();
                    paintText();
//                   console.info(time);            //控制游戏总时长
                    if(countdown == 0){
                       state = GAMEOVER;
                    }
                    break;
                case PAUSED:
                    hero.paint();
                    paintEnemies();
                    paintText();
                    context.drawImage(paused,WIDTH/2-30,HEIGHT/2-22.5);
                    break;
                case GAMEOVER:
                    hero.paint();
                    paintEnemies();
                    paintText();
                    gameOver();
                                                      //可添加游戏结束的动作
                    break;
            }
        },10);