AI game creator

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

No:7466

1120

←

Prev Next

→

Magic Ball
Developer User3788｜Date and time 23/7/7 23:06:16
Build time 23.702 sec｜Game capacity 3.565KB｜

Script

以下は、スマートフォンで操作することを前提とした「魔球ゲーム」の例です。必要な処理を実装し、ゲームとして遊ぶことができます。ただし、絵文字は使用していません。

このプログラムでは、キーボードの右矢印と左矢印を使ってパドルを操作し、ボールを打ち返すゲームです。ボールが地面に落ちるとゲームオーバーになり、再度プレイすることができます。

←

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>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    
    <script>
      // ゲームの設定
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      
      // パドルの設定
      const paddle = {
        width: 80,
        height: 20,
        x: canvas.width / 2 - 40,
        y: canvas.height - 40,
        dx: 5
      };
      
      // ボールの設定
      const ball = {
        radius: 10,
        x: canvas.width / 2,
        y: canvas.height / 2,
        dx: 3,
        dy: -3
      };
      
      // パドルを描画する関数
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
      
      // ボールを描画する関数
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
      
      // ゲームの状態を更新する関数
      function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();
        drawBall();
        
        // パドルの移動
        if (rightPressed && paddle.x + paddle.width < canvas.width) {
          paddle.x += paddle.dx;
        } else if (leftPressed && paddle.x > 0) {
          paddle.x -= paddle.dx;
        }
        
        // ボールの移動
        ball.x += ball.dx;
        ball.y += ball.dy;
        
        // 壁との衝突判定
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
          ball.dx *= -1;
        }
        
        if (ball.y - ball.radius < 0) {
          ball.dy *= -1;
        }
        
        if (ball.y + ball.radius > canvas.height) {
          alert("ゲームオーバー");
          document.location.reload();
        }
        
        // パドルとの衝突判定
        if (ball.y + ball.radius > paddle.y && ball.y + ball.radius < paddle.y + paddle.height &&
            ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
          ball.dy *= -1;
        }
        
        requestAnimationFrame(update);
      }
      
      // キーボードイベント
      let rightPressed = false;
      let leftPressed = false;
      
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowRight") {
          rightPressed = true;
        } else if (event.key === "ArrowLeft") {
          leftPressed = true;
        }
      });
      
      document.addEventListener("keyup", function(event) {
        if (event.key === "ArrowRight") {
          rightPressed = false;
        } else if (event.key === "ArrowLeft") {
          leftPressed = false;
        }
      });
      
      // ゲーム開始
      update();
    </script>
  </body>
</html>
```