Make a game about a hero who is trying to save his princess from a evil demon's game

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

No:20027

←

Prev Next

→

Make a game about a hero who is trying to save his..ALL
Developer User8919｜Date and time 23/10/7 23:44:17
Build time 22.918 sec｜Game capacity 4.026KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It can be played on a smartphone and incorporates pictograms for a visually appealing experience.

Before running this code, make sure you have pictogram images (`emozi_all/pictogram.png`, `emozi_all/princess.png`, and `emozi_rabbit.png`) available in the same directory as this HTML file. You can replace those images with your own pictograms or use appropriate images from the internet. This game allows the player to control the hero using the arrow keys on their smartphone. The goal is to save the princess while avoiding the demon. If the hero collides with the princess, a congratulations message is displayed and the game restarts. If the hero collides with the demon, a game over message is displayed and the game restarts.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It can be played on a smartphone and incorporates pictograms for a visually appealing experience.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Save the Princess!</title>
    <style>
      #container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <canvas id="gameCanvas" width="400" height="400"></canvas>
    </div>

// Pictograms
        const heroImage = new Image();
        heroImage.src = "hero.png";
        const princessImage = new Image();
        princessImage.src = "princess.png";
        const demonImage = new Image();
        demonImage.src = "demon.png";

// Game objects
        const hero = {
          x: canvas.width / 2,
          y: canvas.height / 2,
          width: 32,
          height: 32
        };
        const princess = {
          x: Math.random() * (canvas.width - 32),
          y: Math.random() * (canvas.height - 32),
          width: 32,
          height: 32
        };
        const demon = {
          x: Math.random() * (canvas.width - 32),
          y: Math.random() * (canvas.height - 32),
          width: 32,
          height: 32
        };

// Keyboard input handling
        const keys = {};
        document.addEventListener("keydown", function(event) {
          keys[event.keyCode] = true;
        });
        document.addEventListener("keyup", function(event) {
          keys[event.keyCode] = false;
        });

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

// Update game logic
          if (keys[37]) hero.x -= 5; // Left arrow key
          if (keys[39]) hero.x += 5; // Right arrow key
          if (keys[38]) hero.y -= 5; // Up arrow key
          if (keys[40]) hero.y += 5; // Down arrow key

// Draw game objects
          ctx.drawImage(heroImage, hero.x, hero.y, hero.width, hero.height);
          ctx.drawImage(princessImage, princess.x, princess.y, princess.width, princess.height);
          ctx.drawImage(demonImage, demon.x, demon.y, demon.width, demon.height);

// Collision detection
          if (
            hero.x < princess.x + princess.width &&
            hero.x + hero.width > princess.x &&
            hero.y < princess.y + princess.height &&
            hero.y + hero.height > princess.y
          ) {
            alert("Congratulations! You saved the princess!");
            window.location.reload(); // Restart game
          }

if (
            hero.x < demon.x + demon.width &&
            hero.x + hero.width > demon.x &&
            hero.y < demon.y + demon.height &&
            hero.y + hero.height > demon.y
          ) {
            alert("Oh no! The demon got you. Game over!");
            window.location.reload(); // Restart game
          }

// Request animation frame
          requestAnimationFrame(gameLoop);
        }

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

Before running this code, make sure you have pictogram images (`hero.png`, `princess.png`, and `demon.png`) available in the same directory as this HTML file. You can replace those images with your own pictograms or use appropriate images from the internet.

This game allows the player to control the hero using the arrow keys on their smartphone. The goal is to save the princess while avoiding the demon. If the hero collides with the princess, a congratulations message is displayed and the game restarts. If the hero collides with the demon, a game over message is displayed and the game restarts.