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 @@

Snake

- + \ No newline at end of file diff --git a/snake-game/index.js b/snake-game/index.js index 569e5e6..ee9c860 100644 --- a/snake-game/index.js +++ b/snake-game/index.js @@ -11,6 +11,14 @@ const DIRECTION = { } let MOVE_INTERVAL = 150; +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() { 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(), } @@ -53,6 +62,7 @@ function drawCell(ctx, x, y, color) { function drawScore(snake) { let scoreCanvas; + if (snake.color == snake.color) { scoreCanvas = document.getElementById("score1Board"); } else { @@ -61,18 +71,94 @@ 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= 5 && snake.score < 10){ + ctx.beginPath(); + 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(60, 150); + ctx.lineTo(340, 150); + ctx.lineWidth = 20; + ctx.stroke(); + + ctx.beginPath(); + 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(60, 150); + ctx.lineTo(340, 150); + ctx.lineWidth = 20; + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(60, 250); + ctx.lineTo(340, 250); + ctx.lineWidth = 20; + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(60, 350); + ctx.lineTo(340, 350); + ctx.lineWidth = 20; + ctx.stroke(); + } else if(snake.score >= 20){ + ctx.beginPath(); + ctx.moveTo(110, 60); + ctx.lineTo(110, 340); + ctx.lineWidth = 20; + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(290, 60); + ctx.lineTo(290, 340); + 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++) { @@ -100,43 +186,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) { @@ -178,4 +262,4 @@ document.addEventListener("keydown", function (event) { } }) -move(snake); +move(snake); \ No newline at end of file