From 90cdc6f6f1a7ad4d1319313ee88253abed7dc949 Mon Sep 17 00:00:00 2001
From: syaddadSmiley <syaddad.snfa@gmail.com>
Date: Fri, 11 Mar 2022 10:06:22 +0700
Subject: [PATCH 1/4] Feat: Snake has level and each level will increase the
 speed

---
 snake-game/index.html |  2 +-
 snake-game/index.js   | 64 +++++++++++++++++++++++++++++++------------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/snake-game/index.html b/snake-game/index.html
index a275c75..8e6bc5e 100644
--- a/snake-game/index.html
+++ b/snake-game/index.html
@@ -6,6 +6,6 @@
         <h1>Snake</h1>
         <canvas id="snakeBoard" width="400" height="400" style="border:1px solid #000000;"></canvas>
         <canvas id="score1Board" width="100" height="100" style="border:1px solid #000000;"></canvas>
-        <canvas id="score2Board" width="100" height="100" style="border:1px solid #000000;"></canvas>
+        <canvas id="levelBoard" width="100" height="100" style="border:1px solid #000000;"></canvas>
     </body>
 </html>
\ No newline at end of file
diff --git a/snake-game/index.js b/snake-game/index.js
index 569e5e6..3fa56bd 100644
--- a/snake-game/index.js
+++ b/snake-game/index.js
@@ -11,6 +11,14 @@ const DIRECTION = {
 }
 let MOVE_INTERVAL = 150;
 
+const LEVELS = [
+    {level: 1, kecepatan: 150, },
+    {level: 2, kecepatan: 120, },
+    {level: 3, kecepatan: 90, },
+    {level: 4, kecepatan: 60, },
+    {level: 5, kecepatan: 40, },
+];
+
 function initPosition() {
     return {
         x: Math.floor(Math.random() * WIDTH),
@@ -36,13 +44,14 @@ let snake = {
     ...initHeadAndBody(),
     direction: initDirection(),
     score: 0,
+    level: 1
 }
 let apple1 = {
     color: "red",
     position: initPosition(),
 }
 let apple2 = {
-    color: "red",
+    color: "yellow",
     position: initPosition(),
 }
 
@@ -61,12 +70,35 @@ function drawScore(snake) {
     let scoreCtx = scoreCanvas.getContext("2d");
 
     scoreCtx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
-    scoreCtx.font = "30px Arial";
+    scoreCtx.font = "20px Arial";
     scoreCtx.fillStyle = snake.color
-    scoreCtx.fillText(snake.score, 10, scoreCanvas.scrollHeight / 2);
+    scoreCtx.fillText("Score : "+snake.score, 10, scoreCanvas.scrollHeight / 2);
+}
+
+function drawLevel(snakeScore){
+    let levelCanvas = document.getElementById("levelBoard");
+    let ctx = levelCanvas.getContext("2d");
+    if(snakeScore == 0){
+        ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+        ctx.fillStyle = snake.color;
+        ctx.font = "18px Arial";
+        ctx.fillText("Level : "+snake.level, 10, levelCanvas.scrollHeight / 2);
+    }else if((snakeScore % 5) === 0){
+        snake.level += 1;
+        ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+        ctx.fillStyle = snake.color;
+        ctx.font = "16px Arial";
+        ctx.fillText("Level : "+snake.level, 10, levelCanvas.scrollHeight / 2);
+    }
+    for(var i = 0; i<LEVELS.length; i++){
+        if(snake.level == LEVELS[i].level){
+            MOVE_INTERVAL = LEVELS[i].kecepatan;
+        }
+    }
 }
 
 function draw() {
+    drawLevel(snake.score)
     setInterval(function() {
         let snakeCanvas = document.getElementById("snakeBoard");
         let ctx = snakeCanvas.getContext("2d");
@@ -100,43 +132,41 @@ function teleport(snake) {
     }
 }
 
-function eat(snake, apple1, apple2) {
-    if (snake.head.x == apple1.position.x && snake.head.y == apple1.position.y) {
-        apple1.position = initPosition();
-        snake.score++;
-        //this
-        snake.body.push({x: snake.head.x, y: snake.head.y});
-    }
-    if (snake.head.x == apple2.position.x && snake.head.y == apple2.position.y) {
-        apple2.position = initPosition();
+function eat(snake, apple) {
+    if (snake.head.x == apple.position.x && snake.head.y == apple.position.y) {
+        apple.position = initPosition();
         snake.score++;
-        //this
         snake.body.push({x: snake.head.x, y: snake.head.y});
+        drawLevel(snake.score);
     }
 }
 
 function moveLeft(snake) {
     snake.head.x--;
     teleport(snake);
-    eat(snake, apple1, apple2);
+    eat(snake, apple1);
+    eat(snake, apple2)
 }
 
 function moveRight(snake) {
     snake.head.x++;
     teleport(snake);
-    eat(snake, apple1, apple2);
+    eat(snake, apple1);
+    eat(snake, apple2)
 }
 
 function moveDown(snake) {
     snake.head.y++;
     teleport(snake);
-    eat(snake, apple1, apple2);
+    eat(snake, apple1);
+    eat(snake, apple2)
 }
 
 function moveUp(snake) {
     snake.head.y--;
     teleport(snake);
-    eat(snake, apple1, apple2);
+    eat(snake, apple1);
+    eat(snake, apple2)
 }
 
 function move(snake) {

From 65acad6efcf06c5000bbc171b1671546566d1ec8 Mon Sep 17 00:00:00 2001
From: syaddadSmiley <syaddad.snfa@gmail.com>
Date: Fri, 11 Mar 2022 14:29:17 +0700
Subject: [PATCH 2/4] fix: change some variables

---
 snake-game/index.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/snake-game/index.js b/snake-game/index.js
index 3fa56bd..3094754 100644
--- a/snake-game/index.js
+++ b/snake-game/index.js
@@ -11,12 +11,12 @@ const DIRECTION = {
 }
 let MOVE_INTERVAL = 150;
 
-const LEVELS = [
-    {level: 1, kecepatan: 150, },
-    {level: 2, kecepatan: 120, },
-    {level: 3, kecepatan: 90, },
-    {level: 4, kecepatan: 60, },
-    {level: 5, kecepatan: 40, },
+const List_Level = [
+    {level: 1, kecepatan: MOVE_INTERVAL, },
+    {level: 2, kecepatan: MOVE_INTERVAL-30, },
+    {level: 3, kecepatan: MOVE_INTERVAL-60, },
+    {level: 4, kecepatan: MOVE_INTERVAL-90, },
+    {level: 5, kecepatan: MOVE_INTERVAL-110, },
 ];
 
 function initPosition() {
@@ -62,6 +62,7 @@ function drawCell(ctx, x, y, color) {
 
 function drawScore(snake) {
     let scoreCanvas;
+    
     if (snake.color == snake.color) {
         scoreCanvas = document.getElementById("score1Board");
     } else {
@@ -78,6 +79,7 @@ function drawScore(snake) {
 function drawLevel(snakeScore){
     let levelCanvas = document.getElementById("levelBoard");
     let ctx = levelCanvas.getContext("2d");
+
     if(snakeScore == 0){
         ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
         ctx.fillStyle = snake.color;
@@ -90,9 +92,10 @@ function drawLevel(snakeScore){
         ctx.font = "16px Arial";
         ctx.fillText("Level : "+snake.level, 10, levelCanvas.scrollHeight / 2);
     }
-    for(var i = 0; i<LEVELS.length; i++){
-        if(snake.level == LEVELS[i].level){
-            MOVE_INTERVAL = LEVELS[i].kecepatan;
+    
+    for(var i = 0; i<List_Level.length; i++){
+        if(snake.level == List_Level[i].level){
+            MOVE_INTERVAL = List_Level[i].kecepatan;
         }
     }
 }

From 6f53763ac53edf85e4412179243f229ff883d0e8 Mon Sep 17 00:00:00 2001
From: Beddok <abidfajar50@gmail.com>
Date: Sun, 13 Mar 2022 10:47:55 +0700
Subject: [PATCH 3/4] feat: menambahkan feature wall

---
 snake-game/index.js | 59 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/snake-game/index.js b/snake-game/index.js
index 3094754..5a088f6 100644
--- a/snake-game/index.js
+++ b/snake-game/index.js
@@ -73,7 +73,7 @@ function drawScore(snake) {
     scoreCtx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
     scoreCtx.font = "20px Arial";
     scoreCtx.fillStyle = snake.color
-    scoreCtx.fillText("Score : "+snake.score, 10, scoreCanvas.scrollHeight / 2);
+    scoreCtx.fillText("Score: "+snake.score, 10, scoreCanvas.scrollHeight / 2);
 }
 
 function drawLevel(snakeScore){
@@ -84,13 +84,13 @@ function drawLevel(snakeScore){
         ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
         ctx.fillStyle = snake.color;
         ctx.font = "18px Arial";
-        ctx.fillText("Level : "+snake.level, 10, levelCanvas.scrollHeight / 2);
+        ctx.fillText("Level: "+snake.level, 10, levelCanvas.scrollHeight / 2);
     }else if((snakeScore % 5) === 0){
         snake.level += 1;
         ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
         ctx.fillStyle = snake.color;
         ctx.font = "16px Arial";
-        ctx.fillText("Level : "+snake.level, 10, levelCanvas.scrollHeight / 2);
+        ctx.fillText("Level: "+snake.level, 10, levelCanvas.scrollHeight / 2);
     }
     
     for(var i = 0; i<List_Level.length; i++){
@@ -108,6 +108,57 @@ function draw() {
 
         ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
         
+        //wall
+        if(snake.score >= 5 && snake.score < 10){
+			ctx.beginPath();
+			ctx.moveTo(50, 150);
+			ctx.lineTo(350, 150);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+		} else if(snake.score >= 10 && snake.score < 15){
+			ctx.beginPath();
+			ctx.moveTo(50, 150);
+			ctx.lineTo(350, 150);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+			
+			ctx.beginPath();
+			ctx.moveTo(50, 250);
+			ctx.lineTo(350, 250);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+		} else if(snake.score >= 15 && snake.score < 20){
+			ctx.beginPath();
+			ctx.moveTo(50, 150);
+			ctx.lineTo(350, 150);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+			
+			ctx.beginPath();
+			ctx.moveTo(50, 250);
+			ctx.lineTo(350, 250);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+			
+			ctx.beginPath();
+			ctx.moveTo(50, 350);
+			ctx.lineTo(350, 350);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+		} else if(snake.score >= 20){
+			ctx.beginPath();
+			ctx.moveTo(100, 50);
+			ctx.lineTo(100, 350);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+
+			ctx.beginPath();
+			ctx.moveTo(300, 50);
+			ctx.lineTo(300, 350);
+			ctx.lineWidth = 20;
+			ctx.stroke();
+		}
+
         drawCell(ctx, snake.head.x, snake.head.y, snake.color);
         //loop
         for (let i = 1; i < snake.body.length; i++) {
@@ -211,4 +262,4 @@ document.addEventListener("keydown", function (event) {
     }
 })
 
-move(snake);
+move(snake);
\ No newline at end of file

From fad11008ecf7d70b133414d0d38520aa2f248e6b Mon Sep 17 00:00:00 2001
From: Beddok <abidfajar50@gmail.com>
Date: Sun, 13 Mar 2022 11:40:14 +0700
Subject: [PATCH 4/4] chore: memperbaiki wall pixel

---
 snake-game/index.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/snake-game/index.js b/snake-game/index.js
index 5a088f6..ee9c860 100644
--- a/snake-game/index.js
+++ b/snake-game/index.js
@@ -111,50 +111,50 @@ function draw() {
         //wall
         if(snake.score >= 5 && snake.score < 10){
 			ctx.beginPath();
-			ctx.moveTo(50, 150);
-			ctx.lineTo(350, 150);
+			ctx.moveTo(60, 150);
+			ctx.lineTo(340, 150);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 		} else if(snake.score >= 10 && snake.score < 15){
 			ctx.beginPath();
-			ctx.moveTo(50, 150);
-			ctx.lineTo(350, 150);
+			ctx.moveTo(60, 150);
+			ctx.lineTo(340, 150);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 			
 			ctx.beginPath();
-			ctx.moveTo(50, 250);
-			ctx.lineTo(350, 250);
+			ctx.moveTo(60, 250);
+			ctx.lineTo(340, 250);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 		} else if(snake.score >= 15 && snake.score < 20){
 			ctx.beginPath();
-			ctx.moveTo(50, 150);
-			ctx.lineTo(350, 150);
+			ctx.moveTo(60, 150);
+			ctx.lineTo(340, 150);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 			
 			ctx.beginPath();
-			ctx.moveTo(50, 250);
-			ctx.lineTo(350, 250);
+			ctx.moveTo(60, 250);
+			ctx.lineTo(340, 250);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 			
 			ctx.beginPath();
-			ctx.moveTo(50, 350);
-			ctx.lineTo(350, 350);
+			ctx.moveTo(60, 350);
+			ctx.lineTo(340, 350);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 		} else if(snake.score >= 20){
 			ctx.beginPath();
-			ctx.moveTo(100, 50);
-			ctx.lineTo(100, 350);
+			ctx.moveTo(110, 60);
+			ctx.lineTo(110, 340);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 
 			ctx.beginPath();
-			ctx.moveTo(300, 50);
-			ctx.lineTo(300, 350);
+			ctx.moveTo(290, 60);
+			ctx.lineTo(290, 340);
 			ctx.lineWidth = 20;
 			ctx.stroke();
 		}