diff --git a/Assignment Project SE.pdf b/Assignment Project SE.pdf deleted file mode 100644 index 93e50c1..0000000 Binary files a/Assignment Project SE.pdf and /dev/null differ diff --git a/snake-game/assets/apple.png b/snake-game/assets/apple.png new file mode 100644 index 0000000..071b0b6 Binary files /dev/null and b/snake-game/assets/apple.png differ diff --git a/snake-game/assets/body.png b/snake-game/assets/body.png new file mode 100644 index 0000000..312a52b Binary files /dev/null and b/snake-game/assets/body.png differ diff --git a/snake-game/assets/dummy.txt b/snake-game/assets/dummy.txt deleted file mode 100644 index e69de29..0000000 diff --git a/snake-game/assets/head.png b/snake-game/assets/head.png new file mode 100644 index 0000000..23ce0a5 Binary files /dev/null and b/snake-game/assets/head.png differ diff --git a/snake-game/index.html b/snake-game/index.html index 293690c..062724b 100644 --- a/snake-game/index.html +++ b/snake-game/index.html @@ -1,13 +1,15 @@ - - - - -

Snake

- -

- - \ No newline at end of file + + + +

Snake

+ + + + +

+ + diff --git a/snake-game/index.js b/snake-game/index.js index 1b0cb31..56c3e27 100644 --- a/snake-game/index.js +++ b/snake-game/index.js @@ -1,55 +1,66 @@ const CELL_SIZE = 20; -const CANVAS_SIZE = 400; +const CANVAS_SIZE = 600; const REDRAW_INTERVAL = 50; const WIDTH = CANVAS_SIZE / CELL_SIZE; const HEIGHT = CANVAS_SIZE / CELL_SIZE; const DIRECTION = { - LEFT: 0, - RIGHT: 1, - UP: 2, - DOWN: 3, -} + LEFT: 0, + RIGHT: 1, + UP: 2, + DOWN: 3, +}; 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), - y: Math.floor(Math.random() * HEIGHT), - } + return { + x: Math.floor(Math.random() * WIDTH), + y: Math.floor(Math.random() * HEIGHT), + }; } function initHeadAndBody() { - let head = initPosition(); - let body = [{x: head.x, y: head.y}]; - return { - head: head, - body: body, - } + let head = initPosition(); + let body = [{ x: head.x, y: head.y }]; + return { + head: head, + body: body, + }; } function initDirection() { - return Math.floor(Math.random() * 4); + return Math.floor(Math.random() * 4); } -function initSnake(color){ +function makeSnake(color){ return { color: color, ...initHeadAndBody(), direction: initDirection(), score: 0, + level: 1, } } -let snake = initSnake("green"); +let snakeObj = makeSnake("green"); -let apple1 = { - color: "yellow", - position: initPosition(), -} -let apple2 = { - color: "yellow", - position: initPosition(), -} +let apples = [ + { + color: "red", + position: initPosition(), + }, + { + color: "yellow", + position: initPosition(), + }, +]; let lifes = [ { @@ -60,55 +71,91 @@ let lifes = [ ]; function drawCell(ctx, x, y, color) { - ctx.fillStyle = color; - ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE); + ctx.fillStyle = color; + ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE); } function drawlifes(lifes){ let lifesCanvas; if (lifes.color == lifes.color) { - lifesCanvas = document.getElementById("score3Board"); + lifesCanvas = document.getElementById("lifesBoard"); } let lifesCtx = lifesCanvas.getContext("2d"); lifesCtx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); lifesCtx.font = "25px Arial"; - lifesCtx.fillStyle = lifes.color + lifesCtx.fillStyle = "red" lifesCtx.fillText("Life: \n" + lifes[0].lifes, 10, lifesCanvas.scrollHeight / 2); } function drawScore(snake) { let scoreCanvas; - if (snake.color == snake.color) { - scoreCanvas = document.getElementById("score1Board"); - } else { - scoreCanvas = document.getElementById("score2Board"); - } + + scoreCanvas = document.getElementById("score1Board"); + 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){ + console.log(snakeScore); + let levelCanvas = document.getElementById("levelBoard"); + let ctx = levelCanvas.getContext("2d"); + + if(snakeScore == 0){ + ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); + ctx.fillStyle = snakeObj.color; + ctx.font = "18px Arial"; + ctx.fillText("Level : "+snakeObj.level, 10, levelCanvas.scrollHeight / 2); + }else if((snakeScore % 5) == 0){ + snakeObj.level += 1; + console.log(snakeObj.level); + ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); + ctx.fillStyle = snakeObj.color; + ctx.font = "16px Arial"; + ctx.fillText("Level : "+snakeObj.level, 10, levelCanvas.scrollHeight / 2); + } + + for(var i = 0; i= WIDTH) { - snake.head.x = 0; - } - if (snake.head.y < 0) { - snake.head.y = CANVAS_SIZE / CELL_SIZE - 1; - } - if (snake.head.y >= HEIGHT) { - snake.head.y = 0; - } + if (snake.head.x < 0) { + snake.head.x = CANVAS_SIZE / CELL_SIZE - 1; + } + if (snake.head.x >= WIDTH) { + snake.head.x = 0; + } + if (snake.head.y < 0) { + snake.head.y = CANVAS_SIZE / CELL_SIZE - 1; + } + if (snake.head.y >= HEIGHT) { + snake.head.y = 0; + } } -function eat(snake, apple1, apple2, lifes) { - 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(); - snake.score++; - //this - snake.body.push({x: snake.head.x, y: snake.head.y}); - } +function eat(snake, apples, lifes) { + for (let i = 0; i < apples.length; i++) { + let apple = apples[i]; + 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); + } + } for (let i = 0; i < lifes.length; i++) { let life = lifes[i]; if (snake.head.x == life.position.x && snake.head.y == life.position.y) { @@ -170,50 +214,149 @@ function eat(snake, apple1, apple2, lifes) { function moveLeft(snake) { snake.head.x--; teleport(snake); - eat(snake, apple1, apple2, lifes); + eat(snake, apples, lifes); } function moveRight(snake) { snake.head.x++; teleport(snake); - eat(snake, apple1, apple2, lifes); + eat(snake, apples, lifes); } function moveDown(snake) { snake.head.y++; teleport(snake); - eat(snake, apple1, apple2, lifes); + eat(snake, apples, lifes); } function moveUp(snake) { snake.head.y--; teleport(snake); - eat(snake, apple1, apple2, lifes); + eat(snake, apples, lifes); +} + +function restartSnake(snake){ + return{ + color: snake.color, + ...initHeadAndBody(), + direction: initDirection(), + score: snake.score, + } +} + +function drawLine(ctx, x1, y1, x2, y2) { + ctx.strokeStyle = "brown"; + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(x1 * CELL_SIZE, y1 * CELL_SIZE); + ctx.lineTo(x2 * CELL_SIZE, y2 * CELL_SIZE); + ctx.stroke(); +} + +let walls = []; + +// add level +function levelUp() { + switch (snakeObj.score) { + case 5: + snakeObj.level = 2; + MOVE_INTERVAL = 100; + walls[0] = {x1: 15,y1: 5,x2: 15,y2: 25}; + break; + case 10: + snakeObj.level = 3; + MOVE_INTERVAL = 80; + walls[0] = {x1: 5,y1: 10,x2: 25,y2: 10}; + walls[1] = {x1: 5,y1: 20,x2: 25,y2: 20}; + break; + case 15: + snakeObj.level = 4; + MOVE_INTERVAL = 65; + walls[0] = {x1: 5,y1: 5,x2: 25,y2: 5}; + walls[1] = {x1: 5,y1: 15,x2: 25,y2: 15}; + walls[2] = {x1: 5,y1: 25,x2: 25,y2: 25}; + break; + case 20: + snakeObj.level = 5; + MOVE_INTERVAL = 50; + walls[0] = {x1: 10,y1: 5,x2: 20,y2: 5}; + walls[1] = {x1: 5,y1: 10,x2: 5,y2: 20}; + walls[2] = {x1: 10,y1: 25,x2: 20,y2: 25}; + walls[3] = {x1: 25,y1: 10,x2: 25,y2: 20}; + break; + } +} + +function initWalls(ctx) { + switch (snakeObj.level) { + case 2: + drawLine(ctx, walls[0].x1, walls[0].y1, walls[0].x2, walls[0].y2); + break; + case 3: + for (i = 0; i < snakeObj.level - 1; i++) { + drawLine(ctx, walls[i].x1, walls[i].y1, walls[i].x2, walls[i].y2); + } + break; + case 4: + for (i = 0; i < snakeObj.level - 1; i++) { + drawLine(ctx, walls[i].x1, walls[i].y1, walls[i].x2, walls[i].y2); + } + break; + case 5: + for (i = 0; i < snakeObj.level - 1; i++) { + drawLine(ctx, walls[i].x1, walls[i].y1, walls[i].x2, walls[i].y2); + } + break; + } +} + +function wallCollision(snake) { + let isCollide = false; + + if (snakeObj.level > 1) { + for (let i = 0; i < snakeObj.level - 1; i++) { + if (snake.head.x == walls[i].x1 && snake.head.y >= walls[i].y1 && snake.head.y < walls[i].y2 ) { + isCollide = true; + } else if (snake.head.y == walls[i].y1 && snake.head.x >= walls[i].x1 && snake.head.x < walls[i].x2 ) { + isCollide = true; + } + } + } + return isCollide; } function EatSelf(snake){ let isEatSelf = false; - + for(var i = 0; i < snake.length; i++){ - //console.log(i); for(var o = 0; o < snake.length; o++){ for(var p = 1; p < snake[o].body.length; p++){ - // console.log(snake[i].head.x); - // console.log(snake[o].body[p].x); - - // console.log(snake[i].head.y); - // console.log(snake[o].body[p].y); if (snake[i].head.x == snake[o].body[p].x && snake[i].head.y == snake[o].body[p].y) { isEatSelf = true; } } } } + + if (wallCollision()) { + isCollide = true; + } + if(isEatSelf == true){ - lifes[0].lifes -= 1; - return isEatSelf = false; + if(lifes[0].lifes == 0){ + alert("Game over"); + snakeObj = makeSnake("green"); + window.location.reload(); + // console.log(snakeObj.color); + // lifes[0].lifes = 3; + } + else{ + lifes[0].lifes -= 1; + restartSnake(snakeObj); + } + //return isEatSelf = false; } else if(lifes[0].lifes == 0){ - alert("Game over"); + // ctx.fillText('Game over', 10, lifesCanvas.scrollHeight / 2); } // else if (lifes[0].lifes == 0 && EatSelf(snake, initHeadAndBody)) { @@ -241,28 +384,28 @@ function move(snake) { moveBody(snake); if(!EatSelf([snake])){ setTimeout(function() { - move(snake); + move(snakeObj); }, MOVE_INTERVAL); }else{ - move(snake); + move(snakeObj); } } function moveBody(snake) { - snake.body.unshift({ x: snake.head.x, y: snake.head.y }); - snake.body.pop(); + snake.body.unshift({ x: snake.head.x, y: snake.head.y }); + snake.body.pop(); } document.addEventListener("keydown", function (event) { - if (event.key === "ArrowLeft") { - snake.direction = DIRECTION.LEFT; - } else if (event.key === "ArrowRight") { - snake.direction = DIRECTION.RIGHT; - } else if (event.key === "ArrowUp") { - snake.direction = DIRECTION.UP; - } else if (event.key === "ArrowDown") { - snake.direction = DIRECTION.DOWN; - } -}) + if (event.key === "ArrowLeft") { + snakeObj.direction = DIRECTION.LEFT; + } else if (event.key === "ArrowRight") { + snakeObj.direction = DIRECTION.RIGHT; + } else if (event.key === "ArrowUp") { + snakeObj.direction = DIRECTION.UP; + } else if (event.key === "ArrowDown") { + snakeObj.direction = DIRECTION.DOWN; + } +}); -move(snake); \ No newline at end of file +move(snakeObj); \ No newline at end of file