Make a platformer game example's game

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

No:11224

127

←

Prev Next

→

Make a platformer game example
Developer User4781｜Date and time 23/8/8 21:15:12
Build time 29.952 sec｜Game capacity 3.365KB｜

Script

Sure! Here's an example of a simple platformer game implemented as a single HTML file using JavaScript. It can be played on a smartphone and uses pictograms for visuals:

This example creates a platformer game where the player is represented by a blue square. The controls for the game are implemented for touch input on a smartphone, where tapping the left half of the screen moves the player left, tapping the right half moves the player right, and tapping the top half makes the player jump. The player also experiences gravity and can collide with the ground.

←

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 platformer game implemented as a single HTML file using JavaScript. It can be played on a smartphone and uses pictograms for visuals:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Platformer Game</title>
  <style>
    canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Define player properties
      let player = {
        x: 50,
        y: 50,
        width: 50,
        height: 50,
        speed: 5,
        jumping: false
      };

// Define controls
      let controls = {
        up: false,
        left: false,
        right: false
      };

// Event listeners for touch controls
      document.addEventListener("touchstart", handleTouchControls);
      document.addEventListener("touchend", handleTouchControls);

// Function to handle touch controls
      function handleTouchControls(event) {
        let x = event.changedTouches[0].clientX;
        let y = event.changedTouches[0].clientY;

// Check if touch was on the left or right side of the screen
        if (x < canvas.width / 2) {
          controls.left = (event.type === "touchstart");
          controls.right = false;
        } else {
          controls.right = (event.type === "touchstart");
          controls.left = false;
        }

// Check if touch was on the top half of the screen
        if (y < canvas.height / 2) {
          controls.up = (event.type === "touchstart");
        }
      }

// Update player position based on controls
      function updatePlayer() {
        if (controls.up && !player.jumping) {
          player.y -= 100;
          player.jumping = true;
        }

if (controls.left) {
          player.x -= player.speed;
        }

if (controls.right) {
          player.x += player.speed;
        }

// Apply gravity when player is in the air
        if (player.y < canvas.height - player.height) {
          player.y += 2;
        }

// Simulate ground collision
        if (player.y > canvas.height - player.height) {
          player.y = canvas.height - player.height;
          player.jumping = false;
        }
      }

// Render the game
      function render() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
        context.fillStyle = "blue";
        context.fillRect(player.x, player.y, player.width, player.height);

// Request next frame
        requestAnimationFrame(render);
      }

// Start the game loop
      function gameLoop() {
        updatePlayer();
        render();
      }

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