Spaces:

HeyKaito
/

TEST_DEPLOY

Running

App Files Files Community

HeyKaito commited on Jan 24

Commit

73e6041

verified ·

1 Parent(s): e6fe5eb

Update index.html

Browse files

Files changed (1) hide show

index.html +179 -18

index.html CHANGED Viewed

@@ -1,19 +1,180 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
 <html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nokia Snake Game</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column; /* Stack elements vertically */
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #1a1a1a;
+        }
+        h1 {
+            color: #ffffff;
+            margin-bottom: 10px;
+        }
+        canvas {
+            border: 10px solid #879372;
+            border-radius: 10px;
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+</head>
+<body>
+    <h1>Team 9 - P5.JS - Spaces Test</h1> <!-- Added heading -->
+    <script>
+        let snake;
+        let food;
+        let gridSize = 10;
+        let gridWidth, gridHeight;
+        let score = 0;
+        function setup() {
+          createCanvas(240, 240);
+          gridWidth = floor(width / gridSize);
+          gridHeight = floor(height / gridSize);
+          frameRate(8);
+          snake = new Snake();
+          foodLocation();
+        }
+        function draw() {
+          background('#9CA777');
+          drawGrid();
+          snake.update();
+          snake.show();
+          if (snake.eat(food)) {
+            foodLocation();
+            score++;
+          }
+          fill('#4A5F35');
+          rect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
+          if (snake.checkCollision()) {
+            gameOver();
+          }
+          // Display score
+          fill('#4A5F35');
+          textSize(16);
+          textAlign(LEFT, TOP);
+          text('Score: ' + score, 5, 5);
+        }
+        function drawGrid() {
+          stroke('#AEBAA1');
+          strokeWeight(1);
+          for (let i = 0; i < width; i += gridSize) {
+            line(i, 0, i, height);
+          }
+          for (let j = 0; j < height; j += gridSize) {
+            line(0, j, width, j);
+          }
+        }
+        function foodLocation() {
+          food = createVector(floor(random(gridWidth)), floor(random(gridHeight)));
+          // Make sure food doesn't appear on snake
+          while (snake.body.some(part => part.x === food.x && part.y === food.y)) {
+            food = createVector(floor(random(gridWidth)), floor(random(gridHeight)));
+          }
+        }
+        function keyPressed() {
+          if (keyCode === LEFT_ARROW && snake.xdir === 0) {
+            snake.setDir(-1, 0);
+          } else if (keyCode === RIGHT_ARROW && snake.xdir === 0) {
+            snake.setDir(1, 0);
+          } else if (keyCode === DOWN_ARROW && snake.ydir === 0) {
+            snake.setDir(0, 1);
+          } else if (keyCode === UP_ARROW && snake.ydir === 0) {
+            snake.setDir(0, -1);
+          }
+        }
+        function gameOver() {
+          noLoop();
+          background('#9CA777');
+          fill('#4A5F35');
+          textSize(24);
+          textAlign(CENTER, CENTER);
+          text('GAME OVER', width / 2, height / 2 - 20);
+          textSize(16);
+          text('Score: ' + score, width / 2, height / 2 + 20);
+          text('Press F5 to restart', width / 2, height / 2 + 50);
+        }
+        class Snake {
+          constructor() {
+            this.body = [];
+            this.body[0] = createVector(floor(gridWidth / 2), floor(gridHeight / 2));
+            this.xdir = 0;
+            this.ydir = 0;
+            this.growAmount = 0; // Control growth
+          }
+          setDir(x, y) {
+            this.xdir = x;
+            this.ydir = y;
+          }
+          update() {
+            let head = this.body[this.body.length - 1].copy();
+            head.x += this.xdir;
+            head.y += this.ydir;
+            // Wrap around edges
+            head.x = (head.x + gridWidth) % gridWidth;
+            head.y = (head.y + gridHeight) % gridHeight;
+            this.body.push(head);
+            if (this.growAmount > 0) {
+              this.growAmount--;
+            } else {
+              this.body.shift();
+            }
+          }
+          grow() {
+            this.growAmount++; // Increase growth amount
+          }
+          eat(pos) {
+            let x = this.body[this.body.length - 1].x;
+            let y = this.body[this.body.length - 1].y;
+            if (x === pos.x && y === pos.y) {
+              this.grow();
+              return true;
+            }
+            return false;
+          }
+          checkCollision() {
+            let head = this.body[this.body.length - 1];
+            for (let i = 0; i < this.body.length - 1; i++) {
+              let part = this.body[i];
+              if (part.x === head.x && part.y === head.y) {
+                return true;
+              }
+            }
+            return false;
+          }
+          show() {
+            for (let i = 0; i < this.body.length; i++) {
+              fill('#4A5F35');
+              rect(this.body[i].x * gridSize, this.body[i].y * gridSize, gridSize, gridSize);
+            }
+          }
+        }
+    </script>
+</body>
+</html>