Hugging Face's logo

Spaces:
Nymbo
/
Snake-Pygame
Running

App Files Community
Nymbo commited on
Commit
1494a8c
•
1 Parent(s): 6fe4129

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +45 -6
index.html CHANGED
@@ -3,7 +3,7 @@
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;
@@ -19,7 +19,7 @@
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');
@@ -28,18 +28,32 @@
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
  }
@@ -73,9 +87,26 @@
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() {
@@ -83,21 +114,29 @@
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() {
 
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, Larger Area, Obstacles)</title>
7
  <style>
8
  body {
9
  display: flex;
 
19
  </style>
20
  </head>
21
  <body>
22
+ <canvas id="gameCanvas" width="800" height="800"></canvas>
23
  <script>
24
  const canvas = document.getElementById('gameCanvas');
25
  const ctx = canvas.getContext('2d');
 
28
  const tileCount = canvas.width / gridSize;
29
 
30
  let snake = [
31
+ {x: 20, y: 20},
32
  ];
33
  let food = {x: 15, y: 15};
34
  let dx = 0;
35
  let dy = 0;
36
  let score = 0;
37
+ let obstacles = [];
38
+
39
+ function generateObstacles() {
40
+ obstacles = [];
41
+ for (let i = 0; i < 20; i++) {
42
+ obstacles.push({
43
+ x: Math.floor(Math.random() * tileCount),
44
+ y: Math.floor(Math.random() * tileCount)
45
+ });
46
+ }
47
+ }
48
+
49
+ generateObstacles();
50
 
51
  function drawGame() {
52
  clearCanvas();
53
  moveSnake();
54
  drawSnake();
55
  drawFood();
56
+ drawObstacles();
57
  checkCollision();
58
  drawScore();
59
  }
 
87
  ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
88
  }
89
 
90
+ function drawObstacles() {
91
+ ctx.fillStyle = 'gray';
92
+ obstacles.forEach(obstacle => {
93
+ ctx.fillRect(obstacle.x * gridSize, obstacle.y * gridSize, gridSize - 2, gridSize - 2);
94
+ });
95
+ }
96
+
97
  function generateFood() {
98
+ do {
99
+ food.x = Math.floor(Math.random() * tileCount);
100
+ food.y = Math.floor(Math.random() * tileCount);
101
+ } while (isCollision(food) || isOnSnake(food));
102
+ }
103
+
104
+ function isCollision(pos) {
105
+ return obstacles.some(obstacle => obstacle.x === pos.x && obstacle.y === pos.y);
106
+ }
107
+
108
+ function isOnSnake(pos) {
109
+ return snake.some(segment => segment.x === pos.x && segment.y === pos.y);
110
  }
111
 
112
  function checkCollision() {
 
114
 
115
  if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
116
  resetGame();
117
+ return;
118
  }
119
 
120
  for (let i = 1; i < snake.length; i++) {
121
  if (head.x === snake[i].x && head.y === snake[i].y) {
122
  resetGame();
123
+ return;
124
  }
125
  }
126
+
127
+ if (isCollision(head)) {
128
+ resetGame();
129
+ }
130
  }
131
 
132
  function resetGame() {
133
+ snake = [{x: 20, y: 20}];
134
  food = {x: 15, y: 15};
135
  dx = 0;
136
  dy = 0;
137
  score = 0;
138
+ generateObstacles();
139
+ generateFood();
140
  }
141
 
142
  function drawScore() {