H5游戏开发之Stick Hero

 　　自从上次发布一个小恐龙游戏以后，到现在10天了，前后又写了3个游戏，挑了一个感觉比较有挑战的游戏和大家分享一下。

     效果演示

　

　这是我模拟一个苹果游戏《stick hero》游戏写的一个小游戏，在这里记录一下，希望大家会喜欢。

   一直按下鼠标，会出一根棍子，棍子会变长，小人会根据棍子长度来移动。判断小人是否停留在柱子上，因为放在网上以后，鼠标判断有点卡，请大家见谅。

　那我们还是从头开始介绍一下这游戏的开发过程吧。

图片加载

这次的图片加载器是用的《H5手把手教你玛丽游戏》的图片加载器，个人感觉非常好用，可能是我没接触更好的图片加载器，大神都是用自己框架写的，感觉研究起来我很吃力，基础跟不上，最近一个大哥叫我去研究OOP思想来编写框架开发游戏，这也是我以后的方向，很感谢这位大哥给我的指导。

function loadImg(imgCount,callback){
    var img = {},
        total = imgCount.length,
        loaded = 0;
    for(var i = 0;i < total;i++){
        var imgs = img[imgCount[i].id] = new Image();
        imgs.src = imgCount[i].src;
        imgs.onload = function(){
            loaded++;
        };
    }
    
    if(typeof callback == "function"){
        function check(){
            if(loaded >= total)
                callback();
            else
                setTimeout(check,300);
        }
        check();
    }
    return img;
}

调用的方式和我上次那个差不多，也是传id和src，和回调函数，确保图片加载完以后执行。

        var imgs = null,
            game = null;
            
        function init(){
            imgs = loadImg([
                {id:"bg",src:"img/bg2.png"},
                {id:"player",src:"img/player.png"}
            ],start);
        }
        init();
        
        function start(){
            game = new Game({
                500,
                height:600,
                FPS:30,
                
            });
            game.init();
            game.move();
        }

精灵类

这次比较复杂的是存在着精灵，精灵存在动画，所以加了2个类，Sprite和Animation，在这个游戏中，我把柱子也当做精灵处理，因为每次的柱子他的宽度和初始位置是随机的，而且在检测人物是否站在柱子上的时候比较好检测。

function Sprite(option){
    for(var attr in option){
        this[attr] = option[attr];
    }
}
Sprite.prototype = {
    constructor:Sprite,
    x:0,
    y:340,
    w:0,
    h:0,
    maxX:999,
    maxY:999,
    animation:null,
    accX:0,
    accY:0,
    init:function(){
        if(this.animation){
            this.animation.init();
            this.animation.setNow(0);
        }
    },
    //每次更变人物的移动动画，让人物动起来。
    update:function(sleep,long){
        this.x += this.accX;
        this.animation.update(sleep);
        if(this.x >= long+40){
            this.x = long+40;
            this.animation.setNow(0);
            this.checkCollide();
        }
    },
    //人物的绘制
    draw:function(ct){
        this.animation.draw(ct,this.x,this.y);
    },
    //矩形的绘制
    drawRect:function(ct){
        ct.fillRect(this.x,this.y,this.w,this.h);
    },
    //检测人物是否在柱子上
    checkCollide:function(){
        var Px1 = this.x;
        var Px2 = this.x + 40;
        
        var Rx1 = game.colRect.x;
        var Rx2 = game.colRect.x + game.colRect.w ;
        if(Px1 > Rx2 || Px2 < Rx1){
            this.y += this.accY;
            if(this.y >= this.maxY){
                clearInterval(game.mainLoop);
                alert("挑战失败！    ");
            }
        }else{
            game.initStart();
        }
    }
};

 下面是生成人物和柱子的代码，通过参数可以区分他们。

function createPlayer(){
    var config = {
        //人物走路速度
        accX:4,
        //人物掉落速度
        accY:7,
        //人物初始位置
        x:0,
        y:340,
        maxY:600,
        //人物移动过程
        animation:new Animation({
            frame:[
               {x:20,y:0,w:80,h:80,action:100},
               {x:120,y:0,w:80,h:80,action:100},
               {x:220,y:0,w:80,h:80,action:100},
               {x:320,y:0,w:80,h:80,action:100},
            ]
        })
    };
    return new Sprite(config);
}

function createRect(){
    var config = {
        //每次随机获取宽度和x位置，这样让游戏更有挑战
        w:(Math.random()*40 + 20)|0,
        x:(Math.random()*300+150)|0,
        y:400,
        h:200,
    };
    return new Sprite(config);
}

 下面介绍的是人物的移动，通过组图的不断更换，让人物动起来。

function Animation(option){
    for(var attr in option){
        this[attr] = option[attr];
    }
}
Animation.prototype = {
    constructor:Animation,
    img:null,
    //移动过程
    frame:null,
    //动作的索引值
    index:null,
    //一个动作的进行时间
    time:null,
    //当前为多少帧
    frameNow:null,
    len:-1,
    
    init:function(){
        this.img = imgs["player"]||null;
        this.frame = this.frame||[];
        this.len = this.frame.length - 1;
        this.index = 0;
        this.setNow(this.index);
    },
    setNow:function(index){
        this.index = index;
        this.frameNow = this.frame[this.index];
    },
    //action为每个动作进行多长时间（前面传过来）
    update:function(sleep){
        if(this.time >= this.frameNow.action){
            this.time = 0;
            if(this.index >= this.len){
                this.index = 0;
            }else{
                this.index++;
            }
            
            this.setNow(this.index);
        }else{
            this.time += sleep;
        }
    },
    //人物的绘制
    draw:function(ct,x,y){
        var f = this.frameNow;
        ct.drawImage(this.img,f.x,f.y,f.w,f.h,x,y,60,60);
    }
    
};

游戏类

这个类里面一个主循环控制着我们所有移动的进行，这里我分步来说一下我遇到的问题。

1.如何实现一个柱子倒下的过程，开始我的想法是画一个矩形，然后通过rotate来实现倾斜，因为以前没有用过rotate方法，进入尝试了一次，才知道他的倾斜是将整个画布倾斜，这样连背景一起倾斜，根本无法达到效果，然后通过在纸上画了一下，用数学知识解决了这个问题，我把矩形换成换线，改变他的lineWidth让他看起来像一个矩形。

stick:function(){
        //当鼠标按下以后执行，并且在棍子移动时不会再次触发。
        if(this.moused && !this.clicked){
            this.time += this.sleep;
            //让棍子垂直向上伸展，通过循环让他的长度累加
            this.drawStick(this.time);   
            
        }else if(!this.moused && this.long > 0){
            //当鼠标松开（mouseup）以后，让棍子倒下去
            this.clicked = true;
            this.length = this.stickY - this.long;
            this.fallRect(this.length);
        }
    },
    //棍子向上伸展
    drawStick:function(time){
        this.time = time;
        this.long += (time/200)|0;
        this.ct.beginPath();
        this.ct.lineWidth = 5;
        this.ct.moveTo(this.stickX,this.stickY);
        this.ct.lineTo(this.stickX,this.stickY - this.long);
        this.ct.stroke();
    },
    //棍子向下掉落，记录下棍子的长度，就是人物行走的距离
    fallRect:function(length){
        this.length = length;
        if(this.angle < 30){
            this.angle += this.sleep/50;
            
            this.ct.beginPath();
            this.lineWidth = 5;
            this.ct.moveTo(this.stickX,this.stickY);
            
            var hudu = (2*Math.PI / 360) * 3 * this.angle;
            this.fallX = this.stickX + this.long*Math.sin(hudu);
            this.fallY = this.stickY - this.long*Math.cos(hudu);
            
            if(this.fallY >= this.stickY){
                this.fallY = this.stickY;
            }
            this.ct.lineTo(this.fallX,this.fallY);
            this.ct.stroke();
        }else{
            this.ct.beginPath();
            this.lineWidth = 5;
            this.ct.moveTo(this.stickX,this.stickY);
            this.ct.lineTo(this.fallX,this.fallY);
            this.ct.stroke();
            this.success = true;
        }
    },

 2.当我以为这个游戏已经结束的时候出现了一个bug，就是每次棍子的绘制路径都被保留下来了，这是我canvas控制能力不足，每次绘制之前加一个beginPath就好了。

结束语

在这里，感谢帮助我的每一个人，以后我也会成为大牛，写更多更好的博文，尽自己的力量去帮助更多人。

最近在实验室学习，突然很想回家了，毕竟好久没看见家人了，还有10天就能回家了，心里还是很高兴。

只有半年的时间就要去找工作了，有时间都去研究JS，感觉JS真是非常强大，我现在的水平想开发框架还是太难了，不过慢慢来吧，欲速则不达，一步一步积累终有一天我能自己开发框架。

谢谢大家，如有什么疑问或者建议请留言。