From a644a2846003a2fcdc96c1f7c6cb294047997102 Mon Sep 17 00:00:00 2001
From: Evelin Nunes <153015343+evelinlnunes@users.noreply.github.com>
Date: Mon, 5 Feb 2024 23:17:57 +0100
Subject: [PATCH] initial commit
---
index.html | 15 ++++++++--
index.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
styles.css | 36 +++++++++++++++++++++--
3 files changed, 130 insertions(+), 5 deletions(-)
create mode 100644 index.js
diff --git a/index.html b/index.html
index 0f16b349..27210022 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,22 @@
-
+
- HTML + CSS
+
+
+
+
+ Snake Game
- This is a simple HTML + CSS template!
+ Snake Game!
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..803e05ea
--- /dev/null
+++ b/index.js
@@ -0,0 +1,84 @@
+//declarar variaveis
+let canvas = document.getElementById("snake");
+let context = canvas.getContext("2d");
+let box = 32;
+let snake = [{ x: 8 * box, y: 8 * box }];
+let direction = "right";
+let food = {
+ x: Math.floor(Math.random() * 15 + 1) * box,
+ y: Math.floor(Math.random() * 15 + 1) * box
+};
+//criar background
+function createBG() {
+ context.fillStyle = "pink";
+ context.fillRect(0, 0, 16 * box, 16 * box);
+}
+//criar cobrinha
+function createSnake() {
+ for (let i in snake) {
+ context.fillStyle = "green";
+ context.fillRect(snake[i].x, snake[i].y, box, box);
+ }
+}
+//criar comida
+function createFood() {
+ context.fillStyle = "red";
+ context.fillRect(food.x, food.y, box, box);
+}
+//update
+function update(event) {
+ if (event.keyCode == 37 && direction != "right") {
+ direction = "left";
+ } else if (event.keyCode == 38 && direction != "down") {
+ direction = "up";
+ } else if (event.keyCode == 39 && direction != "left") {
+ direction = "right";
+ } else if (event.keyCode == 40 && direction != "up") {
+ direction = "down";
+ }
+}
+//começar o jogo
+function startGame() {
+ if (snake[0].x > 15 * box && direction == "right") snake[0].x = 0;
+ if (snake[0].x < 0 && direction == "left") snake[0].x = 15 * box;
+ if (snake[0].y > 15 * box && direction == "down") snake[0].y = 0;
+ if (snake[0].y < 0 && direction == "up") snake[0].y = 15 * box;
+ //colisão
+ for (let i = 1; i < snake.length; i++) {
+ if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
+ alert("Game Over!");
+ clearInterval(game); //interrompe o jogo
+ }
+ }
+ //chamada das funções
+ createBG();
+ createSnake();
+ createFood();
+ //inicialização coordenadas da cabeça
+ let snakeX = snake[0].x;
+ let snakeY = snake[0].y;
+
+ if (direction == "right") snakeX += box;
+ if (direction == "left") snakeX -= box;
+ if (direction == "up") snakeY -= box;
+ if (direction == "down") snakeY += box;
+ //colisão com a comida
+ if (snakeX !== food.x || snakeY !== food.y) {
+ snake.pop();
+ } else {
+ food = {
+ x: Math.floor(Math.random() * 15 + 1) * box,
+ y: Math.floor(Math.random() * 15 + 1) * box
+ };
+ }
+
+ let newHead = {
+ x: snakeX,
+ y: snakeY
+ };
+
+ snake.unshift(newHead);
+}
+document.addEventListener("keydown", update);
+
+let game = setInterval(startGame, 100); //atualização do canvas
diff --git a/styles.css b/styles.css
index b2d3dc07..fff2abaa 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,35 @@
-h1 {
- text-decoration: underline;
+@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+body {
+ height: 95vh;
+ width: 95vw;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #9d40af;
+ color: #466e58;
+ font-family: "Press Start 2P", cursive;
+}
+
+canvas {
+ margin-bottom: 50px;
+}
+
+footer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+ font-size: 15px;
+ margin-top: 25px;
+ margin-bottom: 15px;
+ font-family: "Roboto", sans-serif;
+}
+
+footer a {
+ text-decoration: none;
+ color: #fff;
}