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

No:23490

←

Prev Next

→

offroad
Developer User10945｜Date and time 23/10/31 21:18:36
Build time 91.678 sec｜Game capacity 5.115KB｜

Script

Sure! Here's a simple game called "Offroad Adventure" implemented as a single HTML file using JavaScript and enclosed in script tags:

Offroad Adventure

In this game, you control a car and have to navigate through obstacles on an offroad track to reach the finish line. Simply tap or click on the game canvas and use the left and right arrows to move the car. Avoid colliding with the obstacles and try to cross the finish line to win the game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game called "Offroad Adventure" implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Offroad Adventure</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: Arial, sans-serif;
      }
      h1 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Offroad Adventure</h1>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Game variables
      let canvas;
      let context;
      let carX;
      const carY = 500;
      let obstacles;
      const obstacleSize = 50;
      const obstacleSpeed = 2;
      const finishLineY = 50;
      let gameLoop;
      let score;

// Initialize the game
      function startGame() {
        canvas = document.getElementById("gameCanvas");
        context = canvas.getContext("2d");
        carX = canvas.width / 2 - obstacleSize / 2;
        obstacles = [];
        score = 0;

document.addEventListener("keydown", handleKeyDown);

gameLoop = setInterval(updateGame, 20);
      }

// Handle keydown events to move the car
      function handleKeyDown(event) {
        if (event.key === "ArrowLeft") {
          carX -= 10;
        } else if (event.key === "ArrowRight") {
          carX += 10;
        }
      }

// Update the game state
      function updateGame() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawObstacles();
        drawRoad();
        drawCar();
        updateObstacles();
        checkCollision();
        drawScore();

// Draw finish line
        context.font = "48px Arial";
        context.fillText(finishFlagIcon, canvas.width / 2 - 24, finishLineY);

// Increase score
        score++;
      }

// Draw the car
      function drawCar() {
        context.font = "48px Arial";
        context.fillText(carIcon, carX, carY);
      }

// Draw road borders
      function drawRoad() {
        context.fillStyle = "#808080";
        context.fillRect(0, 0, canvas.width, finishLineY);
        context.fillRect(0, carY + obstacleSize, canvas.width, canvas.height - carY - obstacleSize);
      }

// Create obstacles randomly on the road
      function createObstacle() {
        const randomX = Math.floor(Math.random() * (canvas.width - obstacleSize));
        obstacles.push({ x: randomX, y: 0 });
      }

// Draw the obstacles
      function drawObstacles() {
        context.fillStyle = "#000000";

for (let obstacle of obstacles) {
          context.fillRect(obstacle.x, obstacle.y, obstacleSize, obstacleSize);
        }
      }

// Update the obstacle positions
      function updateObstacles() {
        for (let obstacle of obstacles) {
          obstacle.y += obstacleSpeed;
          if (obstacle.y > canvas.height) {
            obstacle.y = 0;
            obstacle.x = Math.floor(Math.random() * (canvas.width - obstacleSize));
          }
        }

if (score % 200 === 0) {
          createObstacle();
        }
      }

// Check for collision between the car and obstacles
      function checkCollision() {
        for (let obstacle of obstacles) {
          if (
            carX < obstacle.x + obstacleSize &&
            carX + obstacleSize > obstacle.x &&
            carY < obstacle.y + obstacleSize &&
            carY + obstacleSize > obstacle.y
          ) {
            gameOver();
            return;
          }
        }

if (carY < finishLineY + obstacleSize) {
          gameFinished();
        }
      }

// Game over
      function gameOver() {
        clearInterval(gameLoop);
        document.removeEventListener("keydown", handleKeyDown);
        context.fillStyle = "#000000";
        context.font = "48px Arial";
        context.fillText("Game Over!", canvas.width / 2 - 120, canvas.height / 2);
      }

// Game finished
      function gameFinished() {
        clearInterval(gameLoop);
        document.removeEventListener("keydown", handleKeyDown);
        context.fillStyle = "#000000";
        context.font = "48px Arial";
        context.fillText("You Won!", canvas.width / 2 - 80, canvas.height / 2);
      }

// Draw the current score
      function drawScore() {
        context.fillStyle = "#000000";
        context.font = "24px Arial";
        context.fillText("Score: " + score, 15, 35);
      }

// Start the game when the page loads
      window.onload = startGame;
    </script>
  </body>
</html>
```