Add files via upload

ssitvit · Jul 8, 2023 · ff7c4dc · ff7c4dc
1 parent a485f53
commit ff7c4dc
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
diff --git a/src/Games/snake-game/README.md b/src/Games/snake-game/README.md
@@ -0,0 +1,7 @@
+# [Snake](https://youtu.be/baBq5GAL0_U)
+- Coding Tutorial: https://youtu.be/baBq5GAL0_U
+- Demo: https://imkennyyip.github.io/snake/
+
+In this tutorial, you will learn how to create Snake game from scratch using HTML5 canvas and javascript.
+
+![snake-preview](https://user-images.githubusercontent.com/78777681/163033854-f52af2c6-38f9-419c-a4cc-03b5a7b72703.png)
diff --git a/src/Games/snake-game/index.html b/src/Games/snake-game/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport", content="width=device-width, initial-scale=1.0">
+        <title>Snake</title>
+        <link rel="stylesheet" href="snake.css">
+        <script src="snake.js"></script>
+    </head>
+
+    <body>
+        <h1>Snake</h1>
+        <canvas id="board"></canvas>
+    </body>
+</html>
diff --git a/src/Games/snake-game/snake.css b/src/Games/snake-game/snake.css
@@ -0,0 +1,4 @@
+body {
+    font-family: 'Courier New', Courier, monospace;
+    text-align: center;
+}
diff --git a/src/Games/snake-game/snake.js b/src/Games/snake-game/snake.js
@@ -0,0 +1,105 @@
+
+//board
+var blockSize = 25;
+var rows = 20;
+var cols = 20;
+var board;
+var context; 
+
+//snake head
+var snakeX = blockSize * 5;
+var snakeY = blockSize * 5;
+
+var velocityX = 0;
+var velocityY = 0;
+
+var snakeBody = [];
+
+//food
+var foodX;
+var foodY;
+
+var gameOver = false;
+
+window.onload = function() {
+    board = document.getElementById("board");
+    board.height = rows * blockSize;
+    board.width = cols * blockSize;
+    context = board.getContext("2d"); //used for drawing on the board
+
+    placeFood();
+    document.addEventListener("keyup", changeDirection);
+    // update();
+    setInterval(update, 1000/10); //100 milliseconds
+}
+
+function update() {
+    if (gameOver) {
+        return;
+    }
+
+    context.fillStyle="black";
+    context.fillRect(0, 0, board.width, board.height);
+
+    context.fillStyle="red";
+    context.fillRect(foodX, foodY, blockSize, blockSize);
+
+    if (snakeX == foodX && snakeY == foodY) {
+        snakeBody.push([foodX, foodY]);
+        placeFood();
+    }
+
+    for (let i = snakeBody.length-1; i > 0; i--) {
+        snakeBody[i] = snakeBody[i-1];
+    }
+    if (snakeBody.length) {
+        snakeBody[0] = [snakeX, snakeY];
+    }
+
+    context.fillStyle="lime";
+    snakeX += velocityX * blockSize;
+    snakeY += velocityY * blockSize;
+    context.fillRect(snakeX, snakeY, blockSize, blockSize);
+    for (let i = 0; i < snakeBody.length; i++) {
+        context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
+    }
+
+    //game over conditions
+    if (snakeX < 0 || snakeX > cols*blockSize || snakeY < 0 || snakeY > rows*blockSize) {
+        gameOver = true;
+        alert("Game Over");
+    }
+
+    for (let i = 0; i < snakeBody.length; i++) {
+        if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) {
+            gameOver = true;
+            alert("Game Over");
+        }
+    }
+}
+
+function changeDirection(e) {
+    if (e.code == "ArrowUp" && velocityY != 1) {
+        velocityX = 0;
+        velocityY = -1;
+    }
+    else if (e.code == "ArrowDown" && velocityY != -1) {
+        velocityX = 0;
+        velocityY = 1;
+    }
+    else if (e.code == "ArrowLeft" && velocityX != 1) {
+        velocityX = -1;
+        velocityY = 0;
+    }
+    else if (e.code == "ArrowRight" && velocityX != -1) {
+        velocityX = 1;
+        velocityY = 0;
+    }
+}
+
+
+function placeFood() {
+    //(0-1) * cols -> (0-19.9999) -> (0-19) * 25
+    foodX = Math.floor(Math.random() * cols) * blockSize;
+    foodY = Math.floor(Math.random() * rows) * blockSize;
+}