Chicken crossing road game's game

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

No:11191

105

←

Prev Next

→

Chicken crossing road game
Developer User4833｜Date and time 23/8/8 8:15:47
Build time 33.195 sec｜Game capacity 4.412KB｜

Script

Sure! Here's a simple implementation of the classic chicken crossing road game using JavaScript and HTML. The game is playable on a smartphone and uses pictograms for visuals.

To play the game, save the above code into a single HTML file and open it in a web browser on a smartphone. The game will start automatically once the page loads. Use the left and right arrow keys to move the chicken across the road without colliding with the moving cars. The score will increase for each successful crossing. The game will end if the chicken is hit by a car.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple implementation of the classic chicken crossing road game using JavaScript and HTML. The game is playable on a smartphone and uses pictograms for visuals.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Chicken Crossing Road</title>
  <style>
    /* Styling for the game */
    #game-container {
      width: 100%;
      height: 400px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem;
    }
    #chicken {
      position: absolute;
      bottom: 0;
      font-size: 2.5rem;
    }
    .car {
      position: absolute;
      height: 100px;
      width: 100px;
      font-size: 3rem;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

// Starts the game
    function startGame() {
      isGameOver = false;
      score = 0;
      cars.length = 0;

// Create chicken
      chicken.innerHTML = "🐔";
      chicken.id = "chicken";
      chicken.style.left = '50%';
      gameContainer.appendChild(chicken);

// Start moving cars
      gameInterval = setInterval(moveCars, 1000);

// Detect keyboard arrow key press
      document.addEventListener('keydown', moveChicken);

// Start scoring
      updateScore();
    }

// Move the chicken based on arrow key press
    function moveChicken(event) {
      if (event.keyCode === 37) { // left arrow key
        const currentPosition = parseFloat(chicken.style.left) || 0;
        const newPosition = currentPosition - 10;
        if (newPosition >= 0) {
          chicken.style.left = `${newPosition}%`;
        }
      } else if (event.keyCode === 39) { // right arrow key
        const currentPosition = parseFloat(chicken.style.left) || 0;
        const newPosition = currentPosition + 10;
        if (newPosition <= 90) {
          chicken.style.left = `${newPosition}%`;
        }
      }
    }

// Spawn a car and move all existing cars
    function moveCars() {
      const car = document.createElement('div');
      car.innerHTML = "🚗";
      car.className = 'car';
      car.style.left = `${getRandomPosition()}%`;
      gameContainer.appendChild(car);
      cars.push(car);

// Move existing cars
      cars.forEach((car, index) => {
        const top = parseFloat(car.style.top) || 0;
        car.style.top = `${top + 10}%`;

// Check if car collided with chicken
        if (checkCollision(car)) {
          gameOver();
        }

// Remove cars that fell off the screen
        if (top > 100) {
          cars.splice(index, 1);
          car.remove();
          increaseScore();
        }
      });
    }

// Check collision between car and chicken
    function checkCollision(car) {
      const chickenRect = chicken.getBoundingClientRect();
      const carRect = car.getBoundingClientRect();
      return (
        chickenRect.bottom >= carRect.top &&
        chickenRect.top <= carRect.bottom &&
        chickenRect.right >= carRect.left &&
        chickenRect.left <= carRect.right
      );
    }

// Game over logic
    function gameOver() {
      isGameOver = true;
      clearInterval(gameInterval);
      document.removeEventListener('keydown', moveChicken);
      alert(`Game Over! Your score is ${score}.`);
    }

// Increase score and update display
    function increaseScore() {
      score++;
      updateScore();
    }

// Update score display
    function updateScore() {
      document.getElementById('score').textContent = `Score: ${score}`;
    }

// Helper function to get a random position for cars
    function getRandomPosition() {
      return Math.floor(Math.random() * 90);
    }

// Start the game when the page is loaded
    window.addEventListener('load', startGame);
  </script>
</body>
</html>
```