A game that you have to click and go through tight spaces's game

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

No:37701

←

Prev Next

→

A game that you have to click and go through tight..ALL
Developer User17100｜Date and time 24/1/21 12:07:20
Build time 12.787 sec｜Game capacity 3.942KB｜

Script

Sure! Here's an example of a game where you have to click to navigate through tight spaces using pictograms. This implementation is within a single HTML file and enclosed in script tags. It utilizes JavaScript for the game logic.

Score: 0

In this game, you control a player character represented as a colored square on top of the screen. The objective is to successfully click the "Jump" button and navigate through the moving obstacle represented by a red rectangle in a tight space at the bottom of the screen. The score increases each time you pass through an obstacle. If a collision occurs between the player and the obstacle, the game ends and the final score is displayed. You can play this game on a smartphone by opening the HTML file in a web browser.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #game {
      position: relative;
      width: 400px;
      height: 600px;
      background-color: #ccc;
    }
    
    #player {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background-color: #333;
    }
    
    #obstacle {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 400px;
      background-color: #f00;
    }
    
    #score {
      font-family: Arial, sans-serif;
      font-size: 20px;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    
    .controls {
      font-family: Arial, sans-serif;
      font-size: 20px;
      position: fixed;
      bottom: 10px;
      left: 10px;
    }
    
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
    <div id="obstacle"></div>
  </div>
  
  <div id="score">Score: 0</div>
  <div class="controls">
    <button onclick="jump()">Jump</button>
  </div>

// Game settings
    var gameSpeed = 3;
    var jumpHeight = 150;

// Function to handle player jump
    function jump() {
      if (!isGameOver) {
        player.style.animation = "jump 0.5s";
        setTimeout(function() {
          player.style.animation = "";
        }, 500);
        player.style.bottom = (parseInt(player.style.bottom) + jumpHeight) + "px";
      }
    }

// Function to update game position
    function update() {
      obstacle.style.left = (parseInt(obstacle.style.left) - gameSpeed) + "px";

if (parseInt(obstacle.style.left) + parseInt(obstacle.style.width) < 0) {
        // Reset obstacle position
        var obstaclePos = Math.floor(Math.random() * 300) + 100;
        obstacle.style.left = game.offsetWidth + "px";
        obstacle.style.height = obstaclePos + "px";
        obstacle.style.bottom = "0";

// Increase score
        score++;
        scoreLabel.innerHTML = "Score: " + score;
      }

if (checkCollision()) {
        endGame();
      }

if (!isGameOver) {
        requestAnimationFrame(update);
      }
    }

// Function to check collision between player and obstacle
    function checkCollision() {
      var playerRect = player.getBoundingClientRect();
      var obstacleRect = obstacle.getBoundingClientRect();

return (
        playerRect.bottom >= obstacleRect.top &&
        playerRect.top <= obstacleRect.bottom &&
        playerRect.right >= obstacleRect.left &&
        playerRect.left <= obstacleRect.right
      );
    }

// Function to end the game
    function endGame() {
      isGameOver = true;
      scoreLabel.innerHTML += " - Game Over";
    }

// Start the game
    update();
  </script>
</body>
</html>
```