れんが割りを作るゲーム(1)

5542 ワード
JavaScript html テキストリンク

1.ゲーム作成手順


作成および描画
  • キャンバス
  • ボール移動実施
  • 壁からのリバウンド
    • を実現
  • カードとキーボード制御実施
  • ゲーム移行
    • を実現
  • 衝突検出実施
  • 点、
    • 勝を達成

    2.キャンバスの作成と描画!

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
    
    	* { 
        padding: 0; 
        margin: 0; 
        }
    	canvas {
        background: #eee; 
        display: block; 
        margin: 0 auto; 
        }
        
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>

</script>

</body>
</html>
    canvasレンダリングゲーム、スクリプトにJavaScriptを追加

    2.1キャンバス基本

    var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
    document.getElementById(「mycanvas」)が作成され、canvasがマークされます.

    2.2キャンバスに長方形を描く

    ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

  • beginPath()とclosePath()は、それぞれ新しいパスを作成し、パスを閉じる方法です.

  • rect()では、前の2つの値がキャンバスの左上隅からの座標を表し、残りの後の2つの値が矩形の幅と高さを表します.すなわち、キャンバスの左側20 pxから矩形、キャンバスの上40 pxまでの距離である.次に、幅と高さをそれぞれ50 pxの値で正方形を描きます.

  • FillStyleは、fill()メソッドで塗りたい色の値を持ち、上のコードで矩形を赤に塗ります.

    • 2.3キャンバスに円を描く


    レンガを割るときはボールを使うので、円を描くことが大切です!
    ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
  • beginPath()、closePath()、fillStyle、fill()は2.2で説明されていますので、省略してください.
  • アーク()では、240および160は円の中心を指すxおよびyスケールであり、20は円の半径、0およびMathである.PI*2は開始角と終了角、falseは時計回り(trueの場合は反時計回り)を表します.

    • 上に描かれているように、キャンバスには円が描かれています.
    | MovieOn - 4
    アリクラウドは動的IPをセキュリティグループに追加する