h5仿大炮炮彈飛行

weixin_33912445發表於2016-06-13
H5

html5仿大炮炮彈的自由落體實現

  html5的魅力相信大家不會陌生，希望各位大大瀏覽器們早點支援這個特性哦，，還有先吐槽一句，微信的那個broser簡直弱爆了就簡單的動畫，比如滑動，就jquery的show(1000)，hide(1000)都卡的不行，還是qq瀏覽器的核心，qq瀏覽器，，，算了，，我先冷靜下。。。。

還有就是前幾天看到的這個！！！

2199772-e5223db638a0b4c1.png

都不支援要他幹嘛？？？？？

迴歸主題大炮

整體思路就是將每個打出來的炮彈看做一個物件，他的x，y轉換成canvas的x，y,其中vecior就是個控制力度的一個選項後文會提到。

var cannonBall = function (x,y,vector){
        var gravity=0,
        that={
            x: x,
            y: y,
            removeMe:false,
            move: function (){
                vector.vy += gravity;
                gravity += 0.1;
                //模擬加速度
                that.x+=vector.vx;
                that.y+=vector.vy;
                if(that.y > canvas.height -150){
                    that.removeMe=true;
                }
            },
            draw: function (){
                ctx.beginPath();
                ctx.arc(that.x,that.y,5,0,Math.PI * 2);
                ctx.fill();
                ctx.closePath();
                }
            };

其中大炮炮彈的物件勢必涉及到了向量計算，自己封裝了個個方法，，有現成的Vector.js,但覺得太重（對於我們後端每次前端說不用模板，說太重，我們心裡都默想重你妹呀，，哈哈哈），很簡單，實現簡單功能可以，大型遊戲強烈建議使用現成的。

var vector2d= function (x,y){
    var vec={
        vx:x,
        vy:y,
        scale: function (scale){
            vec.vx*=scale;
            vec.vy*=scale;
        },
        add:function (vec2){
            vec.vx+=vec2.vx;
            vec.vy+=vec2.vy;
        },
        sub:function (vec2){
            vec.vx-=vec2.vx;
            vec.vy-=vec2.vy;
        },
        negate: function(){
            vec.vx=-vec.vx;
            vec.vy=-vec.vy;
        },
        length:function (){
            return Math.sqrt(vec.vx * vec.vx + vec.vy * vec.vy);
        },
        normalize:function (){
            var len=this.length();
            if(len){
                vec.vx /=len;
                vec.vy /=len;
            }
            return len;
        },
        rotate:function (angle){
            var vx = vec.vx;
            var vy = vec.vy;
            vec.vx = vx * Math.cos(angle) - vy * Math.sin(angle)
            vec.vy = vx * Math.sin(angle) + vy * Math.cos(angle);
        },
        toString:function(){
            return '(' + vec.vx.toFixed(3) + ',' + vec.vy.toFixed(3) + ')' ;
        }
    };
    return vec;
};

好了，接著就是個計算角度再加上setInterval了，，其他沒啥說的，這裡我著重說下canvas.save();和canvas.restore();這裡稍微解釋一下，
當我們對畫布進行旋轉，縮放，平移等操作的時候其實我們是想對特定的元素進行操作，比如圖片，一個矩形等，但是當你用canvas的方法來進行這些操作的時候，其實是對整個畫布進行了操作，那麼之後在畫布上的元素都會受到影響，所以我們在操作之前呼叫canvas.save()來儲存畫布當前的狀態，當操作之後取出之前儲存過的狀態，這樣就不會對其他的元素進行影響

全部程式碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta author='gongbangwei'>
    <title>大炮</title>
</head>
<body>
    <div id='lidu'>
        <span>選擇大炮的</span>
        <input type="radio" checked='checked' value='25'>大
        <input type="radio"  value='20'>中
        <input type="radio"  value='15'>小
    </div>
    
    <canvas id='can' width="640" height="480" style=" border:2px solid">no support html5</canvas>
    <script src='vector2d.js'></script>
    <script src='jquery/jquery-1.7.2.min.js'></script>
    <script>
    var gameObj=[],
    canvas=document.getElementById('can'),
    ctx=canvas.getContext('2d');

    var cannonBall = function (x,y,vector){
        var gravity=0,
        that={
            x: x,
            y: y,
            removeMe:false,
            move: function (){
                vector.vy += gravity;
                gravity += 0.1;
                //模擬加速度
                that.x+=vector.vx;
                that.y+=vector.vy;
                if(that.y > canvas.height -150){
                    that.removeMe=true;
                }
            },
            draw: function (){
                ctx.beginPath();
                ctx.arc(that.x,that.y,8,0,Math.PI * 2);
                ctx.fill();
                ctx.closePath();
                }
            };
        
        return that;
    }
    var cannon= function (x,y,lidu){
        var mx=0,
        my=0,
        angle=0,
        that={
            x: x,
            y: y,
            lidu:lidu,
            angle:0,
            removeMe:false,
            move:function (){
                angle=Math.atan2(my-that.y,mx-that.x);
            },
            draw:function(){
                ctx.save();
                ctx.lineWidth=2;
                ctx.translate(that.x,that.y);
                //平移，將畫布的座標原點向左右方向移動x，向上下方向移動y.canvas的預設位置是在（0,0）
                ctx.rotate(angle);
                //畫布旋轉
                ctx.strokeRect(0,-5,50,10);
                ctx.moveTo(0,0);
                ctx.beginPath();
                ctx.arc(0,0,15,0,Math.PI * 2 );
                ctx.fill();
                ctx.closePath();
                ctx.restore();
            }
        };//end that
        canvas.onmousedown = function(){
            //在這裡呼叫向量的那個js
            var vec = vector2d(mx-that.x,my-that.y);
            vec.normalize();
            //console.log(lidu);
            vec.scale(lidu);
            gameObj.push(cannonBall(that.x,that.y,vec));
        }
        canvas.onmousemove = function (event){
            var bb= canvas.getBoundingClientRect();
            mx=(event.clientX - bb.left);
            my=(event.clientY - bb.top);
        };
        return that;
    };
    //畫藍田和草地
    var drawSkyAndGrass = function (){
        ctx.save();
        ctx.globalAlpha= 0.4;
        var linGrad=ctx.createLinearGradient(0,0,0,canvas.height);
        linGrad.addColorStop(0,'#00BFFF');
        linGrad.addColorStop(0.5,'white');
        linGrad.addColorStop(0.5,'#55dd00');
        linGrad.addColorStop(1,'white');
        ctx.fillStyle=linGrad;
        ctx.fillRect(0,0,canvas.width, canvas.height);
        ctx.restore();

    }

    ///////main/////////////
    var lidu=$('#lidu').find("input:checked").val();
    gameObj.push(cannon(50,canvas.height-150,lidu));
    $('#lidu').click(function (event){
        var cl=event.target;
        $(this).find('input').each(function(){
            $(this).attr('checked',false)
        });
        $(cl).attr('checked',true);
        lidu=$(cl).val();
        gameObj.splice(0,gameObj.length);
        gameObj.push(cannon(50,canvas.height-150,lidu));
    })
    
    setInterval( function (){
        drawSkyAndGrass();
        var gameObj_fresh=[];
        for (var i = 0; i < gameObj.length; i++) {
            gameObj[i].move();
            gameObj[i].draw();
            if(gameObj[i].removeMe === false){
                gameObj_fresh.push(gameObj[i]);
            }
        }
        gameObj=gameObj_fresh;
    },50);
    </script>
</body>
</html>

結束語

一個真正的前端絕不是ui，一個前端遊戲工程師也絕對是個數學家。

相關文章