Platformer with gravity and physics's game

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

No:42937

←

Prev Next

→

Platformer with gravity and physics
Developer User19028｜Date and time 24/2/13 15:09:52
Build time 16.523 sec｜Game capacity 4.469KB｜

Script

Sure! Here's an example of a simple platformer game implemented as a single HTML file using JavaScript and enclosed in script tags:

To play the game, you can open the HTML file in a web browser, and you will be able to control the player (represented by a blue square) using the left and right arrow keys to move and the space bar to jump. The player needs to navigate through the brown platforms to reach the goal (the top platform) while avoiding falling off the screen.

←

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 and enclosed in script tags:

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

var player = {
      x: 50,
      y: 250,
      width: 20,
      height: 20,
      speed: 5,
      jumpForce: 10,
      velX: 0,
      velY: 0,
      jumping: false,
      grounded: false
    };

var gravity = 0.5;

var platforms = [
      { x: 0, y: 280, width: 400, height: 20 },
      { x: 100, y: 200, width: 100, height: 20 },
      { x: 200, y: 150, width: 100, height: 20 },
      { x: 300, y: 100, width: 100, height: 20 }
    ];

// Game functions

function update() {
      clearCanvas();

movePlayer();
      applyPhysics();

drawPlayer();
      drawPlatforms();

requestAnimationFrame(update);
    }

function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function movePlayer() {
      if (player.jumping && player.grounded) {
        player.velY -= player.jumpForce;
        player.jumping = false;
      }

player.velX *= 0.9;
      player.velY += gravity;

player.velX = Math.min(player.velX, player.speed);
      player.velY = Math.min(player.velY, player.jumpForce);

player.x += player.velX;
      player.y += player.velY;

player.grounded = false;

platforms.forEach(function (plat) {
        var dir = collisionCheck(player, plat);

if (dir === "left" || dir === "right") {
          player.velX = 0;
          player.jumping = false;
        } else if (dir === "bottom" && !player.jumping) {
          player.velY = 0;
          player.grounded = true;
        } else if (dir === "top") {
          player.velY *= -1;
        }
      });
    }

function applyPhysics() {
      if (player.y + player.height >= canvas.height) {
        player.y = canvas.height - player.height;
        player.grounded = true;
        player.velY = 0;
      }

if (player.x + player.width < 0) {
        player.x = canvas.width;
      } else if (player.x > canvas.width) {
        player.x = -player.width;
      }
    }

function collisionCheck(rect1, rect2) {
      var dx = (rect1.x + rect1.width / 2) - (rect2.x + rect2.width / 2);
      var dy = (rect1.y + rect1.height / 2) - (rect2.y + rect2.height / 2);
      var width = 0.5 * (rect1.width + rect2.width);
      var height = 0.5 * (rect1.height + rect2.height);
      var crossWidth = width * dy;
      var crossHeight = height * dx;

var dir = null;

if (Math.abs(dx) <= width && Math.abs(dy) <= height) {
        if (crossWidth > crossHeight) {
          dir = (crossWidth > -crossHeight) ? "bottom" : "left";
        } else {
          dir = (crossWidth > -crossHeight) ? "right" : "top";
        }
      }

return dir;
    }

function drawPlayer() {
      ctx.fillStyle = "blue";
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawPlatforms() {
      ctx.fillStyle = "brown";
      platforms.forEach(function (plat) {
        ctx.fillRect(plat.x, plat.y, plat.width, plat.height);
      });
    }

// Game initialization

canvas.width = 400;
    canvas.height = 300;

// Event listeners for player movement
    document.addEventListener("keydown", function (e) {
      if (e.keyCode === 37) {
        player.velX = -player.speed; // Left arrow key
      } else if (e.keyCode === 39) {
        player.velX = player.speed; // Right arrow key
      } else if (e.keyCode === 32) {
        player.jumping = true; // Space bar
      }
    });

document.addEventListener("keyup", function (e) {
      if (e.keyCode === 37 || e.keyCode === 39) {
        player.velX = 0; // Stop player movement
      }
    });

update();
  </script>
</body>
</html>
```