Mario verses sonic with pictograms and controls's game | AI game creator

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

No:20266

68

Mario verses sonic with pictograms and controls
Developer User9004｜Date and time 23/10/9 2:32:59
Build time 12.735 sec｜Game capacity 3.249KB｜

Sure! Here's an example of a simple game featuring Mario and Sonic using pictograms and smartphone controls. It is implemented as a single HTML file containing JavaScript enclosed in script tags.

In the provided example, the game board is represented by a div element with id "gameBoard." The characters (Mario and Sonic) are represented by two additional div elements with ids "mario" and "sonic" respectively. Pictogram images for Mario and Sonic should be placed in the same directory as the HTML file with the names "emozi_all/game.png" and "emozi_chicken.png" respectively. To control the characters, the player can use the left and right arrow keys to move Mario and the 'A' and 'D' keys to move Sonic. The characters are restricted to move within the dimensions of the game board, which is set to 400px width and 300px height. When the webpage is loaded, an event listener is added to handle key presses. The characters' movements are controlled by the handleKeyPressed function, which updates their positions on the game board accordingly. Note: This is a basic example and can be enhanced with additional features and functionalities as per game requirements.

→ 　

0　

0　

　
　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a simple game featuring Mario and Sonic using pictograms and smartphone controls. It is implemented as a single HTML file containing JavaScript enclosed in script tags.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario vs Sonic Game</title>
  <style>
    #gameBoard {
      width: 400px;
      height: 300px;
      border: 2px solid black;
      position: relative;
    }
    #mario, #sonic {
      width: 50px;
      height: 50px;
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
    }
    #mario {
      background-image: url('mario.png');
    }
    #sonic {
      background-image: url('sonic.png');
    }
  </style>
</head>
<body>
  <div id="gameBoard">
    <div id="mario"></div>
    <div id="sonic"></div>
  </div>

<script>
    // Game variables
    var marioPosition = 0;
    var sonicPosition = 0;

// Handle keyboard events for character movements
    function handleKeyPressed(event) {
      var key = event.key;

if (key === "ArrowLeft") { // Move left
        moveCharacter("mario", -10);
      } else if (key === "ArrowRight") { // Move right
        moveCharacter("mario", 10);
      } else if (key === "a") { // Move left
        moveCharacter("sonic", -10);
      } else if (key === "d") { // Move right
        moveCharacter("sonic", 10);
      }
    }

// Move character on the game board
    function moveCharacter(character, distance) {
      var characterElement = document.getElementById(character);
      var currentPosition = character === "mario" ? marioPosition : sonicPosition;
      var newPosition = currentPosition + distance;

if (newPosition >= 0 && newPosition <= 350) {
        characterElement.style.left = newPosition + "px";
        if (character === "mario") {
          marioPosition = newPosition;
        } else {
          sonicPosition = newPosition;
        }
      }
    }

// Add event listener for key presses
    document.addEventListener("keydown", handleKeyPressed);

// Start the game
    window.onload = function() {
      // Initial positions
      document.getElementById("mario").style.left = marioPosition + "px";
      document.getElementById("sonic").style.left = sonicPosition + "px";
    };
  </script>
</body>
</html>
```

In the provided example, the game board is represented by a div element with id "gameBoard." The characters (Mario and Sonic) are represented by two additional div elements with ids "mario" and "sonic" respectively. Pictogram images for Mario and Sonic should be placed in the same directory as the HTML file with the names "mario.png" and "sonic.png" respectively.

To control the characters, the player can use the left and right arrow keys to move Mario and the 'A' and 'D' keys to move Sonic. The characters are restricted to move within the dimensions of the game board, which is set to 400px width and 300px height.

When the webpage is loaded, an event listener is added to handle key presses. The characters' movements are controlled by the handleKeyPressed function, which updates their positions on the game board accordingly.

Note: This is a basic example and can be enhanced with additional features and functionalities as per game requirements.