<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impossible Mario Type Game</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #87CEEB;
}
canvas {
background-color: #3498db;
border: 2px solid black;
}
.score-board {
position: absolute;
top: 20px;
font-size: 20px;
color: white;
z-index: 10;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
color: red;
display: none;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="score-board">Lives: <span id="lives">3</span></div>
<div class="game-over">GAME OVER! Press 'R' to Restart</div>
<script>
const canvas = [Link]("gameCanvas");
const ctx = [Link]("2d");
// Game variables
const gravity = 0.8;
const friction = 0.9;
const maxSpeed = 5;
const jumpHeight = 15;
let player = {
x: 100,
y: 500,
width: 40,
height: 60,
speedX: 0,
speedY: 0,
isJumping: false,
color: "red",
lives: 3
};
let platforms = [];
let enemies = [];
let hazards = [];
let gameOver = false;
let camera = {
x: 0,
y: 0
};
// Controls
const controls = {
left: false,
right: false,
up: false
};
// Keydown and keyup event listeners
[Link]("keydown", (e) => {
if (gameOver) return;
if ([Link] === "ArrowLeft" || [Link] === "a") [Link] = true;
if ([Link] === "ArrowRight" || [Link] === "d") [Link] = true;
if ([Link] === "ArrowUp" || [Link] === "w") [Link] = true;
});
[Link]("keyup", (e) => {
if ([Link] === "ArrowLeft" || [Link] === "a") [Link] = false;
if ([Link] === "ArrowRight" || [Link] === "d") [Link] = false;
if ([Link] === "ArrowUp" || [Link] === "w") [Link] = false;
});
// Platform Class
class Platform {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
[Link] = width;
[Link] = height;
}
draw() {
[Link] = "#2ecc71";
[Link](this.x - camera.x, this.y, [Link], [Link]);
}
}
// Enemy Class
class Enemy {
constructor(x, y, width, height, speed) {
this.x = x;
this.y = y;
[Link] = width;
[Link] = height;
[Link] = speed;
}
move() {
this.x += [Link];
if (this.x <= 0 || this.x >= [Link] - [Link]) {
[Link] = -[Link]; // Reverse direction when hitting
edges
}
}
draw() {
[Link] = "yellow";
[Link](this.x - camera.x, this.y, [Link], [Link]);
}
}
// Hazard Class (Spikes or pits)
class Hazard {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
[Link] = width;
[Link] = height;
}
draw() {
[Link] = "black";
[Link](this.x - camera.x, this.y, [Link], [Link]);
}
}
// Game Initialization
function initializeGame() {
platforms = [
new Platform(100, 550, 200, 20),
new Platform(400, 450, 200, 20),
new Platform(700, 350, 200, 20),
new Platform(1200, 250, 200, 20)
];
enemies = [
new Enemy(300, 420, 40, 40, 2),
new Enemy(600, 320, 40, 40, 3),
new Enemy(1500, 220, 40, 40, 1)
];
hazards = [
new Hazard(500, 580, 50, 20), // Pit
new Hazard(150, 580, 50, 20), // Pit
new Hazard(1100, 580, 50, 20) // Pit
];
gameOver = false;
}
// Player movement and physics
function movePlayer() {
if ([Link]) {
[Link] = -maxSpeed;
} else if ([Link]) {
[Link] = maxSpeed;
} else {
[Link] *= friction;
}
if ([Link] && ![Link]) {
[Link] = -jumpHeight;
[Link] = true;
}
[Link] += gravity;
player.x += [Link];
player.y += [Link];
// Prevent going off screen horizontally
if (player.x < 0) player.x = 0;
if (player.x > [Link] - [Link]) player.x = [Link] -
[Link];
// Keep the camera centered on the player horizontally
camera.x = player.x - [Link] / 2;
// Prevent going off screen vertically (limit vertical movement to the
bottom)
if (player.y > [Link] - [Link]) {
player.y = [Link] - [Link];
[Link] = false;
}
}
// Check for collisions with platforms
function checkCollisions() {
[Link](platform => {
if (player.x < platform.x + [Link] &&
player.x + [Link] > platform.x &&
player.y + [Link] > platform.y &&
player.y + [Link] < platform.y + [Link]) {
player.y = platform.y - [Link];
[Link] = false;
[Link] = 0;
}
});
}
// Check if player hits hazards
function checkHazards() {
[Link](hazard => {
if (player.x < hazard.x + [Link] &&
player.x + [Link] > hazard.x &&
player.y + [Link] > hazard.y) {
player.y = hazard.y - [Link];
[Link] -= 1;
[Link]("lives").textContent = [Link];
if ([Link] <= 0) {
gameOver = true;
[Link](".game-over").[Link] =
"block";
}
}
});
}
// Check if player hits enemies
function checkEnemies() {
[Link](enemy => {
if (player.x < enemy.x + [Link] &&
player.x + [Link] > enemy.x &&
player.y + [Link] > enemy.y) {
[Link] -= 1;
[Link]("lives").textContent = [Link];
if ([Link] <= 0) {
gameOver = true;
[Link](".game-over").[Link] =
"block";
}
}
});
}
// Draw all game elements
function draw() {
[Link](0, 0, [Link], [Link]);
[Link](platform => [Link]());
[Link](enemy => [Link]());
[Link](hazard => [Link]());
[Link] = [Link];
[Link](player.x - camera.x, player.y, [Link],
[Link]);
}
// Main game loop
function gameLoop() {
if (gameOver) return;
movePlayer();
checkCollisions();
checkHazards();
checkEnemies();
[Link](enemy => [Link]());
draw();
requestAnimationFrame(gameLoop);
}
// Initialize game and start the loop
initializeGame();
gameLoop();
// Restart game if 'R' is pressed
[Link]("keydown", (e) => {
if ([Link] === "r" && gameOver) {
[Link] = 3;
[Link]("lives").textContent = [Link];
[Link](".game-over").[Link] = "none";
initializeGame();
gameLoop();
}
});
</script>
</body>
</html>
