// draw begin function drawFillRect(x, y, width, height, color, context) { context.save(); context.fillStyle = color; context.fillRect(x, y, width, height); context.restore(); } class Tile { constructor(x, y, width, height, color, context) { this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.context = context; } draw() { drawFillRect(this.x, this.y, this.width, this.height, this.color, this.context); } } class BodyPart { constructor(x, y, width, height, color, context) { this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.context = context; } draw() { drawFillRect(this.x, this.y, this.width, this.height, this.color, this.context); } } class Snake { constructor(x, y, width, height, headColor, bodyColor, context) { this.x = x; this.y = y; this.width = width; this.height = height; this.headColor = headColor; this.bodyColor = bodyColor; this.context = context; this.body = [ new BodyPart( this.x, this.y, source.options.tileWidth, source.options.tileHeight, this.headColor, this.context ), new BodyPart( this.x - source.options.tileWidth, this.y, source.options.tileWidth, source.options.tileHeight, this.bodyColor, this.context ) ]; this.direction = 'ArrowRight'; } draw() { for(let q = 0; q < this.body.length; q += 1) { this.body[q].draw(); } } changeDirection(direction) { this.direction = direction; } move() { let prev = { x: this.body[0].x, y: this.body[0].y }; //moving head: // this.body[0].y += 20; switch(this.direction) { case 'ArrowLeft': this.body[0].x -= source.options.tileWidth; break; case 'ArrowUp': this.body[0].y -= source.options.tileHeight; break; case 'ArrowRight': this.body[0].x += source.options.tileWidth; break; case 'ArrowDown': this.body[0].y += source.options.tileHeight; break; } //moving body: let next; for(let q = 1; q < this.body.length; q += 1) { next = { x: this.body[q].x, y: this.body[q].y}; this.body[q].x = prev.x; this.body[q].y = prev.y; prev = Object.assign({}, next); } } teleport() { const width = source.options.renderElement.width; const height = source.options.renderElement.height; if(this.body[0].x >= width) { this.body[0].x = 0; } if(this.body[0].x < 0) { this.body[0].x = width - source.options.tileWidth; } if(this.body[0].y >= height) { this.body[0].y = 0; } if(this.body[0].y < 0) { this.body[0].y = height - source.options.tileHeight; } } checkBites() { const head = this.body[0]; for(let q = 1; q < this.body.length; q += 1) { if(head.x === this.body[q].x && head.y === this.body[q].y) { if(source.options.debug) console.log('bite'); source.toggleStop(); displayScore.textContent = `Your score: ${score}`; about.innerHTML = (`

${source.options.gameName}

${source.options.author}

${source.options.year}

`); gameOver.style.display = 'block'; } } } eat() { for(let q = 0; q < apples.length; q += 1) { if(apples[q].x === this.body[0].x && apples[q].y === this.body[0].y) { score += 1; scoreElement.textContent = `Score: ${score}`; source.options.rerenderTime -= 10; if(source.options.debug) console.log('yum'); this.grow(); apples.splice(q, 1); addApple(); body.style.backgroundColor = randomColor(); } } } addBodyPart(where) { const last = { x: this.body[this.body.length - 1].x, y: this.body[this.body.length - 1].y } switch(where) { case 'right': last.x += source.options.tileWidth; break; case 'down': last.y += source.options.tileHeight; break; case 'left': last.x -= source.options.tileWidth; break; case 'up': last.y -= source.options.tileHeight; break; } this.body.push( new BodyPart( last.x, last.y, source.options.tileWidth, source.options.tileHeight, this.bodyColor, this.context ) ); } grow() { if(this.direction === 'ArrowLeft') { this.addBodyPart('right'); } else if(this.direction === 'ArrowUp') { this.addBodyPart('down'); } else if(this.direction === 'ArrowRight') { this.addBodyPart('left'); } else if(this.direction === 'ArrowDown') { this.addBodyPart('up'); } } } class Apple { constructor(x, y, width, height, color, context) { this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.context = context; } draw() { drawFillRect(this.x, this.y, this.width, this.height, this.color, this.context); } } function addApple() { const randomX = random(0, options.gridWidth - 1) * source.options.tileWidth; const randomY = random(0, options.gridHeight - 1) * source.options.tileHeight; let isPlace = true; for(let q = 0; q < snake.body.length; q += 1) { if(snake.body[q].x === randomX && snake.body[q].y === randomY) { isPlace = false; break; } } if(!isPlace) { addApple(); } if(isPlace) { apples.push( new Apple( randomX, randomY, source.options.tileWidth, source.options.tileHeight, source.options.appleColor, source.options.context ) ); } } // const testTile = new Tile(100, 100, 50, 50, '#154C06', source.options.context); function clearCanvas(canvas, context) { context.clearRect(0, 0, canvas.width, canvas.height); } function drawGrid() { for(let y = 0; y < source.grid.length; y += 1) { for(let x = 0; x < source.grid[y].length; x += 1) { source.grid[y][x].draw(); } } } function draw() { clearCanvas(this.options.renderElement, this.options.context); drawGrid(); for(let q = apples.length - 1; q >= 0; q -= 1) { apples[q].draw(); } // testTile.draw(); snake.checkBites(); snake.eat(); snake.teleport(); snake.move(); snake.draw(); if(this.options.debug) console.log('frame'); } // draw end // source begin let renderElement = null; let context = null; const tileWidth = 20; //temporary initial value const tileHeight = 20; //temporary initial value const options = { renderElement, context, rerenderTime: 500, testCounter: 0, testStopCounter: 200, debug: false, isStopped: false, draw, keys: { ArrowLeft: false, ArrowUp: false, ArrowRight: false, ArrowDown: false }, gridWidth: 20, gridHeight: 20, tileWidth, tileHeight, tileColor: '#656565', headColor: '#D32715', bodyColor: '#F38D09', appleColor: '#5AB015', gameName: 'AnotherSnake? Game', author: 'K137', year: 2019 }; function random(min, max) { return Math.floor(Math.random() * (1 + max - min) + min); } function randomColor() { const colorNumbers = []; for(let q = 0; q < 6; q += 1) { colorNumbers[q] = random(0, 15); } const colorValues = colorNumbers.map(num => num.toString(16)); return '#' + colorValues.join(''); } function wait(milliseconds) { return new Promise((resolve, reject) => { let timeout = setTimeout(() => { resolve(); clearTimeout(timeout); }, milliseconds); }); } class Source { constructor(options) { this.options = options; this.draw = this.options.draw; this.grid = []; this.render = this.render.bind(this); this.state = this.state.bind(this); this.start = this.start.bind(this); this.toggleStop = this.toggleStop.bind(this); this.createGrid = this.createGrid.bind(this); this.setCanvas = this.setCanvas.bind(this); } createGrid() { for(let y = 0; y < this.options.gridHeight; y += 1) { this.grid[y] = []; for(let x = 0; x < this.options.gridWidth; x += 1) { this.grid[y][x] = new Tile( x * this.options.tileWidth, y * this.options.tileHeight, this.options.tileWidth, this.options.tileHeight, this.options.tileColor, this.options.context ); } } } setCanvas() { const innerWidth = window.innerWidth; const innerHeight = window.innerHeight; const tileWidth = (innerWidth > innerHeight) ? Math.ceil((innerHeight - innerHeight / 3) / this.options.gridWidth) : Math.ceil((innerWidth - innerWidth / 3) / this.options.gridHeight); const tileHeight = tileWidth; this.options.tileWidth = tileWidth; this.options.tileHeight = tileHeight; const canvasWidth = this.options.gridWidth * this.options.tileWidth; const canvasHeight = this.options.gridHeight * this.options.tileHeight; this.options.renderElement.width = canvasWidth; this.options.renderElement.height = canvasHeight; } state() { this.draw(); this.options.testCounter = this.options.testCounter + 1; //return new Promise((resolve, reject) => resolve()); } render() { if(this.options.debug) console.log(this.options.testCounter); if(this.options.testCounter >= this.options.testStopCounter) { this.options.testCounter = 0; if(this.options.debug) { this.toggleStop(); } } if(this.options.isStopped) { if(this.options.debug) { if(this.options.debug) console.log(`stopped = ${this.options.isStopped}`); } } else {//} if(!this.options.isStopped) { wait(this.options.rerenderTime) .then(() => this.state()) .then(() => this.render()); } } start() { this.render(); } toggleStop() { const isStoppedBefore = this.options.isStopped; this.options.isStopped = !this.options.isStopped; if(isStoppedBefore) { this.start(); } } } function setKeys(event, source) { if(event) { event.preventDefault(); const keys = source.options.keys; const key = event.key ? event.key : null; const type = event.type; if(type === 'click') { setKey(type); } function checkPrevious(direction) { if((snake.direction === 'ArrowRight' && direction === 'ArrowLeft') || (snake.direction === 'ArrowDown' && direction === 'ArrowUp') || (snake.direction === 'ArrowLeft' && direction === 'ArrowRight') || (snake.direction === 'ArrowUp' && direction === 'ArrowDown')) { return true; } return false; } function setKey(type, keys, key) { if(type === 'keydown') { keys[key] = true; snake.changeDirection(key); // wait(options.rerenderTime / 4).then(() => snake.changeDirection(key)); if(source.options.debug) console.log(key + ' = true'); } else if(type === 'keyup') { keys[key] = false; if(source.options.debug) console.log(key + ' = false'); } else if(type === 'click') { const id = event.target.id; // console.log(event.target); if(id === 'controls' || id === 'center') { return; } const capitalizedId = id[0].toUpperCase() + id.slice(1); const direction = 'Arrow' + capitalizedId; if(checkPrevious(direction)) { return; } snake.changeDirection(direction); } } switch(key) { case 'ArrowLeft': { if(snake.direction === 'ArrowRight') { break; } setKey(type, keys, key); break; } case 'ArrowUp': { if(snake.direction === 'ArrowDown') { break; } setKey(type, keys, key); break; } case 'ArrowRight': { if(snake.direction === 'ArrowLeft') { break; } setKey(type, keys, key); break; } case 'ArrowDown': { if(snake.direction === 'ArrowUp') { break; } setKey(type, keys, key); break; } } } } function handleKeydown(event, source) { setKeys(event, source); } function handleKeyup(event, source) { setKeys(event, source); } function handleClick(event) { setKeys(event, source); } // source end // index begin let source, testTile, snakeCx, snakeCy, snake, body, apples, score, scoreElement, displayScore, gameOver, about; function createControls() { body = document.getElementsByTagName('body')[0]; scoreElement = document.getElementById('score'); displayScore = document.getElementById('display-score'); gameOver = document.getElementById('game-over'); about = document.getElementById('about'); const controlsElement = document.getElementById('controls'); const left = document.getElementById('left'); const center = document.getElementById('center'); const up = document.getElementById('up'); const down = document.getElementById('down'); const right = document.getElementById('right'); const innerWidth = window.innerWidth; const innerHeight = window.innerHeight; const px = 'px'; const calculatedHeight = (innerHeight - source.options.renderElement.height - 10) + px; controlsElement.style.height = left.style.height = center.style.height = right.style.height = calculatedHeight; const widthDividedByThree = Math.floor(innerWidth / 3) - 27 + px; left.style.width = center.style.width = right.style.width = widthDividedByThree; up.style.width = down.style.width = widthDividedByThree; up.style.height = down.style.height = Math.floor(parseInt(calculatedHeight) / 2 - 10) + px; controlsElement.addEventListener('click', handleClick, false); } function init() { renderElement = options.renderElement = document.getElementById('snake'); context = options.context = renderElement.getContext('2d'); score = 0; source = new Source(options); source.setCanvas(); source.createGrid(); testTile = new Tile(0, 0, 20, 20, '#154C06', source.options.context); snakeCy = Math.ceil(source.grid.length / 2) * source.options.tileHeight; snakeCx = Math.ceil(source.grid[0].length / 2) * source.options.tileWidth; // x, y, width, height, headColor, bodyColor, context snake = new Snake( snakeCx, snakeCy, source.options.tileWidth, source.options.tileWidth, source.options.headColor, source.options.bodyColor, source.options.context ); apples = []; addApple(); window.addEventListener('keydown', () => handleKeydown(event, source), false); window.addEventListener('keyup', () => handleKeyup(event, source), false); } // window.addEventListener('load', () => source.start(), false); window.addEventListener('load', () => { init(); createControls(); const playButton = document.getElementById('play-button'); const menu = document.getElementById('menu'); const form = document.getElementById('select-size'); function setSize() { for(let q = 0; q < form.elements.length; q += 1) { let element = form.elements[q]; if(element.tagName !== 'INPUT') { continue; } if(element.checked) { source.options.gridWidth = source.options.gridHeight = parseInt(element.value); } } } for(let q = 0; q < form.elements.length; q += 1) { let element = form.elements[q]; if(element.tagName !== 'INPUT') { continue; } element.addEventListener('change', setSize, false); } playButton.addEventListener('click', () => { menu.style.display = 'none'; init(); createControls(); source.start(); }, false); }, false); // source.start(); // index end