AI game creator

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

No:7223

643

←

Prev Next

→

bagpipe
Developer User1006｜Date and time 23/7/6 13:08:15
Build time 31.696 sec｜Game capacity 4.642KB｜

Script

了解しました。以下は、簡単なブロック崩しゲームの例です。スマホで操作することを前提としており、JavaScriptを使用しています。

このプログラムでは、スマホやキーボードの操作によってパドルを移動させ、ボールを跳ね返してブロックを壊すというゲームを実装しました。ボールがパドルに当たらないように気をつけてください。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。以下は、簡単なブロック崩しゲームの例です。スマホで操作することを前提としており、JavaScriptを使用しています。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ブロック崩しゲーム</title>
  <style>
    #gameCanvas {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// パドルの初期位置
    var paddleX = canvas.width / 2;
    // パドルの幅と高さ
    var paddleWidth = 80;
    var paddleHeight = 10;
    // パドルの移動速度
    var paddleSpeed = 8;

// ボールの初期位置と半径
    var ballX = canvas.width / 2;
    var ballY = canvas.height - 30;
    var ballRadius = 10;
    // ボールの移動速度
    var ballSpeedX = -2;
    var ballSpeedY = -2;

// パドルを描画する関数
    function drawPaddle() {
      context.beginPath();
      context.rect(paddleX - paddleWidth / 2, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

// ボールを描画する関数
    function drawBall() {
      context.beginPath();
      context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

// ゲームを描画する関数
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawPaddle();
      drawBall();

// パドルの移動
      if (moveLeft && paddleX - paddleWidth / 2 > 0) {
        paddleX -= paddleSpeed;
      }
      if (moveRight && paddleX + paddleWidth / 2 < canvas.width) {
        paddleX += paddleSpeed;
      }

// ボールの衝突判定
      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 - paddleWidth / 2 && ballX < paddleX + paddleWidth / 2) {
          ballSpeedY = -ballSpeedY;
        } else {
          // ゲームオーバー
          alert("ゲームオーバー");
          document.location.reload();
        }
      }

ballX += ballSpeedX;
      ballY += ballSpeedY;
    }

// パドルの操作フラグ
    var moveLeft = false;
    var moveRight = false;

// パドルの移動イベント
    function touchLeft() {
      moveLeft = true;
    }
    function touchRight() {
      moveRight = true;
    }
    function releaseButton() {
      moveLeft = false;
      moveRight = false;
    }

// カーソルキーの操作
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
      if (e.key === "Left" || e.key === "ArrowLeft") {
        moveLeft = true;
      } else if (e.key === "Right" || e.key === "ArrowRight") {
        moveRight = true;
      }
    }

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

// タッチ操作
    canvas.addEventListener("touchstart", touchStartHandler, false);
    canvas.addEventListener("touchend", touchEndHandler, false);
    canvas.addEventListener("touchcancel", touchEndHandler, false);

function touchStartHandler(e) {
      e.preventDefault();
      var touch = e.changedTouches[0];
      var rect = canvas.getBoundingClientRect();
      var touchX = touch.pageX - rect.left;

if (touchX < canvas.width / 2) {
        moveLeft = true;
      } else if (touchX >= canvas.width / 2) {
        moveRight = true;
      }
    }

function touchEndHandler(e) {
      e.preventDefault();
      moveLeft = false;
      moveRight = false;
    }

// メインループ
    setInterval(draw, 10);
  </script>
</body>
</html>
```