Hugging Face's logo

Spaces:
dannyboy84
/
wormate-io-clone
Running

App Files Community
dannyboy84 commited on
Commit
cbd2f7a
·
verified ·
1 Parent(s): 02d94d9

not working

Browse files
Files changed (3) hide show
  1. index.html +5 -5
  2. script.js +29 -23
  3. style.css +8 -4
index.html CHANGED
@@ -6,15 +6,15 @@
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Wormate.io Clone</title>
8
  <link rel="stylesheet" href="style.css">
9
- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
10
  <script src="components/wormate-nav.js"></script>
11
- <style>
 
12
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
13
  </style>
14
  </head>
15
  <body>
16
  <wormate-nav></wormate-nav>
17
-
18
  <div id="game-container">
19
  <canvas id="gameCanvas"></canvas>
20
  <div id="game-ui">
@@ -24,7 +24,7 @@
24
  </div>
25
  </div>
26
 
27
- <script src="wormate.js"></script>
28
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
29
  </body>
30
  </html>
 
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Wormate.io Clone</title>
8
  <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
10
  <script src="components/wormate-nav.js"></script>
11
+ <script src="components/game-footer.js"></script>
12
+ <style>
13
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
14
  </style>
15
  </head>
16
  <body>
17
  <wormate-nav></wormate-nav>
 
18
  <div id="game-container">
19
  <canvas id="gameCanvas"></canvas>
20
  <div id="game-ui">
 
24
  </div>
25
  </div>
26
 
27
+ <game-footer></game-footer>
28
+ <script src="script.js"></script>
29
  </body>
30
  </html>
script.js CHANGED
@@ -1,39 +1,41 @@
 
1
  document.addEventListener('DOMContentLoaded', () => {
 
 
 
2
  const canvas = document.getElementById('gameCanvas');
3
  const ctx = canvas.getContext('2d');
4
 
5
  // Set canvas size
6
- canvas.width = canvas.parentElement.clientWidth;
7
- canvas.height = canvas.parentElement.clientHeight;
 
 
 
 
8
 
9
  // Game variables
10
  const gridSize = 20;
11
- const tileCount = canvas.width / gridSize;
12
  let speed = 7;
13
  let score = 0;
14
-
15
  // Worm
16
  let worm = [];
17
- worm[0] = {x: Math.floor(tileCount/2) * gridSize, y: Math.floor(tileCount/2) * gridSize};
18
- // Initial food
 
 
 
 
19
  let food = {
20
  x: Math.floor(Math.random() * tileCount) * gridSize,
21
  y: Math.floor(Math.random() * tileCount) * gridSize,
22
  color: getRandomColor()
23
  };
24
 
25
- // Add 5 more foods at start
26
- for (let i = 0; i < 5; i++) {
27
- setTimeout(() => {
28
- food = {
29
- x: Math.floor(Math.random() * tileCount) * gridSize,
30
- y: Math.floor(Math.random() * tileCount) * gridSize,
31
- color: getRandomColor()
32
- };
33
- }, i * 1000);
34
- }
35
- // Direction
36
- let xVelocity = 0;
37
  let yVelocity = 0;
38
 
39
  // Game loop
@@ -157,11 +159,15 @@ document.addEventListener('DOMContentLoaded', () => {
157
  ];
158
  return colors[Math.floor(Math.random() * colors.length)];
159
  }
160
-
161
- // Start game
162
- let gameInterval = setInterval(gameLoop, 1000/speed);
163
-
164
- // Responsive canvas
 
 
 
 
165
  window.addEventListener('resize', () => {
166
  canvas.width = canvas.parentElement.clientWidth;
167
  canvas.height = canvas.parentElement.clientHeight;
 
1
+
2
  document.addEventListener('DOMContentLoaded', () => {
3
+ // Initialize Feather Icons
4
+ feather.replace();
5
+
6
  const canvas = document.getElementById('gameCanvas');
7
  const ctx = canvas.getContext('2d');
8
 
9
  // Set canvas size
10
+ function resizeCanvas() {
11
+ canvas.width = window.innerWidth;
12
+ canvas.height = window.innerHeight;
13
+ }
14
+ window.addEventListener('resize', resizeCanvas);
15
+ resizeCanvas();
16
 
17
  // Game variables
18
  const gridSize = 20;
19
+ const tileCount = Math.floor(canvas.width / gridSize);
20
  let speed = 7;
21
  let score = 0;
22
+ let gameRunning = false;
23
  // Worm
24
  let worm = [];
25
+ worm[0] = {
26
+ x: Math.floor(tileCount/2) * gridSize,
27
+ y: Math.floor(tileCount/2) * gridSize
28
+ };
29
+
30
+ // Food
31
  let food = {
32
  x: Math.floor(Math.random() * tileCount) * gridSize,
33
  y: Math.floor(Math.random() * tileCount) * gridSize,
34
  color: getRandomColor()
35
  };
36
 
37
+ // Direction
38
+ let xVelocity = 0;
 
 
 
 
 
 
 
 
 
 
39
  let yVelocity = 0;
40
 
41
  // Game loop
 
159
  ];
160
  return colors[Math.floor(Math.random() * colors.length)];
161
  }
162
+ // Start game when play button clicked
163
+ document.getElementById('play-btn').addEventListener('click', () => {
164
+ if (!gameRunning) {
165
+ gameRunning = true;
166
+ document.getElementById('play-btn').style.display = 'none';
167
+ setInterval(gameLoop, 1000/speed);
168
+ }
169
+ });
170
+ // Responsive canvas
171
  window.addEventListener('resize', () => {
172
  canvas.width = canvas.parentElement.clientWidth;
173
  canvas.height = canvas.parentElement.clientHeight;
style.css CHANGED
@@ -1,18 +1,22 @@
 
1
  body {
2
  margin: 0;
3
  padding: 0;
4
- overflow: hidden;
5
  font-family: 'Press Start 2P', cursive;
6
  background-color: #0f0f1a;
7
  color: white;
 
 
 
8
  }
9
 
10
  #game-container {
 
11
  position: relative;
12
- width: 100vw;
13
- height: 100vh;
14
  }
15
-
16
  #gameCanvas {
17
  display: block;
18
  width: 100%;
 
1
+
2
  body {
3
  margin: 0;
4
  padding: 0;
 
5
  font-family: 'Press Start 2P', cursive;
6
  background-color: #0f0f1a;
7
  color: white;
8
+ min-height: 100vh;
9
+ display: flex;
10
+ flex-direction: column;
11
  }
12
 
13
  #game-container {
14
+ flex: 1;
15
  position: relative;
16
+ width: 100%;
17
+ overflow: hidden;
18
  }
19
+ =======
20
  #gameCanvas {
21
  display: block;
22
  width: 100%;