Hugging Face's logo

Spaces:
Nymbo
/
Snake-Pygame
Running

App Files Community
Nymbo commited on
Commit
cc01012
•
1 Parent(s): 4175a4d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +148 -19
index.html CHANGED
@@ -1,19 +1,148 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Snake Game (WASD Controls)</title>
7
+ <style>
8
+ body {
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ height: 100vh;
13
+ margin: 0;
14
+ background-color: #f0f0f0;
15
+ }
16
+ canvas {
17
+ border: 2px solid #333;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <canvas id="gameCanvas" width="400" height="400"></canvas>
23
+ <script>
24
+ const canvas = document.getElementById('gameCanvas');
25
+ const ctx = canvas.getContext('2d');
26
+
27
+ const gridSize = 20;
28
+ const tileCount = canvas.width / gridSize;
29
+
30
+ let snake = [
31
+ {x: 10, y: 10},
32
+ ];
33
+ let food = {x: 15, y: 15};
34
+ let dx = 0;
35
+ let dy = 0;
36
+ let score = 0;
37
+
38
+ function drawGame() {
39
+ clearCanvas();
40
+ moveSnake();
41
+ drawSnake();
42
+ drawFood();
43
+ checkCollision();
44
+ drawScore();
45
+ }
46
+
47
+ function clearCanvas() {
48
+ ctx.fillStyle = 'white';
49
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
50
+ }
51
+
52
+ function moveSnake() {
53
+ const head = {x: snake[0].x + dx, y: snake[0].y + dy};
54
+ snake.unshift(head);
55
+
56
+ if (head.x === food.x && head.y === food.y) {
57
+ score++;
58
+ generateFood();
59
+ } else {
60
+ snake.pop();
61
+ }
62
+ }
63
+
64
+ function drawSnake() {
65
+ ctx.fillStyle = 'green';
66
+ snake.forEach(segment => {
67
+ ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
68
+ });
69
+ }
70
+
71
+ function drawFood() {
72
+ ctx.fillStyle = 'red';
73
+ ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
74
+ }
75
+
76
+ function generateFood() {
77
+ food.x = Math.floor(Math.random() * tileCount);
78
+ food.y = Math.floor(Math.random() * tileCount);
79
+ }
80
+
81
+ function checkCollision() {
82
+ const head = snake[0];
83
+
84
+ if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
85
+ resetGame();
86
+ }
87
+
88
+ for (let i = 1; i < snake.length; i++) {
89
+ if (head.x === snake[i].x && head.y === snake[i].y) {
90
+ resetGame();
91
+ }
92
+ }
93
+ }
94
+
95
+ function resetGame() {
96
+ snake = [{x: 10, y: 10}];
97
+ food = {x: 15, y: 15};
98
+ dx = 0;
99
+ dy = 0;
100
+ score = 0;
101
+ }
102
+
103
+ function drawScore() {
104
+ ctx.fillStyle = 'black';
105
+ ctx.font = '20px Arial';
106
+ ctx.fillText(`Score: ${score}`, 10, 30);
107
+ }
108
+
109
+ document.addEventListener('keydown', changeDirection);
110
+
111
+ function changeDirection(event) {
112
+ const key = event.key.toLowerCase();
113
+
114
+ const goingUp = dy === -1;
115
+ const goingDown = dy === 1;
116
+ const goingRight = dx === 1;
117
+ const goingLeft = dx === -1;
118
+
119
+ if (key === 'a' && !goingRight) {
120
+ dx = -1;
121
+ dy = 0;
122
+ }
123
+
124
+ if (key === 'w' && !goingDown) {
125
+ dx = 0;
126
+ dy = -1;
127
+ }
128
+
129
+ if (key === 'd' && !goingLeft) {
130
+ dx = 1;
131
+ dy = 0;
132
+ }
133
+
134
+ if (key === 's' && !goingUp) {
135
+ dx = 0;
136
+ dy = 1;
137
+ }
138
+ }
139
+
140
+ function gameLoop() {
141
+ drawGame();
142
+ setTimeout(gameLoop, 100);
143
+ }
144
+
145
+ gameLoop();
146
+ </script>
147
+ </body>
148
+ </html>