Simple Platformer

by dixalex

HTML

<canvas id="game" width="800" height="400"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

// Player
const player = {
  x: 50,
  y: 300,
  width: 30,
  height: 30,
  velX: 0,
  velY: 0,
  speed: 4,
  jumpPower: 12,
  grounded: false
};

const gravity = 0.6;

// Platforms
const platforms = [
  { x: 0,   y: 370, width: 800, height: 30 },
  { x: 150, y: 300, width: 100, height: 15 },
  { x: 320, y: 250, width: 100, height: 15 },
  { x: 500, y: 200, width: 100, height: 15 }
];

// Input
const keys = {};
window.addEventListener("keydown", e => keys[e.code] = true);
window.addEventListener("keyup", e => keys[e.code] = false);

function update() {
  // Movement
  if (keys["ArrowLeft"])  player.velX = -player.speed;
  if (keys["ArrowRight"]) player.velX = player.speed;
  if (!keys["ArrowLeft"] && !keys["ArrowRight"]) player.velX = 0;

  if (keys["Space"] && player.grounded) {
    player.velY = -player.jumpPower;
    player.grounded = false;
  }

  // Gravity
  player.velY += gravity;

  // Apply movement
  player.x += player.velX;

CSS

body {
      margin: 0;
      background: #222;
    }
    canvas {
      display: block;
      margin: auto;
      background: #87ceeb;
    }