Make a maro game with levels and enemys's game

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

No:10874

101

←

Prev Next

→

Make a maro game with levels and enemys
Developer User4704｜Date and time 23/8/5 3:32:59
Build time 34.027 sec｜Game capacity 3.93KB｜

Script

Sure! Here's a simple game implementation using JavaScript, HTML, and pictograms. The game consists of multiple levels with enemies, and you can control the character using smartphone touch events. Copy the code below and save it as a single HTML file to play the game:

Ensure to replace the image URLs for the `character.src` and `enemy.src` with your own image URLs, hosting them somewhere accessible from the internet (e.g., replace `"emozi_all/pictogram.png"` and `"emozi_all/pictogram.png"`). You can play the game on a smartphone by opening the HTML file in a mobile browser, and control the character by tapping on the top half of the screen to move up and the bottom half to move down. The goal is to avoid colliding with enemies and reach the end of each level. Feel free to modify and enhance the game as per your requirements. Have fun playing!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    
    <script>
      // Game initialization
      var canvas = document.getElementById("gameCanvas");
      var context = canvas.getContext("2d");

// Pictograms for character and enemy
      var character = new Image();
      character.src = "https://example.com/character_pictogram.png";
      var enemy = new Image();
      enemy.src = "https://example.com/enemy_pictogram.png";

// Game objects
      var characterX = 50;
      var characterY = canvas.height - 50;
      var enemyX = canvas.width - 50;
      var enemyY = canvas.height - 50;

// Game state
      var score = 0;
      var level = 1;

// Game loop
      function update() {
        // Update character and enemy positions, collision detection, etc.
        if (CharacterCollidesWithEnemy()) {
          alert("Game Over! Score: " + score);
          location.reload(); // Restart game
          return;
        }
        
        if (characterX > canvas.width) {
          // Character reached end of level, move to next level
          level++;
          alert("Level " + level + " completed!");
          ResetPositions();
        }

// Clear canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw character and enemy
        context.drawImage(character, characterX, characterY, 50, 50);
        context.drawImage(enemy, enemyX, enemyY, 50, 50);

// Display score and level
        context.font = "20px Arial";
        context.fillText("Score: " + score, 10, 25);
        context.fillText("Level: " + level, 10, 50);

// Move enemy towards character
        enemyX -= level;

requestAnimationFrame(update);
      }

// Reset positions for each level
      function ResetPositions() {
        characterX = 50;
        characterY = canvas.height - 50;
        enemyX = canvas.width - 50;
        enemyY = canvas.height - 50;
      }

// Check collision between character and enemy
      function CharacterCollidesWithEnemy() {
        if (
          characterX < enemyX + 50 &&
          characterX + 50 > enemyX &&
          characterY < enemyY + 50 &&
          characterY + 50 > enemyY
        ) {
          return true;
        }
        return false;
      }

// Handle touch events
      canvas.addEventListener("touchstart", function(event) {
        var touchX = event.touches[0].clientX;
        var touchY = event.touches[0].clientY;

if (touchY < canvas.height / 2) {
          characterY -= 10; // Move character up
        } else {
          characterY += 10; // Move character down
        }

event.preventDefault();
      });

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

Ensure to replace the image URLs for the `character.src` and `enemy.src` with your own image URLs, hosting them somewhere accessible from the internet (e.g., replace `"https://example.com/character_pictogram.png"` and `"https://example.com/enemy_pictogram.png"`).

You can play the game on a smartphone by opening the HTML file in a mobile browser, and control the character by tapping on the top half of the screen to move up and the bottom half to move down. The goal is to avoid colliding with enemies and reach the end of each level.

Feel free to modify and enhance the game as per your requirements. Have fun playing!