Hugging Face's logo

Spaces:
CommanderLazarus
/
burrito-runner
Running

App Files Community
CommanderLazarus commited on
Commit
1b7d441
·
verified ·
1 Parent(s): 660157e

Make me a game about burritos and running through a maze of burrito toppings. The point of the game is to eat all of the beef, but you lose points when eating lettuce. Cheese gives you an extra life.

Browse files
Files changed (4) hide show
  1. game.html +19 -0
  2. game.js +148 -0
  3. index.html +3 -4
  4. style.css +26 -20
game.html ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Burrito Runner</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="game-container">
11
+ <canvas id="gameCanvas" width="800" height="600"></canvas>
12
+ <div class="game-info">
13
+ <div>Score: <span id="score">0</span></div>
14
+ <div>Lives: <span id="lives">3</span></div>
15
+ </div>
16
+ </div>
17
+ <script src="game.js"></script>
18
+ </body>
19
+ </html>
game.js ADDED
@@ -0,0 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const canvas = document.getElementById('gameCanvas');
2
+ const ctx = canvas.getContext('2d');
3
+ const scoreElement = document.getElementById('score');
4
+ const livesElement = document.getElementById('lives');
5
+
6
+ // Game elements
7
+ const player = {
8
+ x: canvas.width / 2,
9
+ y: canvas.height / 2,
10
+ radius: 15,
11
+ color: '#FF5733',
12
+ speed: 5
13
+ };
14
+
15
+ const toppings = {
16
+ beef: [],
17
+ lettuce: [],
18
+ cheese: []
19
+ };
20
+
21
+ let score = 0;
22
+ let lives = 3;
23
+ let gameRunning = true;
24
+
25
+ // Initialize game
26
+ function init() {
27
+ // Create toppings
28
+ for (let i = 0; i < 20; i++) {
29
+ toppings.beef.push(createTopping('beef'));
30
+ toppings.lettuce.push(createTopping('lettuce'));
31
+ if (i < 5) toppings.cheese.push(createTopping('cheese'));
32
+ }
33
+
34
+ // Event listeners
35
+ window.addEventListener('keydown', movePlayer);
36
+
37
+ // Start game loop
38
+ gameLoop();
39
+ }
40
+
41
+ function createTopping(type) {
42
+ return {
43
+ x: Math.random() * (canvas.width - 30) + 15,
44
+ y: Math.random() * (canvas.height - 30) + 15,
45
+ radius: 10,
46
+ type: type,
47
+ color: type === 'beef' ? '#8B4513' :
48
+ type === 'lettuce' ? '#7CFC00' : '#FFD700'
49
+ };
50
+ }
51
+
52
+ function movePlayer(e) {
53
+ if (!gameRunning) return;
54
+
55
+ switch(e.key) {
56
+ case 'ArrowUp': player.y -= player.speed; break;
57
+ case 'ArrowDown': player.y += player.speed; break;
58
+ case 'ArrowLeft': player.x -= player.speed; break;
59
+ case 'ArrowRight': player.x += player.speed; break;
60
+ }
61
+
62
+ // Boundary check
63
+ player.x = Math.max(player.radius, Math.min(canvas.width - player.radius, player.x));
64
+ player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));
65
+ }
66
+
67
+ function checkCollision() {
68
+ // Check beef collisions
69
+ for (let i = 0; i < toppings.beef.length; i++) {
70
+ const beef = toppings.beef[i];
71
+ const dist = Math.hypot(player.x - beef.x, player.y - beef.y);
72
+ if (dist < player.radius + beef.radius) {
73
+ toppings.beef.splice(i, 1);
74
+ score += 10;
75
+ scoreElement.textContent = score;
76
+ break;
77
+ }
78
+ }
79
+
80
+ // Check lettuce collisions
81
+ for (let i = 0; i < toppings.lettuce.length; i++) {
82
+ const lettuce = toppings.lettuce[i];
83
+ const dist = Math.hypot(player.x - lettuce.x, player.y - lettuce.y);
84
+ if (dist < player.radius + lettuce.radius) {
85
+ toppings.lettuce.splice(i, 1);
86
+ score = Math.max(0, score - 5);
87
+ scoreElement.textContent = score;
88
+ break;
89
+ }
90
+ }
91
+
92
+ // Check cheese collisions
93
+ for (let i = 0; i < toppings.cheese.length; i++) {
94
+ const cheese = toppings.cheese[i];
95
+ const dist = Math.hypot(player.x - cheese.x, player.y - cheese.y);
96
+ if (dist < player.radius + cheese.radius) {
97
+ toppings.cheese.splice(i, 1);
98
+ lives++;
99
+ livesElement.textContent = lives;
100
+ break;
101
+ }
102
+ }
103
+
104
+ // Check win/lose conditions
105
+ if (toppings.beef.length === 0) {
106
+ gameRunning = false;
107
+ alert('You won! Final score: ' + score);
108
+ } else if (lives <= 0) {
109
+ gameRunning = false;
110
+ alert('Game over! Final score: ' + score);
111
+ }
112
+ }
113
+
114
+ function draw() {
115
+ // Clear canvas
116
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
117
+
118
+ // Draw player
119
+ ctx.beginPath();
120
+ ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
121
+ ctx.fillStyle = player.color;
122
+ ctx.fill();
123
+
124
+ // Draw toppings
125
+ drawToppings(toppings.beef);
126
+ drawToppings(toppings.lettuce);
127
+ drawToppings(toppings.cheese);
128
+ }
129
+
130
+ function drawToppings(toppingArray) {
131
+ toppingArray.forEach(topping => {
132
+ ctx.beginPath();
133
+ ctx.arc(topping.x, topping.y, topping.radius, 0, Math.PI * 2);
134
+ ctx.fillStyle = topping.color;
135
+ ctx.fill();
136
+ });
137
+ }
138
+
139
+ function gameLoop() {
140
+ if (!gameRunning) return;
141
+
142
+ draw();
143
+ checkCollision();
144
+ requestAnimationFrame(gameLoop);
145
+ }
146
+
147
+ // Start the game
148
+ init();
index.html CHANGED
@@ -33,10 +33,9 @@
33
  </head>
34
  <body>
35
  <h1>
36
- <span>I'm ready to work,</span><br />
37
- Ask me anything.
38
  </h1>
39
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
40
- <script></script>
41
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CommanderGratton/burrito-runner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
42
  </html>
 
33
  </head>
34
  <body>
35
  <h1>
36
+ <span>Hungry for adventure?</span><br />
37
+ <a href="game.html">Play Burrito Runner!</a>
38
  </h1>
39
+ <script></script>
 
40
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CommanderGratton/burrito-runner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
  </html>
style.css CHANGED
@@ -1,28 +1,34 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
1
 
2
+ body {
3
+ margin: 0;
4
+ padding: 0;
5
+ font-family: 'Arial', sans-serif;
6
+ background-color: #FFF5E6;
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ height: 100vh;
11
  }
12
 
13
+ .game-container {
14
+ position: relative;
15
+ text-align: center;
 
 
16
  }
17
 
18
+ #gameCanvas {
19
+ background-color: #FFE4B5;
20
+ border: 5px solid #8B4513;
21
+ border-radius: 10px;
22
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 
23
  }
24
 
25
+ .game-info {
26
+ position: absolute;
27
+ top: 10px;
28
+ left: 10px;
29
+ background-color: rgba(255, 255, 255, 0.7);
30
+ padding: 10px;
31
+ border-radius: 5px;
32
+ font-weight: bold;
33
+ font-size: 18px;
34
  }