Make a racing game which educate people about road safety, in this game a person going to office from his residents between his journey some hurdles come across the road like speed beaker ,heavy traffic, speed limit sign etc's game

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

No:39450

←

Prev Next

→

Make a racing game which educate people about road..ALL
Developer User17652｜Date and time 24/1/28 14:07:36
Build time 21.341 sec｜Game capacity 5.58KB｜

Script

Sure! Here's a simple racing game implemented as a single HTML file that educates people about road safety. It uses JavaScript and includes pictograms to represent various road obstacles. Please note that this is just a basic implementation and can be further enhanced with graphics, sound effects, and additional features. Let's start coding the game:

To use the game, save this code in a file with a `.html` extension, and open it in a web browser. The game canvas will be displayed, and you can control the player by touching the left or right side of the screen on your smartphone. Avoid the obstacles and try to score as many points as possible while practicing good road safety. Note: Please replace the image URLs with actual image URLs for the speed beaker, traffic, and speed limit sign pictograms.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Road Safety Racing</title>
  <style>
    /* Add some basic styling for the game */
    body {
      background-color: #f0f0f0;
      text-align: center;
      margin: 0;
      padding: 0;
    }
      
    #gameCanvas {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    // Game Variables
    var canvas, ctx, interval, playerX, obstacles, score;
    var gameStarted = false;
    var gameSpeed = 2;
    
    // Pictograms for road obstacles
    var speedBeakerImg = new Image();
    speedBeakerImg.src = "https://example.com/speed_beaker.png";
    var trafficImg = new Image();
    trafficImg.src = "https://example.com/traffic.png";
    var speedLimitImg = new Image();
    speedLimitImg.src = "https://example.com/speed_limit.png";
    
    // Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      playerX = canvas.width / 2;
      obstacles = [];
      score = 0;
      gameStarted = true;
      
      // Add event listener for touch input
      canvas.addEventListener("touchstart", function(e) {
        e.preventDefault();
        
        var touchX = e.touches[0].clientX;
        if (touchX < playerX) {
          movePlayer(-gameSpeed * 4);
        } else if (touchX > playerX) {
          movePlayer(gameSpeed * 4);
        }
      });
      
      // Start the game loop
      interval = setInterval(update, 20);
    }
    
    // Update the game state
    function update() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Update player position
      playerX += gameSpeed;
      drawPlayer();
      
      // Spawn obstacles randomly
      if (Math.random() < 0.02) {
        obstacles.push({
          type: getRandomObstacle(),
          x: Math.random() * (canvas.width - 50),
          y: -50
        });
      }
      
      // Update obstacles positions
      for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].y += gameSpeed;
        drawObstacle(obstacles[i]);
        
        // Check collision with player
        if (checkCollision(obstacles[i])) {
          gameOver();
          return;
        }
        
        // Remove offscreen obstacles
        if (obstacles[i].y > canvas.height) {
          obstacles.splice(i, 1);
          i--;
          score++;
        }
      }
      
      // Draw score
      drawScore();
    }
    
    // Move the player
    function movePlayer(speed) {
      playerX += speed;
      if (playerX < 25) {
        playerX = 25;
      } else if (playerX > canvas.width - 25) {
        playerX = canvas.width - 25;
      }
    }
    
    // Draw the player
    function drawPlayer() {
      ctx.beginPath();
      ctx.arc(playerX, canvas.height - 50, 25, 0, Math.PI * 2);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();
    }
    
    // Draw obstacles
    function drawObstacle(obstacle) {
      if (obstacle.type === "speedBeaker") {
        ctx.drawImage(speedBeakerImg, obstacle.x, obstacle.y, 50, 50);
      } else if (obstacle.type === "traffic") {
        ctx.drawImage(trafficImg, obstacle.x, obstacle.y, 50, 50);
      } else if (obstacle.type === "speedLimit") {
        ctx.drawImage(speedLimitImg, obstacle.x, obstacle.y, 50, 50);
      }
    }
    
    // Generate a random obstacle type
    function getRandomObstacle() {
      var types = ["speedBeaker", "traffic", "speedLimit"];
      var randomIndex = Math.floor(Math.random() * types.length);
      return types[randomIndex];
    }
    
    // Check collision between player and obstacle
    function checkCollision(obstacle) {
      var playerY = canvas.height - 50;
      var playerRadius = 25;
      var obstacleRadius = 25;
      
      var dx = obstacle.x - playerX;
      var dy = obstacle.y - playerY;
      var distance = Math.sqrt(dx * dx + dy * dy);
      
      return distance < playerRadius + obstacleRadius;
    }
    
    // Draw the score
    function drawScore() {
      ctx.font = "20px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText("Score: " + score, 10, 30);
    }
    
    // Finish the game
    function gameOver() {
      clearInterval(interval);
      gameStarted = false;
      
      // Display game over message
      ctx.font = "30px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText("Game Over", canvas.width / 2 - 75, canvas.height / 2);
    }
    
    // Start the game when the page is loaded
    window.onload = function() {
      init();
    };
  </script>
</body>
</html>
```

Note: Please replace the image URLs with actual image URLs for the speed beaker, traffic, and speed limit sign pictograms.