A tornado chasing game where you can move forward, backward, rotate left, rotate right, and deploy, you can intercept randomly appearing tornadoes on the map, if you are not deployed the screen will turn black and you will wait 5 seconds to restart, if you intercept a tornado while deployed you will gain a point, tornadoes will be symbol "🌪️", you will be symbol "🚗"'s game

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

No:38602

←

Prev Next

→

A tornado chasing game where you can move forward,..ALL
Developer User17421｜Date and time 24/1/25 5:26:44
Build time 34.832 sec｜Game capacity 6.94KB｜

Script

Sure! Here's an example of a tornado chasing game implemented as a single HTML file with JavaScript. It uses pictograms as requested. You can copy the code and save it as an HTML file to play the game in your smartphone's browser.

🚗

Score: 0

To play the game, open the HTML file in a web browser on your smartphone. You can use the arrow keys to move the car (🚗) forward, backward, and rotate left and right. Press the spacebar to deploy the car. Try to intercept the tornadoes (🌪️) that randomly appear on the map to gain points. If you fail to intercept a tornado, the screen turns black for 5 seconds before the game restarts. The current score is displayed at the top right corner of the screen.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-size: 48px; }
    .gameboard { position: relative; width: 100vw; height: 100vh; background-color: white; }
    .car { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .tornado { position: absolute; animation: moveTornado linear infinite; }
    @keyframes moveTornado {
      0% { top: -50px; left: 50%; }
      100% { top: calc(100vh + 50px); left: 50%; }
    }
    .score { position: absolute; top: 10px; right: 10px; }
  </style>
</head>
<body>
  <div class="gameboard">
    <div class="car">🚗</div>
    <div class="score">Score: 0</div>
  </div>

// Game Variables
    let score = 0;
    let gameRunning = true;
    let intervalId;

// Keyboard Input Handling
    const keysPressed = new Set();

document.addEventListener('keydown', (event) => {
      keysPressed.add(event.key.toLowerCase());

// Prevents page scrolling on arrow key press
      if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(event.key.toLowerCase())) {
        event.preventDefault();
      }

if (gameRunning && event.key.toLowerCase() === ' ') {
        deploy();
      }
    });

document.addEventListener('keyup', (event) => {
      keysPressed.delete(event.key.toLowerCase());
    });

// Game Loop
    function gameLoop() {
      if (keysPressed.has('arrowup')) {
        moveForward();
      }
      if (keysPressed.has('arrowdown')) {
        moveBackward();
      }
      if (keysPressed.has('arrowleft')) {
        rotateLeft();
      }
      if (keysPressed.has('arrowright')) {
        rotateRight();
      }

updateScore();
      checkCollision();

if (gameRunning) {
        requestAnimationFrame(gameLoop);
      }
    }

// Car Movement Functions
    function moveForward() {
      const car = document.querySelector('.car');
      const angle = carRotationAngle();
      const dx = CAR_SPEED * Math.sin(angle);
      const dy = -CAR_SPEED * Math.cos(angle);
      const x = parseFloat(car.style.left) + dx;
      const y = parseFloat(car.style.top) + dy;
      car.style.left = x + 'px';
      car.style.top = y + 'px';
    }

function moveBackward() {
      const car = document.querySelector('.car');
      const angle = carRotationAngle();
      const dx = -CAR_SPEED * Math.sin(angle);
      const dy = CAR_SPEED * Math.cos(angle);
      const x = parseFloat(car.style.left) + dx;
      const y = parseFloat(car.style.top) + dy;
      car.style.left = x + 'px';
      car.style.top = y + 'px';
    }

function rotateLeft() {
      const car = document.querySelector('.car');
      const transform = car.style.transform;
      const rotationAngle = transform ? parseFloat(transform.replace(/[^0-9.-]/g, '')) : 0;
      car.style.transform = `translate(-50%, -50%) rotate(${rotationAngle - 5}deg)`;
    }

function rotateRight() {
      const car = document.querySelector('.car');
      const transform = car.style.transform;
      const rotationAngle = transform ? parseFloat(transform.replace(/[^0-9.-]/g, '')) : 0;
      car.style.transform = `translate(-50%, -50%) rotate(${rotationAngle + 5}deg)`;
    }

function carRotationAngle() {
      const car = document.querySelector('.car');
      const transform = car.style.transform;
      return transform ? parseFloat(transform.replace(/[^0-9.-]/g, '')) * Math.PI / 180 : 0;
    }

// Tornado Functions
    function spawnTornado() {
      const tornado = document.createElement('div');
      tornado.className = 'tornado';
      tornado.innerHTML = '🌪️';
      tornado.style.top = '-50px';
      tornado.style.left = Math.random() * (window.innerWidth - 100) + 'px';
      document.querySelector('.gameboard').appendChild(tornado);
    }

function moveTornado() {
      const tornadoElements = document.querySelectorAll('.tornado');
      tornadoElements.forEach((tornado) => {
        const currentTop = parseFloat(tornado.style.top.replace(/[^0-9.-]/g, ''));
        tornado.style.top = currentTop + TORNADO_SPEED + 'px';
      });
    }

function removeTornado(tornado) {
      tornado.parentNode.removeChild(tornado);
    }

// Game Functions
    function deploy() {
      if (gameRunning) {
        const car = document.querySelector('.car');
        car.style.transform = `translate(-50%, -50%) rotate(0deg)`;
        setTimeout(() => {
          resetGame();
          gameRunning = true;
          score++;
          updateScore();
        }, 5000);
      }
    }

function resetGame() {
      const gameboard = document.querySelector('.gameboard');
      const tornadoElements = document.querySelectorAll('.tornado');

tornadoElements.forEach((tornado) => {
        removeTornado(tornado);
      });

gameboard.style.backgroundColor = 'white';
      gameRunning = false;
    }

function gameOver() {
      const gameboard = document.querySelector('.gameboard');
      gameboard.style.backgroundColor = 'black';

setTimeout(() => {
        resetGame();
        gameRunning = true;
      }, 5000);
    }

function updateScore() {
      const scoreElement = document.querySelector('.score');
      scoreElement.textContent = 'Score: ' + score;
    }

// Start Game
    intervalId = setInterval(spawnTornado, TORNADO_SPAWN_INTERVAL);
    gameLoop();
  </script>
</body>
</html>
```