車で障害物を避けながらできるだけ早くゴールする's game

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

No:37248

←

Prev Next

→

車で障害物を避けながらできるだけ早くゴールする
Developer User17044｜Date and time 24/1/20 22:27:21
Build time 16.193 sec｜Game capacity 4.455KB｜

Script

了解しました。以下が、車で障害物を避けながらゴールするゲームの実装例です。

このゲームでは、車（黒い四角形）を左右に移動させて、赤い障害物に衝突しないようにし、緑のゴールに到達することが目標です。障害物に衝突すると「Game Over!」のアラートが表示され、ゴールに到達すると「Game Clear!」のアラートが表示されます。車の移動は左右キーで行います。また、このゲームはスマートフォンでも操作できるようになっています。ただし、画面の幅に合わせたレスポンシブデザインやタッチ操作に対応していないため、必要に応じて要件を追加して実装を改良することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

了解しました。以下が、車で障害物を避けながらゴールするゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #car {
      position: absolute;
      bottom: 10px;
      width: 50px;
      height: 80px;
      background: black;
    }

#obstacle {
      position: absolute;
      bottom: 10px;
      width: 50px;
      height: 50px;
      background: red;
    }

#goal {
      position: absolute;
      top: 10px;
      width: 50px;
      height: 50px;
      background: green;
    }
  </style>
</head>
<body>
  <div id="car"></div>
  <div id="obstacle"></div>
  <div id="goal"></div>

function updateCar() {
      car.style.left = carLeft + 'px';
    }

function updateObstacle() {
      obstacle.style.left = obstacleLeft + 'px';
    }

function updateGoal() {
      goal.style.left = goalLeft + 'px';
    }

function checkCollision() {
      const carRect = car.getBoundingClientRect();
      const obstacleRect = obstacle.getBoundingClientRect();
      const goalRect = goal.getBoundingClientRect();

if (
        carRect.left < obstacleRect.right &&
        carRect.right > obstacleRect.left &&
        carRect.top < obstacleRect.bottom &&
        carRect.bottom > obstacleRect.top
      ) {
        gameOver();
      }

if (
        carRect.left < goalRect.right &&
        carRect.right > goalRect.left &&
        carRect.top < goalRect.bottom &&
        carRect.bottom > goalRect.top
      ) {
        gameClear();
      }
    }

function moveCar() {
      carLeft += carSpeed;

if (carLeft < 0) {
        carLeft = 0;
      }
      if (carLeft + carWidth > screenWidth) {
        carLeft = screenWidth - carWidth;
      }

updateCar();
    }

function moveObstacle() {
      obstacleLeft += obstacleSpeed;

if (obstacleLeft + obstacleWidth > screenWidth || obstacleLeft < 0) {
        obstacleSpeed *= -1;
        obstacleLeft += obstacleSpeed;
      }

updateObstacle();
    }

function moveGoal() {
      goalLeft += goalSpeed;

if (goalLeft + goalWidth > screenWidth || goalLeft < 0) {
        goalSpeed *= -1;
        goalLeft += goalSpeed;
      }

updateGoal();
    }

function gameLoop() {
      if (!isGameRunning) {
        return;
      }

moveCar();
      moveObstacle();
      moveGoal();
      checkCollision();

requestAnimationFrame(gameLoop);
    }

function startGame() {
      document.addEventListener('keydown', handleKeyDown);
      document.addEventListener('keyup', handleKeyUp);

gameLoop();
    }

function gameOver() {
      isGameRunning = false;
      alert('Game Over!');
    }

function gameClear() {
      isGameRunning = false;
      alert('Game Clear!');
    }

function handleKeyDown(event) {
      if (event.key === 'ArrowLeft') {
        carSpeed = -3;
      } else if (event.key === 'ArrowRight') {
        carSpeed = 3;
      }
    }

function handleKeyUp(event) {
      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
        carSpeed = 0;
      }
    }

startGame();
  </script>
</body>
</html>
```

このゲームでは、車（黒い四角形）を左右に移動させて、赤い障害物に衝突しないようにし、緑のゴールに到達することが目標です。障害物に衝突すると「Game Over!」のアラートが表示され、ゴールに到達すると「Game Clear!」のアラートが表示されます。車の移動は左右キーで行います。

また、このゲームはスマートフォンでも操作できるようになっています。ただし、画面の幅に合わせたレスポンシブデザインやタッチ操作に対応していないため、必要に応じて要件を追加して実装を改良することができます。