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

No:1442

162

←

Prev Next

→

Its like you said ka and I said tsubobushi.
Developer sayaensm｜Date and time 23/6/18 16:32:39
Build time 44.367 sec｜Game capacity 3.882KB｜

Script

了解しました。以下は「つおぶし」を遊ぶためのHTMLファイルの例です。

つおぶし

画面をタップして、つおを跳ね返そう！

このHTMLファイルは、「つおぶし」というブロック崩し風のゲームです。プレイヤーは画面をタップして、パドルを動かし、ボールを跳ね返して、できるだけスコアを稼ぐことが目的です。ゲームオーバーになると、スコアが表示されます。スマホでもプレイできるように、画面をタップしてパドルを移動させるようにしています。また、適宜絵文字を使って、画面を華やかにしています。

←

Prev　Next

→ 　

Back　

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

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

了解しました。

以下は「つおぶし」を遊ぶためのHTMLファイルの例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>つおぶし</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: sans-serif;
      text-align: center;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>つおぶし</h1>
  <p>画面をタップして、つおを跳ね返そう！</p>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// ゲームの初期化処理
    function init() {
      score = 0;
      isGameOver = false;
      ball.x = 160;
      ball.y = 240;
      ball.velocityX = 5;
      ball.velocityY = 5;
    }

// ゲームのメインループ処理
    function mainLoop() {
      // ゲームオーバーなら何もしない
      if (isGameOver) {
        return;
      }

// 画面をクリア
      let canvas = document.getElementById('gameCanvas');
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// パドルを描画
      ctx.fillStyle = paddle.color;
      ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

// ボールを描画
      ctx.fillStyle = ball.color;
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      ctx.fill();

// ボールの位置を更新
      ball.x += ball.velocityX;
      ball.y += ball.velocityY;

// ボールが画面外に出たらゲームオーバー
      if (ball.y > canvas.height) {
        isGameOver = true;
        alert(`ゲームオーバー！\nスコア: ${score}`);
      }

// ボールが左右の壁に当たったら反転
      if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.velocityX = -ball.velocityX;
      }

// ボールが上の壁に当たったら反転
      if (ball.y - ball.radius < 0) {
        ball.velocityY = -ball.velocityY;
      }

// パドルとボールが当たったらスコアを更新
      if (ball.y + ball.radius > paddle.y &&
          ball.x + ball.radius > paddle.x &&
          ball.x - ball.radius < paddle.x + paddle.width) {
        ball.velocityY = -ball.velocityY;
        score++;
      }

// スコアを画面に表示
      ctx.fillStyle = '#333';
      ctx.font = '24px sans-serif';
      ctx.fillText(`スコア: ${score}`, 20, 40);

// 次のフレームを待つ
      requestAnimationFrame(mainLoop);
    }

// 画面をタップしたらパドルを移動させる
    let canvas = document.getElementById('gameCanvas');
    canvas.addEventListener('touchstart', function(event) {
      let x = event.touches[0].clientX - canvas.offsetLeft;
      if (x < paddle.x + paddle.width / 2) {
        paddle.x -= 20;
      } else {
        paddle.x += 20;
      }
    });

// ゲームを開始
    init();
    mainLoop();
  </script>
</body>
</html>
```