Running game with obstacles to the end's game

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

No:6163

1373

←

Prev Next

→

Running game with obstacles to the end
Developer User3863｜Date and time 23/7/1 18:13:09
Build time 31.544 sec｜Game capacity 3.457KB｜

Script

Sure, here is a simple game where you control a character and try to reach the end while avoiding obstacles. The game is implemented as a single HTML file, enclosed in script tags, and written in JavaScript.

To play the game, save the code above as a ".html" file, then open it in a web browser. Use the arrow keys on your keyboard to control the player and try to reach the green end point while avoiding the blue obstacle. If you collide with the obstacle, you will be reset to the starting position. When you successfully reach the end point, an alert will be displayed congratulating you.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Obstacle Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #F9F9F9;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Game variables
    var canvas;
    var canvasContext;
    var playerX = 50;
    var playerY = 50;
    var playerSpeedX = 5;
    var playerSpeedY = 5;
    var obstacleX = 200;
    var obstacleY = 150;
    var obstacleWidth = 50;
    var obstacleHeight = 50;
    var gameEndX = 750;
    var gameEndY = 350;
    
    // Start the game
    function gameStart() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      
      // Game loop
      setInterval(update, 1000 / 30);
      
      // Event listeners for player movement
      document.addEventListener('keydown', function(event) {
        movePlayer(event.keyCode);
      });
    }
    
    // Update the game state
    function update() {
      movePlayer();
      draw();
    }
    
    // Move the player according to key input
    function movePlayer(keyCode) {
      switch (keyCode) {
        case 37:
          playerX -= playerSpeedX; // Left Arrow
          break;
        case 38:
          playerY -= playerSpeedY; // Up Arrow
          break;
        case 39:
          playerX += playerSpeedX; // Right Arrow
          break;
        case 40:
          playerY += playerSpeedY; // Down Arrow
          break;
      }
      
      // Check for collision with the obstacle
      if (playerX < obstacleX + obstacleWidth &&
          playerX + obstacleWidth > obstacleX &&
          playerY < obstacleY + obstacleHeight &&
          playerY + obstacleHeight > obstacleY) {
        // Collision detected, reset player position
        playerX = 50;
        playerY = 50;
      }
      
      // Check if reached the end
      if (playerX === gameEndX && playerY === gameEndY) {
        // Display victory message and stop the game loop
        clearInterval(update);
        alert('Congratulations! You reached the end.');
      }
    }
    
    // Draw the game objects
    function draw() {
      // Clear the canvas
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw the player
      canvasContext.fillStyle = '#FF0000';
      canvasContext.fillRect(playerX, playerY, 50, 50);
      
      // Draw the obstacle
      canvasContext.fillStyle = '#0000FF';
      canvasContext.fillRect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);
      
      // Draw the game end point
      canvasContext.fillStyle = '#00FF00';
      canvasContext.fillRect(gameEndX, gameEndY, 50, 50);
    }
    
    // Start the game when the page loads
    window.onload = gameStart;
  </script>
</body>
</html>
```