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

No:37704

←

Prev Next

→

Crazy hero
Developer User17097｜Date and time 24/1/21 12:12:03
Build time 17.766 sec｜Game capacity 4.72KB｜

Script

Crazy Hero Game

Score: 0

This is a simple game called "Crazy Hero." The game is played on a smartphone. The player controls a hero and tries to avoid the obstacles scrolling from right to left. The hero automatically falls due to gravity, and the player can make the hero jump by tapping the screen or pressing the spacebar. The objective is to survive for as long as possible without colliding with any obstacles. The score increases by 1 for each obstacle successfully avoided. The game is implemented in a single HTML file and uses JavaScript enclosed in script tags. It includes pictograms in the form of an image for the hero. The game starts automatically when the page is loaded.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Crazy Hero Game</title>
  <style>
    body {
      text-align: center;
      padding-top: 100px;
      background-color: #f1f1f1;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #333;
    }
    #hero {
      width: 150px;
      height: 150px;
    }
    #score {
      font-size: 24px;
      margin: 20px 0;
    }
    #game-area {
      position: relative;
      height: 400px;
      border: 2px solid #333;
      margin: 0 auto;
    }
    .obstacle {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-color: #333;
    }
  </style>
</head>
<body>
  <h1>Crazy Hero Game</h1>
  <div id="game-area">
    <img src="hero.png" id="hero">
  </div>
  <p id="score">Score: 0</p>

// Game Variables
    let score = 0;
    let isGameRunning = false;
    let gameArea;
    let hero;
    let obstacles = [];
    let gameInterval;
    let obstacleInterval;

// Initialize the game
    function startGame() {
      gameArea = document.getElementById('game-area');
      hero = document.getElementById('hero');
      score = 0;
      obstacles = [];
      isGameRunning = true;

// Reset hero's position and score
      hero.style.bottom = '0';
      updateScore();

// Start game intervals
      gameInterval = setInterval(updateGameArea, 20);
      obstacleInterval = setInterval(createObstacle, OBSTACLE_INTERVAL);

// Enable controls
      document.addEventListener('keydown', handleKeyPress);
    }

// Update the game area
    function updateGameArea() {
      // Handle gravity
      let heroBottom = parseInt(hero.style.bottom) || 0;
      hero.style.bottom = (heroBottom + GRAVITY) + 'px';

// Move obstacles
      obstacles.forEach((obstacle, index) => {
        let obstacleRight = parseInt(obstacle.style.right) || 0;
        obstacle.style.right = (obstacleRight + OBSTACLE_SPEED) + 'px';

// Check collision with hero
        if (isCollision(hero, obstacle)) {
          endGame();
        }

// Remove obstacle if it is out of the game area
        if (obstacleRight >= GAME_AREA_WIDTH) {
          gameArea.removeChild(obstacle);
          obstacles.splice(index, 1);
          score++;
          updateScore();
        }
      });
    }

// Create a new obstacle
    function createObstacle() {
      let obstacle = document.createElement('div');
      obstacle.classList.add('obstacle');
      obstacle.style.right = '0';
      gameArea.appendChild(obstacle);
      obstacles.push(obstacle);
    }

// Handle key press events
    function handleKeyPress(event) {
      if (event.key === ' ' || event.key === 'ArrowUp') {
        event.preventDefault();
        jump();
      }
    }

// Make the hero jump
    function jump() {
      let heroBottom = parseInt(hero.style.bottom) || 0;
      if (heroBottom === 0) {
        hero.style.bottom = JUMP_FORCE + 'px';
      }
    }

// Check if there is a collision between two elements
    function isCollision(element1, element2) {
      let rect1 = element1.getBoundingClientRect();
      let rect2 = element2.getBoundingClientRect();
      return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.right < rect2.left ||
        rect1.left > rect2.right
      );
    }

// Update the score display
    function updateScore() {
      document.getElementById('score').innerHTML = 'Score: ' + score;
    }

// End the game
    function endGame() {
      clearInterval(gameInterval);
      clearInterval(obstacleInterval);
      isGameRunning = false;
      document.removeEventListener('keydown', handleKeyPress);
      alert('Game Over! Your score was: ' + score);
    }

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

The game is implemented in a single HTML file and uses JavaScript enclosed in script tags. It includes pictograms in the form of an image for the hero. The game starts automatically when the page is loaded.