AI game creator

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

No:6224

580

←

Prev Next

→

field hockey
Developer User3870｜Date and time 23/7/1 21:59:48
Build time 42.031 sec｜Game capacity 3.545KB｜

Script

了解しました。以下にホッケーゲームの例を実装します。

このコードはHTMLファイルの中にJavaScriptを含む形で、ホッケーゲームを実装しています。スマートフォンでも遊べるように、キーボードの入力を利用してパドルを操作します。ゲームキャンバス上に表示されるボールをパドルで打ち返し、ボールが画面下に落ちる前に打ち返し続けるゲームです。ゲームの開始はHTMLファイルをブラウザで開くと、自動的に行われます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にホッケーゲームの例を実装します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ホッケーゲーム</title>
  <style>
    canvas {
      border: 1px solid black;
      background: #efefef;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// パドル
      var paddleWidth = 80;
      var paddleHeight = 10;
      var paddleX = (canvas.width - paddleWidth) / 2;
      var paddleY = canvas.height - paddleHeight - 10;
      var paddleSpeed = 8;
      var rightPressed = false;
      var leftPressed = false;

// ボール
      var ballRadius = 10;
      var ballX = canvas.width / 2;
      var ballY = canvas.height - 30;
      var ballSpeedX = 4;
      var ballSpeedY = -4;

function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

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

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();
        drawBall();

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

// ボールの移動
        ballX += ballSpeedX;
        ballY += ballSpeedY;

// ボールの反射
        if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
          ballSpeedX = -ballSpeedX;
        }
        if (ballY + ballSpeedY < ballRadius) {
          ballSpeedY = -ballSpeedY;
        } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballSpeedY = -ballSpeedY;
          } else {
            // ゲームオーバー
            alert("ゲームオーバー");
            document.location.reload();
          }
        }

requestAnimationFrame(draw);
      }

function keyDownHandler(e) {
        if (e.keyCode === 39) {
          rightPressed = true;
        } else if (e.keyCode === 37) {
          leftPressed = true;
        }
      }

function keyUpHandler(e) {
        if (e.keyCode === 39) {
          rightPressed = false;
        } else if (e.keyCode === 37) {
          leftPressed = false;
        }
      }

document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

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

このコードはHTMLファイルの中にJavaScriptを含む形で、ホッケーゲームを実装しています。スマートフォンでも遊べるように、キーボードの入力を利用してパドルを操作します。ゲームキャンバス上に表示されるボールをパドルで打ち返し、ボールが画面下に落ちる前に打ち返し続けるゲームです。

ゲームの開始はHTMLファイルをブラウザで開くと、自動的に行われます。