Create a platformer game with deferent color rectangles's game

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

No:26906

←

Prev Next

→

Create a platformer game with deferent color rect..ALL
Developer User13318｜Date and time 23/12/3 4:18:47
Build time 35.274 sec｜Game capacity 3.099KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>لعبة المنصة</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

canvas {
      background-color: #eeeeee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

const player = {
      x: 50,
      y: 50,
      width: 32,
      height: 32,
      speed: 5,
      velX: 0,
      velY: 0,
      jumping: false,
      grounded: false,
    };

const platforms = [
      { x: 0, y: 250, width: 200, height: 10, color: "#FF0000" },
      { x: 300, y: 200, width: 150, height: 10, color: "#00FF00" },
      { x: 600, y: 150, width: 100, height: 10, color: "#0000FF" },
    ];

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

function drawPlatforms() {
      platforms.forEach((platform) => {
        ctx.fillStyle = platform.color;
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
      });
    }

function update() {
      if (player.jumping) {
        player.velY += 0.3;
      }

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

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

if (player.y > canvas.height - player.height) {
        player.y = canvas.height - player.height;
        player.jumping = false;
        player.grounded = true;
      }

platforms.forEach((platform) => {
        if (
          player.velY > 0 &&
          player.y + player.height >= platform.y &&
          player.y + player.height <= platform.y + 10 &&
          player.x + player.width >= platform.x &&
          player.x <= platform.x + platform.width
        ) {
          player.velY = 0;
          player.jumping = false;
          player.grounded = true;
        }
      });

if (player.grounded) {
        player.velY = 0;
      }
    }

function keyUpHandler(e) {
      if (
        e.key === "Right" ||
        e.key === "ArrowRight" ||
        e.key === "Left" ||
        e.key === "ArrowLeft"
      ) {
        player.velX = 0;
      }
    }

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

drawPlayer();
      drawPlatforms();
      update();

requestAnimationFrame(gameLoop);
    }

document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

gameLoop();
  </script>
</body>
</html>