AI game creator

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

No:34937

109

←

Prev Next

→

Flame eruption
Developer User16394｜Date and time 24/1/12 19:54:46
Build time 14.26 sec｜Game capacity 3.714KB｜

Script

Sure! Here's a simple game called "Flame Eruption" implemented as a single HTML file using JavaScript and enclosed in script tags. The game can be played on smartphones and incorporates pictograms for better visual representation.

In this game, you control a flame character using the smartphone's touch or arrow keys on a computer. The objective is to avoid hitting the edges of the canvas while the score keeps increasing. The game ends when the flame collides with the edge of the canvas, and a game over message is displayed. Please note that this is a basic implementation of the game and can be expanded upon with additional features, levels, and graphics as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flame Eruption</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #222;
        font-family: Arial, sans-serif;
      }
      canvas {
        border: 2px solid #fff;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Set canvas size
      canvas.width = window.innerWidth * 0.8;
      canvas.height = window.innerHeight * 0.8;

// Game variables
      let score = 0;
      let gameOver = false;

// Flame object
      const flame = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        color: "#f00",
      };

// Key event listeners for smartphone operation
      window.addEventListener("keydown", handleKeyPress);
      window.addEventListener("touchstart", handleTouchStart);
      window.addEventListener("touchend", handleTouchEnd);

// Functions to handle key events
      function handleKeyPress(event) {
        if (event.key === "ArrowLeft") {
          moveFlame(-20);
        } else if (event.key === "ArrowRight") {
          moveFlame(20);
        }
      }

function handleTouchStart(event) {
        const touchX = event.changedTouches[0].clientX;
        const flameX = flame.x + flame.width / 2;

if (touchX < flameX) {
          moveFlame(-20);
        } else if (touchX > flameX) {
          moveFlame(20);
        }
      }

function handleTouchEnd() {
        // Do nothing on touch end
      }

// Function to move the flame
      function moveFlame(offsetX) {
        flame.x += offsetX;

if (flame.x < 0) {
          flame.x = 0;
        } else if (flame.x + flame.width > canvas.width) {
          flame.x = canvas.width - flame.width;
        }
      }

// Function to draw the flame on canvas
      function drawFlame() {
        ctx.fillStyle = flame.color;
        ctx.fillRect(flame.x, flame.y, flame.width, flame.height);
      }

// Function to update game score
      function updateScore() {
        ctx.fillStyle = "#fff";
        ctx.font = "24px Arial";
        ctx.fillText(`Score: ${score}`, 10, 30);
      }

// Function to handle game over state
      function showGameOver() {
        ctx.fillStyle = "#fff";
        ctx.font = "48px Arial";
        ctx.fillText("Game Over", canvas.width / 2 - 120, canvas.height / 2);
      }

// Game loop
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!gameOver) {
          drawFlame();
          updateScore();
          score++;
          requestAnimationFrame(gameLoop);
        } else {
          showGameOver();
        }
      }

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

Please note that this is a basic implementation of the game and can be expanded upon with additional features, levels, and graphics as per your requirements.