// Created by Karak10 window.addEventListener('load', (e)=>{ let canvas = document.querySelector('#canvvaas26'); let c = canvas.getContext('2d'); // put focus on canvas canvas.focus() // sizes the canvas canvas.width = window.innerWidth; canvas.height = window.innerHeight; addEventListener('resize', (e)=>{ canvas.width = window.innerWidth canvas.height = window.innerHeight; }); // sets the original background of the canvas before animation begins c.save(); c.fillStyle = 'black'; c.fillRect(0, 0, canvas.width, canvas.height); c.restore(); // creates an imageData variable let imageData = c.getImageData(0, 0, canvas.width, canvas.height); // my particles let bullets = new Array(); let enemies = new Array(); let bloodParticles = new Array(); let explosionParticles = new Array(); let player; // health, score and highscore variables let score = 0; let highscore = 0; let health = 100; // function that checks wether element is scrolled into view or not function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); return isVisible; } // event that let us know whether the window is viewed or not let pageIsViewed = 'unknown'; document.body.onmouseover = (e)=>{ pageIsViewed = true; } window.addEventListener("visibilitychange", (e)=>{ if(pageIsViewed == true | pageIsViewed == 'unknown'){ pageIsViewed = false; } else if(pageIsViewed == false){ pageIsViewed = true; } }); // functions that are used to detect collisions // constructor used to create hitboxes at the edges of the canvas let wall = class{ constructor(x, y, velocity){ this.x = x; this.y = y; this.r = 0; this.velocity = { x: 0, y: 0 } this.mass = 999; } } // gets the distance between two particles let getDistance = function(thisEnemy, otherEnemy){ let Vx = thisEnemy.x - otherEnemy.x; let Vy = thisEnemy.y - otherEnemy.y; let distance = Math.hypot(Vx, Vy) - thisEnemy.r - otherEnemy.r; return distance; } // rotates the axis so that the final velocities can be calculated let rotate = function(velocity, angle){ let rotatedVelocities = { x: velocity.x * Math.cos(angle) - velocity.y * Math.sin(angle), y: velocity.x * Math.sin(angle) + velocity.y * Math.cos(angle) } return rotatedVelocities; } // calculates and sets the final velocities after the collision let changeVelocity = function(thisParticle, otherParticle){ let [x1, x2] = [thisParticle.x, otherParticle.x]; let [y1, y2] = [thisParticle.y, otherParticle.y]; let [v1, v2] = [thisParticle.velocity, otherParticle.velocity]; let [m1, m2] = [thisParticle.mass, otherParticle.mass]; let xVelocityDiff = v1.x - v2.x; let yVelocityDiff = v1.y - v2.y; let xDist = x2 - x1; let yDist = y2 - y1; if(xVelocityDiff * xDist + yVelocityDiff * yDist >= 0){ let angle = -Math.atan2(y2 - y1, x2 - x1); let rotatedV1 = rotate(v1, angle); let rotatedV2 = rotate(v2, angle); let rotatedV1final = { x: rotatedV1.x * (m1 - m2) / (m1 + m2) + rotatedV2.x * 2 * m2 / (m1 + m2), y: rotatedV1.y } let rotatedV2final = { x: rotatedV2.x * (m1 - m2) / (m1 + m2) + rotatedV1.x * 2 * m2 / (m1 + m2), y: rotatedV2.y } let finalV1 = rotate(rotatedV1final, -angle); let finalV2 = rotate(rotatedV2final, -angle); thisParticle.velocity = finalV1; otherParticle.velocity = finalV2; } } // code for the player let playerMaker = class{ constructor(x, y, r, cl, velocity, mass){ this.x = x; this.y = y; this.r = r; this.cl = cl; this.velocity = velocity; this.mass = mass; this.collapsed = -1; this.cooldown = -1; this.dmg_duration = 0; } draw(){ c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.stroke(); } update(enemies){ // if key.up is true makes player move up and increases mass if(keys.up){ this.mass = 2.2; this.velocity.y = -1.5; } // else if key.down is true increases mass but makes player move down else if(keys.down){ this.mass = 2.2; this.velocity.y = 1.5; } // else if this.collapsed is less than zero it sets mass to 1 and velocity.y to zero else if(this.collapsed < 0){ this.mass = 1; this.velocity.y = 0; } // if key.right is true makes player move to right and increases mass if(keys.right){ this.mass = 2.2; this.velocity.x = 1.5; } // else if keys.left is true increases mass but makes player move to left else if(keys.left){ this.mass = 2.2; this.velocity.x = -1.5; } // else if this.collapsed is less than zero it sets mass to 1 and velocity.x to zero else if(this.collapsed < 0){ this.velocity.x = 0; this.mass = 1; } // decreases collapsed property this.collapsed -= 1; // loops through all the enemies enemies.forEach((enemy)=>{ // checks if distance is less than zero if(getDistance(this, enemy) < 0){ // calculates their final velocities after collision and sets them changeVelocity(this, enemy); // checks if cooldown is less than zero if(this.cooldown < 0){ // sets was_hit property of enemy to enemy's cooldown enemy.was_hit = enemy.cooldown; // sets player's cooldown property to enemy's cooldown this.cooldown = enemy.cooldown; // increases dmg_duration property of player this.dmg_duration += enemy.damage_duration; // sets an interval let interval = setInterval(()=>{ //decreases health by enemy's damage in each iteration health -= enemy.dmg; // prevents health from becoming less than zero if(health < 0){ health = 0; } // checks if the dmg_duration is less or equal to 0 if(this.dmg_duration <= 0){ // stops the interval clearInterval(interval); } // decreases dmg_duration by 1 after each iteration of the iinterval this.dmg_duration -= 1; }, 200); } } }); // decreases cooldown by 1 every time player updates this.cooldown -= 1; // checks for overlapping enemies.forEach((enemy)=>{ if(getDistance(this, enemy) < -3){ changeVelocity(this, enemy); this.collapsed = 2; } }); // set hitboxes at the edges of the canvas let rightWall = new wall(canvas.width, this.y) let leftWall = new wall(0, this.y); let topWall = new wall(this.x, 0); let bottomWall = new wall(this.x, canvas.height); // detects collisions with the edges of the canvas if(getDistance(this, rightWall) < 0){ changeVelocity(this, rightWall); } if(getDistance(this, topWall) < 0){ changeVelocity(this, topWall); } if(getDistance(this, leftWall) < 0){ changeVelocity(this, leftWall); } if(getDistance(this, bottomWall) < 0){ changeVelocity(this, bottomWall); } // updates x and y positions this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); } } let Cwidth = canvas.width; let Cheight = canvas.height; canvas.addEventListener('resize', (e)=>{ Cwidth = canvas.width; Cheight = canvas.height; }); // creates the player player = new playerMaker(Cwidth/2, Cheight/2, 15, 'orange', {x: 0, y: 0}, 0.9); // object that lets us know what keys are being pressed let keys = { up: false, right: false, down: false, left: false } // event listener that updates keys object when a key is pressed canvas.addEventListener('keydown', (e)=>{ e.preventDefault() if(e.keyCode == 37 || e.keyCode == 65){ keys.left = true; } if(e.keyCode == 39 || e.keyCode == 68){ keys.right = true; } if(e.keyCode == 38 || e.keyCode == 87){ keys.up = true; } if(e.keyCode == 40 || e.keyCode == 83){ keys.down = true; } }); // event listener that updates keys object when a key is released canvas.addEventListener('keyup', (e)=>{ e.preventDefault() if(e.keyCode == 37 || e.keyCode == 65){ keys.left = false; } if(e.keyCode == 39 || e.keyCode == 68){ keys.right = false; } if(e.keyCode == 38 || e.keyCode == 87){ keys.up = false; } if(e.keyCode == 40 || e.keyCode == 83){ keys.down = false; } }); // code for the bullets // bullets constructor let bullet = class{ constructor(x, y, r, cl, velocity, mass){ this.x = x; this.y = y; this.r = r; this.cl = cl; this.velocity = velocity; this.mass = mass; this.opacity = 1; } draw(){ c.save(); c.globalAlpha = this.opacity; c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.stroke(); c.restore(); } update(){ // updates the x and y position this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); } } // bullets generator // variable that determines wether mouse is down or not let mousedown = false; // an object to save the mouse's position let mouse = { x: 0, y: 0 } // updates the mouse position as it moves around the canvas canvas.addEventListener('mousemove', (e)=>{ mouse.x = e.offsetX; mouse.y = e.offsetY; }); // event that triggers when mouse button is pushed down canvas.addEventListener('mousedown', (e)=>{ // prevents default behaviour e.preventDefault(); // sets mousedown to true mousedown = true; // sets an interval let interval = setInterval(()=>{ let r = 3; let cl = 'grey' let x = player.x; let y = player.y; let vx = mouse.x - x; let vy = mouse.y - y; // gets angle and sets velocities let angle = Math.atan2(vy, vx); let velocity = { x: Math.cos(angle) * 4, y: Math.sin(angle) * 4 } let mass = 3; // creates bullets if gave hasn't ended if(health > 0){ bullets.push(new bullet(x, y, r, cl, velocity, mass)); } }, 200); // checks if mousedown is false to clear the interval above let interval2 = setInterval(()=>{ if(mousedown == false){ clearInterval(interval); clearInterval(interval2); } }, 1); }); // event that triggers when mouse button is released window.addEventListener('mouseup', (e)=>{ // sets mousedown to false mousedown = false; }); // blood constructor let blood = class{ constructor(x, y, r, cl, velocity){ this.x = x; this.y = y; this.r = r; this.cl = cl; this.velocity = velocity; this.friction = 0.93; this.life_time = 1; } draw(){ c.save(); c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.restore(); } update(){ this.velocity.x *= this.friction; this.velocity.y *= this.friction; this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); this.life_time -= 0.15; } } // explosion constructor let explosion = class{ constructor(x, y, r, cl, velocity){ this.x = x; this.y = y; this.r = r; this.cl = cl; this.velocity = velocity; this.friction = 0.99; this.gravity = 0.01; this.alpha = 1; } draw(){ c.save(); c.globalAlpha = this.alpha; c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r, 0, 2 * Math.PI); c.fill(); c.stroke(); c.restore(); } update(){ this.velocity.x *= this.friction; this.velocity.y *= this.friction; this.velocity.y += this.gravity; this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); this.alpha -= 0.01; } } // code for enemies // enemies constructor let enemyConstructor = class{ constructor(x, y, r, cl, velocity, speed, mass, cooldown, damage_dur, damage, health){ this.x = x; this.y = y; this.r = r; this.cl = cl; this.velocity = velocity; this.speed = speed; this.mass = mass; this.original_mass = mass; this.player_collapsed = -1; this.enemy_collapsed = -1; this.has_entered_canvas = false; this.stroke = 'black'; this.maxHealth = health; this.health = health; this.damage_duration = damage_dur; this.dmg_duration = 0; this.dmg = damage; this.cooldown = cooldown; this.was_hit = -1; } draw(){ c.save(); c.strokeStyle = this.stroke; c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.stroke(); c.restore(); } drawHealthBar(){ c.save(); c.fillStyle = 'red'; // draws red layer of health c.fillRect(this.x - this.r, this.y - this.r - 7, (this.r * 2), 3.5); c.fillStyle = 'green'; // draws green layer of health, the width is multiplied by (this.health / this.maxHealth) // so that it decreases as this.health gets smaller and smaller till it reaches zero c.fillRect(this.x - this.r, this.y - this.r - 7, (this.r * 2) * (this.health / this.maxHealth), 3.5); c.lineWidth = 2; c.strokeStyle = 'black'; // draws a border around the healthbar c.strokeRect(this.x - this.r, this.y - this.r - 7, (this.r * 2), 3.5); c.restore(); } update(otherEnemies, bullets){ // gets angle between enemy and player let vx = player.x - this.x; let vy = player.y - this.y; let angle = Math.atan2(vy, vx); // if no collisions have happened the enemy moves towards the player if(this.player_collapsed < 0 && this.enemy_collapsed < 0){ // sets stroke to black this.stroke = 'black'; // sets velocities to follow the player this.velocity.x = Math.cos(angle) * this.speed; this.velocity.y = Math.sin(angle) * this.speed; } // if the enemy collapsed with the player the velocities are being decreased else if(this.player_collapsed > 0){ this.velocity.x *= 0.5; this.velocity.y *= 0.5; } // deacreases enemy_collapsed and player_collapsed properties this.enemy_collapsed -= 1; this.player_collapsed -= 1; // decreases cooldown this.was_hit -= 1; // sets mass to original mass this.mass = this.original_mass; // loops through all the enemies otherEnemies.forEach((enemy)=>{ // prevents this from running the code on it self if(enemy != this){ // checks if collision if(getDistance(this, enemy) < 0){ // calculates and sets final velocities changeVelocity(this, enemy); // checks if enemy_collapsed is less than 0.5, that's because // when enemy collapses with a bullet I set enemy_collapsed to // 4, so I don't want it to be set back to 0.5, and I didn't want // to create a different variable for bullet collisions since it isn't needed if(this.enemy_collapsed < 0.5){ // sets enemy_collapsed to 0.5 this.enemy_collapsed = 0.5; } } } }); // checks if distance with the player is less than 0 if(getDistance(this, player) < 0){ // calculates and sets the final velocities after the collision changeVelocity(this, player); // sets player_collapsed property to 1 this.player_collapsed = 1; // sets cooldown property of player to this.cooldown value player.cooldown = this.cooldown; // checks if was_hit is less than 0 if(this.was_hit < 0){ // sets was_hit property to cooldown value this.was_hit = this.cooldown; // increases dmg_duration by damage_duration // the reason I made two properties for damage duration // is because I wanted one to be kept static at all times this.dmg_duration += this.damage_duration; // sets an interval let interval = setInterval(()=>{ // decreases health by this.dmg in every iteration health -= this.dmg; // prevents health from becoming less than zero if(health < 0){ health = 0; } // checks if dmg_duration is less or equal to zero if(this.dmg_duration <= 0){ // stops the interval clearInterval(interval); } // decreases the dmg_duration by 1 after each iteration this.dmg_duration -= 1; }, 200); } } // loops through the bullets array bullets.forEach((bullet, i)=>{ // checks if the distance between the enemy and the bullet is less than 0 if(getDistance(this, bullet) < 0){ // calculates and sets the final velocities changeVelocity(this, bullet); // makes bullet invisible bullet.opacity = 0; // sets enemy_collapsed to 4 this.enemy_collapsed = 4; // sets stroke property to pink this.stroke = 'pink'; // decreases health by 20 this.health -= 20; // prevents health from becoming less than zero if(this.health < 0){ this.health = 0; } // sets number of blood particles to be created let bloodCount = 20; // devides a full circle by the number of blood particles let angleIncrement = Math.PI * 2 / bloodCount; // loop that creates the blood particles for(let i = 0; i < bloodCount; i++){ let velocity = { x: Math.cos(angleIncrement * i) * Math.random() * 2, y: Math.sin(angleIncrement * i) * Math.random() * 2 } let x = this.x; let y = this.y; let r = this.r / 3; let color = 'red'; bloodParticles.push(new blood(x, y, r, color, velocity)); } // checks if health is less than zero if(this.health <=0){ // loops through the enemies enemies.forEach((enemy, i)=>{ // checks if enemy is equal to this object if(enemy === this){ // makes sure this code immediately executes // even if browser is not ready (this fixes a bug) setTimeout(()=>{ // increases score score += 1; // if score is bigger than highscore updates highscore if(score > highscore){ highscore = score; } // removes enemy from the array enemies.splice(i, 1); // sets number of explosion particles to be created let particlesCount = 30; // devides a full circle by the number of explosion particles let angleIncrement = Math.PI * 2 / particlesCount; // a loop that creates the explosion particles for(let i = 0; i < particlesCount; i++){ let velocity = { x: Math.cos(angleIncrement * i) * Math.random() * 3, y: Math.sin(angleIncrement * i) * Math.random() * 3 } let x = this.x; let y = this.y; let r = this.r / 5; let color = this.cl; explosionParticles.push(new explosion(x, y, r, color, velocity)); } }, 0); } }); } } }); // checks for overlapping between the enemies otherEnemies.forEach((enemy)=>{ if(enemy != this){ if(getDistance(this, enemy) < -3){ changeVelocity(this, enemy); this.enemy_collapsed = 2; this.mass = 2; } } }); // checks for overlapping between player and enemy if(getDistance(this, player) < -3){ changeVelocity(this, player); this.enemy_collapsed = 2; this.mass = 4; } // creates hit boxes at the edges of the canvas let rightWall = new wall(canvas.width, this.y) let leftWall = new wall(0, this.y); let topWall = new wall(this.x, 0); let bottomWall = new wall(this.x, canvas.height); // checks if has_enter_canvas is false if(this.has_entered_canvas == false){ // checks if particle has entered the canvas if((this.x - this.r > 0 && this.x + this.r < canvas.width) && (this.y - this.r > 0 && this.y + this.r < canvas.height)){ // sets has_entered_canvas to true this.has_entered_canvas = true; } } // if has_enter_canvas is true then it checks for wall collisions else{ if(getDistance(this, rightWall) < 0){ changeVelocity(this, rightWall); } if(getDistance(this, topWall) < 0){ changeVelocity(this, topWall); } if(getDistance(this, leftWall) < 0){ changeVelocity(this, leftWall); } if(getDistance(this, bottomWall) < 0){ changeVelocity(this, bottomWall); } } // updates x and y positions this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); } } // enemies generator // creates different type of enemies // radius, color, speed, mass, cooldown, damage_duration, damage, health let normalEnemy = [15, 'green', function(){return 0.4 + Math.random()}, 1.1, 6, 0.5, 1, 100]; let tankEnemy = [25, 'rgba(43, 93, 50, 1)', function(){return 0.1 + Math.random()}, 2, 6, 1, 2, 400]; let kidEnemy = [12, '#5dcc70', function(){return 1 + Math.random()}, 0.9, 6, 0.25, 0.5, 50]; let enemyTypes = [kidEnemy, normalEnemy, normalEnemy, normalEnemy, tankEnemy]; // sets an interval that spawns enemies setInterval(()=>{ // randomly selects a type of enemy let enemy = enemyTypes[Math.floor(Math.random() * enemyTypes.length)]; let r = enemy[0]; let x, y; // spawns the enemy randomly outside the canvas if(Math.random() < 0.5){ x = (Math.random() < 0.5)? 0 - r: canvas.width + r; y = Math.random() * canvas.height; } else{ x = Math.random() * canvas.width; y = (Math.random() < 0.5)? 0 - r: canvas.height + r; } let color = enemy[1]; let velocities = {x: 0, y: 0} let speed = enemy[2](); let mass = enemy[3]; let cooldown = enemy[4]; let dmg_duration = enemy[5]; let dmg = enemy[6]; let health = enemy[7]; // max enemies that can spawn let maxEnemies = 20; // checks if max enemies have been spawned if(enemies.length < maxEnemies){ // checks if game is started and active if((isScrolledIntoView(canvas) && (pageIsViewed | pageIsViewed == 'unknown')) && health > 0){ enemies.push(new enemyConstructor(x, y, r, color, velocities, speed, mass, cooldown, dmg_duration, dmg, health)); } } }, 3000); // function that restarts the game function restart(e){ // checks if the mouse position is over the button if((e.offsetX > canvas.width / 2 - 100 && e.offsetX < canvas.width / 2 - 100 + 200) && (e.offsetY > canvas.height / 2 + 25 && e.offsetY < canvas.height / 2 + 25 + 50)){ // restores health and score variables health = 100; score = 0; // empties all arays and repositions player enemies = []; bullets = []; bloodParticles = []; explosionParticles = []; player.x = canvas.width / 2; player.y = canvas.width / 2; // draws background c.save(); c.fillStyle = 'black'; c.fillRect(0, 0, Cwidth, Cheight); c.restore(); // updates imageData to remove blood from screen imageData = c.getImageData(0, 0, canvas.width, canvas.height); } } // function that runs again and again to animate the canvas let animate = function(){ // checks if canvas is scrolled into view and page is viewed if((pageIsViewed == true | pageIsViewed == 'unknown') && isScrolledIntoView(canvas)){ // draws the canvas black c.save(); c.fillStyle = 'black'; c.fillRect(0, 0, Cwidth, Cheight); c.restore(); // adds the blood on the canvas c.putImageData(imageData, 0, 0); // checks if health is greater than zero if(health > 0){ // updates blood bloodParticles.forEach((blood, i)=>{ blood.update(); if(blood.life_time < 0){ bloodParticles.splice(i, 1); } }); // updates imageData after new blood has been added, before anything else is drawn imageData = c.getImageData(0, 0, canvas.width, canvas.height); // updates bullets bullets.forEach((bullet, i)=>{ // if bullet leaves the canvas viewport it removes the bullet if(bullet.x - bullet.r < 0 | bullet.x > Cwidth - bullet.r | bullet.y - bullet.r < 0 | bullet.y > Cheight - bullet.r){ bullets.splice(i, 1); } // if bullet's opacity is 0 it removes the bullet if(bullet.opacity == 0){ bullets.splice(i, 1); } bullet.update(); }); // updates the player player.update(enemies); // updates the enemies enemies.forEach((enemy)=>{ enemy.update(enemies, bullets); }); // updates the explosion particles explosionParticles.forEach((particle, i)=>{ particle.update(); // if opacity is less or equal to zero it removes particle if(particle.alpha <= 0){ explosionParticles.splice(i, 1); } }); // updates the health bars of the enemies enemies.forEach((enemy)=>{ enemy.drawHealthBar(); }); // removes the click event listener that restarts the game canvas.removeEventListener('click', restart); } // if health is not greater zero then it draws the game over screen else{ // draws enemies, bullets and player where they had lastly been bloodParticles.forEach((blood)=>{ blood.draw(); }); player.draw(); bullets.forEach((bullet)=>{ bullet.draw(); }); enemies.forEach((enemy)=>{ enemy.draw(); }); explosionParticles.forEach((particle)=>{ particle.draw(); }); enemies.forEach((enemy)=>{ enemy.drawHealthBar(); }); // draws game over screen c.save(); c.lineWidth = 5; c.fillStyle = 'white'; c.globalAlpha = 0.4; c.fillRect(canvas.width / 2 - 200, canvas.height / 2 - 100, 400, 200); c.globalAlpha = 1; c.strokeStyle = 'purple'; c.strokeRect(canvas.width / 2 - 200, canvas.height / 2 - 100, 400, 200); c.font = 'normal 35px Arial'; c.textAlign = 'center'; c.fillStyle = 'black'; c.fillText('GAME OVER!', canvas.width / 2, canvas.height / 2 - 50); c.font = 'normal 25px Arial'; c.fillText(`High Score: ${highscore}`, canvas.width / 2, canvas.height / 2); c.fillStyle = 'black'; c.fillRect(canvas.width / 2 - 100, canvas.height / 2 + 25, 200, 50); c.fillStyle = 'purple'; c.strokeRect(canvas.width / 2 - 100, canvas.height / 2 + 25, 200, 50); c.fillStyle = 'purple'; c.fillText('Play Again!', canvas.width / 2, canvas.height /2 + 60) c.restore(); // adds click event listener that runs the restart function canvas.addEventListener('click', restart); } c.save(); // sets the health bar c.fillStyle = 'red' c.globalAlpha = 0.6; // it multiplies the width with (health / 100) so that // as the health decreases the width gets smaller c.fillRect(canvas.width - (canvas.width / 2), 15, ((canvas.width / 2) - 20) * (health / 100), 15); c.globalAlpha = 1; c.lineWidth = 2; c.strokeStyle = 'purple'; c.strokeRect(canvas.width - (canvas.width / 2), 15, (canvas.width / 2) - 20, 15); // draws a border around the canvas c.lineWidth = 3; c.strokeRect(0, 0, canvas.width, canvas.height); // sets the kills count c.alignText = 'left'; c.fillStyle = 'pink'; c.font = 'normal 25px Arial'; c.fillText(`Kills: ${score}`, 10, 30); c.restore(); } // if page is not viewed then draws the pause screen else{ c.save(); c.fillStyle = 'black'; c.fillRect(0, 0, Cwidth, Cheight); c.font = 'normal 24px Arial'; c.alignText = 'left'; c.fillStyle = 'purple'; c.fillText('The game is paused', 10, 30); c.strokeStyle = 'purple'; c.lineWidth = 3; c.strokeRect(0, 0, canvas.width, canvas.height); c.restore(); } requestAnimationFrame(animate); } // begins the animation animate(); });

[QnA]idk