Click here for free DL of the app version that can save data.

No:4771

1906

←

Prev Next

→

éclair
Developer User3795｜Date and time 23/6/28 19:33:54
Build time 19.465 sec｜Game capacity 1.787KB｜

Script

了解です。ゲームとして遊べるHTMLファイルを作成し、JavaScriptを含めます。絵文字を使用するために、スマホ操作も前提とします。以下にサンプルのゲームを用意しました。

絵文字ゲーム

スマホの画面をタップして、バウンドするボールを操作しよう！

以上が、HTMLファイルにゲームを実装したサンプルです。画面をタップすると、画面内をバウンドするボールが移動します。絵文字を使用するために、ボールの代わりに赤い円を描画しました。ゲームのループは、setInterval関数を使って10ミリ秒ごとに描画関数を呼び出しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>絵文字ゲーム</title>
</head>
<body>
  <h1>絵文字ゲーム</h1>
  <p>スマホの画面をタップして、バウンドするボールを操作しよう！</p>
  <canvas id="gameCanvas" width="300" height="400" style="border:1px solid black;"></canvas>
  
  <script>
    // ゲームオブジェクトの設定
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    const ballRadius = 15;
    let x = canvas.width/2;
    let y = canvas.height-30;
    let dx = 2;
    let dy = -2;

// ゲームループの設定
    function drawBall() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.arc(x, y, ballRadius, 0, Math.PI*2);
      context.fillStyle = "red";
      context.fill();
      context.closePath();
      x += dx;
      y += dy;
      if (x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
      }
    }

setInterval(drawBall, 10);
  </script>
</body>
</html>