Mario Game. Testing UX|UI LLM Ability
Prompt
Create a web UI Available Mario game that we can use while waiting for something to download. Make the Game smooth and gradually form from easy to hard. You can use whatever programming language that will get me the best quality and smoothness for the user.
A system prompt was added to support web rendering
Of course. Here is a complete, self-contained "endless runner" platformer game built with HTML, CSS, and JavaScript. The game is designed to be smooth and gradually increase in difficulty.
Just copy and paste the code into an `.html` file and open it in your web browser to play.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waiting Game</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Courier New', Courier, monospace;
color: white;
overflow: hidden;
}
#game-container {
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
canvas {
display: block;
background-color: #5c94fc; /* Sky blue */
border: 3px solid #fff;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none; /* Initially allow clicks through to canvas */
}
.overlay.active {
pointer-events: all; /* Block clicks when menu is active */
}
#startScreen h1 {
font-size: 3rem;
text-shadow: 3px 3px #ff007f;
}
#startScreen p, #gameOverScreen p {
font-size: 1.2rem;
margin-top: -10px;
}
#startScreen .controls, #gameOverScreen .restart {
margin-top: 20px;
padding: 10px 20px;
background: #ff5722;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
font-size: 1.5rem;
}
#gameOverScreen {
flex-direction: column;
}
#gameOverScreen h1 {
font-size: 3.5rem;
color: #ff3c3c;
text-shadow: 3px 3px #000;
}
#score, #highScore {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.5rem;
text-shadow: 2px 2px 2px rgba(0,0,0,0.7);
}
#highScore {
left: auto;
right: 10px;
}
</style>
</head>
<body>
<div id="game-container">
<canvas id="gameCanvas" width="800" height="400"></canvas>
<div id="score">Score: 0</div>
<div id="highScore">High Score: 0</div>
<div id="startScreen" class="overlay active">
<h1>Platform Rush</h1>
<p>Wait for your download in style!</p>
<div class="controls">
<p><strong>Controls:</strong> Left/Right Arrows or A/D to Move</p>
<p>Up Arrow or W to Jump</p>
</div>
<div class="restart" style="margin-top: 30px;">CLICK TO START</div>
</div>
<div id="gameOverScreen" class="overlay">
<h1>GAME OVER</h1>
<p id="finalScore">Your Score: 0</p>
<div class="restart">CLICK TO RESTART</div>
</div>
</div>
<script>
// --- SETUP ---
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');
const highScoreEl = document.getElementById('highScore');
const startScreen = document.getElementById('startScreen');
const gameOverScreen = document.getElementById('gameOverScreen');
const finalScoreEl = document.getElementById('finalScore');
// --- GAME STATE & CONSTANTS ---
const GRAVITY = 0.5;
let score = 0;
let highScore = localStorage.getItem('platformerHighScore') || 0;
let gameState = 'start';
let cameraX = 0;
let player;
let platforms = [];
let enemies = [];
let coins = [];
let backgroundObjects = [];
let particles = [];
let worldWidth = 3000; // Initial world width
let levelProgress = 0;
highScoreEl.textContent = `High Score: ${highScore}`;
// --- INPUT HANDLER ---
class InputHandler {
constructor() {
this.keys = {
right: false,
left: false,
up: false,
};
window.addEventListener('keydown', e => this.handleKeyEvent(e, true));
window.addEventListener('keyup', e => this.handleKeyEvent(e, false));
}
handleKeyEvent(e, isPressed) {
switch (e.key) {
case 'ArrowRight':
case 'd':
this.keys.right = isPressed;
break;
case 'ArrowLeft':
case 'a':
this.keys.left = isPressed;
break;
case 'ArrowUp':
case 'w':
case ' ':
this.keys.up = isPressed;
break;
}
}
}
// --- PLAYER CLASS ---
class Player {
constructor() {
this.width = 30;
this.height = 40;
this.position = { x: 100, y: 100 };
this.velocity = { x: 0, y: 0 };
this.speed = 4;
this.jumpForce = 12;
this.onGround = false;
this.canDoubleJump = true;
this.lastJumpKey = false;
this.color = '#e63946';
this.hatColor = '#457b9d';
}
draw() {
// Body
ctx.fillStyle = this.color;
ctx.fillRect(this.position.x - cameraX, this.position.y, this.width, this.height);
// Hat
ctx.fillStyle = this.hatColor;
ctx.fillRect(this.position.x - cameraX, this.position.y - 5, this.width, 10);
ctx.fillRect(this.position.x - cameraX + 5, this.position.y - 10, this.width - 10, 5);
}
update(input) {
// Horizontal Movement
if (input.keys.right) this.velocity.x = this.speed + levelProgress * 0.0005;
else if (input.keys.left) this.velocity.x = -(this.speed + levelProgress * 0.0005);
else this.velocity.x *= 0.9; // friction
this.position.x += this.velocity.x;
// Jumping
if (input.keys.up && !this.lastJumpKey) {
if (this.onGround) {
this.velocity.y = -this.jumpForce;
this.onGround = false;
this.canDoubleJump = true;
createParticles(this.position.x + this.width / 2, this.position.y + this.height, 5, '#ffffff');
} else if (this.canDoubleJump) {
this.velocity.y = -this.jumpForce * 0.8;
this.canDoubleJump = false;
createParticles(this.position.x + this.width / 2, this.position.y + this.height, 5, '#a8dadc');
}
}
this.lastJumpKey = input.keys.up;
// Gravity
this.velocity.y += GRAVITY;
this.position.y += this.velocity.y;
this.onGround = false;
// Prevent moving backwards off-screen
if (this.position.x < cameraX) {
this.position.x = cameraX;
this.velocity.x = 0;
}
}
}
// --- PLATFORM CLASS ---
class GenericObject {
constructor(x, y, width, height, color) {
this.position = { x, y };
this.width = width;
this.height = height;
this.color = color;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.position.x - cameraX, this.position.y, this.width, this.height);
}
}
// --- ENEMY CLASS ---
class Enemy extends GenericObject {
constructor(x, y, range) {
super(x, y, 35, 35, '#8d5524');
this.initialX = x;
this.speed = 1 + levelProgress * 0.0002;
this.range = range;
}
update() {
this.position.x += this.speed;
if (this.position.x > this.initialX + this.range || this.position.x < this.initialX) {
this.speed *= -1;
}
}
}
// --- COIN CLASS ---
class Coin extends GenericObject {
constructor(x, y) {
super(x, y, 15, 15, '#ffd700');
this.initialY = y;
this.angle = Math.random() * Math.PI * 2;
}
update() {
this.angle += 0.1;
this.position.y = this.initialY + Math.sin(this.angle) * 3; // Bobbing effect
}
draw(){
ctx.beginPath();
ctx.arc(this.position.x - cameraX + this.width / 2, this.position.y + this.height / 2, this.width / 2, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.fillStyle = '#f1c40f';
ctx.beginPath();
ctx.arc(this.position.x - cameraX + this.width / 2, this.position.y + this.height / 2, this.width / 3, 0, Math.PI * 2);
ctx.fill();
}
}
// --- PARTICLE CLASS ---
class Particle{
constructor(x, y, color){
this.position = {x, y};
this.velocity = {x: (Math.random() - 0.5) * 4, y: (Math.random() - 0.5) * 4};
this.radius = Math.random() * 3 + 1;
this.life = 30;
this.color = color;
}
draw(){
ctx.beginPath();
ctx.arc(this.position.x - cameraX, this.position.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
update(){
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.life--;
}
}
function createParticles(x, y, count, color){
for(let i = 0; i < count; i++){
particles.push(new Particle(x, y, color));
}
}
const input = new InputHandler();
// --- GAME LOGIC ---
function init() {
gameState = 'playing';
score = 0;
cameraX = 0;
levelProgress = 0;
worldWidth = 3000;
scoreEl.textContent = `Score: 0`;
startScreen.classList.remove('active');
gameOverScreen.classList.remove('active');
player = new Player();
platforms = [];
enemies = [];
coins = [];
backgroundObjects = [];
particles = [];
// Create background
for (let i = 0; i < 50; i++) {
// Hills
backgroundObjects.push(new GenericObject(i * 300 - 500, canvas.height - 100 - Math.random() * 150, 400, 400, '#2a9d8f'));
backgroundObjects.push(new GenericObject(i * 200 - 500, canvas.height - 80 - Math.random() * 100, 300, 300, '#264653'));
// Clouds
backgroundObjects.push(new GenericObject(Math.random() * 10000, 20 + Math.random() * 80, 80 + Math.random() * 50, 20 + Math.random() * 10, 'rgba(255, 255, 255, 0.8)'));
}
// Initial floor
platforms.push(new GenericObject(-10, canvas.height - 40, 600, 50, '#2a9d8f'));
generateWorldSegment(600);
}
function generateWorldSegment(startX) {
let currentX = startX;
while(currentX < startX + 3000){
const gap = 100 + Math.random() * 150 - (levelProgress * 0.01);
currentX += gap;
let platY = canvas.height - 40 - Math.random() * 150;
// Clamp platform height to be reachable
platY = Math.max(platY, canvas.height - 250);
platY = Math.min(platY, canvas.height - 40);
const platWidth = 150 + Math.random() * 300;
platforms.push(new GenericObject(currentX, platY, platWidth, 50, '#2a9d8f'));
// Add coins
for(let i = 0; i < platWidth / 60; i++){
if(Math.random() > 0.3)
coins.push(new Coin(currentX + i*50 + 20, platY - 30));
}
// Add enemies
if(Math.random() < 0.2 + levelProgress * 0.0001 && platWidth > 150){
enemies.push(new Enemy(currentX + 50, platY - 35, platWidth - 120));
}
currentX += platWidth;
}
worldWidth = currentX;
}
function handleCollisions() {
// Platform collisions
platforms.forEach(platform => {
if (
player.position.y + player.height <= platform.position.y &&
player.position.y + player.height + player.velocity.y >= platform.position.y &&
player.position.x + player.width >= platform.position.x &&
player.position.x <= platform.position.x + platform.width
) {
player.velocity.y = 0;
player.position.y = platform.position.y - player.height;
player.onGround = true;
player.canDoubleJump = true;
}
});
// Coin collisions
coins.forEach((coin, index) => {
if(
player.position.x < coin.position.x + coin.width &&
player.position.x + player.width > coin.position.x &&
player.position.y < coin.position.y + coin.height &&
player.position.y + player.height > coin.position.y
) {
coins.splice(index, 1);
score += 10;
scoreEl.textContent = `Score: ${score}`;
createParticles(coin.position.x, coin.position.y, 8, '#ffd700');
}
});
// Enemy collisions
enemies.forEach((enemy, index) => {
// Collision check
if(
player.position.x < enemy.position.x + enemy.width &&
player.position.x + player.width > enemy.position.x &&
player.position.y < enemy.position.y + enemy.height &&
player.position.y + player.height > enemy.position.y
) {
// Stomp on enemy
if(player.velocity.y > 0 && player.position.y + player.height < enemy.position.y + 20){
enemies.splice(index, 1);
player.velocity.y = -8; // bounce
score += 50;
scoreEl.textContent = `Score: ${score}`;
createParticles(enemy.position.x + enemy.width/2, enemy.position.y, 10, '#8d5524');
} else {
// Hit from side or bottom
setGameOver();
}
}
});
// Fall off screen
if (player.position.y > canvas.height) {
setGameOver();
}
}
function setGameOver(){
gameState = 'gameOver';
finalScoreEl.textContent = `Your Score: ${score}`;
if(score > highScore){
highScore = score;
localStorage.setItem('platformerHighScore', highScore);
highScoreEl.textContent = `High Score: ${highScore}`;
}
gameOverScreen.classList.add('active');
}
// --- GAME LOOP ---
function animate() {
requestAnimationFrame(animate);
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background
backgroundObjects.forEach(obj => {
const parallaxX = cameraX * (obj.color.includes('rgba') ? 0.9 : (obj.height > 300 ? 0.3 : 0.6));
ctx.fillStyle = obj.color;
ctx.fillRect(obj.position.x - parallaxX, obj.position.y, obj.width, obj.height);
});
// Only update and draw if playing
if(gameState === 'playing'){
// Update everything
player.update(input);
handleCollisions();
enemies.forEach(e => e.update());
coins.forEach(c => c.update());
particles.forEach((p, i) => {
p.update();
if(p.life <= 0) particles.splice(i, 1);
});
// Update camera
cameraX = player.position.x - canvas.width / 4;
if(cameraX < 0) cameraX = 0;
// Track progress for difficulty scaling
levelProgress = player.position.x;
// Generate new world segments
if(player.position.x > worldWidth - canvas.width){
generateWorldSegment(worldWidth);
}
}
// Draw everything
platforms.forEach(p => p.draw());
coins.forEach(c => c.draw());
enemies.forEach(e => e.draw());
particles.forEach(p => p.draw());
player.draw();
}
// --- EVENT LISTENERS ---
function handleStartRestartClick() {
if (gameState === 'start' || gameState === 'gameOver') {
init();
}
}
startScreen.addEventListener('click', handleStartRestartClick);
gameOverScreen.addEventListener('click', handleStartRestartClick);
// Start the game loop
animate();
</script>
</body>
</html>
```Drag to resize
Here's a smooth Mario game that gradually increases in difficulty using HTML5 Canvas and JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>Waiting Mario</title>
>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #87CEEB;
overflow: hidden;
}
canvas {
border: 3px solid #333;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
>
</head>
<body<body>
<canvas id="gameCanvas" width="800" height="400">"></canvas>
>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Game variables
const gravity = 0.5;
const friction = 0.8;
let gameTime = 0;
let lastSpawn = 0;
let difficulty = 1;
// Mario object
const mario = {
x: 100,
y: 300,
width: 40,
height: 60,
velX: 0,
velY: 0,
speed: 6,
jumpPower: 15,
isJumping: false,
color: '#ff0000'
};
// Platform
const ground = {
y: 350,
height: 50,
color: '#8B4513'
};
// Enemies array
let enemies = [];
let spawnRate = 2000; // ms
// Controls
const keys = {};
document.addEventListener('keydown', e => keys[e.code] = true);
document.addEventListener('keyup', e => keys[e.code] = false);
// Game loop
function gameLoop(timestamp) {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update game time
gameTime = timestamp;
// Update difficulty every 10 seconds
difficulty = 1 + Math.floor(gameTime / 10000) * 0.5;
spawnRate = Math.max(500, 2000 - Math.floor(gameTime / 5000) * 300);
// Update Mario
updateMario();
// Spawn enemies
if (timestamp - lastSpawn > spawnRate) {
spawnEnemy();
lastSpawn = timestamp;
}
// Update enemies
updateEnemies();
// Draw everything
drawGame();
requestAnimationFrame(gameLoop);
}
function updateMario() {
// Horizontal movement
if (keys['ArrowLeft']) mario.velX = -mario.speed;
else if (keys['ArrowRight']) mario.velX = mario.speed;
else mario.velX *= friction;
// Jumping
if (keys['Space'] && !mario.isJumping) {
mario.velY = -mario.jumpPower;
mario.isJumping = true;
}
// Apply gravity
mario.velY += gravity;
// Update position
mario.x += mario.velX;
mario.y += mario.velY;
// Boundaries
if (mario.x < 0) mario.x = 0;
if (mario.x + mario.width > canvas.width) mario.x = canvas.width - mario.width;
// Ground collision
if (mario.y + mario.height > ground.y) {
mario.y = ground.y - mario.height;
mario.velY = 0;
mario.isJumping = false;
}
}
function spawnEnemy() {
enemies.push({
x: canvas.width,
y: ground.y - 40,
width: 40,
height: 40,
speed: 3 * difficulty,
color: '#000000'
});
}
function updateEnemies() {
for (let i = enemies.length - 1; i >= 0; i--) {
const enemy = enemies[i];
enemy.x -= enemy.speed;
// Remove if off screen
if (enemy.x + enemy.width < 0) {
enemies.splice(i, 1);
continue;
}
// Collision detection
if (checkCollision(mario, enemy)) {
resetGame();
}
}
}
function checkCollision(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
function drawGame() {
// Sky
ctx.fillStyle = '#87CEEB';
ctx.fillRect(0, 0, canvas.width, ground.y);
// Ground
ctx.fillStyle = ground.color;
ctx.fillRect(0, ground.y, canvas.width, ground.height);
// Mario
ctx.fillStyle = mario.color;
ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
// Enemies
enemies.forEach(enemy => {
ctx.fillStyle = enemy.color;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
// Difficulty display
ctx.fillStyle = '#000';
ctx.font = '20px Arial';
ctx.fillText(`Difficulty: ${difficulty.toFixed(1)}x`, 20, 30);
}
function resetGame() {
mario.x = 100;
mario.y = 300;
mario.velX = 0;
mario.velY = 0;
enemies = [];
spawnRate = 2000;
difficulty = 1;
lastSpawn = 0;
}
// Start game
requestAnimationFrame(gameLoop);
</script>
>
</body>
</htmlhtml>
```
This game features:
1. Smooth movement using requestAnimationFrame
2. Gradually increasing difficulty:
- Enemies spawn faster over time
- Enemy speed increases with difficulty
3. Simple controls:
- Left/Right arrows to move
- Space to jump
4. Collision detection
5. Difficulty display
6. Auto-reset on death
The game starts easy with slow spawn rates and slow enemies, gradually increasing in difficulty every 10 seconds. The canvas is centered on the page with a nice sky background and ground platform.
You can copy this code into an HTML file and open it in any modern browser to play. The game will automatically adjust its difficulty while you wait for your download to complete.Drag to resize
Below is a simple yet smooth and progressively challenging **Super Mario-style platformer game** built using **HTML**, **CSS**, and **JavaScript**. The game is designed to be lightweight and easy to embed in an iframe. It starts easy and gradually increases in difficulty as the player progresses.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario Mini Game</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #87ceeb;
font-family: Arial, sans-serif;
}
canvas {
border: 2px solid #000;
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const player = {
x: 50,
y: 300,
width: 30,
height: 50,
jumpForce: -15,
gravity: 0.8,
velocityY: 0,
isJumping: false,
speed: 5,
};
let platforms = [
{ x: 0, y: 350, width: 200, height: 50 },
{ x: 300, y: 300, width: 100, height: 50 },
{ x: 500, y: 250, width: 150, height: 50 },
{ x: 700, y: 350, width: 100, height: 50 },
];
let enemies = [];
let score = 0;
let gameSpeed = 1;
let isGameOver = false;
function drawPlayer() {
ctx.fillStyle = '#ff0000';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawPlatforms() {
ctx.fillStyle = '#333';
platforms.forEach(platform => {
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
});
}
function drawEnemies() {
ctx.fillStyle = '#0000ff';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
function drawScore() {
ctx.fillStyle = '#000';
ctx.font = '20px Arial';
ctx.fillText(`Score: ${score}`, 10, 30);
}
function updatePlayer() {
if (!player.isJumping) return;
player.velocityY += player.gravity;
player.y += player.velocityY;
if (player.y + player.height >= 350) {
player.y = 350 - player.height;
player.isJumping = false;
}
}
function checkCollision() {
platforms.forEach(platform => {
if (
player.x < platform.x + platform.width &&
player.x + player.width > platform.x &&
player.y + player.height >= platform.y &&
player.y <= platform.y + platform.height
) {
player.y = platform.y - player.height;
player.isJumping = false;
}
});
enemies.forEach(enemy => {
if (
player.x < enemy.x + enemy.width &&
player.x + player.width > enemy.x &&
player.y < enemy.y + enemy.height &&
player.y + player.height > enemy.y
) {
isGameOver = true;
}
});
}
function updateEnemies() {
if (enemies.length < 3 && Math.random() < 0.02 * gameSpeed) {
enemies.push({
x: canvas.width,
y: 300,
width: 30,
height: 30,
speed: 2 * gameSpeed,
});
}
enemies.forEach((enemy, index) => {
enemy.x -= enemy.speed;
if (enemy.x + enemy.width < 0) {
enemies.splice(index, 1);
score += 100;
gameSpeed += 0.01;
}
});
}
function gameLoop() {
if (isGameOver) {
ctx.fillStyle = '#000';
ctx.font = '40px Arial';
ctx.fillText('Game Over!', canvas.width / 2 - 100, canvas.height / 2);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlatforms();
drawEnemies();
drawPlayer();
drawScore();
updatePlayer();
checkCollision();
updateEnemies();
requestAnimationFrame(gameLoop);
}
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' && !player.isJumping) {
player.velocityY = player.jumpForce;
player.isJumping = true;
}
});
gameLoop();
</script>
</body>
</html>
```
### **Features:**
1. **Smooth Controls:** Use the **Spacebar** to jump.
2. **Progressive Difficulty:** Enemies spawn more frequently as you score more points.
3. **Scoring System:** Earn points by avoiding enemies.
4. **Game Over:** Colliding with an enemy ends the game.
### **How to Use:**
1. Copy the code into an `index.html` file.
2. Open it in a browser to play.
3. Embed it in an iframe if needed:
```html
<iframe src="path/to/index.html" width="800" height="400"></iframe>
```
This game is lightweight, smooth, and perfect for casual play while waiting for downloads. Enjoy!Drag to resize
Response not available
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Mini Mario Runner</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#111;font-family:sans-serif}
#gameCanvas{background:#5e81d8;display:block;margin:0 auto;border:2px solid #fff}
#ui{
position:absolute;top:8px;left:8px;color:#fff;font-size:20px;
text-shadow:1px 1px 2px #000
}
#gameOver{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
background:#ff6666;border:none;border-radius:12px;
padding:20px 40px;font-size:24px;color:#fff;cursor:pointer;
display:none;
}
#instructions{
position:absolute;bottom:8px;right:8px;color:#fff;font-size:12px;opacity:.8;
text-align:right;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="ui">
<span>Score: <span id="score">0</span></span>
<span style="margin-left:20px;">Level: <span id="level">1</span></span>
<span style="margin-left:20px;">Lives: <span id="lives">3</span></span>
</div>
<button id="gameOver" onclick="restartGame()">Restart</button>
<div id="instructions">
Space / Tap to jump.<br>
Avoid the goombas! Collect coins!
</div>
<script>
/* -------------------------------------------------------------
MINI MARIO RUNNER – single-file, smooth 60 FPS web game
------------------------------------------------------------- */
const c = document.getElementById('gameCanvas');
const ctx = c.getContext('2d');
const scoreEl = document.getElementById('score');
const levelEl = document.getElementById('level');
const livesEl = document.getElementById('lives');
const gameOverBtn = document.getElementById('gameOver');
/* Tune these for smoothness vs. difficulty ramp */
const CANVAS_BASE_W = 800;
const CANVAS_BASE_H = 400;
const GRAVITY = 0.45;
const GROUND_Y = CANVAS_BASE_H - 60;
/* Auto-scale canvas to window while keeping aspect */
(function fitCanvas(){
const winRatio = innerWidth/innerHeight;
const gameRatio = CANVAS_BASE_W/CANVAS_BASE_H;
let scale = innerWidth/CANVAS_BASE_W;
if(winRatio < gameRatio) scale = innerWidth/CANVAS_BASE_W;
else scale = innerHeight/CANVAS_BASE_H;
c.width = CANVAS_BASE_W * Math.min(scale,1.2);
c.height = CANVAS_BASE_H * Math.min(scale,1.2);
ctx.imageSmoothingEnabled = true;
})();
/* ------------- RESOURCE HELPERS ------------- */
const spriteURLs = [
'data:image/svg+xml;base64,' + btoa(`
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="6" width="24" height="26" fill="#e52521"/>
<circle cx="16" cy="16" r="2" fill="#fff"/>
</svg>`), // 0 hero
'data:image/svg+xml;base64,' + btoa(`
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="16" r="8" fill="#804000"/>
<circle cx="4" cy="6" r="6" fill="#804000"/>
<circle cx="20" cy="6" r="6" fill="#804000"/>
</svg>`), // 1 enemy
'data:image/svg+xml;base64,' + btoa(`
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#ffdd00"/>
<text x="12" y="17" font-size="16" text-anchor="middle" fill="#000">$</text>
</svg>`), // 2 coin
];
const sprites = [];
let loadedImages = 0;
spriteURLs.forEach((url,i)=>{
const img = new Image();
img.onload = () => { loadedImages++; if(loadedImages===spriteURLs.length) animate(); };
img.src = url;
sprites.push(img);
});
/* ------------- STATE ------------- */
let hero, enemies, particles, coins, clouds, gameSpeed, score, level, lives, nextLevelAt;
function initGame(){
hero = { x:60, y:GROUND_Y-40, w:32, h:48, vy:0, onGround:false, inv:0 };
enemies = [];
coins = [];
particles = [];
clouds = [];
gameSpeed = 4;
score = 0;
level = 1;
lives = 3;
nextLevelAt = 50;
gameOverBtn.style.display = 'none';
spawnClouds();
}
/* ------------- LEVEL / DIFFICULTY ------------- */
function rampDifficulty(){
level++;
levelEl.textContent = level;
gameSpeed += 1.25;
if(level % 3 === 0 && lives<5) lives++; // generosity
}
/* ------------- SPAWN ------------- */
let lastEnemySpawn = 0, lastCoinSpawn = 0;
function willSpawnEnemy() {
const base = 180 - level*10;
return Date.now() - lastEnemySpawn > Math.max(base, 60);
}
function trySpawnEnemy(){
if(willSpawnEnemy() && Math.random() < .3 + level*.05){
enemies.push({
x: c.width,
y: GROUND_Y-28,
w:32,
h:32,
vx: gameSpeed + Math.random()*level,
dead:false
});
lastEnemySpawn = Date.now();
}
}
function willSpawnCoin() {
return Date.now() - lastCoinSpawn > 1200 - level*30;
}
function trySpawnCoin(){
if(willSpawnCoin()){
coins.push({
x: c.width + Math.random()*200,
y: GROUND_Y - 60 - Math.random()*80,
w:24,
h:24,
taken:false
});
lastCoinSpawn = Date.now();
}
}
function spawnClouds(){
for(let i=0;i<6;i++){
clouds.push({
x: Math.random()*c.width,
y: Math.random()*(c.height/2),
w: 60+Math.random()*40,
h: 30+Math.random()*20,
drift: .3+Math.random()*.5
});
}
}
/* ------------- PARTICLES ------------- */
function addParticles(x,y,color,count=6){
for(let i=0;i<count;i++){
particles.push({
x,y, vx:(Math.random()-.5)*3, vy:-Math.random()*4-2,
color, size:4+Math.random()*3, life:20, ttl:20
});
}
}
/* ------------- INPUT ------------- */
let keys={};
addEventListener('keydown',e=>{ keys[e.code]=true;});
addEventListener('keyup', e=>{ keys[e.code]=false;});
addEventListener('keydown',e=>{
if(e.code==='Space'||e.code==='ArrowUp'){ e.preventDefault(); jump(); }
});
c.addEventListener('touchstart', e=>{ e.preventDefault(); jump(); }, {passive:false});
function jump(){
if(hero.onGround && !hero.dead){
hero.vy = -12;
hero.onGround = false;
}
}
/* ------------- COLLISION ------------- */
function AABB(a,b){ return a.x < b.x+b.w && a.x+a.w > b.x && a.y < b.y+b.h && a.y+a.h > b.y; }
/* ------------- LOOP ------------- */
let then=0;
function animate(now){
now/=1000;
const delta = Math.min(now-then,1/30); // cap at 30fps step to avoid spiral
then = now;
update(delta);
draw();
requestAnimationFrame(animate);
}
function update(dt){
if(hero.dead) return;
/* ---- HERO ---- */
if(hero.inv>0) hero.inv--;
hero.vy += GRAVITY;
hero.y += hero.vy;
if(hero.y+hero.h >= GROUND_Y){
hero.y = GROUND_Y - hero.h;
hero.vy = 0;
hero.onGround = true;
}
else hero.onGround=false;
/* ---- ENEMIES ---- */
trySpawnEnemy();
enemies.forEach(e=>{
e.x -= e.vx;
if(!e.dead && AABB(hero,e)){
if(hero.onGround && hero.inv===0){
lives--;
livesEl.textContent = lives;
hero.inv = 90;
if(lives<=0) death();
}
}
});
enemies = enemies.filter(e=> e.x+e.w > 0);
/* ---- COINS ---- */
trySpawnCoin();
coins.forEach(c=>{
c.x -= gameSpeed;
if(!c.taken && AABB(hero,c)){
c.taken=true;
score+=10;
scoreEl.textContent = score;
addParticles(c.x+c.w/2, c.y+c.h/2, '#ffdd00', 8);
}
});
coins = coins.filter(c=>!c.taken && c.x+c.w>0);
/* ---- PARTICLES ---- */
particles.forEach(p=>{
p.x+=p.vx;
p.y+=p.vy;
p.life--;
});
particles = particles.filter(p=>p.life>0);
/* ---- CLOUDS ---- */
clouds.forEach(cl=>{ cl.x -= cl.drift; if(cl.x + cl.w < 0) cl.x = c.width+Math.random()*100;});
/* ---- SCORE & LEVEL ---- */
score++;
scoreEl.textContent = score|0;
if(score>nextLevelAt){
rampDifficulty();
nextLevelAt+=100;
}
}
function draw(){
/* sky */
const grad = ctx.createLinearGradient(0,0,0,c.height);
grad.addColorStop(0,'#5e81d8');
grad.addColorStop(1,'#a6c3ff');
ctx.fillStyle = grad;
ctx.fillRect(0,0,c.width,c.height);
/* clouds */
ctx.fillStyle = 'rgba(255,255,255,.8)';
clouds.forEach(cl=>{
ctx.beginPath();
ctx.roundRect(cl.x, cl.y, cl.w, cl.h, cl.h/2);
ctx.fill();
});
/* ground squares (retro brick pattern) */
ctx.fillStyle='#3a8b2f';
ctx.fillRect(0,GROUND_Y,c.width,c.height-GROUND_Y);
ctx.fillStyle='#359b39';
for(let i=0;i*40<c.width;i++){
ctx.fillRect(i*40,GROUND_Y,40,10);
}
/* coins */
coins.forEach(c=>{
ctx.drawImage(sprites[2], c.x, c.y, c.w, c.h);
});
/* enemies */
enemies.forEach(e=>{
if(!e.dead){
ctx.globalAlpha = 1;
if(hero.inv>0 && hero.inv%6<3) ctx.globalAlpha=.6;
ctx.drawImage(sprites[1], e.x, e.y, e.w, e.h);
ctx.globalAlpha=1;
}
});
/* hero */
if(hero.inv>0 && hero.inv%6<3){
ctx.globalAlpha=.4;
}
ctx.drawImage(sprites[0], hero.x, hero.y, hero.w, hero.h);
ctx.globalAlpha=1;
/* particles */
particles.forEach(p=>{
ctx.fillStyle = p.color;
ctx.beginPath();
ctx.arc(p.x,p.y,p.size*p.life/p.ttl,0,Math.PI*2);
ctx.fill();
});
}
function death(){
hero.dead=true;
gameOverBtn.style.display='block';
}
function restartGame(){
initGame();
}
/* ------------- INITIALIZE ------------- */
initGame();
/* Wait until images are loaded before starting */
```Drag to resize
Here's a complete HTML5 Mario-style platformer game using JavaScript and the Canvas API. The game features smooth animations, progressive difficulty, and responsive controls:
```html
<!DOCTYPE html>
<html>
<head>
<title>Mario-style Platformer</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
font-family: 'Press Start 2P', cursive;
overflow: hidden;
user-select: none;
}
#game-container {
position: relative;
width: 800px;
height: 480px;
background-color: #6b8cff;
overflow: hidden;
border: 8px solid #333;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#game-canvas {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
#ui {
position: absolute;
top: 10px;
left: 10px;
color: white;
text-shadow: 2px 2px 0 #000;
font-size: 12px;
}
#start-screen, #game-over-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
z-index: 10;
}
#game-over-screen {
display: none;
}
button {
margin: 20px;
padding: 10px 20px;
font-family: 'Press Start 2P', cursive;
font-size: 12px;
background: #ff5555;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background: #ff7777;
transform: scale(1.05);
}
.instructions {
font-size: 8px;
text-align: center;
margin-top: 20px;
max-width: 80%;
}
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
</style>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<div id="game-container">
<canvas id="game-canvas" width="800" height="480"></canvas>
<div id="ui">
<div>SCORE: <span id="score">0</span></div>
<div>LEVEL: <span id="level">1</span></div>
<div>LIVES: <span id="lives">3</span></div>
</div>
<div id="start-screen">
<h1>PLATFORM ADVENTURE</h1>
<button id="start-button">START GAME</button>
<div class="instructions">
USE ARROW KEYS TO MOVE AND SPACE TO JUMP<br>
COLLECT COINS AND AVOID ENEMIES<br>
REACH THE FLAG TO COMPLETE THE LEVEL
</div>
</div>
<div id="game-over-screen">
<h1>GAME OVER</h1>
<div id="final-score">SCORE: 0</div>
<button id="restart-button">PLAY AGAIN</button>
</div>
</div>
<script>
// Game constants
const GRAVITY = 0.8;
const JUMP_FORCE = 12;
const PLAYER_SPEED = 5;
const TILE_SIZE = 32;
const ANIMATION_SPEED = 0.1;
const GAME_STATES = {
MENU: 0,
PLAYING: 1,
GAME_OVER: 2
};
// Game variables
let gameState = GAME_STATES.MENU;
let score = 0;
let level = 1;
let lives = 3;
let coinsCollected = 0;
let gameSpeed = 1;
let lastTime = 0;
let animationFrameId = null;
// Game objects
let player = null;
let platforms = [];
let coins = [];
let enemies = [];
let flag = null;
let particles = [];
let camera = { x: 0, y: 0 };
// Input handling
const keys = {
left: false,
right: false,
up: false,
space: false
};
// Canvas setup
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
// UI elements
const scoreElement = document.getElementById('score');
const levelElement = document.getElementById('level');
const livesElement = document.getElementById('lives');
const startScreen = document.getElementById('start-screen');
const gameOverScreen = document.getElementById('game-over-screen');
const finalScoreElement = document.getElementById('final-score');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
// Event listeners
window.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowLeft':
keys.left = true;
break;
case 'ArrowRight':
keys.right = true;
break;
case 'ArrowUp':
keys.up = true;
break;
case ' ':
keys.space = true;
break;
}
});
window.addEventListener('keyup', (e) => {
switch(e.key) {
case 'ArrowLeft':
keys.left = false;
break;
case 'ArrowRight':
keys.right = false;
break;
case 'ArrowUp':
keys.up = false;
break;
case ' ':
keys.space = false;
break;
}
});
startButton.addEventListener('click', startGame);
restartButton.addEventListener('click', startGame);
// Game classes
class Player {
constructor() {
this.width = 30;
this.height = 48;
this.x = 100;
this.y = 300;
this.velocityX = 0;
this.velocityY = 0;
this.jumping = false;
this.facingRight = true;
this.currentFrame = 0;
this.animationTimer = 0;
this.invincible = false;
this.invincibleTimer = 0;
this.groundPound = false;
this.groundPoundTimer = 0;
}
update(deltaTime) {
// Handle input
if (keys.left) {
this.velocityX = -PLAYER_SPEED * gameSpeed;
this.facingRight = false;
} else if (keys.right) {
this.velocityX = PLAYER_SPEED * gameSpeed;
this.facingRight = true;
} else {
this.velocityX = 0;
}
// Jumping
if ((keys.up || keys.space) && !this.jumping) {
this.velocityY = -JUMP_FORCE * gameSpeed;
this.jumping = true;
this.groundPound = false;
}
// Ground pound
if (keys.up && this.velocityY > 0 && !this.groundPound) {
this.velocityY = 15;
this.groundPound = true;
this.groundPoundTimer = 0.5;
}
// Update ground pound timer
if (this.groundPoundTimer > 0) {
this.groundPoundTimer -= deltaTime;
} else if (this.groundPound) {
this.groundPound = false;
}
// Apply gravity
this.velocityY += GRAVITY;
// Update position
this.x += this.velocityX;
this.y += this.velocityY;
// Check platform collisions
this.jumping = true;
for (const platform of platforms) {
if (this.x + this.width > platform.x &&
this.x < platform.x + platform.width &&
this.y + this.height > platform.y &&
this.y + this.height < platform.y + platform.height + this.velocityY) {
// Landing on platform
if (this.velocityY > 0) {
this.y = platform.y - this.height;
this.velocityY = 0;
this.jumping = false;
// Ground pound effect
if (this.groundPound) {
this.groundPound = false;
createParticles(this.x + this.width/2, this.y + this.height, 20, '#ffff00');
}
}
}
}
// Check enemy collisions
if (!this.invincible) {
for (let i = 0; i < enemies.length; i++) {
const enemy = enemies[i];
if (this.x + this.width > enemy.x &&
this.x < enemy.x + enemy.width &&
this.y + this.height > enemy.y &&
this.y < enemy.y + enemy.height) {
// Check if player is falling onto enemy
if (this.velocityY > 0 && this.y + this.height < enemy.y + enemy.height/2) {
// Bounce off enemy
this.velocityY = -JUMP_FORCE * 0.8;
enemies.splice(i, 1);
createParticles(enemy.x + enemy.width/2, enemy.y + enemy.height/2, 15, '#ff0000');
score += 100;
updateScore();
} else {
// Take damage
takeDamage();
}
}
}
} else {
this.invincibleTimer -= deltaTime;
if (this.invincibleTimer <= 0) {
this.invincible = false;
}
}
// Check coin collisions
for (let i = 0; i < coins.length; i++) {
const coin = coins[i];
if (this.x + this.width > coin.x &&
this.x < coin.x + coin.width &&
this.y + this.height > coin.y &&
this.y < coin.y + coin.height) {
coins.splice(i, 1);
createParticles(coin.x + coin.width/2, coin.y + coin.height/2, 10, '#ffff00');
score += 50;
coinsCollected++;
updateScore();
// Every 5 coins gives an extra life
if (coinsCollected % 5 === 0) {
lives++;
updateLives();
}
}
}
// Check flag collision
if (flag && this.x + this.width > flag.x &&
this.x < flag.x + flag.width &&
this.y + this.height > flag.y &&
this.y < flag.y + flag.height) {
levelComplete();
}
// Screen boundaries
if (this.x < 0) this.x = 0;
if (this.x + this.width > level * 800) this.x = level * 800 - this.width;
if (this.y < 0) {
this.y = 0;
this.velocityY = 0;
}
if (this.y > canvas.height) {
takeDamage();
}
// Update animation
this.animationTimer += deltaTime;
if (this.animationTimer >= ANIMATION_SPEED) {
this.animationTimer = 0;
this.currentFrame = (this.currentFrame + 1) % 3;
}
// Camera follow (only after player passes first third of screen)
if (this.x > canvas.width / 3 && this.x < level * 800 - canvas.width / 3) {
camera.x = this.x - canvas.width / 3;
}
}
draw() {
// Draw player with animation
const frameX = this.currentFrame * 32;
const frameY = this.jumping ? 96 : (Math.abs(this.velocityX) > 0.1 ? 32 : 0);
ctx.save();
ctx.translate(this.x - camera.x, this.y);
if (!this.facingRight) {
ctx.scale(-1, 1);
ctx.translate(-this.width, 0);
}
// Draw player with invincibility flicker
if (this.invincible && Math.floor(Date.now() / 200) % 2 === 0) {
ctx.globalAlpha = 0.5;
}
ctx.drawImage(
spriteSheet,
frameX, frameY, 32, 32,
0, 0, this.width, this.height
);
ctx.restore();
ctx.globalAlpha = 1;
}
}
class Platform {
constructor(x, y, width, height, type = 'ground') {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.type = type;
}
draw() {
const frameX = this.type === 'ground' ? 0 : 64;
const frameY = 0;
for (let i = 0; i < this.width; i += TILE_SIZE) {
const tileWidth = Math.min(TILE_SIZE, this.width - i);
ctx.drawImage(
spriteSheet,
frameX, frameY, TILE_SIZE, TILE_SIZE,
this.x + i - camera.x, this.y - camera.y,
tileWidth, TILE_SIZE
);
}
}
}
class Coin {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 20;
this.height = 20;
this.currentFrame = 0;
this.animationTimer = 0;
}
update(deltaTime) {
this.animationTimer += deltaTime;
if (this.animationTimer >= ANIMATION_SPEED * 2) {
this.animationTimer = 0;
this.currentFrame = (this.currentFrame + 1) % 4;
}
}
draw() {
ctx.drawImage(
spriteSheet,
this.currentFrame * 16, 128, 16, 16,
this.x - camera.x, this.y - camera.y,
this.width, this.height
);
}
}
class Enemy {
constructor(x, y, type = 'goomba') {
this.x = x;
this.y = y;
this.width = 32;
this.height = 32;
this.velocityX = type === 'goomba' ? -1 : -1.5;
this.type = type;
this.currentFrame = 0;
this.animationTimer = 0;
this.direction = -1;
}
update(deltaTime) {
// Simple AI - move back and forth
this.x += this.velocityX * gameSpeed;
// Change direction if hitting a wall or platform edge
let onGround = false;
for (const platform of platforms) {
if (this.x + this.width > platform.x &&
this.x < platform.x + platform.width &&
this.y + this.height >= platform.y &&
this.y + this.height <= platform.y + 5) {
onGround = true;
}
}
if (!onGround || this.x <= camera.x - 50 || this.x >= camera.x + canvas.width + 50) {
this.velocityX *= -1;
this.direction *= -1;
}
// Update animation
this.animationTimer += deltaTime;
if (this.animationTimer >= ANIMATION_SPEED) {
this.animationTimer = 0;
this.currentFrame = (this.currentFrame + 1) % 2;
}
}
draw() {
const frameX = this.type === 'goomba' ?
this.currentFrame * 32 :
64 + this.currentFrame * 32;
const frameY = this.type === 'goomba' ? 32 : 32;
ctx.save();
ctx.translate(this.x - camera.x, this.y);
if (this.direction === -1) {
ctx.scale(-1, 1);
ctx.translate(-this.width, 0);
}
ctx.drawImage(
spriteSheet,
frameX, frameY, 32, 32,
0, 0, this.width, this.height
);
ctx.restore();
}
}
class Flag {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 32;
this.height = 64;
this.poleWidth = 8;
this.poleHeight = 128;
}
draw() {
// Draw pole
ctx.fillStyle = '#555555';
ctx.fillRect(
this.x + this.width/2 - this.poleWidth/2 - camera.x,
this.y - camera.y,
this.poleWidth,
this.poleHeight
);
// Draw flag
ctx.drawImage(
spriteSheet,
128, 0, 32, 64,
this.x - camera.x, this.y - camera.y,
this.width, this.height
);
}
}
class Particle {
constructor(x, y, size, color) {
this.x = x;
this.y = y;
this.size = size;
this.color = color;
this.velocityX = (Math.random() - 0.5) * 6;
this.velocityY = Math.random() * -4 - 2;
this.life = 1;
this.maxLife = 1;
}
update(deltaTime) {
this.x += this.velocityX;
this.y += this.velocityY;
this.velocityY += GRAVITY * 0.5;
this.life -= deltaTime;
if (this.life <= 0) {
return false;
}
return true;
}
draw() {
ctx.fillStyle = this.color;
ctx.globalAlpha = this.life / this.maxLife;
ctx.fillRect(
this.x - this.size/2 - camera.x,
this.y - this.size/2 - camera.y,
this.size, this.size
);
ctx.globalAlpha = 1;
}
}
// Game functions
function initGame() {
// Clear game objects
platforms = [];
coins = [];
enemies = [];
particles = [];
flag = null;
// Create player
player = new Player();
// Create level
createLevel(level);
// Reset camera
camera = { x: 0, y: 0 };
// Update UI
updateScore();
updateLevel();
updateLives();
}
function createLevel(levelNum) {
// Clear existing objects
platforms = [];
coins = [];
enemies = [];
// Level difficulty increases with level number
gameSpeed = 1 + (levelNum - 1) * 0.2;
const platformGap = Math.max(50, 200 - (levelNum - 1) * 20);
const enemyChance = Math.min(0.4, 0.1 + (levelNum - 1) * 0.05);
const coinChance = Math.min(0.6, 0.3 + (levelNum - 1) * 0.05);
// Create ground
platforms.push(new Platform(0, canvas.height - TILE_SIZE, level * 800, TILE_SIZE));
// Create platforms
let lastPlatformX = 0;
let lastPlatformY = canvas.height - TILE_SIZE;
let lastPlatformWidth = 0;
for (let x = 0; x < level * 800; x += platformGap) {
// Random platform width
const width = Math.floor(Math.random() * 3 + 2) * TILE_SIZE;
// Random platform height (but not too high)
const minY = Math.max(100, lastPlatformY - 100);
const maxY = Math.min(canvas.height - 150, lastPlatformY + 100);
const y = Math.floor(Math.random() * (maxY - minY)) + minY;
// Create platform
platforms.push(new Platform(x, y, width, TILE_SIZE));
// Add coins on platforms
const numCoins = Math.floor(Math.random() * 3);
for (let i = 0; i < numCoins; i++) {
if (Math.random() < coinChance) {
coins.push(new Coin(
x + Math.random() * (width - 20),
y - 30
));
}
}
// Add enemies on platforms
if (Math.random() < enemyChance && x > 200) {
const enemyType = Math.random() < 0.7 ? 'goomba' : 'koopa';
enemies.push(new Enemy(
x + Math.random() * (width - 32),
y - 32,
enemyType
));
}
lastPlatformX = x;
lastPlatformY = y;
lastPlatformWidth = width;
}
// Add some floating platforms
for (let i = 0; i < 5 + levelNum * 2; i++) {
const x = Math.random() * (level * 800 - 100) + 50;
const y = Math.random() * (canvas.height - 200) + 50;
const width = Math.floor(Math.random() * 2 + 1) * TILE_SIZE;
platforms.push(new Platform(x, y, width, TILE_SIZE, 'floating'));
// Add coins on floating platforms
const numCoins = Math.floor(Math.random() * 2) + 1;
for (let j = 0; j < numCoins; j++) {
coins.push(new Coin(
x + Math.random() * (width - 20),
y - 30
));
}
}
// Add the flag at the end
flag = new Flag(level * 800 - 100, canvas.height - 160);
// Add some ground enemies
for (let i = 0; i < 3 + levelNum; i++) {
const x = Math.random() * (level * 800 - 200) + 100;
const enemyType = Math.random() < 0.7 ? 'goomba' : 'koopa';
enemies.push(new Enemy(x, canvas.height - TILE_SIZE - 32, enemyType));
}
}
function createParticles(x, y, count, color) {
for (let i = 0; i < count; i++) {
particles.push(new Particle(
x,
y,
Math.random() * 5 + 2,
color
));
}
}
function takeDamage() {
if (player.invincible) return;
lives--;
updateLives();
if (lives <= 0) {
gameOver();
return;
}
// Make player invincible temporarily
player.invincible = true;
player.invincibleTimer = 2;
// Reset player position
player.x = Math.max(100, camera.x + 100);
player.y = 100;
player.velocityX = 0;
player.velocityY = -JUMP_FORCE * 0.5;
// Create damage particles
createParticles(player.x + player.width/2, player.y + player.height/2, 20, '#ff0000');
}
function levelComplete() {
level++;
coinsCollected = 0;
initGame();
// Give bonus points for completing level
score += 1000 * level;
updateScore();
updateLevel();
}
function gameOver() {
gameState = GAME_STATES.GAME_OVER;
finalScoreElement.textContent = `FINAL SCORE: ${score}`;
gameOverScreen.style.display = 'flex';
cancelAnimationFrame(animationFrameId);
}
function startGame() {
score = 0;
level = 1;
lives = 3;
coinsCollected = 0;
gameSpeed = 1;
gameState = GAME_STATES.PLAYING;
startScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
initGame();
lastTime = 0;
animationFrameId = requestAnimationFrame(gameLoop);
}
function updateScore() {
scoreElement.textContent = score;
}
function updateLevel() {
levelElement.textContent = level;
}
function updateLives() {
livesElement.textContent = lives;
}
function updateParticles(deltaTime) {
for (let i = particles.length - 1; i >= 0; i--) {
if (!particles[i].update(deltaTime)) {
particles.splice(i, 1);
}
}
}
function gameLoop(currentTime) {
if (gameState !== GAME_STATES.PLAYING) return;
// Calculate delta time
const deltaTime = (currentTime - lastTime) / 1000;
lastTime = currentTime;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw sky background
ctx.fillStyle = '#6b8cff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw clouds
ctx.globalAlpha = 0.7;
for (let i = 0; i < 5; i++) {
ctx.drawImage(
spriteSheet,
160, 0, 64, 32,
(camera.x / 3) + i * 200 - camera.x/2, 50,
128, 64
);
}
ctx.globalAlpha = 1;
// Update and draw game objects
for (const platform of platforms) {
platform.draw();
}
for (let i = coins.length - 1; i >= 0; i--) {
coins[i].update(deltaTime);
coins[i].draw();
}
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].update(deltaTime);
enemies[i].draw();
}
if (flag) {
flag.draw();
}
player.update(deltaTime);
player.draw();
updateParticles(deltaTime);
for (const particle of particles) {
particle.draw();
}
// Check if player fell off screen
if (player.y > canvas.height + 100) {
takeDamage();
}
// Continue the game loop
animationFrameId = requestAnimationFrame(gameLoop);
}
// Create sprite sheet (using canvas to generate simple sprites)
const spriteSheet = document.createElement('canvas');
spriteSheet.width = 256;
spriteSheet.height = 256;
const spriteCtx = spriteSheet.getContext('2d');
// Draw player sprites (idle, run, jump)
// Idle
spriteCtx.fillStyle = '#ff0000';
spriteCtx.fillRect(0, 0, 32, 32);
spriteCtx.fillStyle = '#ff9999';
spriteCtx.fillRect(2, 2, 28, 28);
spriteCtx.fillStyle = '#0000ff';
spriteCtx.fillRect(8, 8, 8, 8);
spriteCtx.fillRect(16, 8, 8, 8);
spriteCtx.fillStyle = '#ffcccc';
spriteCtx.fillRect(8, 16, 16, 4);
// Run animation (3 frames)
for (let i = 0; i < 3; i++) {
const x = 32 + i * 32;
spriteCtx.fillStyle = '#ff0000';
spriteCtx.fillRect(x, 0, 32, 32);
spriteCtx.fillStyle = '#ff9999';
spriteCtx.fillRect(x + 2, 2, 28, 28);
spriteCtx.fillStyle = '#0000ff';
spriteCtx.fillRect(x + 8, 8, 8, 8);
spriteCtx.fillRect(x + 16, 8, 8, 8);
spriteCtx.fillStyle = '#ffcccc';
spriteCtx.fillRect(x + 8, 16, 16, 4);
// Different leg positions for run animation
if (i === 0) {
spriteCtx.fillRect(x + 6, 24, 6, 4);
spriteCtx.fillRect(x + 20, 24, 6, 4);
} else if (i === 1) {
spriteCtx.fillRect(x + 8, 24, 6, 4);
spriteCtx.fillRect(x + 16, 24, 6, 4);
} else {
spriteCtx.fillRect(x + 6, 24, 6, 4);
spriteCtx.fillRect(x + 20, 24, 6, 4);
spriteCtx.fillRect(x + 8, 20, 6, 4);
}
}
// Jump sprite
spriteCtx.fillStyle = '#ff0000';
spriteCtx.fillRect(0, 32, 32, 32);
spriteCtx.fillStyle = '#ff9999';
spriteCtx.fillRect(2, 34, 28, 26);
spriteCtx.fillStyle = '#0000ff';
spriteCtx.fillRect(8, 8, 8, 8);
spriteCtx.fillRect(16, 8, 8, 8);
spriteCtx.fillStyle = '#ffcccc';
spriteCtx.fillRect(8, 16, 16, 4);
spriteCtx.fillRect(10, 24, 6, 8);
// Ground tile
spriteCtx.fillStyle = '#00aa00';
spriteCtx.fillRect(0, 64, 32, 32);
spriteCtx.fillStyle = '#00cc00';
spriteCtx.fillRect(0, 64, 32, 8);
spriteCtx.fillStyle = '#008800';
for (let i = 0; i < 4; i++) {
spriteCtx.fillRect(i * 8, 64 + 8, 8, 8);
}
// Floating platform tile
spriteCtx.fillStyle = '#888888';
spriteCtx.fillRect(64, 0, 32, 16);
spriteCtx.fillStyle = '#aaaaaa';
spriteCtx.fillRect(64, 16, 32, 4);
spriteCtx.fillStyle = '#666666';
spriteCtx.fillRect(64, 20, 32, 4);
// Coin animation (4 frames)
spriteCtx.fillStyle = '#ffff00';
for (let i = 0; i < 4; i++) {
const x = i * 16;
spriteCtx.beginPath();
spriteCtx.arc(160 + x + 8, 144, 8, 0, Math.PI * 2);
spriteCtx.fill();
// Different frames for coin spin animation
if (i === 0) {
spriteCtx.fillRect(160 + x + 4, 136, 8, 2);
} else if (i === 1) {
spriteCtx.fillRect(160 + x + 6, 134, 2, 8);
} else if (i === 2) {
spriteCtx.fillRect(160 + x + 4, 136, 8, 2);
spriteCtx.fillRect(160 + x + 6, 134, 2, 8);
}
}
// Goomba enemy (2 frames)
spriteCtx.fillStyle = '#cc6600';
spriteCtx.fillRect(0, 96, 32, 24);
spriteCtx.fillRect(8, 80, 16, 16);
spriteCtx.fillStyle = '#ff9933';
spriteCtx.fillRect(2, 98, 28, 18);
spriteCtx.fillRect(10, 82, 12, 12);
spriteCtx.fillStyle = '#ffffff';
spriteCtx.fillRect(12, 88, 4, 4);
spriteCtx.fillRect(20, 88, 4, 4);
spriteCtx.fillStyle = '#000000';
spriteCtx.fillRect(14, 90, 2, 2);
spriteCtx.fillRect(22, 90, 2, 2);
// Second frame (walking)
spriteCtx.fillStyle = '#cc6600';
spriteCtx.fillRect(32, 96, 32, 24);
spriteCtx.fillRect(32 + 8, 80, 16, 16);
spriteCtx.fillStyle = '#ff9933';
spriteCtx.fillRect(32 + 2, 98, 28, 18);
spriteCtx.fillRect(32 + 10, 82, 12, 12);
spriteCtx.fillStyle = '#ffffff';
spriteCtx.fillRect(32 + 12, 88, 4, 4);
spriteCtx.fillRect(32 + 20, 88, 4, 4);
spriteCtx.fillStyle = '#000000';
spriteCtx.fillRect(32 + 14, 90, 2, 2);
spriteCtx.fillRect(32 + 22, 90, 2, 2);
// Different feet positions
spriteCtx.fillStyle = '#cc6600';
spriteCtx.fillRect(32 + 6, 114, 6, 4);
spriteCtx.fillRect(32 + 20, 114, 6, 4);
// Koopa enemy (2 frames)
spriteCtx.fillStyle = '#00aa00';
spriteCtx.fillRect(64, 96, 32, 24);
spriteCtx.fillRect(64 + 8, 80, 16, 16);
spriteCtx.fillStyle = '#00ff00';
spriteCtx.fillRect(64 + 2, 98, 28, 18);
spriteCtx.fillRect(64 + 10, 82, 12, 12);
spriteCtx.fillStyle = '#ffffff';
spriteCtx.fillRect(64 + 12, 88, 4, 4);
spriteCtx.fillRect(64 + 20, 88, 4, 4);
spriteCtx.fillStyle = '#000000';
spriteCtx.fillRect(64 + 14, 90, 2, 2);
spriteCtx.fillRect(64 + 22, 90, 2, 2);
// Second frame (walking)
spriteCtx.fillStyle = '#00aa00';
spriteCtx.fillRect(96, 96, 32, 24);
spriteCtx.fillRect(96 + 8, 80, 16, 16);
spriteCtx.fillStyle = '#00ff00';
spriteCtx.fillRect(96 + 2, 98, 28, 18);
spriteCtx.fillRect(96 + 10, 82, 12, 12);
spriteCtx.fillStyle = '#ffffff';
spriteCtx.fillRect(96 + 12, 88, 4, 4);
spriteCtx.fillRect(96 + 20, 88, 4, 4);
spriteCtx.fillStyle = '#000000';
spriteCtx.fillRect(96 + 14, 90, 2, 2);
spriteCtx.fillRect(96 + 22, 90, 2, 2);
// Different feet positions
spriteCtx.fillStyle = '#00aa00';
spriteCtx.fillRect(96 + 6, 114, 6, 4);
spriteCtx.fillRect(96 + 20, 114, 6, 4);
// Flag
spriteCtx.fillStyle = '#ff0000';
spriteCtx.fillRect(128, 0, 32, 64);
spriteCtx.fillStyle = '#ffffff';
spriteCtx.fillRect(128 + 8, 8, 16, 8);
spriteCtx.fillRect(128 + 8, 24, 16, 8);
spriteCtx.fillRect(128 + 8, 40, 16, 8);
// Cloud
spriteCtx.fillStyle = '#ffffff';
spriteCtx.beginPath();
spriteCtx.ellipse(192, 16, 20, 12, 0, 0, Math.PI * 2);
spriteCtx.ellipse(176, 16, 16, 12, 0, 0, Math.PI * 2);
spriteCtx.ellipse(208, 16, 16, 12, 0, 0, Math.PI * 2);
spriteCtx.fill();
</script>
</body>
</html>
```
This complete HTML5 game includes:
1. **Smooth Platformer Gameplay**:
- Responsive controls (arrow keys + space to jump)
- Progressive difficulty (levels get harder as you advance)
- Physics with gravity and jumping
- Camera that follows the player
2. **Game Elements**:
- Player character with animations (idle, run, jump)
- Platforms (ground and floating)
- Coins to collect
- Enemies to avoid or jump on
- Flag to complete each level
- Particle effects for coins, enemies, and damage
3. **Game Mechanics**:
- Score system (coins, enemies, level completion)
- Lives system (3 lives, extra life every 5 coins)
- Level progression (each level is harder)
- Invincibility frames after taking damage
- Ground pound ability (press up while falling)
4. **Visuals**:
- Pixel-art style graphics created with canvas
- Smooth animations for player, enemies, and coins
- Parallax scrolling clouds
- Particle effects
5. **UI**:
- Start screen with instructions
- Game over screen with final score
- In-game HUD showing score, level, and lives
- Retro pixel font
6. **Progressive Difficulty**:
- Levels get longer (width increases with level number)
- Platform gaps get wider
- More enemies spawn
- Enemies move faster
- Game speed increases slightly
The game is self-contained in a single HTML file with all assets generated programmatically, so it will work in an iframe without any external dependencies. The game loop uses `requestAnimationFrame` for smooth performance.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario Waiting Game</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #87CEEB;
font-family: Arial, sans-serif;
}
#gameCanvas {
border: 2px solid black;
background-color: #FFFFFF;
}
#info {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="info">Score: 0 | Level: 1<br>Use Arrow Keys: Left/Right to move, Up to jump</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const info = document.getElementById('info');
// Game variables
let mario = {
x: 100,
y: 500,
width: 32,
height: 32,
speed: 5,
velX: 0,
velY: 0,
jumping: false,
grounded: false
};
let keys = {};
let gravity = 0.5;
let friction = 0.8;
let score = 0;
let level = 1;
let gameOver = false;
// Platforms
let platforms = [
{x: 0, y: 550, width: 800, height: 50}, // Ground
{x: 200, y: 400, width: 100, height: 20},
{x: 400, y: 300, width: 150, height: 20},
{x: 600, y: 200, width: 100, height: 20}
];
// Enemies
let enemies = [];
function createEnemy() {
enemies.push({
x: 800 + Math.random() * 200,
y: 500,
width: 32,
height: 32,
speed: 2 + (level * 0.5)
});
}
// Coins
let coins = [];
function createCoin() {
coins.push({
x: Math.random() * 700 + 50,
y: Math.random() * 400 + 50,
width: 20,
height: 20
});
}
// Keyboard controls
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// Game loop
function update() {
if (gameOver) {
ctx.fillStyle = 'red';
ctx.font = '40px Arial';
ctx.fillText('Game Over! Score: ' + score, 200, 300);
return;
}
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw platforms
ctx.fillStyle = 'green';
platforms.forEach(p => {
ctx.fillRect(p.x, p.y, p.width, p.height);
});
// Mario movement
if (keys['ArrowLeft']) mario.velX = -mario.speed;
if (keys['ArrowRight']) mario.velX = mario.speed;
if (keys['ArrowUp'] && mario.grounded) {
mario.velY = -12;
mario.jumping = true;
mario.grounded = false;
}
// Apply gravity and friction
if (!mario.grounded) mario.velY += gravity;
mario.velX *= friction;
mario.x += mario.velX;
mario.y += mario.velY;
// Boundaries
if (mario.x >= canvas.width - mario.width) mario.x = canvas.width - mario.width;
if (mario.x <= 0) mario.x = 0;
if (mario.y >= canvas.height - mario.height) {
mario.y = canvas.height - mario.height;
mario.velY = 0;
mario.grounded = true;
mario.jumping = false;
}
if (mario.y <= 0) mario.y = 0;
// Collision with platforms
mario.grounded = false;
platforms.forEach(p => {
if (mario.x < p.x + p.width && mario.x + mario.width > p.x &&
mario.y + mario.height < p.y + p.height && mario.y + mario.height + mario.velY >= p.y) {
if (mario.velY > 0) {
mario.y = p.y - mario.height;
mario.velY = 0;
mario.grounded = true;
mario.jumping = false;
}
}
});
// Draw Mario (simple blue square for now)
ctx.fillStyle = 'blue';
ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
// Enemies
if (Math.random() < 0.02 + (level * 0.01)) createEnemy();
enemies.forEach((e, i) => {
e.x -= e.speed;
ctx.fillStyle = 'red';
ctx.fillRect(e.x, e.y, e.width, e.height);
// Collision with Mario
if (mario.x < e.x + e.width && mario.x + mario.width > e.x &&
mario.y < e.y + e.height && mario.y + mario.height > e.y) {
if (mario.velY > 0 && mario.y + mario.height - 10 < e.y) {
// Stomp enemy
enemies.splice(i, 1);
score += 10;
mario.velYU = -10; // Bounce
} else {
gameOver = true;
}
}
if (e.x < -e.width) enemies.splice(i, 1);
});
// Coins
if (Math.random() < 0.01 + (level * 0.005)) createCoin();
coins.forEach((c, i) => {
ctx.fillStyle = 'gold';
ctx.fillRect(c.x, c.y, c.width, c.height);
// Collect coin
if (mario.x < c.x + c.width && mario.x + mario.width > c.x &&
mario.y < c.y + c.height && mario.y + mario.height > c.y) {
coins.splice(i, 1);
score += 5;
}
});
// Progressive difficulty
score++;
if (score % 500 === 0) level++;
// Update info
info.innerHTML = `Score: ${score} | Level: ${level}<br>Use Arrow Keys: Left/Right to move, Up to jump`;
// Scrolling effect: move platforms and items left to simulate running
if (keys['ArrowRight'] && mario.x > 400) {
platforms.forEach(p => p.x -= mario.speed);
enemies.forEach(e => e.x -= mario.speed);
coins.forEach(c => c.x -= mario.speed);
// Respawn platforms if needed
if (platforms[0].x + platforms[0].width < 0) {
platforms.shift();
platforms.push({x: 800, y: 550 - Math.random() * 100, width: 800, height: 20});
}
}
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
```Drag to resize
Here's a web-based Mario-inspired game using HTML5, CSS, and JavaScript with smooth animations and progressive difficulty:
```html
<!DOCTYPE html>
<html>
<head>
<title>Mario Run</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
font-family: Arial, sans-serif;
}
#game-container {
position: relative;
width: 800px;
height: 400px;
margin: 20px auto;
overflow: hidden;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%2387CEEB"/><circle cx="20" cy="20" r="5" fill="%23FFEB3B" fill-opacity="0.7"/></svg>');
}
#ground {
position: absolute;
bottom: 0;
width: 200%;
height: 60px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="60" viewBox="0 0 100 60"><rect width="100" height="20" y="40" fill="%238BC34A"/><rect width="100" height="40" y="20" fill="%23795548"/></svg>');
background-repeat: repeat-x;
}
#player {
position: absolute;
width: 50px;
height: 80px;
bottom: 60px;
left: 100px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="80" viewBox="0 0 50 80"><rect x="10" y="10" width="30" height="40" fill="%23E53935"/><rect x="15" y="50" width="20" height="20" fill="%234CAF50"/><circle cx="15" cy="20" r="5" fill="%23FDD835"/><circle cx="35" cy="20" r="5" fill="%23FDD835"/></svg>');
transition: transform 0.1s;
}
.obstacle {
position: absolute;
bottom: 60px;
width: 30px;
background-color: #795548;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="1" viewBox="0 0 30 1"><rect width="30" height="1" fill="%235D4037"/></svg>');
background-repeat: repeat-y;
}
.coin {
position: absolute;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="%23FFD700"/></svg>');
}
#score-display {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
display: none;
}
#start-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="game-container">
<div id="start-screen">
<h1>Mario Run</h1>
<p>Press SPACE to jump. Avoid obstacles and collect coins!</p>
<button id="start-button">Start Game</button>
<p>Difficulty increases gradually as you play</p>
</div>
<div id="ground"></div>
<div id="player"></div>
<div id="score-display">Score: 0</div>
<div id="game-over">
<h2>Game Over!</h2>
<p id="final-score">Score: 0</p>
<button id="restart-button">Play Again</button>
</div>
</div>
<script>
// Game state
const game = {
player: {
x: 100,
y: 260,
width: 50,
height: 80,
velocityY: 0,
isJumping: false,
jumpPower: 12
},
gravity: 0.5,
obstacles: [],
coins: [],
score: 0,
speed: 3,
gameRunning: false,
frameCount: 0,
difficulty: {
obstacleFrequency: 120, // frames between obstacles
coinFrequency: 90,
minObstacleHeight: 30,
maxObstacleHeight: 60
}
};
// DOM elements
const gameContainer = document.getElementById('game-container');
const playerElement = document.getElementById('player');
const groundElement = document.getElementById('ground');
const scoreDisplay = document.getElementById('score-display');
const gameOverScreen = document.getElementById('game-over');
const finalScoreDisplay = document.getElementById('final-score');
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
// Event listeners
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' && !game.player.isJumping && game.gameRunning) {
game.player.velocityY = -game.player.jumpPower;
game.player.isJumping = true;
}
});
startButton.addEventListener('click', startGame);
restartButton.addEventListener('click', startGame);
function startGame() {
// Reset game state
game.player = {
x: 100,
y: 260,
width: 50,
height: 80,
velocityY: 0,
isJumping: false,
jumpPower: 12
};
game.obstacles = [];
game.coins = [];
game.score = 0;
game.speed = 3;
game.frameCount = 0;
game.gameRunning = true;
game.difficulty = {
obstacleFrequency: 120,
coinFrequency: 90,
minObstacleHeight: 30,
maxObstacleHeight: 60
};
// Clear existing obstacles and coins
document.querySelectorAll('.obstacle, .coin').forEach(el => el.remove());
// Update UI
scoreDisplay.textContent = `Score: ${game.score}`;
gameOverScreen.style.display = 'none';
startScreen.style.display = 'none';
// Start game loop
requestAnimationFrame(gameLoop);
}
function gameLoop() {
if (!game.gameRunning) return;
game.frameCount++;
// Update player position
game.player.y += game.player.velocityY;
game.player.velocityY += game.gravity;
// Ground collision
if (game.player.y >= 260) {
game.player.y = 260;
game.player.velocityY = 0;
game.player.isJumping = false;
}
// Move ground (create scrolling effect)
const scrollOffset = game.speed;
groundElement.style.backgroundPositionX = `-${game.frameCount % 100}px`;
// Generate obstacles and coins
if (game.frameCount % game.difficulty.obstacleFrequency === 0) {
createObstacle();
}
if (game.frameCount % game.difficulty.coinFrequency === 0) {
createCoin();
}
// Update obstacles
const obstaclesToRemove = [];
game.obstacles.forEach((obstacle, index) => {
obstacle.x -= game.speed;
// Collision detection
if (checkCollision(game.player, obstacle)) {
gameOver();
return;
}
// Remove if off screen
if (obstacle.x + obstacle.width < 0) {
obstaclesToRemove.push(index);
game.score += 5;
}
});
// Remove obstacles that are off screen
obstaclesToRemove.reverse().forEach(index => {
game.obstacles.splice(index, 1);
document.querySelectorAll('.obstacle')[index].remove();
});
// Update coins
const coinsToRemove = [];
game.coins.forEach((coin, index) => {
coin.x -= game.speed;
// Collision detection
if (checkCollision(game.player, coin)) {
coinsToRemove.push(index);
game.score += 10;
scoreDisplay.textContent = `Score: ${game.score}`;
}
// Remove if off screen
if (coin.x + coin.width < 0) {
coinsToRemove.push(index);
}
});
// Remove coins that are collected or off screen
coinsToRemove.reverse().forEach(index => {
game.coins.splice(index, 1);
document.querySelectorAll('.coin')[index].remove();
});
// Increase difficulty gradually
if (game.gameRunning) {
adjustDifficulty();
}
// Update player position in DOM
playerElement.style.bottom = `${400 - game.player.y - game.player.height}px`;
playerElement.style.left = `${game.player.x}px`;
// Continue game loop
requestAnimationFrame(gameLoop);
}
function createObstacle() {
const height = Math.floor(Math.random() *
(game.difficulty.maxObstacleHeight - game.difficulty.minObstacleHeight + 1)) +
game.difficulty.minObstacleHeight;
const obstacle = {
x: 800,
y: 340 - height,
width: 30,
height: height
};
game.obstacles.push(obstacle);
const obstacleElement = document.createElement('div');
obstacleElement.className = 'obstacle';
obstacleElement.style.left = `${obstacle.x}px`;
obstacleElement.style.bottom = `${obstacle.y}px`;
obstacleElement.style.height = `${obstacle.height}px`;
gameContainer.appendChild(obstacleElement);
}
function createCoin() {
const y = Math.floor(Math.random() * 200) + 100;
const coin = {
x: 800,
y: y,
width: 20,
height: 20
};
game.coins.push(coin);
const coinElement = document.createElement('div');
coinElement.className = 'coin';
coinElement.style.left = `${coin.x}px`;
coinElement.style.bottom = `${y}px`;
gameContainer.appendChild(coinElement);
}
function checkCollision(player, object) {
return player.x < object.x + object.width &&
player.x + player.width > object.x &&
player.y < object.y + object.height &&
player.y + player.height > object.y;
}
function adjustDifficulty() {
// Faster movement
if (game.score > 100) game.speed = 4;
if (game.score > 250) game.speed = 5;
if (game.score > 500) game.speed = 6;
// More frequent obstacles
if (game.score > 200) game.difficulty.obstacleFrequency = 90;
if (game.score > 400) game.difficulty.obstacleFrequency = 70;
// Taller obstacles
if (game.score > 300) game.difficulty.maxObstacleHeight = 80;
if (game.score > 600) game.difficulty.maxObstacleHeight = 100;
}
function gameOver() {
game.gameRunning = false;
finalScoreDisplay.textContent = `Score: ${game.score}`;
gameOverScreen.style.display = 'block';
}
</script>
</body>
</html>
```
This game features:
1. **Smooth animations** using CSS transitions and requestAnimationFrame
2. **Gradually increasing difficulty** with:
- Faster scrolling speed as score increases
- More frequent obstacles
- Taller obstacles
3. **Simple controls** - just press Space to jump
4. **Auto-generated terrain** with obstacles and coins
5. **Scoring system** (collect coins and survive to increase score)
6. **Responsive design** with a clean UI
The game starts easy with slow movement and few obstacles, then progressively becomes more challenging as you score points. All graphics are embedded as SVG data URLs so no external dependencies are needed.Drag to resize
**Mario Game Implementation**
To ensure a smooth gaming experience, we will implement the game using HTML, CSS, and JavaScript. The game will be designed to gradually increase in difficulty as the player progresses.
### Game Description
The game is a simplified version of the classic Mario game, where the player controls Mario as he navigates through a series of obstacles and enemies. The game will feature:
* A scrolling background
* Mario character that can jump and collide with obstacles
* Enemies that move across the screen
* Coins that can be collected for points
* Increasing difficulty as the game progresses
### Code Implementation
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mario Game</title>
<style>
/* Game Styles */
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Set the canvas dimensions
canvas.width = 800;
canvas.height = 400;
// Define game variables
let mario = {
x: 50,
y: canvas.height / 2,
width: 30,
height: 30,
velocity: 0,
gravity: 0.5,
jump: -10,
isJumping: false
};
let enemies = [];
let coins = [];
let score = 0;
let gameSpeed = 2;
let lastEnemyTime = 0;
let lastCoinTime = 0;
// Main game loop
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update Mario
mario.y += mario.velocity;
mario.velocity += mario.gravity;
if (mario.y + mario.height > canvas.height) {
mario.y = canvas.height - mario.height;
mario.velocity = 0;
mario.isJumping = false;
}
// Draw Mario
ctx.fillStyle = 'red';
ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
// Update enemies
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].x -= gameSpeed;
if (enemies[i].x < -enemies[i].width) {
enemies.splice(i, 1);
} else {
// Draw enemy
ctx.fillStyle = 'black';
ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
// Check collision with Mario
if (checkCollision(mario, enemies[i])) {
alert('Game Over! Your score: ' + score);
window.location.reload();
}
}
}
// Update coins
for (let i = coins.length - 1; i >= 0; i--) {
coins[i].x -= gameSpeed;
if (coins[i].x < -coins[i].width) {
coins.splice(i, 1);
} else {
// Draw coin
ctx.fillStyle = 'yellow';
ctx.fillRect(coins[i].x, coins[i].y, coins[i].width, coins[i].height);
// Check collision with Mario
if (checkCollision(mario, coins[i])) {
score++;
coins.splice(i, 1);
}
}
}
// Generate new enemies and coins
const currentTime = Date.now();
if (currentTime - lastEnemyTime > 2000 / gameSpeed) {
lastEnemyTime = currentTime;
enemies.push({
x: canvas.width,
y: canvas.height - 30,
width: 30,
height: 30
});
}
if (currentTime - lastCoinTime > 1000 / gameSpeed) {
lastCoinTime = currentTime;
coins.push({
x: canvas.width,
y: Math.random() * (canvas.height - 30),
width: 20,
height: 20
});
}
// Increase game speed over time
gameSpeed += 0.001;
// Display score
ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('Score: ' + score, 10, 10);
requestAnimationFrame(update);
}
// Check collision between two rectangles
function checkCollision(rect1, rect2) {
return (
rect1.x + rect1.width > rect2.x &&
rect1.x < rect2.x + rect2.width &&
rect1.y + rect1.height > rect2.y &&
rect1.y < rect2.y + rect2.height
);
}
// Handle keyboard input
document.addEventListener('keydown', (e) => {
if (e.key === ' ') {
if (!mario.isJumping) {
mario.velocity = mario.jump;
mario.isJumping = true;
}
}
});
// Start the game
update();
</script>
</body>
</html>
```
### How to Run the Game
1. Save the above code in an HTML file (e.g., `mario_game.html`).
2. Open the HTML file in a web browser.
3. Press the space bar to make Mario jump.
4. Avoid enemies and collect coins to increase your score.
The game will continue to run until the player collides with an enemy, at which point the game will end and display the final score. The game will also restart if the player reloads the page.Drag to resize
I'll create a simple Mario-like game using HTML, CSS, and JavaScript. The game will have a Mario character that can jump and move left or right, and the goal is to avoid obstacles and collect coins.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario Game</title>
<style>
/* Add some basic styling to our game */
body {
margin: 0;
background-color: #f0f0f0;
}
#game-container {
width: 800px;
height: 600px;
border: 1px solid black;
margin: 40px auto;
background-color: #fff;
position: relative;
overflow: hidden;
}
#mario {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 100px;
top: 500px;
}
.coin {
width: 20px;
height: 20px;
background-color: yellow;
position: absolute;
border-radius: 50%;
}
.obstacle {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="game-container">
<div id="mario"></div>
</div>
<script>
// Get the game container and Mario
const gameContainer = document.getElementById('game-container');
const mario = document.getElementById('mario');
// Set the initial position and velocity of Mario
let marioX = 100;
let marioY = 500;
let velocityX = 0;
let velocityY = 0;
let jumpVelocity = -10;
let gravity = 0.5;
// Create coins and obstacles
let coins = [];
let obstacles = [];
for (let i = 0; i < 10; i++) {
coins.push({
x: Math.random() * (gameContainer.offsetWidth - 20),
y: Math.random() * (gameContainer.offsetHeight / 2),
});
obstacles.push({
x: Math.random() * (gameContainer.offsetWidth - 50),
y: gameContainer.offsetHeight - 50,
});
}
// Draw coins and obstacles
coins.forEach((coin, index) => {
const coinElement = document.createElement('div');
coinElement.className = 'coin';
coinElement.style.left = `${coin.x}px`;
coinElement.style.top = `${coin.y}px`;
gameContainer.appendChild(coinElement);
});
obstacles.forEach((obstacle, index) => {
const obstacleElement = document.createElement('div');
obstacleElement.className = 'obstacle';
obstacleElement.style.left = `${obstacle.x}px`;
obstacleElement.style.top = `${obstacle.y}px`;
gameContainer.appendChild(obstacleElement);
});
// Update Mario position
function updateMario() {
marioX += velocityX;
marioY += velocityY;
velocityY += gravity;
// Keep Mario inside the game container
if (marioX < 0) {
marioX = 0;
} else if (marioX > gameContainer.offsetWidth - 50) {
marioX = gameContainer.offsetWidth - 50;
}
if (marioY < 0) {
marioY = 0;
} else if (marioY > gameContainer.offsetHeight - 50) {
marioY = gameContainer.offsetHeight - 50;
velocityY = 0;
}
// Update Mario position on the screen
mario.style.left = `${marioX}px`;
mario.style.top = `${marioY}px`;
}
// Handle keyboard input
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowLeft':
velocityX = -5;
break;
case 'ArrowRight':
velocityX = 5;
break;
case 'ArrowUp':
if (velocityY === 0) {
velocityY = jumpVelocity;
}
break;
}
});
document.addEventListener('keyup', (event) => {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowRight':
velocityX = 0;
break;
}
});
// Update game state
function update() {
updateMario();
// Check for collisions with coins and obstacles
coins.forEach((coin, index) => {
const coinElement = gameContainer.children[index + 1];
if (
marioX < coin.x + 20 &&
marioX + 50 > coin.x &&
marioY < coin.y + 20 &&
marioY + 50 > coin.y
) {
// Remove the coin
gameContainer.removeChild(coinElement);
coins.splice(index, 1);
}
});
obstacles.forEach((obstacle, index) => {
const obstacleElement = gameContainer.children[coins.length + index + 1];
if (
marioX < obstacle.x + 50 &&
marioX + 50 > obstacle.x &&
marioY < obstacle.y + 50 &&
marioY + 50 > obstacle.y
) {
// Game over
alert('Game Over');
window.location.reload();
}
});
// Increase difficulty over time
if (coins.length === 0) {
// Add more coins and obstacles
for (let i = 0; i < 10; i++) {
coins.push({
x: Math.random() * (gameContainer.offsetWidth - 20),
y: Math.random() * (gameContainer.offsetHeight / 2),
});
obstacles.push({
x: Math.random() * (gameContainer.offsetWidth - 50),
y: gameContainer.offsetHeight - 50,
});
}
coins.forEach((coin, index) => {
const coinElement = document.createElement('div');
coinElement.className = 'coin';
coinElement.style.left = `${coin.x}px`;
coinElement.style.top = `${coin.y}px`;
gameContainer.appendChild(coinElement);
});
obstacles.forEach((obstacle, index) => {
const obstacleElement = document.createElement('div');
obstacleElement.className = 'obstacle';
obstacleElement.style.left = `${obstacle.x}px`;
obstacleElement.style.top = `${obstacle.y}px`;
gameContainer.appendChild(obstacleElement);
});
}
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
```
This game uses the HTML5 canvas element to render the game, and JavaScript to handle user input and update the game state. The game starts with a simple level, and as the player collects coins, the level becomes more challenging by adding more coins and obstacles.
Please note that this is a basic example and there are many ways to improve it, such as adding more features like power-ups, different types of enemies, and a high score system.
You can copy the code into an HTML file and open it in a web browser to play the game. Use the arrow keys to control Mario, and try to collect all the coins while avoiding the obstacles. Have fun!Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Mario Download Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 60%, #90EE90 60%, #90EE90 100%);
font-family: 'Arial', sans-serif;
overflow: hidden;
height: 100vh;
}
#gameCanvas {
display: block;
margin: 0 auto;
border: 2px solid #333;
background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 70%, #8B4513 70%, #8B4513 100%);
}
#gameInfo {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
font-size: 16px;
}
.cloud {
position: absolute;
background: white;
border-radius: 50px;
opacity: 0.8;
animation: drift 20s linear infinite;
}
@keyframes drift {
0% { transform: translateX(-100px); }
100% { transform: translateX(calc(100vw + 100px)); }
}
</style>
</head>
<body>
<div id="gameInfo">
<div>Score: <span id="score">0</span></div>
<div>Level: <span id="level">1</span></div>
<div>Lives: <span id="lives">3</span></div>
</div>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<!-- Clouds for atmosphere -->
<div class="cloud" style="width: 60px; height: 30px; top: 50px; animation-delay: 0s;"></div>
<div class="cloud" style="width: 80px; height: 40px; top: 80px; animation-delay: -10s;"></div>
<div class="cloud" style="width: 70px; height: 35px; top: 30px; animation-delay: -5s;"></div>
<script>
class MarioGame {
constructor() {
this.canvas = document.getElementById('gameCanvas');
this.ctx = this.canvas.getContext('2d');
this.score = 0;
this.level = 1;
this.lives = 3;
this.gameSpeed = 2;
this.spawnRate = 0.02;
this.mario = {
x: 100,
y: 280,
width: 32,
height: 32,
velocityY: 0,
jumping: false,
grounded: true,
color: '#FF0000'
};
this.platforms = [
{x: 0, y: 320, width: 800, height: 80, color: '#8B4513'},
{x: 200, y: 250, width: 100, height: 20, color: '#228B22'},
{x: 400, y: 180, width: 100, height: 20, color: '#228B22'},
{x: 600, y: 220, width: 100, height: 20, color: '#228B22'}
];
this.enemies = [];
this.coins = [];
this.particles = [];
this.keys = {};
this.gravity = 0.5;
this.jumpForce = -12;
this.setupEventListeners();
this.gameLoop();
this.spawnCoins();
}
setupEventListeners() {
window.addEventListener('keydown', (e) => {
this.keys[e.key.toLowerCase()] = true;
if (e.key === ' ') {
e.preventDefault();
this.jump();
}
});
window.addEventListener('keyup', (e) => {
this.keys[e.key.toLowerCase()] = false;
});
// Touch controls for mobile
this.canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = this.canvas.getBoundingClientRect();
const touchX = touch.clientX - rect.left;
if (touchX < this.canvas.width / 2) {
this.keys['a'] = true;
} else {
this.jump();
}
});
this.canvas.addEventListener('touchend', (e) => {
e.preventDefault();
this.keys['a'] = false;
this.keys['d'] = false;
});
}
jump() {
if (this.mario.grounded) {
this.mario.velocityY = this.jumpForce;
this.mario.jumping = true;
this.mario.grounded = false;
}
}
spawnCoins() {
if (Math.random() < 0.3) {
this.coins.push({
x: Math.random() * 700 + 50,
y: Math.random() * 200 + 50,
width: 16,
height: 16,
collected: false,
bounce: 0
});
}
}
spawnEnemies() {
if (Math.random() < this.spawnRate) {
this.enemies.push({
x: this.canvas.width + 50,
y: 288,
width: 24,
height: 24,
velocityX: -(this.gameSpeed + Math.random() * 2),
type: Math.random() < 0.7 ? 'goomba' : 'koopa'
});
}
}
createParticle(x, y, color) {
for (let i = 0; i < 6; i++) {
this.particles.push({
x: x,
y: y,
velocityX: (Math.random() - 0.5) * 8,
velocityY: Math.random() * -8,
life: 30,
color: color
});
}
}
updateMario() {
// Horizontal movement
if (this.keys['a'] || this.keys['arrowleft']) {
this.mario.x -= 4;
}
if (this.keys['d'] || this.keys['arrowright']) {
this.mario.x += 4;
}
// Keep Mario in bounds
this.mario.x = Math.max(0, Math.min(this.canvas.width - this.mario.width, this.mario.x));
// Gravity
this.mario.velocityY += this.gravity;
this.mario.y += this.mario.velocityY;
// Platform collision
this.mario.grounded = false;
for (let platform of this.platforms) {
if (this.mario.x < platform.x + platform.width &&
this.mario.x + this.mario.width > platform.x &&
this.mario.y + this.mario.height > platform.y &&
this.mario.y + this.mario.height < platform.y + platform.height + 10 &&
this.mario.velocityY > 0) {
this.mario.y = platform.y - this.mario.height;
this.mario.velocityY = 0;
this.mario.jumping = false;
this.mario.grounded = true;
break;
}
}
}
updateEnemies() {
this.spawnEnemies();
for (let i = this.enemies.length - 1; i >= 0; i--) {
let enemy = this.enemies[i];
enemy.x += enemy.velocityX;
// Remove enemies that are off screen
if (enemy.x < -50) {
this.enemies.splice(i, 1);
continue;
}
// Check collision with Mario
if (this.mario.x < enemy.x + enemy.width &&
this.mario.x + this.mario.width > enemy.x &&
this.mario.y < enemy.y + enemy.height &&
this.mario.y + this.mario.height > enemy.y) {
if (this.mario.velocityY > 0 && this.mario.y < enemy.y) {
// Mario jumps on enemy
this.createParticle(enemy.x + enemy.width/2, enemy.y, '#FFD700');
this.enemies.splice(i, 1);
this.score += 100;
this.mario.velocityY = -8; // Bounce
} else {
// Mario takes damage
this.takeDamage();
}
}
}
}
updateCoins() {
if (this.coins.length < 3 && Math.random() < 0.01) {
this.spawnCoins();
}
for (let i = this.coins.length - 1; i >= 0; i--) {
let coin = this.coins[i];
coin.bounce += 0.2;
// Check collision with Mario
if (!coin.collected &&
this.mario.x < coin.x + coin.width &&
this.mario.x + this.mario.width > coin.x &&
this.mario.y < coin.y + coin.height &&
this.mario.y + this.mario.height > coin.y) {
coin.collected = true;
this.createParticle(coin.x + coin.width/2, coin.y, '#FFD700');
this.score += 200;
this.coins.splice(i, 1);
}
}
}
updateParticles() {
for (let i = this.particles.length - 1; i >= 0; i--) {
let particle = this.particles[i];
particle.x += particle.velocityX;
particle.y += particle.velocityY;
particle.velocityY += 0.3;
particle.life--;
if (particle.life <= 0) {
this.particles.splice(i, 1);
}
}
}
takeDamage() {
this.lives--;
this.createParticle(this.mario.x + this.mario.width/2, this.mario.y, '#FF0000');
if (this.lives <= 0) {
this.gameOver();
} else {
// Reset Mario position
this.mario.x = 100;
this.mario.y = 280;
this.mario.velocityY = 0;
}
}
gameOver() {
alert(`Game Over! Final Score: ${this.score}`);
this.resetGame();
}
resetGame() {
this.score = 0;
this.level = 1;
this.lives = 3;
this.gameSpeed = 2;
this.spawnRate = 0.02;
this.enemies = [];
this.coins = [];
this.particles = [];
this.mario.x = 100;
this.mario.y = 280;
this.mario.velocityY = 0;
}
updateDifficulty() {
if (this.score > this.level * 1000) {
this.level++;
this.gameSpeed += 0.5;
this.spawnRate += 0.005;
this.createParticle(this.canvas.width/2, 100, '#00FF00');
}
}
drawMario() {
this.ctx.fillStyle = this.mario.color;
this.ctx.fillRect(this.mario.x, this.mario.y, this.mario.width, this.mario.height);
// Mario's hat
this.ctx.fillStyle = '#8B0000';
this.ctx.fillRect(this.mario.x + 4, this.mario.y, this.mario.width - 8, 8);
// Mario's face
this.ctx.fillStyle = '#FFDBAC';
this.ctx.fillRect(this.mario.x + 6, this.mario.y + 8, this.mario.width - 12, 16);
// Mario's overalls
this.ctx.fillStyle = '#0000FF';
this.ctx.fillRect(this.mario.x + 4, this.mario.y + 20, this.mario.width - 8, 12);
}
drawPlatforms() {
for (let platform of this.platforms) {
this.ctx.fillStyle = platform.color;
this.ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
// Add some texture
this.ctx.fillStyle = 'rgba(255,255,255,0.3)';
this.ctx.fillRect(platform.x, platform.y, platform.width, 4);
}
}
drawEnemies() {
for (let enemy of this.enemies) {
if (enemy.type === 'goomba') {
this.ctx.fillStyle = '#8B4513';
this.ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
this.ctx.fillStyle = '#654321';
this.ctx.fillRect(enemy.x + 2, enemy.y + 2, enemy.width - 4, 8);
} else {
this.ctx.fillStyle = '#228B22';
this.ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
this.ctx.fillStyle = '#32CD32';
this.ctx.fillRect(enemy.x + 4, enemy.y + 4, enemy.width - 8, enemy.height - 8);
}
}
}
drawCoins() {
for (let coin of this.coins) {
if (!coin.collected) {
this.ctx.fillStyle = '#FFD700';
let bounce = Math.sin(coin.bounce) * 3;
this.ctx.beginPath();
this.ctx.arc(coin.x + coin.width/2, coin.y + coin.height/2 + bounce, 8, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.fillStyle = '#FFA500';
this.ctx.beginPath();
this.ctx.arc(coin.x + coin.width/2, coin.y + coin.height/2 + bounce, 5, 0, Math.PI * 2);
this.ctx.fill();
}
}
}
drawParticles() {
for (let particle of this.particles) {
this.ctx.fillStyle = particle.color;
this.ctx.globalAlpha = particle.life / 30;
this.ctx.fillRect(particle.x, particle.y, 3, 3);
this.ctx.globalAlpha = 1;
}
}
updateUI() {
document.getElementById('score').textContent = this.score;
document.getElementById('level').textContent = this.level;
document.getElementById('lives').textContent = this.lives;
}
gameLoop() {
// Clear canvas
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Update game objects
this.updateMario();
this.updateEnemies();
this.updateCoins();
this.updateParticles();
this.updateDifficulty();
// Draw everything
this.drawPlatforms();
this.drawMario();
this.drawEnemies();
this.drawCoins();
this.drawParticles();
// Update UI
this.updateUI();
// Continue game loop
requestAnimationFrame(() => this.gameLoop());
}
}
// Start the game
window.addEventListener('load', () => {
new MarioGame();
});
</script>
</body>
</html>
```
This is a complete Mario-style platformer game with the following features:
**Gameplay:**
- Move with A/D keys or arrow keys
- Jump with spacebar or tap right side of screen (mobile)
- Collect coins for points
- Jump on enemies to defeat them
- Avoid enemy contact or lose a life
**Progressive Difficulty:**
- Game speed increases with each level
- Enemy spawn rate increases
- Level up every 1000 points
**Smooth Features:**
- 60fps gameplay using requestAnimationFrame
- Particle effects for collecting items and taking damage
- Smooth jumping physics with gravity
- Animated coins with bouncing effect
- Touch controls for mobile devices
**Visual Polish:**
- Mario-style character design
- Multiple platform types
- Background clouds with CSS animations
- Real-time score, level, and lives display
- Particle system for visual feedback
The game starts easy and gradually becomes more challenging as you progress, making it perfect for keeping you entertained while waiting for downloads!Drag to resize
# Super Mario Mini
Here's a simple but fun Super Mario-inspired platformer to play while waiting for downloads. Use arrow keys or WASD to move and jump!
```html
<!DOCTYPE html>
<html>
<head>
<title>Super Mario Mini</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #5c94fc;
font-family: 'Press Start 2P', cursive, Arial, sans-serif;
}
canvas {
display: block;
margin: 0 auto;
background: linear-gradient(to bottom, #5c94fc 0%, #c0e8fc 100%);
}
#game-container {
position: relative;
width: 800px;
margin: 0 auto;
}
#score {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 18px;
text-shadow: 2px 2px 0 #000;
}
#level {
position: absolute;
top: 10px;
right: 10px;
color: white;
font-size: 18px;
text-shadow: 2px 2px 0 #000;
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url(data:font/woff2;base64,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) format('woff2');
}
</style>
</head>
<body>
<div id="game-container">
<canvas id="gameCanvas" width="800" height="400"></canvas>
<div id="score">COINS: 0</div>
<div id="level">LEVEL: 1</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const levelDisplay = document.getElementById('level');
// Game variables
let score = 0;
let level = 1;
let gameSpeed = 1;
let isGameOver = false;
// Mario character
const mario = {
x: 100,
y: 290,
width: 40,
height: 60,
speed: 5,
jumpForce: 15,
velocityY: 0,
isJumping: false,
direction: 'right',
isMoving: false,
frame: 0,
frameCount: 0,
frameDelay: 5
};
// Platform class
class Platform {
constructor(x, y, width, height, type = 'normal') {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.type = type;
}
draw() {
ctx.fillStyle = this.type === 'normal' ? '#8b4513' : '#2E8B57';
ctx.fillRect(this.x, this.y, this.width, this.height);
// Draw platform top
ctx.fillStyle = this.type === 'normal' ? '#D2691E' : '#3CB371';
ctx.fillRect(this.x, this.y, this.width, 10);
}
}
// Coin class
class Coin {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 20;
this.height = 20;
this.collected = false;
this.frameCount = 0;
this.frame = 0;
}
draw() {
if (this.collected) return;
this.frameCount++;
if (this.frameCount > 10) {
this.frame = (this.frame + 1) % 4;
this.frameCount = 0;
}
const shine = this.frame < 2 ? 0 : 50;
ctx.fillStyle = `rgb(255, 215, ${shine})`;
ctx.beginPath();
ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = '#FFA500';
ctx.lineWidth = 2;
ctx.stroke();
}
checkCollision() {
if (this.collected) return false;
if (
mario.x < this.x + this.width &&
mario.x + mario.width > this.x &&
mario.y < this.y + this.height &&
mario.y + mario.height > this.y
) {
this.collected = true;
score++;
scoreDisplay.textContent = `COINS: ${score}`;
// Level up every 5 coins
if (score % 5 === 0) {
level++;
levelDisplay.textContent = `LEVEL: ${level}`;
gameSpeed += 0.2;
generateLevel();
}
return true;
}
return false;
}
}
// Enemy class
class Enemy {
constructor(x, y, type = 'goomba') {
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.type = type;
this.velocityX = -2 * gameSpeed;
this.frameCount = 0;
this.frame = 0;
}
draw() {
// Animate the enemy
this.frameCount++;
if (this.frameCount > 15) {
this.frame = (this.frame + 1) % 2;
this.frameCount = 0;
}
ctx.fillStyle = this.type === 'goomba' ? '#8B4513' : '#228B22';
// Draw enemy body
ctx.beginPath();
ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
ctx.fill();
// Draw enemy eyes
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x + this.width/2 - 10, this.y + this.height/3, 5, 0, Math.PI * 2);
ctx.arc(this.x + this.width/2 + 10, this.y + this.height/3, 5, 0, Math.PI * 2);
ctx.fill();
// Draw enemy pupils
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(this.x + this.width/2 - 10, this.y + this.height/3, 2, 0, Math.PI * 2);
ctx.arc(this.x + this.width/2 + 10, this.y + this.height/3, 2, 0, Math.PI * 2);
ctx.fill();
// Draw feet
ctx.fillStyle = '#5D4037';
if (this.frame === 0) {
ctx.fillRect(this.x + 5, this.y + this.height - 10, 10, 10);
ctx.fillRect(this.x + this.width - 15, this.y + this.height - 10, 10, 10);
} else {
ctx.fillRect(this.x + 10, this.y + this.height - 10, 10, 10);
ctx.fillRect(this.x + this.width - 20, this.y + this.height - 10, 10, 10);
}
}
update() {
this.x += this.velocityX;
// Loop enemies around the screen
if (this.x < -this.width) {
this.x = canvas.width + Math.random() * 500;
}
}
checkCollision() {
if (
mario.x < this.x + this.width &&
mario.x + mario.width > this.x &&
mario.y < this.y + this.height &&
mario.y + mario.height > this.y
) {
// If Mario is falling onto the enemy from above
if (mario.velocityY > 0 && mario.y + mario.height < this.y + this.height / 2) {
// Bounce up after stomping
mario.velocityY = -mario.jumpForce / 2;
this.x = canvas.width + Math.random() * 500; // Reset enemy position
score += 2;
scoreDisplay.textContent = `COINS: ${score}`;
} else {
// Game over
gameOver();
}
return true;
}
return false;
}
}
// Game objects
let platforms = [];
let coins = [];
let enemies = [];
// Controls
const keys = {
left: false,
right: false,
up: false
};
// Clouds for background
const clouds = [];
for (let i = 0; i < 5; i++) {
clouds.push({
x: Math.random() * canvas.width,
y: Math.random() * 100 + 20,
width: Math.random() * 60 + 40,
speed: Math.random() * 0.5 + 0.1
});
}
// Generate a level based on current level
function generateLevel() {
// Clear existing objects
platforms = [];
coins = [];
enemies = [];
// Add ground platform
platforms.push(new Platform(0, 350, canvas.width, 50));
// Add random platforms
const numPlatforms = 5 + Math.floor(level / 2);
for (let i = 0; i < numPlatforms; i++) {
const width = Math.random() * 150 + 50;
const x = Math.random() * (canvas.width - width);
const y = Math.random() * 150 + 150;
const type = Math.random() > 0.7 ? 'special' : 'normal';
platforms.push(new Platform(x, y, width, 20, type));
}
// Add coins on platforms
for (let i = 0; i < platforms.length; i++) {
const platform = platforms[i];
const numCoins = Math.floor(Math.random() * 3) + 1;
for (let j = 0; j < numCoins; j++) {
const x = platform.x + Math.random() * (platform.width - 20);
const y = platform.y - 30;
coins.push(new Coin(x, y));
}
}
// Add enemies based on level
const numEnemies = Math.min(10, Math.floor(level / 2) + 1);
for (let i = 0; i < numEnemies; i++) {
const x = canvas.width + Math.random() * 500;
const y = 310;
const type = Math.random() > 0.7 ? 'turtle' : 'goomba';
enemies.push(new Enemy(x, y, type));
}
}
// Event listeners for keyboard controls
document.addEventListener('keydown', (event) => {
switch(event.code) {
case 'ArrowLeft':
case 'KeyA':
keys.left = true;
mario.isMoving = true;
mario.direction = 'left';
break;
case 'ArrowRight':
case 'KeyD':
keys.right = true;
mario.isMoving = true;
mario.direction = 'right';
break;
case 'ArrowUp':
case 'KeyW':
case 'Space':
keys.up = true;
break;
}
});
document.addEventListener('keyup', (event) => {
switch(event.code) {
case 'ArrowLeft':
case 'KeyA':
keys.left = false;
if (!keys.right) mario.isMoving = false;
break;
case 'ArrowRight':
case 'KeyD':
keys.right = false;
if (!keys.left) mario.isMoving = false;
break;
case 'ArrowUp':
case 'KeyW':
case 'Space':
keys.up = false;
break;
}
});
// Update Mario's position
function updateMario() {
// Horizontal movement
if (keys.left) {
mario.x -= mario.speed * gameSpeed;
mario.direction = 'left';
}
if (keys.right) {
mario.x += mario.speed * gameSpeed;
mario.direction = 'right';
}
// Keep Mario on screen
if (mario.x < 0) mario.x = 0;
if (mario.x > canvas.width - mario.width) mario.x = canvas.width - mario.width;
// Apply gravity
mario.velocityY += 0.8;
mario.y += mario.velocityY;
// Check for jumping
if (keys.up && !mario.isJumping) {
mario.velocityY = -mario.jumpForce;
mario.isJumping = true;
}
// Check platform collisions
mario.isJumping = true;
for (let platform of platforms) {
if (
mario.x < platform.x + platform.width &&
mario.x + mario.width > platform.x &&
mario.y + mario.height > platform.y &&
mario.y + mario.height < platform.y + platform.height &&
mario.velocityY > 0
) {
mario.isJumping = false;
mario.y = platform.y - mario.height;
mario.velocityY = 0;
}
}
// Check if Mario falls off the screen
if (mario.y > canvas.height) {
gameOver();
}
// Animation frames
if (mario.isMoving) {
mario.frameCount++;
if (mario.frameCount > mario.frameDelay) {
mario.frame = (mario.frame + 1) % 3;
mario.frameCount = 0;
}
} else {
mario.frame = 0;
}
}
// Draw Mario
function drawMario() {
// Mario's body
ctx.fillStyle = 'red';
ctx.fillRect(mario.x + 5, mario.y + 20, mario.width - 10, mario.height - 30);
// Mario's overalls
ctx.fillStyle = 'blue';
ctx.fillRect(mario.x + 5, mario.y + 35, mario.width - 10, mario.height - 35);
// Mario's face
ctx.fillStyle = '#FFB6C1';
ctx.fillRect(mario.x, mario.y, mario.width, 20);
// Mario's eyes
ctx.fillStyle = 'white';
const eyeX = mario.direction === 'right' ? mario.x + 25 : mario.x + 10;
ctx.fillRect(eyeX, mario.y + 5, 5, 5);
// Mario's pupils
ctx.fillStyle = 'black';
ctx.fillRect(eyeX + 2, mario.y + 6, 2, 3);
// Mario's hat
ctx.fillStyle = 'red';
ctx.fillRect(mario.x - 2, mario.y - 5, mario.width + 4, 10);
ctx.fillRect(mario.x, mario.y - 12, mario.width - 5, 12);
// Mario's mustache
ctx.fillStyle = 'black';
ctx.fillRect(mario.x + 5, mario.y + 15, mario.width - 10, 3);
// Mario's arms
ctx.fillStyle = 'red';
if (mario.isJumping) {
// Arms up when jumping
ctx.fillRect(mario.x - 5, mario.y + 20, 10, 10);
ctx.fillRect(mario.x + mario.width - 5, mario.y + 20, 10, 10);
} else if (mario.isMoving) {
// Alternate arms when moving
if (mario.frame === 1) {
ctx.fillRect(mario.x - 5, mario.y + 25, 10, 10);
ctx.fillRect(mario.x + mario.width - 5, mario.y + 30, 10, 10);
} else if (mario.frame === 2) {
ctx.fillRect(mario.x - 5, mario.y + 30, 10, 10);
ctx.fillRect(mario.x + mario.width - 5, mario.y + 25, 10, 10);
} else {
ctx.fillRect(mario.x - 5, mario.y + 30, 10, 10);
ctx.fillRect(mario.x + mario.width - 5, mario.y + 30, 10, 10);
}
} else {
// Arms at rest
ctx.fillRect(mario.x - 5, mario.y + 30, 10, 10);
ctx.fillRect(mario.x + mario.width - 5, mario.y + 30, 10, 10);
}
// Mario's legs/feet
ctx.fillStyle = 'brown';
if (mario.isJumping) {
// Legs spread when jumping
ctx.fillRect(mario.x + 5, mario.y + mario.height - 10, 10, 10);
ctx.fillRect(mario.x + mario.width - 15, mario.y + mario.height - 10, 10, 10);
} else if (mario.isMoving) {
// Animate legs when moving
if (mario.frame === 1) {
ctx.fillRect(mario.x + 5, mario.y + mario.height - 10, 10, 10);
ctx.fillRect(mario.x + mario.width - 15, mario.y + mario.height - 5, 10, 5);
} else if (mario.frame === 2) {
ctx.fillRect(mario.x + 5, mario.y + mario.height - 5, 10, 5);
ctx.fillRect(mario.x + mario.width - 15, mario.y + mario.height - 10, 10, 10);
} else {
ctx.fillRect(mario.x + 5, mario.y + mario.height - 10, 10, 10);
ctx.fillRect(mario.x + mario.width - 15, mario.y + mario.height - 10, 10, 10);
}
} else {
// Standing still
ctx.fillRect(mario.x + 5, mario.y + mario.height - 10, 10, 10);
ctx.fillRect(mario.x + mario.width - 15, mario.y + mario.height - 10, 10, 10);
}
}
// Draw background
function drawBackground() {
// Sky
ctx.fillStyle = '#5c94fc';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw clouds
ctx.fillStyle = 'white';
for (let cloud of clouds) {
drawCloud(cloud.x, cloud.y, cloud.width);
// Move clouds
cloud.x -= cloud.speed;
// Wrap clouds around
if (cloud.x + cloud.width < 0) {
cloud.x = canvas.width;
cloud.y = Math.random() * 100 + 20;
}
}
// Draw hills in the background
ctx.fillStyle = '#8FBC8F';
drawHill(100, 350, 200, 150);
drawHill(400, 350, 150, 100);
drawHill(700, 350, 180, 120);
}
// Draw a cloud
function drawCloud(x, y, width) {
const height = width * 0.6;
ctx.beginPath();
ctx.arc(x, y, width/4, 0, Math.PI * 2);
ctx.arc(x + width/4, y - height/4, width/3, 0, Math.PI * 2);
ctx.arc(x + width/2, y, width/4, 0, Math.PI * 2);
ctx.arc(x + width/3, y + height/4, width/4, 0, Math.PI * 2);
ctx.fill();
}
// Draw a hill
function drawHill(x, y, width, height) {
ctx.beginPath();
ctx.moveTo(x - width/2, y);
ctx.quadraticCurveTo(x, y - height, x + width/2, y);
ctx.fill();
}
// Game over function
function gameOver() {
isGameOver = true;
// Display game over message
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = '48px "Press Start 2P", cursive';
ctx.textAlign = 'center';
ctx.fillText('GAME OVER', canvas.width/2, canvas.height/2 - 40);
ctx.font = '24px "Press Start 2P", cursive';
ctx.fillText(`SCORE: ${score}`, canvas.width/2, canvas.height/2 + 20);
ctx.fillText('PRESS SPACE TO RESTART', canvas.width/2, canvas.height/2 + 60);
// Add event listener for restart
document.addEventListener('keydown', restartGame);
}
// Restart the game
function restartGame(event) {
if ((event.code === 'Space' || event.code === 'Enter') && isGameOver) {
document.removeEventListener('keydown', restartGame);
// Reset game variables
score = 0;
level = 1;
gameSpeed = 1;
isGameOver = false;
scoreDisplay.textContent = `COINS: ${score}`;
levelDisplay.textContent = `LEVEL: ${level}`;
// Reset Mario
mario.x = 100;
mario.y = 290;
mario.velocityY = 0;
mario.isJumping = false;
// Generate a new level
generateLevel();
// Start the game loop again
requestAnimationFrame(gameLoop);
}
}
// Main game loop
function gameLoop() {
if (!isGameOver) {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background
drawBackground();
// Update and draw platforms
for (let platform of platforms) {
platform.draw();
}
// Update and draw coins
for (let coin of coins) {
coin.draw();
coin.checkCollision();
}
// Filter out collected coins
coins = coins.filter(coin => !coin.collected);
// Update and draw enemies
for (let enemy of enemies) {
enemy.update();
enemy.draw();
enemy.checkCollision();
}
// Update Mario's position
updateMario();
// Draw Mario
drawMario();
// Request next frame
requestAnimationFrame(gameLoop);
}
}
// Start the game
generateLevel();
gameLoop();
</script>
</body>
</html>
```
This Super Mario Mini game includes:
- Classic Mario-style gameplay with simple controls (arrows/WASD to move and jump)
- Progressively harder levels with more enemies and platforms
- Collectible coins that increase your score
- Animated character, enemies and environment
- Cloud backgrounds and hills for visual appeal
- Ability to defeat enemies by jumping on them
- Game over screen with restart option
The game automatically gets faster and more challenging as you collect coins and advance through levels. Enjoy playing while waiting for your downloads!Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini Mario Runner</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
background: linear-gradient(to bottom, #6ec6ff, #bde0fe);
font-family: 'Press Start 2P', sans-serif;
}
canvas {
display: block;
background: linear-gradient(to top, #6cc644 20%, #8ae234 50%, #6ec6ff 81%);
}
#ui {
position: absolute;
top: 20px;
left: 20px;
font-size: 14px;
color: #000;
text-shadow: 1px 1px 2px #fff;
}
#ui .score {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="ui">
<div class="score">Score: 0</div>
<div class="level">Level: 1</div>
<div class="status">Press SPACE to Jump</div>
</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let cw = window.innerWidth;
let ch = window.innerHeight;
canvas.width = cw;
canvas.height = ch;
// Game variables
let gravity = 0.8;
let jumpPower = -15;
let player = {
x: 100,
y: ch - 150,
width: 50,
height: 50,
dy: 0,
jumping: false
};
let obstacles = [];
let score = 0;
let level = 1;
let speed = 6;
let gameOver = false;
function resetGame() {
obstacles = [];
score = 0;
level = 1;
speed = 6;
player.y = ch - 150;
player.dy = 0;
gameOver = false;
}
function drawPlayer() {
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.rect(player.x, player.y, player.width, player.height);
ctx.fill();
// simulate Mario hat
ctx.fillStyle = "#000";
ctx.fillRect(player.x + 10, player.y - 10, 30, 10);
}
function drawObstacles() {
ctx.fillStyle = "#654321";
obstacles.forEach(ob => {
ctx.fillRect(ob.x, ob.y, ob.width, ob.height);
});
}
function spawnObstacle() {
let size = 40 + Math.random() * 40;
obstacles.push({
x: cw,
y: ch - 100,
width: size,
height: size
});
}
function updateObstacles() {
obstacles.forEach(ob => {
ob.x -= speed;
});
obstacles = obstacles.filter(ob => ob.x + ob.width > 0);
if (Math.random() < 0.02 + level * 0.002) {
spawnObstacle();
}
}
function detectCollision() {
for (let ob of obstacles) {
if (player.x < ob.x + ob.width &&
player.x + player.width > ob.x &&
player.y < ob.y + ob.height &&
player.y + player.height > ob.y) {
gameOver = true;
document.querySelector(".status").innerText = "Game Over! Press Enter to Restart.";
return true;
}
}
return false;
}
function updateScoreAndLevel() {
score++;
document.querySelector(".score").innerText = "Score: " + score;
let newLevel = Math.floor(score / 500) + 1;
if (newLevel > level) {
level = newLevel;
speed += 2;
document.querySelector(".level").innerText = "Level: " + level;
}
}
function gameLoop() {
ctx.clearRect(0, 0, cw, ch);
if (!gameOver) {
// Gravity
player.dy += gravity;
player.y += player.dy;
if (player.y + player.height >= ch - 100) {
player.y = ch - 100 - player.height;
player.dy = 0;
player.jumping = false;
}
updateObstacles();
drawPlayer();
drawObstacles();
detectCollision();
updateScoreAndLevel();
} else {
ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.fillRect(0, 0, cw, ch);
ctx.fillStyle = "#fff";
ctx.font = "30px Arial";
ctx.fillText("GAME OVER", cw / 2 - 100, ch / 2);
}
requestAnimationFrame(gameLoop);
}
document.addEventListener("keydown", (e) => {
if ((e.code === "Space" || e.key === " ") && !player.jumping && !gameOver) {
player.dy = jumpPower;
player.jumping = true;
}
if (e.key === "Enter" && gameOver) {
resetGame();
document.querySelector(".status").innerText = "Press SPACE to Jump";
}
});
window.addEventListener("resize", () => {
cw = window.innerWidth;
ch = window.innerHeight;
canvas.width = cw;
canvas.height = ch;
});
resetGame();
gameLoop();
</script>
</body>
</html>
```Drag to resize