Spaces:
Running
Running
| <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> |