Game 2

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Madison Scott: Steeple Kick</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1a1a1a;
font-family: Arial, sans-serif;
}
#gameCanvas {
background-color: #2a2a2a;
border: 2px solid #4a90e2;
}
#score {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<div id=”score”>Score: 0</div>
<canvas id=”gameCanvas” width=”800″ height=”400″></canvas>

// Game state
let score = 0;
let gameRunning = true;

// Player (Madison)
const player = {
x: 50,
y: 300,
width: 40,
height: 60,
speed: 5,
jumping: false,
jumpHeight: 100,
jumpSpeed: 10,
kick: false,
kickDuration: 10,
kickTimer: 0
};

// Hurdles
const hurdles = [];
const hurdleWidth = 20;
const hurdleHeight = 40;
let hurdleSpawnTimer = 0;

// Enemies
const enemies = [];
const enemyWidth = 30;
const enemyHeight = 50;
let enemySpawnTimer = 0;

// Input handling
document.addEventListener(‘keydown’, (e) => {
if (e.code === ‘Space’ && !player.jumping) {
player.jumping = true;
player.jumpSpeed = -10;
}
if (e.code === ‘KeyK’ && !player.kick) {
player.kick = true;
player.kickTimer = player.kickDuration;
}
});

// Game loop
function update() {
if (!gameRunning) return;

// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update player
if (player.jumping) {
player.y += player.jumpSpeed;
player.jumpSpeed += 0.5; // Gravity
if (player.y >= 300) {
player.y = 300;
player.jumping = false;
}
}
if (player.kick) {
player.kickTimer–;
if (player.kickTimer <= 0) player.kick = false;
}

// Spawn hurdles
hurdleSpawnTimer++;
if (hurdleSpawnTimer > 60) {
hurdles.push({ x: canvas.width, y: 340, width: hurdleWidth, height: hurdleHeight });
hurdleSpawnTimer = 0;
}

// Spawn enemies
enemySpawnTimer++;
if (enemySpawnTimer > 120) {
enemies.push({ x: canvas.width, y: 330, width: enemyWidth, height: enemyHeight });
enemySpawnTimer = 0;
}

// Update hurdles
for (let i = hurdles.length – 1; i >= 0; i–) {
hurdles[i].x -= player.speed;
if (hurdles[i].x + hurdleWidth < 0) {
hurdles.splice(i, 1);
score += 10;
}
// Collision with player
if (!player.jumping &&
player.x + player.width > hurdles[i].x &&
player.x < hurdles[i].x + hurdleWidth &&
player.y + player.height > hurdles[i].y) {
gameRunning = false;
}
}

// Update enemies
for (let i = enemies.length – 1; i >= 0; i–) {
enemies[i].x -= player.speed;
if (enemies[i].x + enemyWidth < 0) {
enemies.splice(i, 1);
}
// Kick collision
if (player.kick &&
player.x + player.width > enemies[i].x &&
player.x < enemies[i].x + enemyWidth &&
player.y + player.height > enemies[i].y) {
enemies.splice(i, 1);
score += 50;
}
// Collision without kick
else if (player.x + player.width > enemies[i].x &&
player.x < enemies[i].x + enemyWidth &&
player.y + player.height > enemies[i].y) {
gameRunning = false;
}
}

// Draw player
ctx.fillStyle = player.kick ? ‘#ff4444’ : ‘#4a90e2’;
ctx.fillRect(player.x, player.y, player.width, player.height);

// Draw hurdles
ctx.fillStyle = ‘#ffffff’;
hurdles.forEach(h => ctx.fillRect(h.x, h.y, h.width, h.height));

// Draw enemies
ctx.fillStyle = ‘#ff8800’;
enemies.forEach(e => ctx.fillRect(e.x, e.y, e.width, e.height));

// Update score
scoreElement.textContent = `Score: ${score}`;

// Game over
if (!gameRunning) {
ctx.fillStyle = ‘white’;
ctx.font = ’48px Arial’;
ctx.fillText(‘Game Over’, canvas.width / 2 – 120, canvas.height / 2);
return;
}

requestAnimationFrame(update);
}

// Ground
ctx.fillStyle = ‘#555555’;
ctx.fillRect(0, 360, canvas.width, 40);

// Start game
update();
</script>
</body>
</html>