window.onload = function() { alert("Heal your body by destroying red Covid-19 cells\n You have 3 lives and remember, once you heal a red cell, it becomes green so you have to avoid it!") document.body.innerHTML = '

' let canvas = document.getElementById("canvas") let ctx = canvas.getContext("2d") let scale = 20 canvas.width = 320 canvas.height = 320 // Apple placing logic function randomCoordinates(min, max, step) { return min + (step * Math.floor(Math.random()*(max-min)/step) ); } /*---------------------------------------------------*/ // Handling touches || mouse touches var xDown = null, yDown = null var snakeDirection = "" // Handle touches function handleTouchStart(evt) { xDown = evt.clientX || evt.touches[0].clientX yDown = evt.clientY || evt.touches[0].clientY } function handleTouchMove(evt) { if ( ! xDown || ! yDown ) { return; } var xUp = evt.clientX || evt.touches[0].clientX var yUp = evt.clientY || evt.touches[0].clientY var xDiff = xDown - xUp var yDiff = yDown - yUp if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { if ( xDiff > 0 && snakeDirection != 'Right' ) { // Left swipe snakeDirection = 'Left' } else if (xDiff < 0 && snakeDirection != 'Left') { // Right swipe snakeDirection = 'Right' } } else { if ( yDiff > 0 && snakeDirection != 'Down' ) { // Up swipe snakeDirection = 'Up' } else if (yDiff < 0 && snakeDirection != 'Up') { // Down swipe snakeDirection = 'Down' } } // Reset values xDown = null; yDown = null } // End of handleTouchMove canvas.addEventListener("touchstart", handleTouchStart, false) canvas.addEventListener("touchmove", handleTouchMove, false) canvas.addEventListener("mousedown", handleTouchStart, false) canvas.addEventListener("mousemove", handleTouchMove, false) /*---------------------------------------------------*/ // Apple class Apple { constructor() { this.x = randomCoordinates(20, canvas.width, 20) this.y = randomCoordinates(20, canvas.height, 20) this.width = scale this.height = scale } draw() { ctx.fillStyle = "red" ctx.fillRect(this.x, this.y, this.width, this.height) } } let apple = new Apple() // Snake class Snake { constructor() { this.coord = [{x: 0, y: 0}] this.width = scale this.height = scale this.isCollidable = false this.HP = 3 } draw() { ctx.fillStyle = "lime" for(let i = 0; i < this.coord.length; i++) { ctx.fillRect(this.coord[i].x, this.coord[i].y, this.width, this.height) } ctx.fillStyle = "gold" ctx.fillRect(this.coord[0].x, this.coord[0].y, this.width, this.height) // Boundary if (this.coord[0].x >= canvas.width) this.coord[0].x = 0 else if (this.coord[0].x < 0) this.coord[0].x = canvas.width else if (this.coord[0].y < 0) this.coord[0].y = canvas.height else if (this.coord[0].y >= canvas.height) this.coord[0].y = 0 } move() { if (snakeDirection == "Left") { this.coord[0].x -= scale } else if (snakeDirection == "Right") { this.coord[0].x += scale } else if (snakeDirection == "Up") { this.coord[0].y -= scale } else if (snakeDirection == "Down") { this.coord[0].y += scale } } checkHP() { if (this.HP <= 0) { console.log("It's over! But nevermind, look how successfully you healed your body :)") this.coord[0].x = this.coord[0].y = 0 //for(let i = 1; i < this.coord.length; i++) { //this.coord.splice(i, 1) //} clearInterval(GAMELOOP) this.HP = 3 } } /* reset() { this.coord[0].x = this.coord[0].y = 0 for(let j = 1; j < this.coord.length; j++) { this.coord.splice(j, 1) } } */ /*collision() { // Red apple box collision if (this.coord[0].x === apple.x && this.coord[0].y === apple.y) { //this.coord.push({x:apple.x, y: apple.y}) //apple.x = randomCoordinates(0, canvas.width, 20) // apple.y = randomCoordinates(0, canvas.height, 20) setTimeout(function() { // Push it with timeout this.coord.push({x:apple.x, y: apple.y}) apple.x = randomCoordinates(0, canvas.width, 20) apple.y = randomCoordinates(0, canvas.height, 20) }, 1000/5 + 100) } // Green snake box collision for(let i = 1; i < this.coord.length; i++) { if ( this.coord[0].x === this.coord[i].x && this.coord[0].y === this.coord[i].y ) { //this.coord.splice(i, 1) clearInterval(GAMELOOP) //console.log(this.isCollidable) } } } // Collision*/ } // Snake let snake = new Snake() var GAMELOOP /* // Restart function function restart() { //snake.coords = [] snake.coords[0].x = 0 snake.coords[0].y = 0 setInterval(GAMELOOP, 1000/5) } // New restart button var btn = document.createElement("BUTTON"); btn.innerHTML = "Restart"; document.body.appendChild(btn); document.getElementsByTagName("BUTTON")[0].addEventListener("click", restart) */ function gameLoop() { //requestAnimationFrame(gameLoop) ctx.clearRect(0,0,canvas.width, canvas.height) snake.move() snake.draw() snake.checkHP() //snake.collision() apple.draw() function collision() { // Red apple box collision if (snake.coord[0].x === apple.x && snake.coord[0].y === apple.y) { // Pushed into setTimeout - that's why it's not a class method, this didn't work //this.coord.push({x:apple.x, y: apple.y}) //apple.x = randomCoordinates(0, canvas.width, 20) //apple.y = randomCoordinates(0, canvas.height, 20) setTimeout(function() { // Push it with timeout to prevent instant collision check snake.coord.push({x:apple.x, y: apple.y}) apple.x = randomCoordinates(0, canvas.width, 20) apple.y = randomCoordinates(0, canvas.height, 20) }, 1000/5 + 50) } // Green snake box collision for(let i = 1; i < snake.coord.length; i++) { if ( snake.coord[0].x === snake.coord[i].x && snake.coord[0].y === snake.coord[i].y ) { //snake.coord.splice(i, 1) //clearInterval(GAMELOOP) snakeDirection = "" snake.coord[0].x = snake.coord[0].y = 0 //console.log(snake.coord[i].x) // Decrease HP snake.HP-- console.log(snake.HP + " HPs left :o") // Stop hero player } } } // End of collision collision() } GAMELOOP = setInterval(gameLoop, 1000/5) };