Jumpy Hero

by RapidHawk78

213 lines3.4 KB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jumpy Hero</title>

<style>
* {
  box-sizing: border-box;
  user-select: none;
}

body {
  margin: 0;
  background: #0f172a;
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
}

h1 {
  margin: 12px 0 5px;
}

#info {
  margin-bottom: 8px;
  font-size: 18px;
}

canvas {
  width: min(95vw, 800px);
  height: auto;
  border: 3px solid white;
  border-radius: 12px;
  background: #7dd3fc;
  touch-action: none;
}

.controls {
  margin: 12px auto;
  display: flex;
  justify-content: center;
  gap: 12px;
}

button {
  width: 70px;
  height: 55px;
  border: none;
  border-radius: 12px;
  font-size: 25px;
  font-weight: bold;
  background: #334155;
  color: white;
}

button:active {
  background: #2563eb;
}

#restart {
  width: 120px;
  font-size: 16px;
}
</style>
</head>

<body>

<h1>⭐ Jumpy Hero</h1>

<div id="info">
  🪙 Coins: <span id="score">0</span>
  &nbsp; | &nbsp;
  <span id="message">Reach the flag!</span>
</div>

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

<div class="controls">
  <button id="left">◀</button>
  <button id="jump">▲</button>
  <button id="right">▶</button>
  <button id="restart">Restart</button>
</div>

<script>

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

const scoreText = document.getElementById("score");
const message = document.getElementById("message");

let keys = {
  left: false,
  right: false
};

let score = 0;
let gameOver = false;
let won = false;

const player = {
  x: 50,
  y: 350,
  width: 32,
  height: 40,
  speed: 4,
  velocityY: 0,
  gravity: 0.6,
  jumpPower: -12,
  onGround: false
};

const platforms = [
  {x: 0, y: 400, width: 800, height: 50},

  {x: 120, y: 330, width: 130, height: 18},

  {x: 310, y: 270, width: 130, height: 18},

  {x: 500, y: 330, width: 130, height: 18},

  {x: 650, y: 270, width: 100, height: 18}
];

let coins = [
  {x: 170, y: 295, collected: false},
  {x: 365, y: 235, collected: false},
  {x: 550, y: 295, collected: false},
  {x: 700, y: 235, collected: false}
];

const spikes = [
  {x: 260, y: 382, width: 35, height: 18},
  {x: 450, y: 382, width: 35, height: 18}
];

const enemy = {
  x: 560,
  y: 360,
  width: 30,
  height: 40,
  speed: 2
};

const flag = {
  x: 750,
  y: 210,
  width: 10,
  height: 190
};


// -------------------------
// KEYBOARD CONTROLS
// -------------------------

document.addEventListener("keydown", function(e) {

  if (e.key === "ArrowLeft" || e.key.toLowerCase() === "a") {
    keys.left = true;
  }

  if (e.key === "ArrowRight" || e.key.toLowerCase() === "d") {
    keys.right = true;
  }

  if (
    e.key === "ArrowUp" ||
    e.key === "w" ||
    e.key === " "
  ) {
    jump();
  }

});


document.addEventListener("keyup", function(e) {

  if (e.key === "ArrowLeft" || e.key.toLowerCase() === "a") {
    keys.left = false;
  }

  if (e.key === "ArrowRight" || e.key.toLowerCase() === "d") {
    keys.right = false;
  }

});


// -------------------------
// TOUCH CONTROLS
// -------------------------

function holdButton(button, direction) {

  button.addEventListener("pointerdown", function(e) {
    e.preventDefault();
    keys[direction] = true;
  });

  button.addEventListener("pointerup", function() {
    keys[direction] = false;
  });

  button.addEventListener("pointerleave", function() {
    keys[direction] = false;
  });
}

Game Source: Jumpy Hero

Creator: RapidHawk78

Libraries: none

Complexity: complex (213 lines, 3.4 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: jumpy-hero-rapidhawk78" to link back to the original. Then publish at arcadelab.ai/publish.