AI game creator

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

No:6048

137

←

Prev Next

→

Genius
Developer User3848｜Date and time 23/7/1 15:52:04
Build time 53.187 sec｜Game capacity 5.045KB｜

Script

以下は単純なブロック崩しゲームの例です。このプログラムでは、HTMLファイルにJavaScriptを含め、スマートフォンで操作して遊ぶことができます。

このプログラムでは、ブロックを壊すためにボールを跳ね返すパドルを操作します。ボールは自動的に動き、ブロックに当たると壊れます。ゲームオーバーになると、アラートが表示され、ゲームがリセットされます。このプログラムはHTMLファイルとして保存し、ブラウザで開くことで実行できます。スマートフォンのブラウザで開くと、スワイプでパドルの位置を制御することができます。なお、絵文字はブラウザによっては表示されないことがあります。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

以下は単純なブロック崩しゲームの例です。このプログラムでは、HTMLファイルにJavaScriptを含め、スマートフォンで操作して遊ぶことができます。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ブロック崩しゲーム</title>
  <style>
    #game {
      position: relative;
      width: 320px;
      height: 480px;
      margin: 0 auto;
      background-color: #000;
      overflow: hidden;
    }
    #paddle {
      position: absolute;
      bottom: 10px;
      width: 60px;
      height: 10px;
      background-color: #fff;
    }
    .brick {
      position: absolute;
      width: 60px;
      height: 20px;
      background-color: #fff;
    }
    #ball {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="brick" style="top: 50px; left: 50px;"></div>
    <div class="brick" style="top: 80px; left: 50px;"></div>
    <div class="brick" style="top: 110px; left: 50px;"></div>
    
    
  </div>

// ゲームのサイズ
    const gameWidth = game.clientWidth;
    const gameHeight = game.clientHeight;

// パドルのサイズと位置
    const paddleWidth = paddle.clientWidth;
    const paddleHeight = paddle.clientHeight;
    let paddleX = (gameWidth - paddleWidth) / 2;

// ボールのサイズと初期位置
    const ballSize = ball.clientWidth;
    let ballX = gameWidth / 2;
    let ballY = gameHeight / 2;

// ボールの移動量
    let ballSpeedX = 2;
    let ballSpeedY = 2;

// ブロックのサイズ
    const brickWidth = bricks[0].clientWidth;
    const brickHeight = bricks[0].clientHeight;

// パドルの移動
    function movePaddle(event) {
      paddleX = event.touches[0].clientX - paddleWidth / 2;
      if (paddleX < 0) paddleX = 0;
      if (paddleX > gameWidth - paddleWidth) paddleX = gameWidth - paddleWidth;
      paddle.style.transform = `translateX(${paddleX}px)`;
    }

// ゲームループ
    setInterval(() => {
      // ボールの移動
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// ボールの反射
      if (ballX < 0 || ballX + ballSize > gameWidth) {
        ballSpeedX *= -1;
      }

if (ballY < 0) {
        ballSpeedY *= -1;
      }

if (ballY + ballSize > gameHeight) {
        // ゲームオーバー処理
        alert('ゲームオーバー');
        // ゲームをリセット
        resetGame();
      }

// ブロックとの衝突判定
      bricks.forEach((brick, index) => {
        const rect = brick.getBoundingClientRect();
        if (
          ballX + ballSize > rect.left &&
          ballX < rect.left + brickWidth &&
          ballY + ballSize > rect.top &&
          ballY < rect.top + brickHeight
        ) {
          brick.remove();
          bricks.splice(index, 1);
          ballSpeedY *= -1;
        }
      });

// パドルとの衝突判定
      const paddleRect = paddle.getBoundingClientRect();
      if (
        ballX + ballSize > paddleRect.left &&
        ballX < paddleRect.left + paddleWidth &&
        ballY + ballSize > paddleRect.top &&
        ballY < paddleRect.top + paddleHeight
      ) {
        ballSpeedY *= -1;
      }

// ボールの位置を更新
      ball.style.transform = `translate(${ballX}px, ${ballY}px)`;
    }, 16);

// ゲームのリセット
    function resetGame() {
      paddleX = (gameWidth - paddleWidth) / 2;
      ballX = gameWidth / 2;
      ballY = gameHeight / 2;
      ballSpeedX = 2;
      ballSpeedY = 2;

// 全てのブロックをゲームに戻す
      bricks.forEach((brick) => {
        game.appendChild(brick);
      });
    }

// イベントリスナーの設定
    game.addEventListener('touchmove', movePaddle);

// ゲーム開始時のパドルの位置を更新
    paddle.style.transform = `translateX(${paddleX}px)`;
  </script>
</body>
</html>
```

このプログラムでは、ブロックを壊すためにボールを跳ね返すパドルを操作します。ボールは自動的に動き、ブロックに当たると壊れます。ゲームオーバーになると、アラートが表示され、ゲームがリセットされます。

このプログラムはHTMLファイルとして保存し、ブラウザで開くことで実行できます。スマートフォンのブラウザで開くと、スワイプでパドルの位置を制御することができます。なお、絵文字はブラウザによっては表示されないことがあります。