HTML5 を使用して砲弾の自由落下を実現するサンプルコードを共有する-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 を使用して砲弾の自由落下を実現するサンプルコードを共有する

零下一度

May 06, 2017 am 11:51 AM

html5大砲の砲弾の自由落下を模倣する

html5 の魅力は誰もがよく知っていると思いますが、できるだけ早くすべてのブラウザーがこの機能をサポートすることを願っています。まず最初に文句を言っておきますが、WeChat ブローカーは単純に弱いです。 jqueryのsliding、show(1000)、hide(1000)などの単純なアニメーションがまだ詰まっています、qqブラウザ、、、忘れてください、最初に落ち着くでしょう。。。。

そしてこれが数日前に見たものです！！！

HTML5 を使用して砲弾の自由落下を実現するサンプルコードを共有する

彼をサポートしてみませんか？ ? ? ? ?

テーマの大砲に戻る

全体的な考え方は、発射された各砲弾をオブジェクトとみなして、その x、y をキャンバスの 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 &#39;(&#39; + vec.vx.toFixed(3) + &#39;,&#39; + vec.vy.toFixed(3) + &#39;)&#39; ;
        }
    };
    return vec;
};

さて、次のステップは角度を計算して setInterval を追加することです。ここでは、canvas.save() と Canvas.restore(); に焦点を当てて説明します。ここで
キャンバス上で回転、拡大縮小、移動などの操作を実行するとき、実際には写真、四角形などの特定の要素を操作したいのですが、これらを実行するために Canvas メソッドを使用する場合。実際、キャンバス全体が操作されると、キャンバス上の後続のすべての要素が影響を受けるため、操作の前に Canvas.save() を呼び出して、キャンバスの現在の状態を保存します。以前に保存された状態なので、他の要素には影響しません

すべてのコード

<!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>

結論

本当のフロントエンドは間違いなく UI ではなく、フロントエンドゲームエンジニアは間違いなく数学者です。

【関連おすすめ】

1. 無料のh5オンラインビデオチュートリアル

2. php.cnオリジナルのhtml5ビデオチュートリアル

以上がHTML5 を使用して砲弾の自由落下を実現するサンプルコードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

See all articles