AI game creator

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

No:7902

161

←

Prev Next

→

Gonorrego 13
Developer User3788｜Date and time 23/7/10 18:06:04
Build time 20.345 sec｜Game capacity 3.759KB｜

Script

了解しました。以下にサンプルのゲームの実装例を示します。このゲームは簡単なボールを跳ね返すゲームです。

これはボールを使ってパドルを操作し、ボールを跳ね返すシンプルなゲームです。キーボードの右矢印キーと左矢印キーを使ってパドルを操作します。ボールがパドルの下に到達した場合、ゲームオーバーとなります。ゲームオーバー時に画面をリロードして再プレイすることができます。必要なJavaScriptコードは`
`タグ内に記述されており、`requestAnimationFrame`メソッドを使用してゲームのアニメーションを実現しています。

←

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>
    #gameCanvas {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      width: 300px;
      height: 400px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="gameCanvas"></div>

// パドルの設定
    const paddleHeight = 10;
    const paddleWidth = 75;
    const paddleX = (canvas.width - paddleWidth) / 2;
    let rightPressed = false;
    let leftPressed = false;

// キーボードの操作
    document.addEventListener('keydown', keyDownHandler);
    document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(e) {
        if(e.key === 'Right' || e.key === 'ArrowRight') {
            rightPressed = true;
        } else if(e.key === 'Left' || e.key === 'ArrowLeft') {
            leftPressed = true;
        }
    }

function keyUpHandler(e) {
        if(e.key === "Right" || e.key === "ArrowRight") {
            rightPressed = false;
        } else if(e.key === "Left" || e.key === "ArrowLeft") {
            leftPressed = false;
        }
    }

// ボールとパドルの衝突判定
    function collisionDetection() {
        if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if(y + dy < ballRadius) {
            dy = -dy;
        } else if(y + dy > canvas.height-ballRadius) {
            if(x > paddleX && x < paddleX + paddleWidth) {
                dy = -dy;
            } else {
                alert("ゲームオーバー");
                document.location.reload(); // ゲームをリロードして再プレイ
            }
        }
    }

// パドルの描画
    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }

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

// ゲームのメインループ
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();
        collisionDetection();

// パドルの移動
        if(rightPressed && paddleX < canvas.width - paddleWidth) {
            paddleX += 7;
        } else if(leftPressed && paddleX > 0) {
            paddleX -= 7;
        }

// ボールの移動
        x += dx;
        y += dy;

requestAnimationFrame(draw);
    }

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

これはボールを使ってパドルを操作し、ボールを跳ね返すシンプルなゲームです。キーボードの右矢印キーと左矢印キーを使ってパドルを操作します。ボールがパドルの下に到達した場合、ゲームオーバーとなります。ゲームオーバー時に画面をリロードして再プレイすることができます。

必要なJavaScriptコードは`<script>`タグ内に記述されており、`requestAnimationFrame`メソッドを使用してゲームのアニメーションを実現しています。