AI game creator

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

No:6740

←

Prev Next

→

full marathon
Developer User3903｜Date and time 23/7/3 13:23:30
Build time 36.836 sec｜Game capacity 3.679KB｜

Script

以下は、HTML5 Canvasを使用して作成された簡単なランニングゲームの例です。このゲームでは、プレイヤーが障害物を避けながらできるだけ長く走り続けることを目指します。

このゲームでは、プレイヤー（緑の四角）は画面上を上下に移動し、障害物（赤の長方形）を避けながらスコアを増やしていきます。スコアは画面左上に表示されます。プレイヤーが障害物に接触するとゲームオーバーになります。障害物は徐々に加速し、プレイヤーが長く生き残るほど難しくなります。このゲームは画面上をタップまたはクリックすることで操作でき、スマートフォンでも遊ぶことができます。絵文字の使用は難しいですが、プレイヤーや障害物のカラーを変えるなど独自のカスタマイズを加えることもできます。

←

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 {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const player = { x: 50, y: canvas.height / 2, size: 20, speed: 5 };
      const obstacles = [];
      let score = 0;
      let isGameOver = false;
      
      function drawPlayer() {
        ctx.fillStyle = "green";
        ctx.fillRect(player.x, player.y, player.size, player.size);
      }
      
      function drawObstacles() {
        ctx.fillStyle = "red";
        for (let obstacle of obstacles) {
          ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        }
      }
      
      function updatePlayer() {
        if (!isGameOver) {
          player.y += player.speed;
          if (player.y < 0 || player.y + player.size > canvas.height) {
            gameOver();
          }
          for (let obstacle of obstacles) {
            if (collisionCheck(player, obstacle)) {
              gameOver();
              break;
            }
          }
        }
      }
      
      function updateObstacles() {
        for (let obstacle of obstacles) {
          obstacle.x -= 5;
          if (obstacle.x + obstacle.width < 0) {
            obstacles.shift();
            score++;
          }
        }
        if (obstacles.length < 3) {
          const obstacle = {
            x: canvas.width,
            y: Math.random() * canvas.height,
            width: 20,
            height: Math.random() * 200 + 20
          };
          obstacles.push(obstacle);
        }
      }
      
      function collisionCheck(rect1, rect2) {
        if (rect1.x + rect1.size > rect2.x &&
            rect1.x < rect2.x + rect2.width &&
            rect1.y + rect1.size > rect2.y &&
            rect1.y < rect2.y + rect2.height) {
          return true;
        }
        return false;
      }
      
      function gameOver() {
        isGameOver = true;
      }
      
      function drawScore() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "black";
        ctx.fillText("Score: " + score, 10, 20);
      }
      
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        updatePlayer();
        updateObstacles();
        
        drawPlayer();
        drawObstacles();
        drawScore();
        
        if (!isGameOver) {
          requestAnimationFrame(gameLoop);
        }
      }
      
      gameLoop();
    </script>
  </body>
</html>
```

このゲームでは、プレイヤー（緑の四角）は画面上を上下に移動し、障害物（赤の長方形）を避けながらスコアを増やしていきます。スコアは画面左上に表示されます。プレイヤーが障害物に接触するとゲームオーバーになります。障害物は徐々に加速し、プレイヤーが長く生き残るほど難しくなります。

このゲームは画面上をタップまたはクリックすることで操作でき、スマートフォンでも遊ぶことができます。絵文字の使用は難しいですが、プレイヤーや障害物のカラーを変えるなど独自のカスタマイズを加えることもできます。