A platformer where you need to collect 10 coins's game

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

No:19468

←

Prev Next

→

A platformer where you need to collect 10 coins
Developer User8566｜Date and time 23/10/4 4:51:11
Build time 17.632 sec｜Game capacity 4.51KB｜

Script

Below is a basic example of a platformer game implemented as a single HTML file using JavaScript. This code assumes smartphone operation and utilizes pictograms for visual representation. It starts with the player character at the bottom of the screen, and the goal is to collect 10 coins while avoiding obstacles.

Please make sure to replace the `emozi_all/player.png`, `emozi_all/coin.png`, and `emozi_himawari.png` URLs with the actual image paths on your server or local folder for the pictograms to display correctly.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Platformer Game</title>
  <style>
    #container {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    
    #player {
      position: absolute;
      width: 64px;
      height: 64px;
      background-image: url('player.png');
      background-size: cover;
      bottom: 0;
      left: 0;
    }
    
    .coin {
      position: absolute;
      width: 32px;
      height: 32px;
      background-image: url('coin.png');
      background-size: cover;
    }
    
    .obstacle {
      position: absolute;
      width: 64px;
      height: 64px;
      background-image: url('obstacle.png');
      background-size: cover;
      animation: obstacleMove 2s infinite;
    }
    
    @keyframes obstacleMove {
      0% { left: 0; }
      100% { left: calc(100vw - 64px); }
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="player"></div>
    <div class="coin" style="top: 200px; left: 300px;"></div>
    <div class="coin" style="top: 400px; left: 500px;"></div>
    
    <div class="obstacle" style="top: 100px;"></div>
    <div class="obstacle" style="top: 300px;"></div>
    
  </div>

Please make sure to replace the `player.png`, `coin.png`, and `obstacle.png` URLs with the actual image paths on your server or local folder for the pictograms to display correctly.