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

No:5081

2376

ATARI2023
Developer User3812｜Date and time 23/6/29 16:57:39
Build time 63.43 sec｜Game capacity 6.334KB｜

了解しました。ATARI2023というゲームを作成します。このゲームは、プレーヤーが1枚のHTMLファイル上で遊ぶことができるゲームです。スマートフォンの操作に対応しており、JavaScriptを使用して実装されます。以下に実際のプログラムを記述します。

ATARI2023

スコア: 0

このプログラムは、ブロックを破壊していくブロック崩しのようなゲームです。ボールとパドルの動きをコントロールし、ボールがブロックやパドルに衝突するとスコアが増えます。すべてのブロックを破壊するとゲームクリアです。パドルはキーボードの左右キー、もしくはマウスの移動で操作します。ゲームオーバーになるとスコアが表示され、リロードすることで再度ゲームをプレイすることができます。なお、このプログラムはHTMLファイル内に直接記述されているため、別ファイルとして分離する必要はありません。また、スマートフォンでも遊ぶことができますが、十分な操作性を確保するためには画面サイズやUIの最適化などの調整が必要です。

→ 　

0　

0　

　
　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

了解しました。ATARI2023というゲームを作成します。このゲームは、プレーヤーが1枚のHTMLファイル上で遊ぶことができるゲームです。スマートフォンの操作に対応しており、JavaScriptを使用して実装されます。以下に実際のプログラムを記述します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ATARI2023</title>
    <style>
      body {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>ATARI2023</h1>
    <h2>スコア: <span id="score">0</span></h2>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
      // ゲームオブジェクトの定義
      var game = {
        score: 0,
        canvas: document.getElementById("gameCanvas"),
        ctx: "",
        ball: { x: 200, y: 200, size: 20, dx: -2, dy: -2 },
        paddle: { x: 175, y: 380, width: 50, height: 10, dx: 5 },
        bricks: [],
        brickRowCount: 3,
        brickColumnCount: 5,
        brickWidth: 75,
        brickHeight: 20,
        brickPadding: 10,
        brickOffsetTop: 30,
        brickOffsetLeft: 30,
        gameOver: false
      };

// キャンバスのコンテキストを取得
      game.ctx = game.canvas.getContext("2d");

// パドルの描画
      function drawPaddle() {
        game.ctx.beginPath();
        game.ctx.rect(game.paddle.x, game.paddle.y, game.paddle.width, game.paddle.height);
        game.ctx.fillStyle = "#0095DD";
        game.ctx.fill();
        game.ctx.closePath();
      }

// ボールの描画
      function drawBall() {
        game.ctx.beginPath();
        game.ctx.arc(game.ball.x, game.ball.y, game.ball.size, 0, Math.PI*2);
        game.ctx.fillStyle = "#0095DD";
        game.ctx.fill();
        game.ctx.closePath();
      }

// ブロックの描画
      function drawBricks() {
        for (var c = 0; c < game.brickColumnCount; c++) {
          for (var r = 0; r < game.brickRowCount; r++) {
            if (game.bricks[c][r].status == 1) {
              var brickX = (c * (game.brickWidth + game.brickPadding)) + game.brickOffsetLeft;
              var brickY = (r * (game.brickHeight + game.brickPadding)) + game.brickOffsetTop;
              game.bricks[c][r].x = brickX;
              game.bricks[c][r].y = brickY;
              game.ctx.beginPath();
              game.ctx.rect(brickX, brickY, game.brickWidth, game.brickHeight);
              game.ctx.fillStyle = "#0095DD";
              game.ctx.fill();
              game.ctx.closePath();
            }
          }
        }
      }

// 衝突判定
      function collisionDetection() {
        for (var c = 0; c < game.brickColumnCount; c++) {
          for (var r = 0; r < game.brickRowCount; r++) {
            var b = game.bricks[c][r];
            if (b.status == 1) {
              if (game.ball.x > b.x && game.ball.x < b.x + game.brickWidth && game.ball.y > b.y && game.ball.y < b.y + game.brickHeight) {
                game.ball.dy = -game.ball.dy;
                b.status = 0;
                game.score++;
                if (game.score == game.brickRowCount * game.brickColumnCount) {
                  game.gameOver = true;
                }
              }
            }
          }
        }
      }

// ゲームの描画
      function draw() {
        game.ctx.clearRect(0, 0, game.canvas.width, game.canvas.height);
        drawBricks();
        drawBall();
        drawPaddle();
        collisionDetection();

game.ball.x += game.ball.dx;
        game.ball.y += game.ball.dy;

if (game.ball.x + game.ball.dx > game.canvas.width - game.ball.size || game.ball.x + game.ball.dx < game.ball.size) {
          game.ball.dx = -game.ball.dx;
        }
        if (game.ball.y + game.ball.dy < game.ball.size) {
          game.ball.dy = -game.ball.dy;
        } else if (game.ball.y + game.ball.dy > game.canvas.height - game.ball.size) {
          if (game.ball.x > game.paddle.x && game.ball.x < game.paddle.x + game.paddle.width) {
            game.ball.dy = -game.ball.dy;
          } else {
            game.gameOver = true;
          }
        }

if (game.paddle.x + game.paddle.dx > 0 && game.paddle.x + game.paddle.dx < game.canvas.width - game.paddle.width) {
          game.paddle.x += game.paddle.dx;
        }

if (!game.gameOver) {
          requestAnimationFrame(draw);
        } else {
          alert("ゲームオーバー！ スコア: " + game.score);
          location.reload();
        }
      }

// キーボード入力イベントのリスナー
      document.addEventListener("keydown", function(event) {
        if (event.keyCode == 37) {
          game.paddle.dx = -5; // 左
        } else if (event.keyCode == 39) {
          game.paddle.dx = 5; // 右
        }
      });

document.addEventListener("keyup", function(event) {
        if (event.keyCode == 37 || event.keyCode == 39) {
          game.paddle.dx = 0;
        }
      });

// マウス移動イベントのリスナー
      document.addEventListener("mousemove", function(event) {
        var relativeX = event.clientX - game.canvas.offsetLeft;
        if (relativeX > 0 && relativeX < game.canvas.width) {
          game.paddle.x = relativeX - game.paddle.width/2;
        }
      });

// メインのゲームループ
      draw();
    </script>
  </body>
</html>
```

このプログラムは、ブロックを破壊していくブロック崩しのようなゲームです。ボールとパドルの動きをコントロールし、ボールがブロックやパドルに衝突するとスコアが増えます。すべてのブロックを破壊するとゲームクリアです。パドルはキーボードの左右キー、もしくはマウスの移動で操作します。ゲームオーバーになるとスコアが表示され、リロードすることで再度ゲームをプレイすることができます。

なお、このプログラムはHTMLファイル内に直接記述されているため、別ファイルとして分離する必要はありません。また、スマートフォンでも遊ぶことができますが、十分な操作性を確保するためには画面サイズやUIの最適化などの調整が必要です。