🐳 13/02 - 02:41 - Now make a red character that chases after you too. He steals your points, and wins if he takes all of the points off of the board by taking them from you. He cannot lose. You have

game.js

@@ -12,6 +12,15 @@ const player = {
     speed: 5
 };
 
+const enemy = {
+    x: 50,
+    y: 50,
+    radius: 18,
+    color: '#DC143C',
+    speed: 2.5,
+    stolenScore: 0
+};
+
 const toppings = {
     beef: [],
     lettuce: [],
@@ -21,6 +30,7 @@ const toppings = {
 let score = 0;
 let lives = 3;
 let gameRunning = true;
+const TOTAL_POINTS = 200; // 20 beef * 10 points each
 
 // Initialize game
 function init() {
@@ -64,6 +74,25 @@ function movePlayer(e) {
     player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));
 }
 
+function moveEnemy() {
+    if (!gameRunning) return;
+    
+    // Calculate direction to player
+    const dx = player.x - enemy.x;
+    const dy = player.y - enemy.y;
+    const distance = Math.hypot(dx, dy);
+    
+    if (distance > 0) {
+        // Normalize and move towards player
+        enemy.x += (dx / distance) * enemy.speed;
+        enemy.y += (dy / distance) * enemy.speed;
+    }
+    
+    // Boundary check
+    enemy.x = Math.max(enemy.radius, Math.min(canvas.width - enemy.radius, enemy.x));
+    enemy.y = Math.max(enemy.radius, Math.min(canvas.height - enemy.radius, enemy.y));
+}
+
 function checkCollision() {
     // Check beef collisions
     for (let i = 0; i < toppings.beef.length; i++) {
@@ -100,11 +129,35 @@ function checkCollision() {
             break;
         }
     }
+    
+    // Check enemy collision with player
+    const enemyDist = Math.hypot(player.x - enemy.x, player.y - enemy.y);
+    if (enemyDist < player.radius + enemy.radius) {
+        // Enemy steals points from player
+        if (score > 0) {
+            const stealAmount = Math.min(10, score); // Steal up to 10 points at a time
+            score -= stealAmount;
+            enemy.stolenScore += stealAmount;
+            scoreElement.textContent = score;
+            
+            // Push player away from enemy
+            const pushAngle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
+            player.x += Math.cos(pushAngle) * 30;
+            player.y += Math.sin(pushAngle) * 30;
+            
+            // Boundary check after push
+            player.x = Math.max(player.radius, Math.min(canvas.width - player.radius, player.x));
+            player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));
+        }
+    }
 
     // Check win/lose conditions
     if (toppings.beef.length === 0) {
         gameRunning = false;
-        alert('You won! Final score: ' + score);
+        alert('You won! Final score: ' + score + '\nEnemy stole: ' + enemy.stolenScore + ' points');
+    } else if (enemy.stolenScore >= TOTAL_POINTS) {
+        gameRunning = false;
+        alert('The Red Devourer wins!\nIt stole all ' + enemy.stolenScore + ' points from you!\nYour final score: ' + score);
     } else if (lives <= 0) {
         gameRunning = false;
         alert('Game over! Final score: ' + score);
@@ -121,10 +174,42 @@ function draw() {
     ctx.fillStyle = player.color;
     ctx.fill();
 
+    // Draw enemy
+    ctx.beginPath();
+    ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
+    ctx.fillStyle = enemy.color;
+    ctx.fill();
+    
+    // Draw enemy eyes
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.arc(enemy.x - 6, enemy.y - 4, 4, 0, Math.PI * 2);
+    ctx.arc(enemy.x + 6, enemy.y - 4, 4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(enemy.x - 6, enemy.y - 4, 2, 0, Math.PI * 2);
+    ctx.arc(enemy.x + 6, enemy.y - 4, 2, 0, Math.PI * 2);
+    ctx.fill();
+
     // Draw toppings
     drawToppings(toppings.beef);
     drawToppings(toppings.lettuce);
     drawToppings(toppings.cheese);
+    
+    // Draw enemy threat meter
+    ctx.fillStyle = 'rgba(220, 20, 60, 0.3)';
+    ctx.fillRect(canvas.width - 210, 10, 200, 20);
+    ctx.fillStyle = '#DC143C';
+    const threatWidth = (enemy.stolenScore / TOTAL_POINTS) * 200;
+    ctx.fillRect(canvas.width - 210, 10, threatWidth, 20);
+    ctx.strokeStyle = '#8B4513';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(canvas.width - 210, 10, 200, 20);
+    ctx.fillStyle = '#8B4513';
+    ctx.font = 'bold 14px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('ENEMY THREAT: ' + enemy.stolenScore + '/' + TOTAL_POINTS, canvas.width - 110, 25);
 }
 
 function drawToppings(toppingArray) {
@@ -139,6 +224,7 @@ function drawToppings(toppingArray) {
 function gameLoop() {
     if (!gameRunning) return;
     
+    moveEnemy();
     draw();
     checkCollision();
     requestAnimationFrame(gameLoop);

style.css

@@ -32,3 +32,11 @@ body {
     font-weight: bold;
     font-size: 18px;
 }
+
+.game-info::after {
+    content: "Avoid the Red Devourer!";
+    display: block;
+    color: #DC143C;
+    font-size: 14px;
+    margin-top: 5px;
+}