diff --git a/html/tasks/chapter_10/snake/script.js b/html/tasks/chapter_10/snake/script.js index 3b1203a..aaf8794 100755 --- a/html/tasks/chapter_10/snake/script.js +++ b/html/tasks/chapter_10/snake/script.js @@ -1,8 +1,8 @@ // @ts-check /* Initialize variables */ -const pixelSize = 20; -const pixelAmount = 40; +const pixelSize = 20; //Cannot be odd +const pixelAmount = 20; /* Register HTML DOM elements by variables */ const canvas = document.getElementById('game'); @@ -13,52 +13,46 @@ const startButton = document.getElementById('start'); document.addEventListener('keydown', updateDirection, false); startButton.addEventListener('click', gameLoop, false); -/* Initialize HTML with functions */ +/* Initialize HTML */ canvas.style.display = 'block'; -canvas.style.width = canvas.style.height = `${pixelSize * pixelAmount}px`; +game.canvas.width = game.canvas.height = pixelSize * pixelAmount; canvas.style.backgroundColor = '#ffffff'; -/* Snake class */ -class snake { - constructor() { - this.x = 0; - this.y = 0; - this.speed = 5; - this.direction = 'left'; - this.tail = [ - [3, 0], - [2, 0], - [1, 0], - [0, 0], - ]; - this.color = '#00ff00'; - } +/* Snake object */ +const snake = { + speed: 5, //in FPS + direction: 'right', + color: '#00ff00', + tail: [ + [3, 0], + [2, 0], + [1, 0], + [0, 0], + ], + /* Draw the snake by the tail array */ draw() { game.fillStyle = this.color; + for (let tailPoint = 0; tailPoint < this.tail.length; tailPoint++) { /* Correct tailpoint x and y to actual size */ - const pixelPosition = this.tail[tailPoint].map( - point => point * pixelSize - ); - game.fillRect( - pixelPosition[0], - pixelPosition[1], - pixelPosition[0] + pixelSize, - pixelPosition[1] + pixelSize - ); - } - } + const realPosition = this.tail[tailPoint].map(point => point * pixelSize); + game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize); + } + }, + + /* Generate the next tail array */ updateTail() { - this.tail.pop(); + const realPosition = this.tail.pop().map(point => point * pixelSize); + game.clearRect(realPosition[0], realPosition[1], pixelSize, pixelSize); switch (this.direction) { case 'left': - this.tail.unshift([this.tail[0][0] + 1, this.tail[0][1]]); + this.tail.unshift([this.tail[0][0] - 1, this.tail[0][1]]); break; case 'right': - this.tail.unshift([this.tail[0][0] - 1, this.tail[0][1]]); + this.tail.unshift([this.tail[0][0] + 1, this.tail[0][1]]); break; case 'up': this.tail.unshift([this.tail[0][0], this.tail[0][1] - 1]); @@ -67,57 +61,77 @@ class snake { this.tail.unshift([this.tail[0][0], this.tail[0][1] + 1]); break; } - } -} + }, +}; -/* Apple class */ -class apple { - constructor() { - this.x = 0; - this.y = 0; - } -} +/* Apple object */ +const apple = { + position: [20, 20], + color: 'red', -const Snake = new snake(); + /* Generate new coordinates */ + generate() { + this.position.map(() => Math.floor(Math.random() * pixelAmount)); + }, + + /* Draw the apple */ + draw() { + const realPosition = this.position.map(point => point * pixelSize); + + game.fillStyle = this.color; + game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize); + }, +}; /* Wrapper function for gameloop */ function gameLoop() { - /* Slow down loop */ + /* Slow down loop by snake speed*/ setTimeout(() => { window.requestAnimationFrame(gameLoop); gameUpdate(); - }, 1000 / Snake.speed); + }, 1000 / snake.speed); } /* Function that is being run each tick */ function gameUpdate() { /* Draw snake */ - Snake.draw(); - Snake.updateTail(); + snake.draw(); + snake.updateTail(); + + if (snake.tail[0] === apple.position) { + } } /* Update direction for snake */ function updateDirection(evt) { const key = evt.code; - console.log(key); + console.debug(`Pressed %c${key}`, 'color: red'); switch (key) { case 'ArrowLeft': evt.preventDefault(); - Snake.direction = 'left'; + if (snake.direction !== 'right') { + snake.direction = 'left'; + } break; case 'ArrowRight': evt.preventDefault(); - Snake.direction = 'right'; + if (snake.direction !== 'left') { + snake.direction = 'right'; + } break; case 'ArrowUp': evt.preventDefault(); - Snake.direction = 'up'; + if (snake.direction !== 'down') { + snake.direction = 'up'; + } break; case 'ArrowDown': evt.preventDefault(); - Snake.direction = 'down'; + if (snake.direction !== 'up') { + snake.direction = 'down'; + } break; } }