An interactive game for kids which includes a man being chased and has multiple little challenges along the way's game

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

No:42026

←

Prev Next

→

An interactive game for kids which includes a man ..ALL
Developer User18773｜Date and time 24/2/10 6:44:33
Build time 12.102 sec｜Game capacity 3.759KB｜

Script

Sure! Here's a simple interactive game for kids called "The Great Escape":

This game is played by moving the mouse to control the player (represented as a white square) and avoid getting caught by the enemy (represented as a red square). The player needs to reach the right end of the screen to complete the challenge and win the game. If the player collides with the enemy, it's game over. The game uses a bounding box collision detection method to detect collisions.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a simple interactive game for kids called "The Great Escape":

```html
<!DOCTYPE html>
<html>
<head>
  <title>The Great Escape</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      background-color: #fff;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="500" height="300"></canvas>
  
  <script>
    // Game variables
    var canvas;
    var canvasContext;
    var playerX = 50;
    var playerY = 50;
    var playerWidth = 25;
    var playerHeight = 25;
    var enemyX = 300;
    var enemyY = 100;
    var enemyWidth = 25;
    var enemyHeight = 25;
    var isGameOver = false;
    var isChallengeCompleted = false;

// Game initialization
    function gameStart() {
      canvas = document.getElementById("gameCanvas");
      canvasContext = canvas.getContext("2d");
      canvas.addEventListener("mousemove", updatePlayerPos);
      
      setInterval(drawEverything, 16);
    }

// Update player position based on mouse movement
    function updatePlayerPos(event) {
      var rect = canvas.getBoundingClientRect();
      var root = document.documentElement;
      var mouseX = event.clientX - rect.left - root.scrollLeft;
      var mouseY = event.clientY - rect.top - root.scrollTop;
      
      playerX = mouseX - playerWidth / 2;
      playerY = mouseY - playerHeight / 2;
    }

// Main game loop
    function drawEverything() {
      // Clear canvas
      colorRect(0, 0, canvas.width, canvas.height, "#000");
      
      if (isGameOver) {
        canvasContext.fillStyle = "#fff";
        canvasContext.font = "30px Arial";
        canvasContext.fillText("Game Over!", canvas.width / 2 - 80, canvas.height / 2);
        return;
      }
      
      if (isChallengeCompleted) {
        canvasContext.fillStyle = "#fff";
        canvasContext.font = "30px Arial";
        canvasContext.fillText("Challenge Completed!", canvas.width / 2 - 130, canvas.height / 2 - 30);
        canvasContext.fillText("Congrats!", canvas.width / 2 - 60, canvas.height / 2 + 30);
        return;
      }
      
      // Draw player
      colorRect(playerX, playerY, playerWidth, playerHeight, "#fff");
      
      // Draw enemy
      colorRect(enemyX, enemyY, enemyWidth, enemyHeight, "#f00");
      
      // Check collision with enemy
      if (checkCollision()) {
        isGameOver = true;
      }
      
      // Check if challenge completed
      if (checkChallengeCompleted()) {
        isChallengeCompleted = true;
      }
    }

// Draw colored rectangle
    function colorRect(leftX, topY, width, height, color) {
      canvasContext.fillStyle = color;
      canvasContext.fillRect(leftX, topY, width, height);
    }

// Check collision between player and enemy using simple bounding box collision detection
    function checkCollision() {
      return playerX < enemyX + enemyWidth &&
             playerX + playerWidth > enemyX &&
             playerY < enemyY + enemyHeight &&
             playerY + playerHeight > enemyY;
    }

// Check if the player reaches the end of the screen
    function checkChallengeCompleted() {
      return playerX >= canvas.width - playerWidth;
    }

// Start the game once the page is fully loaded
    window.onload = function() {
      gameStart();
    };
  </script>
</body>
</html>
```