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

No:17008

125

←

Prev Next

→

Inside a tornado for all devices
Developer User7570｜Date and time 23/9/22 6:00:51
Build time 30.456 sec｜Game capacity 3.066KB｜

Script

Sure! Here's a simple game called "Inside a Tornado" implemented as a single HTML file with JavaScript, enclosed in script tags. This game can be played on any device, including smartphones. It uses pictograms for a better visual experience.

Inside a Tornado

Score: 0

To play the game, save the above code in a file with the extension `.html` and open it in a web browser. The game will start, and you can control the player's movement inside the tornado using touch events on a smartphone. The goal is to collide with the tornado as many times as possible to score points. The score is displayed at the top of the screen. Have fun playing "Inside a Tornado"!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Inside a Tornado</title>
  <style>
    /* Add some basic styling */
    body {
      background-color: #E1E1E1;
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #gameCanvas {
      margin-top: 20px;
      border: 1px solid #000;
    }
    
    #score {
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Inside a Tornado</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <div id="score">Score: 0</div>

// Variables for the player and tornado
    let playerSize = 50;
    let playerX = canvas.width / 2 - playerSize / 2;
    let playerY = canvas.height / 2 - playerSize / 2;

let tornadoSize = 100;
    let tornadoX = Math.random() * (canvas.width - tornadoSize);
    let tornadoY = Math.random() * (canvas.height - tornadoSize);

let score = 0;

// Update the game canvas
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw the tornado
      ctx.fillStyle = "#0000FF";
      ctx.fillRect(tornadoX, tornadoY, tornadoSize, tornadoSize);

// Check if the player and tornado collide
      if (
        playerX < tornadoX + tornadoSize &&
        playerX + playerSize > tornadoX &&
        playerY < tornadoY + tornadoSize &&
        playerY + playerSize > tornadoY
      ) {
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;

// Reset tornado position
        tornadoX = Math.random() * (canvas.width - tornadoSize);
        tornadoY = Math.random() * (canvas.height - tornadoSize);
      }

// Move the tornado randomly
      tornadoX += Math.random() * 4 - 2;
      tornadoY += Math.random() * 4 - 2;

requestAnimationFrame(draw);
    }

// Handle touch events (for smartphone operation)
    canvas.addEventListener("touchmove", function (event) {
      event.preventDefault();
      playerX = event.touches[0].pageX - canvas.offsetLeft - playerSize / 2;
      playerY = event.touches[0].pageY - canvas.offsetTop - playerSize / 2;
    });

// Start the game
    draw();
  </script>
</body>
</html>
```