Partagez un exemple de code pour réaliser la chute libre de boulets de canon en utilisant HTML5-Tutoriel H5-php.cn

Partagez un exemple de code pour réaliser la chute libre de boulets de canon en utilisant HTML5

零下一度

Libérer： 2017-05-06 11:51:25

original

1923 Les gens l'ont consulté

html5Imitation de la chute libre des obus de canon

Je pense que tout le monde connaît le charme du html5, j'espère que tous les navigateurs prendront bientôt en charge cette fonctionnalité, et laissez Je me plains d'abord, le courtier WeChat est si faible que les animations simples, telles que slide, show(1000) et hide(1000) de jquery sont bloquées, et elles sont toujours bloquées. Le noyau du navigateur qq, le navigateur qq, oubliez ça, je vais d'abord me calmer. . . .

Et celui-là, je l'ai vu il y a quelques jours ! ! !

Partagez un exemple de code pour réaliser la chute libre de boulets de canon en utilisant HTML5

Pourquoi le veux-tu si tu ne le soutiens pas ? ? ? ? ?

Retour au thème canon

L'idée générale est de traiter chaque boulet de canon tiré comme un objet, et ses x, y sont convertis en Canvas 's x, y, où vecior est une option pour contrôler la force, qui sera mentionnée plus tard.

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();
                }
             };

Copier après la connexion

Les objets des boulets de canon impliquent forcément des calculs vectoriels. J'ai moi-même encapsulé chaque méthode. Il existe un vecteur prêt à l'emploi.js, mais je pense que c'est trop Lourd (pour notre back-end, à chaque fois que le front-end dit qu'il n'y a pas besoin de templates et que c'est trop lourd, on pense tous dans notre cœur que c'est trop lourd, hahaha), c'est très simple et peut implémenter des fonctions simples. Il est fortement recommandé d'utiliser des fonctions prêtes à l'emploi pour les grands jeux.

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 &#39;(&#39; + vec.vx.toFixed(3) + &#39;,&#39; + vec.vy.toFixed(3) + &#39;)&#39; ;
        }
    };
    return vec;
};

Copier après la connexion

D'accord, la prochaine étape consiste à calculer l'angle et à ajouter setInterval. Il n'y a pas grand chose d'autre à dire. Ici, je vais me concentrer sur canvas.save(); .store(); Voici une petite explication,
Lorsque nous effectuons des opérations telles que la rotation, la mise à l'échelle et le panoramique du canevas, nous voulons en fait opérer sur des éléments spécifiques, tels que image, un rectangle. , etc., Mais lorsque vous utilisez la méthode canvas pour effectuer ces opérations, vous opérez en fait sur l'ensemble du canevas, puis tous les éléments du canevas seront affectés plus tard, nous appelons donc canvas.save() pour enregistrer le canevas actuel. avant l'opération. État, après l'opération, supprimez l'état précédemment enregistré, afin qu'il n'affecte pas les autres éléments

Tous les codes

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta author=&#39;gongbangwei&#39;>
    <title>大炮</title>
</head>
<body>
    <p id=&#39;lidu&#39;>
        <span>选择大炮的</span>
        <input type="radio" checked=&#39;checked&#39; value=&#39;25&#39;>大
        <input type="radio"  value=&#39;20&#39;>中
        <input type="radio"  value=&#39;15&#39;>小
    </p>

    <canvas id=&#39;can&#39; width="640" height="480" style=" border:2px solid">no support html5</canvas>
    <script src=&#39;vector2d.js&#39;></script>
    <script src=&#39;jquery/jquery-1.7.2.min.js&#39;></script>
    <script>
    var gameObj=[],
    canvas=document.getElementById(&#39;can&#39;),
    ctx=canvas.getContext(&#39;2d&#39;);

    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,&#39;#00BFFF&#39;);
        linGrad.addColorStop(0.5,&#39;white&#39;);
        linGrad.addColorStop(0.5,&#39;#55dd00&#39;);
        linGrad.addColorStop(1,&#39;white&#39;);
        ctx.fillStyle=linGrad;
        ctx.fillRect(0,0,canvas.width, canvas.height);
        ctx.restore();

    }
    ///////main/////////////
    var lidu=$(&#39;#lidu&#39;).find("input:checked").val();
    gameObj.push(cannon(50,canvas.height-150,lidu));
    $(&#39;#lidu&#39;).click(function (event){
        var cl=event.target;
        $(this).find(&#39;input&#39;).each(function(){
            $(this).attr(&#39;checked&#39;,false)
        });
        $(cl).attr(&#39;checked&#39;,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>

Copier après la connexion