AI game creator

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

No:7403

2710

←

Prev Next

→

cassette-vision
Developer User3997｜Date and time 23/7/7 14:22:44
Build time 21.648 sec｜Game capacity 4.54KB｜

Script

カセットビジョンは1970年代から1980年代にかけて日本で発売されていた家庭用ゲーム機です。以下に、カセットビジョンを模したゲームを作成するプログラムの一例を示します。

このプログラムは、カセットビジョン風のブロック崩しゲームを実装しています。プレイヤーは左右の矢印キーでパドルを操作し、ボールを跳ね返してブロックを破壊することが目標です。ボールが下の壁に当たってしまうとゲームオーバーになります。以上が、カセットビジョンを模したゲームを1枚のHTMLファイルに実装するプログラムの例です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>カセットビジョン</title>
  <style>
    #canvas {
      display: block;
      margin: 0 auto;
      background-color: #000;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="320" height="240"></canvas>

let paddleX = (canvas.width - paddleWidth) / 2;
    let ballX = canvas.width / 2;
    let ballY = canvas.height - 30;
    let ballDX = 1;
    let ballDY = -1;

for (let row = 0; row < brickRows; row++) {
      bricks[row] = [];
      for (let col = 0; col < brickCols; col++) {
        bricks[row][col] = { x: 0, y: 0, visible: true };
      }
    }

function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = '#FFF';
      ctx.fill();
      ctx.closePath();
    }

function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = '#FFF';
      ctx.fill();
      ctx.closePath();
    }

function drawBricks() {
      for (let row = 0; row < brickRows; row++) {
        for (let col = 0; col < brickCols; col++) {
          if (bricks[row][col].visible) {
            const brickX = (col * (brickWidth + brickPadding)) + brickOffsetLeft;
            const brickY = (row * (brickHeight + brickPadding)) + brickOffsetTop;

bricks[row][col].x = brickX;
            bricks[row][col].y = brickY;

ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = '#FFF';
            ctx.fill();
            ctx.closePath();
          }
        }
      }
    }

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawPaddle();
      drawBall();
      drawBricks();
      detectCollision();

if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
        ballDX = -ballDX;
      }
      if (ballY + ballDY < ballRadius) {
        ballDY = -ballDY;
      } else if (ballY + ballDY > canvas.height - ballRadius - paddleHeight) {
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
          ballDY = -ballDY;
        } else {
          // ゲームオーバー処理
          alert('Game Over');
          document.location.reload();
        }
      }

paddleX += paddleSpeed;
      if (paddleX < 0) {
        paddleX = 0;
      } else if (paddleX > canvas.width - paddleWidth) {
        paddleX = canvas.width - paddleWidth;
      }

ballX += ballSpeed * ballDX;
      ballY += ballSpeed * ballDY;

requestAnimationFrame(update);
    }

update();
  </script>
</body>
</html>
```

このプログラムは、カセットビジョン風のブロック崩しゲームを実装しています。プレイヤーは左右の矢印キーでパドルを操作し、ボールを跳ね返してブロックを破壊することが目標です。ボールが下の壁に当たってしまうとゲームオーバーになります。

以上が、カセットビジョンを模したゲームを1枚のHTMLファイルに実装するプログラムの例です。