// my code is a little ugly, and // I'm sorry, it's because I was // on drugs while coding this alert('If any errors appear during the game, you can push the console down and continue playing, usually there are no errors, but there is a small chance there will be, and usually those errors are caused because some audio may was paused or something and they don\'t really effect the game in any way, if you however find any other bugs while playing, let me know about them so I can get them fixed. Since there are sound effects and music in the game, I recommend you to have your volume up. I have also tried and made it so that the game looks good on all different kind of screen sizes, if however your screen is too small there may be problems, if anything doesn\'t fit your screen, or there is any overlapping happening, let me know the size of your screen and I will try to fix the problem.') window.addEventListener('load', (e)=>{ let links = { floorImage: "https://dl.dropbox.com/s/sbwwtp4hb95vh9i/received_2567955930173456.jpeg?dl=0", playerImage: "https://dl.dropbox.com/s/s5z9yhvob0nnb0n/player.svg?dl=0", normalMonsterImage: "https://dl.dropbox.com/s/a5aj4a4wwsrec1x/monster.svg?dl=0", tankMonsterImage: "https://dl.dropbox.com/s/ew3gg4lilfhrog4/monster2.svg?dl=0", kidMonsterImage: "https://dl.dropbox.com/s/dhgtrwv6ywl99t6/monster3.svg?dl=0", drugsImage: "https://dl.dropbox.com/s/efrtwcnombn1y1q/received_830343984548782.jpeg?dl=0", prisonImage: "https://dl.dropbox.com/s/1vy5pthnwflebz0/received_461453375143954.jpeg?dl=0", freedomImage: "https://dl.dropbox.com/s/kwwmoechjhk6dtp/received_836036283984327.jpeg?dl=0", roadImage: "https://dl.dropbox.com/s/hy27azf3yaq6pb5/received_527549271584619.jpeg?dl=0", shockedFace: "https://dl.dropbox.com/s/w5xwps35h5a44ku/shockedface.svg?dl=0", policeCar: "https://dl.dropbox.com/s/euqo05t6bxgn2ff/policecar2.svg?dl=0" } let image1 = new Image(); let image2 = new Image(); let image3 = new Image(); let image4 = new Image(); let image5 = new Image(); let image6 = new Image(); let image7 = new Image(); let image8 = new Image(); let image9 = new Image(); let image10 = new Image(); let image11 = new Image(); let promises = new Array(); function insertImage(image, src, link){ promises.push(new Promise((resolve, reject)=>{ image.crossOrigin = "Anonymous"; image.alternative = link; image.src = src; image.addEventListener('load', (e)=>{ if(image.naturalWidth == 0 && image.naturalHeight == 0){ image.src = image.alternative; image.addEventListener('load', (e)=>{ resolve(); }); image.addEventListener('error', (e)=>{ resolve(); }); } else{ resolve(); } }); function error(){ image.src = image.alternative; image.removeEventListener('error', error); image.addEventListener('load', (e)=>{ resolve(); }); image.addEventListener('error', (e)=>{ resolve(); }); } image.addEventListener('error', error); })); } insertImage(image1, './../images/grass.jpg', links.floorImage); insertImage(image2, './../images/player.svg', links.playerImage); insertImage(image3, './../images/monster.svg', links.normalMonsterImage); insertImage(image4, './../images/monster2.svg', links.tankMonsterImage); insertImage(image5, './../images/monster3.svg', links.kidMonsterImage); insertImage(image6, './../images/drugs.jpg', links.drugsImage); insertImage(image7, './../images/prison.jpg', links.prisonImage); insertImage(image8, './../images/freedom.jpg', links.freedomImage); insertImage(image9, './../images/road.jpg', links.roadImage); insertImage(image10, './../images/shockedFace.svg', links.shockedFace); insertImage(image11, './../images/policeCar2.svg', links.policeCar); let soundEffectsVolume = 100; let musicVolume = 60; let bulletCancelTimeout; let hitMarkerCancelTimeout; let damageCancelTimeout; let boomCancelTimeout; let levelupCancelTimeout; function playSoundEffect(audio, currentTime, id){ try{ if(id == 'bullet'){ bulletCancelTimeout(); } else if(id == 'hitmarker'){ hitMarkerCancelTimeout(); } else if(id == 'damage'){ damageCancelTimeout(); } else if(id == 'boom'){ boomCancelTimeout(); } else if(id == 'levelup'){ levelupCancelTimeout(); } } catch{} audio.currentTime = currentTime; audio.volume = audio.maxVolume * (soundEffectsVolume / 100); let timeout = setTimeout(()=>{ audio.volume = 0; }, (audio.duration - currentTime) * 1000); if(id == 'bullet'){ bulletCancelTimeout = function(){ clearTimeout(timeout); }; } else if(id == 'hitmarker'){ hitMarkerCancelTimeout = function(){ clearTimeout(timeout); }; } else if(id == 'damage'){ damageCancelTimeout = function(){ clearTimeout(timeout); }; } else if(id == 'boom'){ boomCancelTimeout = function(){ clearTimeout(timeout); }; } else if(id == 'levelup'){ levelupCancelTimeout = function(){ clearTimeout(timeout); }; } } function startSoundEffectLoop(audio){ audio.loop = 'true'; audio.volume = 0; audio.play(); } let boomSoundEffect = new Audio("https://dl.dropbox.com/s/u7y42ulajm3gvkj/boom%20sound%20effect%20%281%29.mp3?dl=0"); boomSoundEffect.preload = "auto"; boomSoundEffect.maxVolume = 1; boomSoundEffect.id = 'soundEffect'; let hitMarkerEffect = new Audio("https://dl.dropbox.com/s/trr9fq18cgqp5h0/hit%20marker%20sound%20effect.mp3?dl=0"); hitMarkerEffect.preload = "auto"; hitMarkerEffect.maxVolume = 0.5; hitMarkerEffect.id = 'soundEffect'; let clickSoundEffect = new Audio("https://dl.dropbox.com/s/g21jo0ni69g6ajn/AudioCutter_Sound%20Effects%20Button%20Clicks.mp3?dl=0"); clickSoundEffect.preload = "auto"; clickSoundEffect.maxVolume = 1; clickSoundEffect.id = 'soundEffect'; buttonSoundEffectStartTime = 0.35; let levelUpSoundEffect = new Audio("https://dl.dropbox.com/s/h2poo1m912ot6li/levelup.mp3?dl=0"); levelUpSoundEffect.preload = "auto"; levelUpSoundEffect.maxVolume = 1; levelUpSoundEffect.id = 'soundEffect'; let damageSoundEffect = new Audio("https://dl.dropbox.com/s/v49q5082t9bgax7/Undertale%20Sound%20Effect%20-%20Taking%20Damage.mp3?dl=0"); damageSoundEffect.preload = "auto"; damageSoundEffect.maxVolume = 1; damageSoundEffect.id = 'soundEffect'; let damageSoundCount = 0; function playDamageSound(audioObj, time){ if(damageSoundCount < 1){ damageSoundCount++ playSoundEffect(audioObj, time); setTimeout(()=>{ damageSoundCount-- }, 500); } } let speechSoundEffect = new Audio("https://dl.dropbox.com/s/7pzasanuc5y2bld/Flowey%20Talking.mp3?dl=0"); speechSoundEffect.preload = 'auto'; speechSoundEffect.maxVolume = 0.3; speechSoundEffect.id = 'soundEffect'; let bulletSoundEffect = new Audio("https://dl.dropbox.com/s/b0xfcjtdug2bfjp/Realistic%20Gunshot%20Sound%20Effect.mp3?dl=0"); bulletSoundEffect.preload = "auto"; bulletSoundEffect.maxVolume = 0.5; bulletSoundEffect.id = 'soundEffect'; let swallowSoundEffect = new Audio("https://dl.dropbox.com/s/nm3nbh8vlyh2r0o/swallow%20sound%20effect.mp3?dl=0"); swallowSoundEffect.preload = "auto"; swallowSoundEffect.maxVolume = 1; swallowSoundEffect.id = 'soundEffect'; let startScreenMusic = new Audio("https://dl.dropbox.com/s/if4soupi69wvmu6/pony%20island%20soundtrack%20-%20pony%20island%20%281%29.mp3?dl=0"); startScreenMusic.preload = 'auto'; startScreenMusic.loop = true; startScreenMusic.maxVolume = 1; startScreenMusic.id = 'music'; startScreenMusic.pause(); let musicState = 'loading'; startScreenMusic.addEventListener('canplaythrough', (e)=>{ musicState = 'ready'; }); // remove it after development is finished window.addEventListener('load', (e)=>{ musicState = 'ready'; }); let gameplayMusic1 = new Audio("https://dl.dropbox.com/s/svho3banraimgfu/pony%20island%20soundtrack%20-%20loueys%20playhouse.mp3?dl=0"); gameplayMusic1.preload = 'auto'; gameplayMusic1.loop = true; gameplayMusic1.maxVolume = 0.8; gameplayMusic1.id = 'music'; gameplayMusic1.pause(); let gameOverMusic = new Audio("https://dl.dropbox.com/s/s74rtb14vjgcx7a/%28Reupload%29%20The%20End%20Of%20Evangelion%20Komm%2C%20Susser%2C%20Tod%208-Bit%20Remix.mp3?dl=0Aa") gameOverMusic.preload = 'auto'; gameOverMusic.loop = true; gameOverMusic.maxVolume = 1; gameOverMusic.id = 'music'; let gameOverMusicHasStarted = false; gameOverMusic.pause(); let goodEndingMusic = new Audio("https://dl.dropbox.com/s/96bkzhvdmnt8ccw/pony%20island%20soundtrack%20-%20hop%2C%20skip%2C%20and%20a%20neigh.mp3?dl=0") goodEndingMusic.preload = 'auto'; goodEndingMusic.loop = true; goodEndingMusic.maxVolume = 1; goodEndingMusic.id = 'music'; let goodEndingMusicHasStarted = false; goodEndingMusic.pause(); let trueEndingMusic = new Audio("https://dl.dropbox.com/s/wmy66632ci0ef40/phoenix%20wrightace%20attorney%20godots%20theme%20remastered.mp3?dl=0") trueEndingMusic.preload = 'auto'; trueEndingMusic.loop = true; trueEndingMusic.maxVolume = 1; trueEndingMusic.id = 'music2'; let trueEndingMusiHasStarted = false; trueEndingMusic.pause(); function playSound(audioObj, currentTime){ audioObj.currentTime = currentTime; if(audioObj.id == 'music'){ audioObj.volume = audioObj.maxVolume * (musicVolume / 100); } if(audioObj.id == 'soundEffect'){ audioObj.volume = audioObj.maxVolume * (soundEffectsVolume / 100); } if(audioObj.id == 'music2'){ audioObj.volume = 1; } try{ audioObj.play(); }catch{} } function updateMusicVolume(){ startScreenMusic.volume = startScreenMusic.maxVolume * (musicVolume / 100); gameplayMusic1.volume = gameplayMusic1.maxVolume * (musicVolume / 100); trueEndingMusic.volume = trueEndingMusic.maxVolume * (musicVolume / 100); } Promise.all(promises).then((image)=>{ let canvas = document.querySelector('#canvvaas26'); let c = canvas.getContext('2d'); // puts focus on the window window.focus(); // sizes the canvas canvas.width = innerWidth; canvas.height = innerHeight; // sets the original background of the canvas before animation begins canvas.style.backgroundImage = `url(${image1.src})`; c.clearRect(0, 0, canvas.width, canvas.height); // 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; let expsExplosion = new Array(); // other variables let score = 0; let highscore = 0; let health = 100; let exps = 0; let maxExps = 100; let level = 0; let wave = 0; let pause = false; let hasStarted = false; let optionsOpened = false; let blood_effect = true; let explosion_effect = true; let level_up_effect = true; let enemiesLeft = wave * 5; let hasEnteredTheGame = false; let creditsOpened = false; let endingScene = 0; let opacity = 0; let opacityIncrement = 0.001 let enterGameOpacity = 0; // variables that are used to rotate stuff let angleIncrement = 0; let buttonsIncrement = 0; // dialogs variables let dialogState; let dialogCount = 0; // object that lets us know what keys are being pressed let keys = { up: false, right: false, down: false, left: false } // 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 >= -el.width / 2) && (elemBottom <= window.innerHeight + el.width / 2); return isVisible; } // event that triggers whenever visibility of page changes window.addEventListener("visibilitychange", (e)=>{ if(health > 0){ pause = true; } keys.right = false; keys.left = false; keys.down = false; keys.up = false; try{ pauseDialogInterval(); }catch{} }); // 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.dmg_duration = 0; this.maxSpeed = 1.7; } draw(){ c.strokeStyle = "black"; c.fillStyle = this.cl; c.lineWidth = 2; c.globalAlpha = 1; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.stroke(); let aspectRatio = image2.naturalWidth / image2.naturalHeight; if(endingScene == 2){ c.drawImage(image10, this.x - this.r, this.y - this.r, this.r * 2, (this.r * 2) / aspectRatio); } else{ c.drawImage(image2, this.x - this.r, this.y - this.r, this.r * 2, (this.r * 2) / aspectRatio); } c.lineWidth = 1; c.setTransform(1,0,0,1,0,0) } update(enemies){ // if key.up is true makes player move up and increases mass if(keys.up){ this.mass = 2.2; this.velocity.y = -this.maxSpeed; } // else if key.down is true increases mass but makes player move down else if(keys.down){ this.mass = 2.2; this.velocity.y = this.maxSpeed; } // else if this.collapsed is less than zero it sets mass to 1 and velocity.y to zero else if(this.collapsed < 0 && joyStickActive != true){ 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 = this.maxSpeed; } // 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 = -this.maxSpeed; } // else if this.collapsed is less than zero it sets mass to 1 and velocity.x to zero else if(this.collapsed < 0 && joyStickActive != true){ //this.velocity.x = 0; this.mass = 1; } if(joyStickActive){ this.mass = 2.2; } if(dialogCount == 2){ if(dialogState == 'finished'){ if(this.velocity.x != 0 || this.velocity.y != 0){ dialogState = 'onprogress'; dialog = []; addDialog({text: "That's great! Doesn't it feel nice moving around? Doesn't it make you feel free? It took me quite some time to make the player moveable, but at the end it was worth it, wasn't it?", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 3; } } } // 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){ // checks wether the player is moving or not if(this.mass != 2.2){ // if he is not moving, then his mass shouldn't // be 2.2, so it calculates the final velocities // of the player and enemy and sets them changeVelocity(this, enemy); } // checks if enemy's cooldown is less than zero if(enemy.was_hit < 0){ playDamageSound(damageSoundEffect, 0.4); // sets was_hit property of enemy to enemy's cooldown enemy.was_hit = 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); } } }); // 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(); } } // creates the player player = new playerMaker(canvas.width/2, canvas.height/2, (canvas.width * (5 /100) < 20)? canvas.width * (5 / 100): 20, 'orange', {x: 0, y: 0}, 1); // event listener that updates keys object when a key is pressed addEventListener('keydown', (e)=>{ 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 addEventListener('keyup', (e)=>{ 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.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.setTransform(1,0,0,1,0,0) } update(){ // updates the x and y position this.x += this.velocity.x; this.y += this.velocity.y; if(dialogCount == 4){ if(dialogState == 'finished'){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Do you like it? I know, the bullets aren't the most realistic, but they are my bullets, and I love them. Those bullets will be your weapons when the enemies appear, so you gotta learn to love them as well.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 5; } } 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; }); let stopShootInterval; // function that starts shooting bullets when called function shoot(e){ // prevents default behaviour e.preventDefault(); window.focus(); // sets mousedown to true if(mousedown == false){ mousedown = true // sets an interval let interval = setInterval(()=>{ let r = 3; let cl = 'black' let x = player.x; let y = player.y; let vx = mouse.x - x; let vy = mouse.y - y; // calculates the angle between the player and the mouse let angle = Math.atan2(vy, vx); // if shootJoyStick is used then it calculates the angle // between the joyStick and the touch dragging it instead if(shootJoyStickActive){ angle = shootJoyStick.angle; } let velocity = { x: Math.cos(angle) * 5, y: Math.sin(angle) * 5 } let mass = 3; // creates bullets if gave hasn't ended if(((health > 0 && pause == false) && hasStarted) && (endingScene == false)){ playSoundEffect(bulletSoundEffect, 0.3, 'bullet'); bullets.push(new bullet(x, y, r, cl, velocity, mass)); } }, 300); try{ stopShootInterval(); } catch{} stopShootInterval = function(){ clearInterval(interval); } } } // runs the shoot function when mouse is pushed down canvas.addEventListener('mousedown', shoot); // event that triggers when mouse button is released window.addEventListener('mouseup', (e)=>{ // prevents default behaviour e.preventDefault(); // sets mousedown to false mousedown = false; try{ stopShootInterval(); } catch{} }); // joystick constructor let joyStickConstructor = class{ constructor(x, y, r, id){ this.x = x; this.y = y; this.r = r; this.id = id; this.x2 = x; this.y2 = y; this.distance = { x: 0, y: 0 } this.angle = 0; } // draws the joystick draw(){ // draws the joystick's container c.fillStyle = 'grey'; c.globalAlpha = 0.3; c.lineWidth = 1; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.globalAlpha = 1; c.stroke(); // draws the joystick if(this.id == 'shoot'){ c.fillStyle = 'red'; } c.beginPath(); c.arc(this.x2,this.y2, this.r/2, 0, Math.PI*3); c.fill(); c.stroke(); if(this.id == 'shoot'){ c.textAlign = "center"; c.textBaseLine = "middle"; c.font = 'normal 13px Arial'; c.fillStyle = "white"; c.fillText('Shoot', this.x2, this.y2 + 2); } if(this.id == 'move'){ c.textAlign = "center"; c.textBaseLine = "middle"; c.font = 'normal 13px Arial'; c.fillStyle = "white"; c.fillText('Move', this.x2, this.y2 + 2); } c.setTransform(1,0,0,1,0,0) } update(player){ // checks if the horizontal distance between touch and // the center of the joystick is greater than this.r / 1.2 if(this.distance.x > this.r / 1.2){ // if true then sets distance.x to this.r / 1.2 this.distance.x = this.r / 1.2; } // checks if the vertical distance between the center of the joystick and the // touch is greater than this.r / 1.2 if(this.distance.y > this.r / 1.2){ // if true sets this.distance to this.r / 1.2 this.distance.y = this.r / 1.2; } if(this.id == "move"){ // sets the x velocity of the player to be his max speed multipled by the distance // the touch and the center of the joystick devided by this.r / 1.2, the max distance // value that can be returned is equal to this.r / 1.2, so if joystick is dragged // all the way to the right then the x velocity of the player is set to his max speed player.velocity.x = (player.maxSpeed * this.distance.x / (this.r / 1.2)) * Math.cos(this.angle); // does the same thing for the y velocity of the player, but with the vertical // distance between the touch and the center of the joystick instead player.velocity.y = (player.maxSpeed * this.distance.y / (this.r / 1.2)) * Math.sin(this.angle); } // changes the x2 to the center of the container + // Math.cos(angle) multiplied by the horizontal distance this.x2 = this.x + Math.cos(this.angle) * this.distance.x; // changes the y2 to the center of the container + // Math.sin(angle) multiplied by the vertical distance this.y2 = this.y + Math.sin(this.angle) * this.distance.y; // draws the joystick this.draw(); } } // creates the move joystick let r = 50; let y = canvas.height - r - 20; let x = r + 30; let joyStick = new joyStickConstructor(x,y,r, 'move'); // creates the shoot joystick let y2 = canvas.height - r - 20; let x2 = canvas.width - r - 30; let shootJoyStick = new joyStickConstructor(x2,y2,r, 'shoot'); function repositionJoySticks(){ shootJoyStick.y = canvas.height - r - 20; joyStick.y = canvas.height - r - 20; shootJoyStick.x = canvas.width - r - 30;; joyStick.x = r + 30; } // variables that will let us know wether joysticks are in use let shootJoyStickActive = false; let joyStickActive = false; // variables that will keep track of the touch which drags each joystick let touchIndex; let touchIndex2; // variables that will keep track of the position of the touches let touchPosition = null; let touchPosition2 = null; // function that returns true if touch passed // as it's parameter was made over the move joystick function touchedMoveJoystick(touch){ return touch.clientX > joyStick.x - joyStick.r && touch.clientX < joyStick.x + joyStick.r && touch.clientY > joyStick.y - joyStick.r && touch.clientY < joyStick.y + joyStick.r; } // function that returns true if touch passed // as it's parameter was made over the shoot joystick function touchedShootJoystick(touch){ return touch.clientX > shootJoyStick.x - shootJoyStick.r && touch.clientX < shootJoyStick.x + shootJoyStick.r && touch.clientY > shootJoyStick.y - shootJoyStick.r && touch.clientY < shootJoyStick.y + shootJoyStick.r; } // event that triggers when touch starts canvas.addEventListener("touchstart", (e)=>{ // prevents mouse events from triggering e.preventDefault(); // gets position of the canvas let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; // makes an array of the touches let touchArray = Array.from(e.touches); // loops through each touch object touchArray.forEach((touch, i)=>{ // calculates the offset from the edges // of the canvas and the clientY / clientX let touchOnCanvas = { clientX: touch.clientX - left, clientY: touch.clientY - top } // checks if touch was made over move joystick if(touchedMoveJoystick(touchOnCanvas)){ // if true sets joyStickActive to true // touchIndex to the index of the touch // and touchPosition to touch.clientX joyStickActive = true; touchIndex = i; touchPosition = touchOnCanvas.clientX; // adds no-scroll class to the body document.body.classList.add('no-scroll'); } // checks if the touch was made over the shoot joyatick else if(touchedShootJoystick(touchOnCanvas)){ // checks wether player is already shooting if(shootJoyStickActive != true){ // if he is not then it runs the shoot function shoot(e); } // sets shootJoyStickActive to true, // touchIndex2 to touch's index and // touchPosition2 to touch.clientX shootJoyStickActive = true; touchIndex2 = i; touchPosition2 = touchOnCanvas.clientX; // adds no-scroll class to the body document.body.classList.add('no-scroll'); // sets mousedown to true mousedown = true; } }); }); // triggers again and again as touch moves around the screen canvas.addEventListener('touchmove', (e)=>{ // prevents mouse events from triggering e.preventDefault(); // gets position of the canvas let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; // creates an array of all the touches let touchArray = Array.from(e.touches); // checks if move joystick is active if(joyStickActive){ // if true loops through all the touches touchArray.forEach((touch, i)=>{ // calculates the offset from the edges // of the canvas and the clientY / clientX let touchOnCanvas = { clientX: touch.clientX - left, clientY: touch.clientY - top } // checks wether the distance between the // touch and the touchPosition set previously // is smaller than the radiusX formed by the // finger plush 10 if(Math.abs((touchOnCanvas.clientX - touchPosition)) < touch.radiusX + 10){ // if true sets touchIndex to the index of // the touch which passed the test touchIndex = i; } }); // tries the following code, since there is // a chance an error may occured if touch // cancelled for whatever reason or something // else happened try{ // calculates the offset from the edges // of the canvas and the clientY / clientX let touchOnCanvas = { clientX: e.touches[touchIndex].clientX - left, clientY: e.touches[touchIndex].clientY - top } // sets touchPosition to the new clientX touchPosition = touchOnCanvas.clientX; // gets horizontal distance between the // center of the joystick and the touch let vx = touchOnCanvas.clientX - joyStick.x; // gets vertical distance between the // center of the joystick and the touch let vy = touchOnCanvas.clientY - joyStick.y; // sets the distance.x and distance.y of // joystick object to the distances // calculated above, but makes sure they // are given as positive values, direction // does not matter since we will // rotate the joyStick joyStick.distance.x = Math.abs(vx); joyStick.distance.y = Math.abs(vy); // calculates the angle formed by the // center of the joystick and the touch let angle = Math.atan2(vy, vx); // sets joystick.angle to the angle // we calculated above joyStick.angle = angle; } // if the code above throws an error // this code deactivates the joystick // and resets the variables catch{ joyStickActive = false; joyStick.distance.x = 0; joyStick.distance.y = 0; joyStick.angle = 0; touchPosition = 0; touchIndex = -1; // checks if both joysticks have been deactivated if(joyStickActive != true && shootJoyStickActive != true){ // removes no-scroll class from the body document.body.classList.remove('no-scroll'); } } } // checks if shootJoyStickActive is true if(shootJoyStickActive){ // if true loops through all the touches touchArray.forEach((touch, i)=>{ // calculates the offset from the edges // of the canvas and the clientY / clientX let touchOnCanvas = { clientX: touch.clientX - left, clientY: touch.clientY - top } // checks if the distance between the // touch.clientX and the touchPosition2 // that we set earlier is smaler than the // radiusX formed by the finger plush 10 if(Math.abs((touchOnCanvas.clientX - touchPosition2)) < touch.radiusX + 10){ // if true sets touchIndex to the index of // the touch which passed the test touchIndex2 = i; } }); // tries the following code, which may throw // errors under certain situations try{ // calculates the offset from the edges // of the canvas and the clientY / clientX let touchOnCanvas = { clientX: e.touches[touchIndex2].clientX - left, clientY: e.touches[touchIndex2].clientY - top } // updates touchPosition2 to new // touch's position touchPosition2 = touchOnCanvas.clientX; // calculates horizontal and // vertical distances between the // center of the shoot joystick and // the touch let vx = touchOnCanvas.clientX - shootJoyStick.x; let vy = touchOnCanvas.clientY - shootJoyStick.y; // sets the distance.x and distance.y // of the shoot joystick to the distances // calculated above but makes sure we // set them as positive values because // we don't want a direction, since we // will later use the angle to rotate it shootJoyStick.distance.x = Math.abs(vx); shootJoyStick.distance.y = Math.abs(vy); // calculates the angle of the vector let angle = Math.atan2(vy, vx); // sets the angle of the shootJoyStick to // the angle calculated above shootJoyStick.angle = angle; } // if code above threw an error this // diactivates the shoot joystick and // resets the variables catch{ shootJoyStickActive = false; shootJoyStick.distance.x = 0; shootJoyStick.distance.y = 0; shootJoyStick.angle = 0; touchPosition2 = 0; touchIndex2 = -1; mousedown = false; try{ stopShootInterval(); } catch{} // checks if both joysticks have been deactivated if(joyStickActive != true && shootJoyStickActive != true){ // removes no-scroll class from the body document.body.classList.remove('no-scroll'); } } } }); // this function is used for touchend and touchcancel let endContactWithJoyStick = function(e){ // prevents mouse events from triggering e.preventDefault(); // gets position of the canvas let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; // calculates the offset from the edges // of the canvas and the clientY / clientX let touchOnCanvas = { clientX: e.changedTouches[0].clientX - left, clientY: e.changedTouches[0].clientY - top } // checks if the distance between the touchPosition and the position of the // touch that ended were less than the radiusX formed by the finger plush 10 if(Math.abs((touchOnCanvas.clientX - touchPosition)) < e.changedTouches[0].radiusX){ // if true it deactivates the move // joyStick and resets the // variables linked to it joyStickActive = false; joyStick.distance.x = 0; joyStick.distance.y = 0; joyStick.angle = 0; touchPosition = 0; touchIndex = -1; } // checks if the distance between the // touchPosition2 and the position of the // touch that ended were less than the // radiusX formed by the finger plush 10 if(Math.abs((touchOnCanvas.clientX - touchPosition2)) < e.changedTouches[0].radiusX){ // if true it deactivates the shoot // joyStick and resets the variables // linked to it shootJoyStickActive = false; shootJoyStick.distance.x = 0; shootJoyStick.distance.y = 0; shootJoyStick.angle = 0; touchPosition2 = 0; touchIndex2 = -1; mousedown = false; try{ stopShootInterval(); } catch{} } // checks if both joysticks have been deactivated if(joyStickActive != true && shootJoyStickActive != true){ // removes no-scroll class from the body document.body.classList.remove('no-scroll'); } } // triggers when a touch ends canvas.addEventListener('touchend', endContactWithJoyStick); // triggers if a touch is for some reason cancelled canvas.addEventListener('touchcancel', endContactWithJoyStick); // blood constructor let blood = class{ constructor(x, y, r, cl, velocity){ this.y = y; this.x = x; this.r = r; this.cl = cl; this.velocity = velocity; this.friction = 0.93; this.life_time = 1; } draw(){ c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.setTransform(1,0,0,1,0,0) } 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, id){ 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; this.id = id; this.text; this.iteration = 1; this.increment; this.textColor; } draw(){ c.globalAlpha = this.alpha; c.fillStyle = this.cl; if(this.id == 'exps'){ this.increment += 0.01; let array = ['Congratulations!', 'Level up!', 'Good Job!', 'YOU ARE SO COOL!']; if(this.iteration == 1){ this.text = array[Math.floor(Math.random() * array.length)]; this.textColor = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 1)`; } c.fillStyle = this.textColor; c.font = 'normal 15px Arial'; c.textAlign = 'center'; c.fillText(this.text, this.x, this.y); }else{ c.beginPath(); c.arc(this.x, this.y, this.r, 0, 2 * Math.PI); c.fill(); c.stroke(); } c.globalAlpha = 1; c.setTransform(1,0,0,1,0,0) } update(){ this.velocity.x *= this.friction; this.velocity.y *= this.friction; if(this.id != "exps"){ this.velocity.y += this.gravity; } else{ this.velocity.y += 0.001; } this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); this.alpha -= 0.01; this.iteration++ } } // code for dialogs // text wrapper function wrapText(text, x, y, maxWidth, lineHeight, stls){ let words = text.split(' '); let line = ''; let lines = new Array(); c.font = stls.font; if(stls.stroke.inUse){ c.lineWidth = stls.stroke.width; } words.forEach((word)=>{ let testLine = line + word; let testWidth = c.measureText(testLine).width; if(testWidth > maxWidth){ lines.push({line: line, y: y}); y += lineHeight; line = word + ' '; } else{ line += word + ' '; } }); c.setTransform(1,0,0,1,0,0); lines.push({line: line, y: y}); return lines; } let dialog = new Array(); let dialogStyles; // dialog generator //addDialog({text: text, color: color, font: font}, //{inUse: stroke.inUse, color: stroke.color, width: stroke.width }, //x, y, maxWidth, lineHeight, speed); let stopDialogInterval; let pauseDialogInterval; let startDialogInterval; let interval; function addDialog(text, stroke, x, y, maxWidth, lineHeight, speed){ c.fillStyle = text.color; c.font = text.font; c.textAlign = 'left'; if(stroke.inUse){ c.strokeStyle = stroke.color; c.lineWidth = stroke.width; } c.setTransform(1,0,0,1,0,0); dialogStyles = { fillStyle: text.color, font: text.font, stroke: { inUse: stroke.inUse, width: stroke.width, color: stroke.color } } let txt = text.text; let lines = wrapText(txt, x, y, maxWidth, lineHeight, {font: text.font, stroke: {inUse: stroke.inUse, width: stroke.width}}); let letters = new Array(); let letterIndex = 0; let lineIndex = 0; lines.forEach((line)=>{ let characters = new Array(); for(let i = 0; i < line.line.length; i++){ characters.push({letter: line.line[i], x: x, y: line.y}); } letters.push(characters); }); let addLetters = function(){ try{ if(speechSoundEffect.volume == 0){ speechSoundEffect.currentTime = 2; speechSoundEffect.volume = speechSoundEffect.maxVolume * (soundEffectsVolume / 100); } if(speechSoundEffect.currentTime > speechSoundEffect.duration - 1){ speechSoundEffect.currentTime = 2; } dialog[lineIndex] = {text: dialog[lineIndex].text + letters[lineIndex][letterIndex].letter, x: x, y: letters[lineIndex][letterIndex].y}; } catch{ dialog[lineIndex] = {text: letters[lineIndex][letterIndex].letter, x: x, y: letters[lineIndex][letterIndex].y}; } letterIndex++ if(letterIndex > letters[lineIndex].length - 1){ lineIndex += 1; letterIndex = 0; } if(lineIndex >= letters.length){ clearInterval(interval); dialogState = 'finished'; speechSoundEffect.volume = 0; speechSoundEffect.currentTime = 0; } } interval = setInterval(addLetters, speed); stopDialogInterval = function(){ clearInterval(interval); dialogState = 'stopped'; speechSoundEffect.volume = 0; speechSoundEffect.currentTime = 0; dialog = []; } pauseDialogInterval = function(){ clearInterval(interval); speechSoundEffect.volume = 0; speechSoundEffect.currentTime = 0; } startDialogInterval = function(){ speechSoundEffect.currentTime = 0; interval = setInterval(addLetters, 60); } } function drawDialog(angleIncrement){ dialog.forEach((line)=>{ c.fillStyle = dialogStyles.fillStyle; c.font = dialogStyles.font; c.textAlign = 'left'; if(dialogStyles.stroke.inUse){ c.strokeStyle = dialogStyles.stroke.color; c.lineWidth = dialogStyles.stroke.width; } let x = Math.cos(angleIncrement * 0.25) * 3; let y = Math.sin(angleIncrement * 0.25) * 0; c.fillText(line.text, line.x + x, line.y + y); if(dialogStyles.stroke.inUse){ c.strokeText(line.text, line.x + x, line.y + y); } c.setTransform(1,0,0,1,0,0); }); } // enemies constructor let enemyConstructor = class{ constructor(x, y, r, cl, velocity, speed, mass, cooldown, damage_dur, damage, health, img){ 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 = 2; 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; this.image = img; } draw(){ c.strokeStyle = 'black'; c.globalAlpha = 1; c.fillStyle = this.cl; c.lineWidth = this.stroke; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.stroke(); if(this.image.id == 'image3'){ let aspectRatio = this.image.image.naturalWidth / this.image.image.naturalHeight; c.drawImage(this.image.image, this.x - this.r + 4, this.y - this.r + 5, this.r * 1.5, (this.r * 1.5) / aspectRatio); } if(this.image.id == 'image4'){ let aspectRatio = this.image.image.naturalWidth / this.image.image.naturalHeight; c.drawImage(this.image.image, this.x - this.r + 6, this.y - this.r + 9, this.r * 1.5, (this.r * 1.5) / aspectRatio); } if(this.image.id == 'image5'){ let aspectRatio = this.image.image.naturalWidth / this.image.image.naturalHeight; c.drawImage(this.image.image, this.x - this.r + 5, this.y - this.r + 4, this.r * 1.5, (this.r * 1.5) / aspectRatio); } c.lineWidth = 1; c.setTransform(1,0,0,1,0,0) } drawHealthBar(){ c.globalAlpha = 1; 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.lineWidth = 1; c.setTransform(1,0,0,1,0,0) } 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 = 2; // 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 -= 0.7; // 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.2, 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.2){ // 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; // checks if was_hit is less than 0 if(this.was_hit < 0){ playDamageSound(damageSoundEffect, 0.4); // 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){ playSoundEffect(hitMarkerEffect, 0.85, 'hitmarker'); // 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 = 1; // decreases health by 20 this.health -= 20; // prevents health from being less than 0 if(this.health < 0){ this.health = 0; } exps += 10; if(exps >= maxExps){ exps = 0; level++ maxExps += 20; // checks if level_up_effect is true if(level_up_effect){ // sets number of explosion particles to be created let particlesCount = 10; // devides a full circle by the number of explosion particles let angleIncrement = Math.PI * 2 / particlesCount; let xIncrement = ((canvas.width / 2) - 20) / 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 = player.x; let y = player.y; let r = 5; let color = "pink"; playSoundEffect(levelUpSoundEffect, 0, 'levelup'); expsExplosion.push(new explosion(x, y, r, color, velocity, 'exps')); } } } // checks if blood effect is true if(blood_effect){ // 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 = this.cl; bloodParticles.push(new blood(x, y, r, color, velocity)); } } } }); // 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 // this will be set to be a function // that stops the interval which spawns the enemies, // I needed to precreate it here so that it is in the // global scope, so that it can be used outside the function let stopSpawnInterval; function spawnEnemies(){ // creates different type of enemies // radius, color, speed, mass, cooldown, damage_duration, damage, health let normalEnemy = [(canvas.width * (5 /100) < 20)? canvas.width * (5 / 100): 20, function(){return `hsl(${Math.random() * 360}, 50%, 50%`}, function(){return 1}, 1.1, 6, 0.5, 1, 100, {id: 'image3', image: image3}]; let tankEnemy = [(canvas.width * (7 /100) < 30)? canvas.width * (7 / 100): 30, function(){return `hsl(${Math.random() * 360}, 50%, 50%`}, function(){return 0.2}, 2, 6, 1, 2, 400, {id: 'image4', image: image4}]; let kidEnemy = [(canvas.width * (4 /100) < 17)? canvas.width * (4 / 100): 17, function(){return `hsl(${Math.random() * 360}, 50%, 50%`}, function(){return 2}, 1, 6, 0.5, 1, 50, {id: 'image5', image: image5}]; let enemyTypes = []; // max enemies that can spawn let maxEnemies = wave * 5; // keeps track of enemies that have been spawned let enemiesSpawned = 0; let speed = 4000; if(wave == 0){ enemyTypes = [normalEnemy]; } if(wave == 1){ for(let i = 0; i < 5; i++){ enemyTypes.push(normalEnemy); } enemyTypes.push(normalEnemy); } if(wave == 2){ for(let i = 0; i < 10; i++){ enemyTypes.push(normalEnemy); } enemyTypes.push(normalEnemy); } if(wave == 3){ for(let i = 0; i < 10; i++){ enemyTypes.push(kidEnemy); } maxEnemies = 10; enemyTypes.push(normalEnemy); } if(wave == 4){ for(let i = 0; i < 2; i ++){ enemyTypes.push(kidEnemy, kidEnemy, kidEnemy, kidEnemy, kidEnemy); enemyTypes.push(normalEnemy, normalEnemy, normalEnemy, normalEnemy, normalEnemy); } maxEnemies = 15; enemyTypes.push(normalEnemy); } if(wave == 5){ for(let i = 0; i < 5; i++){ enemyTypes.push(kidEnemy, normalEnemy, kidEnemy, kidEnemy, normalEnemy); } maxEnemies = 20; enemyTypes.push(normalEnemy); } if(wave == 6){ for(let i = 0; i < 4; i++){ enemyTypes.push(kidEnemy, normalEnemy, kidEnemy, kidEnemy, normalEnemy); } enemyTypes.push(normalEnemy); maxEnemies = 20; } if(wave == 7){ for(let i = 0; i < 5; i++){ enemyTypes.push(tankEnemy); } enemyTypes.push(normalEnemy); maxEnemies = 5; } if(wave == 8){ for(let i = 0; i < 4; i++){ enemyTypes.push(normalEnemy, normalEnemy, kidEnemy, tankEnemy, normalEnemy); } enemyTypes.push(normalEnemy); maxEnemies = 20; } if(wave == 9){ for(let i = 0; i < 3; i++){ enemyTypes.push(normalEnemy, kidEnemy, kidEnemy, kidEnemy, tankEnemy); } enemyTypes.push(normalEnemy); maxEnemies = 15; } if(wave == 10){ for(let i = 0; i < 4; i++){ enemyTypes.push(normalEnemy, kidEnemy, kidEnemy, tankEnemy, tankEnemy); } speed = 2000; enemyTypes.push(normalEnemy); maxEnemies = 20; } // sets an interval that spawns enemies let interval = setInterval(()=>{ let enemy = enemyTypes[enemiesSpawned]; 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 enemy_health = enemy[7]; let enemy_image = enemy[8]; // checks if max enemies have been spawned if(enemiesSpawned < maxEnemies){ // checks if game has started and is active if((health > 0 && pause == false) && hasStarted){ enemies.push(new enemyConstructor(x, y, r, color, velocities, speed, mass, cooldown, dmg_duration, dmg, enemy_health, enemy_image)); enemiesSpawned++; } } else{ clearInterval(interval); } }, speed); stopSpawnInterval = function(){ clearInterval(interval); } } // an object I will use to keep track of touch position let touch = { x: 0, y: 0 } // triggers every time the canvas is touched canvas.addEventListener('touchstart', (e)=>{ // prevents mouse events from triggering e.preventDefault(); // gets position of the canvas let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; // calculates the offset between the canvas and the touch and // sets it for touch.x and touch.y touch.x = e.touches[0].clientX - left; touch.y = e.touches[0].clientY - top; }); // triggers every time a touch is moved over the canvas canvas.addEventListener('touchmove', (e)=>{ // gets the position of the canvas let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; // calculates the offset between the canvas and the touch and // sets it for touch.x and touch.y touch.x = e.touches[0].clientX - left; touch.y = e.touches[0].clientY - top; }); // button constructor let button = class{ constructor(x, y, width, height, color, stroke, text, id, animation){ this.x = x; this.y = y; this.center = { x: this.x, y: this.y } this.extraWidth = width; this.extraHeight = height; this.color = color; this.stroke = stroke; this.text = text; this.id = id; this.rectX; this.rectY; this.rectWidth; this.rectHeight; this.mouseOver = false; this.originalFont = text.font; this.originalText = this.text.text; this.animation = animation; this.textIncrement = 0; this.textSize = parseFloat(this.text.font.match(/\d+/)); } draw(){ c.font = this.text.font; c.textAlign = 'center'; c.fillStyle = this.color; c.fillRect(this.rectX, this.rectY, this.rectWidth, this.rectHeight); if(this.stroke.inUse){ c.strokeStyle = this.stroke.color; c.lineWidth = this.stroke.width; c.strokeRect(this.rectX, this.rectY, this.rectWidth, this.rectHeight); } c.fillStyle = this.text.color; c.fillText(this.text.text, this.x, this.y); if(this.text.strokeInUse){ c.strokeStyle = this.text.strokeColor; c.lineWidth = this.text.strokeWidth; c.strokeText(this.text.text, this.x, this.y); } c.setTransform(1,0,0,1,0,0) } update(){ c.font = this.text.font; c.textAlign = 'center'; if(this.id == 'bloodEffect'){ this.text.text = this.originalText + ` ${blood_effect}`; } if(this.id == 'explosionEffect'){ this.text.text = this.originalText + ` ${explosion_effect}`; } if(this.id == 'levelUpEffect'){ this.text.text = this.originalText + ` ${level_up_effect}`; } let measuredText = c.measureText(this.text.text); c.textAlign = 'left'; c.font = ''; this.rectX = this.x - measuredText.actualBoundingBoxLeft - this.extraWidth; this.rectY = this.y - measuredText.actualBoundingBoxAscent - this.extraHeight; this.rectWidth = measuredText.width + this.extraWidth * 2; this.rectHeight = measuredText.actualBoundingBoxAscent + measuredText.actualBoundingBoxDescent + this.extraHeight * 2; if(this.animation){ this.x = this.center.x + Math.cos(buttonsIncrement) * 10; this.y = this.center.y + Math.sin(buttonsIncrement) * 5; } // makes sure the following code does not run for pausedGame button if(this.id != 'pausedGame' && this.id != 'title'){ // checks if mouse or touch is over the button if((mouse.x > this.rectX && mouse.x < this.rectX + this.rectWidth) && (mouse.y > this.rectY && mouse.y < this.rectY + this.rectHeight) || (touch.x > this.rectX && touch.x < this.rectX + this.rectWidth) && (touch.y > this.rectY && touch.y < this.rectY + this.rectHeight)){ // if true sets mouseOver to true and changes stroke and text color this.textIncrement += 1; if(this.textIncrement > 5){ this.textIncrement = 5; } this.mouseOver = true; let size = parseFloat(this.originalFont.match(/\d+/)); this.text.font = this.text.font.replace(/\d+/, size + this.textIncrement); } else{ // else resets mouseOver to false and stroke and text colors back to their original this.mouseOver = false; let size = parseFloat(this.originalFont.match(/\d+/)); this.textIncrement -= 1; if(this.textIncrement < 0){ this.textIncrement = 0; } this.text.font = this.text.font.replace(/\d+/, size + this.textIncrement) } } this.draw(); } } let OptionsButton, leaveButton, resumeButton, pausedGameTitle, enterGame, levelEffect, explosionEffect, bloodEffect, backButton, title, credits, optionsBut2, startButton; function createButtons(){ // pauseScreen buttons pausedGameTitle = new button(canvas.width/2, canvas.height/2 - 120, (canvas.width - canvas.width * (93 / 100) < 30)? canvas.width - canvas.width * (93 / 100): 30, (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'rgba(255, 255, 255, 0)', { inUse: false }, { text: 'The game has been paused', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 40)? canvas.width - canvas.width * (94 / 100): 40}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 2 }, 'pausedGame', true); leaveButton = new button(canvas.width/2, canvas.height/2 + 80, (canvas.width - canvas.width * (93 / 100) < 30)? canvas.width - canvas.width * (93 / 100): 30, (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'pink', { inUse: true, color: 'black', width: 3 }, { text: 'RESTART GAME', color: 'lightgreen', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'black', strokeWidth: 1 }, 'restart', true); c.font = `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`; c.lineWidth = 1; let leaveButtonMeasurement = c.measureText('RESTART GAME').width; let resumeButtonMeasurement = c.measureText('Resume').width; let optionsButtonMeasurement = c.measureText('Options').width; resumeButton = new button(canvas.width/2, canvas.height/2, leaveButton.extraWidth + Math.abs((resumeButtonMeasurement - leaveButtonMeasurement) / 2), leaveButton.extraHeight, 'lightgreen', { inUse: true, color: 'black', width: 3 }, { text: 'Resume', color: 'lightblue', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'black', strokeWidth: 1 }, 'resume', true); OptionsButton = new button(canvas.width/2, canvas.height/2 + 160, leaveButton.extraWidth + Math.abs((optionsButtonMeasurement - leaveButtonMeasurement) / 2), leaveButton.extraHeight, 'lightblue', { inUse: true, color: 'black', width: 3 }, { text: 'Options', color: 'pink', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'black', strokeWidth: 1 }, 'options', true); // buttons for the home screen startButton = new button(canvas.width/2, canvas.height / 1.7, (canvas.width - canvas.width * (93 / 100) < 30)? canvas.width - canvas.width * (93 / 100): 30, (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'rgb(197, 60, 261)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'NEW GAME', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'startGame', true); c.font = startButton.text.font; c.lineWidth = 1; let startButtonMeasuredText = c.measureText(startButton.text.text); let optionsButton2MeasuredText = c.measureText('options'); let creditsMeasuredText = c.measureText('credits'); optionsButton2 = new button(canvas.width/2, startButton.y + startButton.extraHeight * 2 + startButton.textSize + 10, startButton.extraWidth + ((startButtonMeasuredText.width - optionsButton2MeasuredText.width) / 2), (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'rgb(197, 60, 261)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'OPTIONS', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'options', true); credits = new button(canvas.width/2, optionsButton2.y + optionsButton2.extraHeight * 2 + optionsButton2.textSize + 10, startButton.extraWidth + ((startButtonMeasuredText.width - creditsMeasuredText.width) / 2), (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'rgb(197, 60, 261)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'CREDITS', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'credits', true); title = new button(canvas.width/2, canvas.height * (25 / 100), 0, 0, 'rgba(0, 0, 0, 0)', { inUse: false }, { text: 'DON\'T DO DRUGS', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (89 / 100) < 60)? canvas.width - canvas.width * (89 / 100): 60}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 3 }, 'title', true); // options screen buttons backButton = new button(canvas.width/2, canvas.height * (20 / 100), (canvas.width - canvas.width * (89 / 100) < 20)? canvas.width - canvas.width * (89 / 100): 20, (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'rgb(197, 60, 261)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'BACK', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'back', true); explosionEffect = new button(canvas.width/2, backButton.y + backButton.extraHeight * 2 + backButton.textSize + 20, (canvas.width - canvas.width * (89 / 100) < 20)? canvas.width - canvas.width * (89 / 100): 20, (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'rgb(197, 60, 261)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'EXPLOSION-EFFECT =', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'explosionEffect', true); levelEffect = new button(canvas.width/2, explosionEffect.y + explosionEffect.extraHeight * 2 + explosionEffect.textSize + 20, (canvas.width - canvas.width * (93 / 100) < 20)? canvas.width - canvas.width * (89 / 100): 20, (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'rgb(197, 60, 261)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'LEVEL-UP-EFFECT =', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'levelUpEffect', true); // other buttons enterGame = new button(canvas.width/2, canvas.height/2, canvas.width - canvas.width * (98 / 100), 20, 'rgb(197, 60, 261)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'Click here to enter the game', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (96 / 100) < 25)? canvas.width - canvas.width * (96 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'enterGame', true); pauseButton = new button(canvas.width * (73 / 100), canvas.height * (19 / 100), canvas.width - canvas.width * (98 / 100), 5, 'rgba(197, 60, 261, 0.2)', { inUse: true, color: 'rgb(30, 33, 63)', width: 3 }, { text: 'Pause the game', color: 'yellow', font: `normal ${(canvas.width - canvas.width * (96 / 100) < 25)? canvas.width - canvas.width * (96 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'rgb(30, 33, 63)', strokeWidth: 1 }, 'enterGame', false); gameOverTitle = new button(canvas.width/2, canvas.height * (40 / 100), 0, 0, 'rgba(0, 0, 0, 0)', { inUse: false }, { text: 'GAME OVER!', color: 'red', font: `normal ${(canvas.width - canvas.width * (89 / 100) < 60)? canvas.width - canvas.width * (89 / 100): 60}px Luckiest Guy`, strokeInUse: true, strokeColor: 'black', strokeWidth: 3 }, 'title', true); endingLeaveButton = new button(canvas.width/2, canvas.height / 2 + player.r + 40 + (((canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20) * 2), (canvas.width - canvas.width * (93 / 100) < 30)? canvas.width - canvas.width * (93 / 100): 30, (canvas.height - canvas.height * (93 / 100) < 20)? canvas.height - canvas.height * (93 / 100): 20, 'gray', { inUse: true, color: 'black', width: 3 }, { text: 'RESTART GAME', color: 'red', font: `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`, strokeInUse: true, strokeColor: 'black', strokeWidth: 1 }, 'restart', true); } createButtons(); // volume bars constructor let volumeBar = class{ constructor(text, x, y, width, height, color, percentage, id){ this.text = text; this.x = x; this.y = y; this.originalPosition = {x: this.x, y: this.y}; this.width = width; this.height = height; this.color = color; this.percentage = percentage; this.mouseOver = false; this.mouseDown = false; this.id = id; } draw(){ c.save(); c.strokeStyle = this.color.strokeStyle; c.lineWidth = 3; c.fillStyle = 'black'; c.fillRect(this.x, this.y, this.width, this.height); c.fillStyle = this.color.fillStyle; c.fillRect(this.x, this.y, this.width * (this.percentage / 100), this.height); c.strokeRect(this.x, this.y, this.width, this.height); c.lineWidth = 1; c.font = `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`; c.textAlign = 'left'; c.textBaseline = "middle"; c.fillStyle = this.text.color; c.strokeStyle = this.text.strokeColor; c.fillText(this.text.text, this.x + 5, this.y + (this.height / 2)); c.strokeText(this.text.text, this.x + 5, this.y + (this.height / 2)); let textWidth = c.measureText(this.percentage + '%').width; c.fillText(this.percentage + '%', this.x + this.width - textWidth - 5, this.y + (this.height / 2)); c.strokeText(this.percentage + '%', this.x + this.width - textWidth - 5, this.y + (this.height / 2)); c.restore(); } update(){ this.x = this.originalPosition.x + Math.cos(buttonsIncrement) * 10; this.y = this.originalPosition.y + Math.sin(buttonsIncrement) * 5; if((mouse.x > this.x && mouse.x < this.x + this.width) && (mouse.y > this.y && mouse.y < this.y + this.height)){ this.mouseOver = true; } else { this.mouseOver = false; } if(this.mouseDown){ let distance = mouse.x - this.x; if(distance > this.width){ distance = this.width; } if(distance < 0){ distance = 0; } if(this.id == 'music'){ musicVolume = Math.floor(100 * (distance / this.width)); this.percentage = musicVolume; updateMusicVolume(); } if(this.id == 'soundEffects'){ soundEffectsVolume = Math.floor(100 * (distance / this.width)); this.percentage = soundEffectsVolume; } } this.increment += 0.01; this.draw(); } } let musicVlmBar, soundsVlmBar; function createVolumeBars(){ c.save(); c.font = `normal ${(canvas.width - canvas.width * (94 / 100) < 25)? canvas.width - canvas.width * (94 / 100): 25}px Luckiest Guy`; let levelEffectMeasuredText = c.measureText(levelEffect.text.text + ' = tru'); c.restore(); musicVlmBar = new volumeBar({text: 'Music Volume', color: 'yellow', strokeColor: 'rgb(30, 33, 63)'}, levelEffect.x - (levelEffectMeasuredText.width / 2) - levelEffect.extraWidth, levelEffect.y + levelEffect.extraHeight + levelEffect.textSize, levelEffectMeasuredText.width + levelEffect.extraWidth * 2 + 1, levelEffectMeasuredText.fontBoundingBoxAscent + 20, {fillStyle: 'rgb(197, 60, 261)', strokeStyle: 'rgb(30, 33, 63)'}, musicVolume, 'music'); soundsVlmBar = new volumeBar({text: 'Sounds Volume', color: 'yellow', strokeColor: 'rgb(30, 33, 63)'}, levelEffect.x - (levelEffectMeasuredText.width / 2) - levelEffect.extraWidth, levelEffect.y + levelEffect.extraHeight * 2 + levelEffect.textSize * 3 - 5, levelEffectMeasuredText.width + levelEffect.extraWidth * 2, levelEffectMeasuredText.fontBoundingBoxAscent + 20, {fillStyle: 'rgb(197, 60, 261)', strokeStyle: 'rgb(30, 33, 63)'}, soundEffectsVolume, 'soundEffects'); } createVolumeBars(); // function that restarts the game function restart(e){ // 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; level = 0; wave = 0; exps = 0; maxExps = 100; pause = false; expsExplosion = []; enemiesLeft = 0; try{ stopSpawnInterval(); } catch{}; spawnEnemies(); try{ stopDialogInterval(); } catch{} dialogCount = 0; startDialogInterval = ''; dialogState = 'onprogress'; addDialog({text: "Hello and welcome to my game! My name is Karak10 and this is the first game I have ever created. If I coded this correctly, clicking your screen should make the next dialog appear.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); endingScene = 0; opacity = 0; opacityIncrement = 0.001; policeCars.forEach((policeCar)=>{ policeCar.x = policeCar.originalPosition.x; policeCar.y = policeCar.originalPosition.y; policeCar.angle = policeCar.originalPosition.angle; policeCar.lastAngle = policeCar.originalPosition.angle; policeCar.state = 'rotating'; policeCar.num = 0; }) // draws background c.clearRect(0, 0, canvas.width, canvas.height); // updates imageData to remove blood from screen imageData = c.getImageData(0, 0, canvas.width, canvas.height); } // function that updates the particles function updateParticles(){ // 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 > canvas.width - bullet.r | bullet.y - bullet.r < 0 | bullet.y > canvas.height - 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); // checks if there are enemies to be removed enemies.forEach((enemy, i)=>{ // checks if health is less than zero if(enemy.health <=0){ // increases score score += 1; // if score is bigger than highscore updates highscore if(score > highscore){ highscore = score; } // removes the enemy enemies.splice(i, 1); // decreases the enemiesLeft variable enemiesLeft -= 1; // checks if explosion_effect is true if(explosion_effect){ // 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 = enemy.x; let y = enemy.y; let r = enemy.r / 5; let color = enemy.cl; playSoundEffect(boomSoundEffect, 0, 'boom'); explosionParticles.push(new explosion(x, y, r, color, velocity, 'death-explosion')); } } if(enemiesLeft == 0){ if(wave == 1){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Great job, you are really good at it, those are the normal type of.... um... \"monsters\"... that you will be facing throughout the game, I have created two more types though, to make the game a little bit more entertaining.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 11; } else if(wave == 2){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Very well, you are doing pretty good, so I think it is time to add another enemey to the game, to make the waves a little bit more challenging.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 15; } else if(wave == 3){ dialogState = 'onprogress'; dialog = []; addDialog({text: "They weren't too hard, were they? They do are easy the truth is, but they can be annoying, especially when more enemies are around, so try getting rid of them as early as you can.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 19; } else if(wave == 4){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Done already? That's just like you, always gets the job done, quickly and clean, you should be given a raise or something, sadly, I have no money to give you, but we can become friend if you want this.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 21; } else if(wave == 5){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Another wave has been cleared, five waves left, I don't know if this will motivate you to continue, but yes, there is an actual ending, in fact, there are three different endings that exist currently in the game, will you get the good ending though?", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 23; } else if(wave == 6){ dialogState = 'onprogress'; dialog = []; addDialog({text: "It seems it now is a great time to add one more and last type of monster to the game, the 'tank monster'.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 26; } else if(wave == 7){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Did you like the new monster? Those should raise the difficulity of the waves a little, we have no time to waste though, the end is near, click your screen so that the next wave begins and we will speak more after you clear it.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 29 } else if(wave == 8){ dialogState = 'onprogress'; dialog = []; addDialog({text: "There isn't much time left, you gotta finish those two waves quickly, since we are friends I will make the next wave a little bit easier, it's too late to turn back now, you have to finish what you started.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 31 } else if(wave == 9){ dialogState = 'onprogress'; dialog = []; addDialog({text: "You reached the final wave, you really are patient to go through all those waves and kill all those monsters, I'm glad you didn't give up and stay till the end, it makes me really happy.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 33 } else if(wave == 10){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Everything is over now, you did a great job, you really did, however, I'm afraid we have no much time left to celebrate your victory.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 60); dialogCount = 36 gameplayMusic1.pause(); } } } }); // 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(); }); // updates the exps explosion particles expsExplosion.forEach((particle, i)=>{ particle.update(); // if opacity is less or equal to zero it removes particle if(particle.alpha <= 0){ expsExplosion.splice(i, 1); } }); // updates the joysticks joyStick.update(player); shootJoyStick.update(); // removes the click event listener that restarts the game canvas.removeEventListener('click', restart); } // function that draws the particles function drawParticles(){ // 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); // draws bullets bullets.forEach((bullet, i)=>{ bullet.draw(); }); // draws the player player.draw(); // draws the enemies enemies.forEach((enemy)=>{ enemy.draw(); }); // draws the explosion particles explosionParticles.forEach((particle, i)=>{ particle.draw(); }); // draws the health bars of the enemies enemies.forEach((enemy)=>{ enemy.drawHealthBar(); }); // draws the exps explosion particles expsExplosion.forEach((particle, i)=>{ particle.draw(); }); // draws the joysticks joyStick.draw(); shootJoyStick.draw(); } // function that creates game over screen function gameOver(){ try{ pauseDialogInterval(); }catch{} gameplayMusic1.pause(); if(level > 0 || exps > 0){ if(gameOverMusicHasStarted == false){ gameOverMusic.currentTime = 0; gameOverMusic.volume = 1; gameOverMusicHasStarted = true; } pauseButton.mouseOver = false; c.fillStyle = 'black'; c.fillRect(0, 0, canvas.width, canvas.height); let aspectRatio = image7.naturalWidth / image7.naturalHeight; c.drawImage(image7, 0, 0, canvas.width, canvas.height / aspectRatio); c.fillStyle = 'yellow'; c.strokeStyle = 'black'; c.lineWidth = 2; c.font = `normal ${(canvas.width - canvas.width * (89 / 100) < 60)? canvas.width - canvas.width * (89 / 100): 60}px Luckiest Guy`; c.textAlign = 'center'; let ttxt = 'GAME OVER!'; c.fillText(ttxt, canvas.width / 2, canvas.height * (40 / 100)) c.strokeText(ttxt, canvas.width / 2, canvas.height * (40 / 100)); leaveButton.update(); } else{ if(goodEndingMusicHasStarted == false){ goodEndingMusic.currentTime = 0; goodEndingMusic.volume = 1; goodEndingMusicHasStarted = true; } c.fillStyle = 'black'; c.fillRect(0, 0, canvas.width, canvas.height); let aspectRatio = image8.naturalWidth / image8.naturalHeight; c.drawImage(image8, 0, 0, canvas.width, canvas.height / aspectRatio); c.fillStyle = 'yellow'; c.strokeStyle = 'black'; c.lineWidth = 2; c.font = `normal ${(canvas.width - canvas.width * (89 / 100) < 60)? canvas.width - canvas.width * (89 / 100): 60}px Luckiest Guy`; c.textAlign = 'center'; let ttxt = 'GAME OVER?'; c.fillText(ttxt, canvas.width / 2, canvas.height * (40 / 100)) c.strokeText(ttxt, canvas.width / 2, canvas.height * (40 / 100)); leaveButton.update(); } } // function that draws the player h ealthbar, the // exps bar and the kills, level, wave counter function healthbarAndScores(){ c.textAlign = 'left'; c.font = 'normal 15px Arial'; // creates exps bar c.fillStyle = 'grey' c.fillRect(canvas.width - (canvas.width / 2), 15, ((canvas.width / 2) - 20), 20); c.fillStyle = 'lightblue'; // it multiplies the width with (exps / 100) so that // as the exps increase the width gets bigger c.fillRect(canvas.width / 2, 15, ((canvas.width / 2) - 20) * (exps / maxExps), 20); c.globalAlpha = 1; c.fillStyle = 'black'; c.fillText('Exps', canvas.width / 2 + 2, 30); c.lineWidth = 2; c.strokeStyle = 'black'; c.strokeRect(canvas.width / 2, 15, (canvas.width / 2) - 20, 20); // creates the health bar c.fillStyle = 'grey' c.fillRect(canvas.width / 2, 40, ((canvas.width / 2) - 20), 20); c.fillStyle = 'lightgreen'; // it multiplies the width with (health / 100) so that // as the health decreases the width gets smaller c.fillRect(canvas.width / 2, 40, ((canvas.width / 2) - 20) * (health / 100), 20); c.globalAlpha = 1; c.fillStyle = 'black'; c.fillText('Health', canvas.width / 2 + 2, 56); c.lineWidth = 2; c.strokeStyle = 'black'; c.strokeRect(canvas.width - (canvas.width / 2), 40, (canvas.width / 2) - 20, 20); c.alignText = 'left'; c.strokeStyle = 'rgb(30, 33, 63)'; c.lineWidth = 2; let spaceInBetween = 5; c.font = `normal ${(canvas.width * (3 / 100) < 40 && canvas.width * (4 / 100) > 20)? canvas.width * (4 / 100):(canvas.width * (3 / 100) <= 20)? 20: 40}px Luckiest Guy`; c.fillStyle = 'yellow'; c.fillText(`Level: ${level}`, 15, 40); c.strokeText(`Level: ${level}`, 15, 40); let levelMeasureText = c.measureText(`Level: ${level}`); c.fillStyle = 'coral'; c.fillText(`Kills: ${score}`, 15, 40 + levelMeasureText.fontBoundingBoxAscent + spaceInBetween); c.strokeText(`Kills: ${score}`, 15, 40 + levelMeasureText.fontBoundingBoxAscent + spaceInBetween); let y1 = 40 + levelMeasureText.fontBoundingBoxAscent + spaceInBetween; let killMeasureText = c.measureText(`Kills: ${score}`); c.fillStyle = 'lightblue'; c.fillText(`Wave: ${wave}`, 15, y1 + killMeasureText.fontBoundingBoxAscent + spaceInBetween); c.strokeText(`Wave: ${wave}`, 15, y1 + killMeasureText.fontBoundingBoxAscent + spaceInBetween) let y2 = y1 + killMeasureText.fontBoundingBoxAscent + spaceInBetween; let waveMeasureText = c.measureText(`Wave: ${wave}`); c.fillStyle = 'pink'; c.fillText(`Enemies: ${enemiesLeft}`, 15, y2 + waveMeasureText.fontBoundingBoxAscent + spaceInBetween); c.strokeText(`Enemies: ${enemiesLeft}`, 15, y2 + waveMeasureText.fontBoundingBoxAscent + spaceInBetween) if(endingScene){ pauseButton.draw(); } else{ pauseButton.update(); } c.setTransform(1,0,0,1,0,0); } // function that draws the background of the home screen function background(){ function laser(x, y, width, height, angle){ c.save(); c.translate(x, y); c.rotate(angle); c.beginPath(); c.moveTo(-width, -height); c.lineTo(-25, 0); c.lineTo(25, 0); c.lineTo(width, -height); c.closePath(); c.fill(); c.restore(); } angleIncrement += 0.001 c.fillStyle = 'rgb(177, 40, 241)'; c.fillRect(0, -100, canvas.width, canvas.height + 100); c.lineWidth = 1; c.fillStyle = 'rgb(206, 118, 172)'; laser(canvas.width/2, canvas.height/2, 100, canvas.height, (Math.PI * 2) + angleIncrement); laser(canvas.width/2, canvas.height/2, 100, canvas.height, (Math.PI) + angleIncrement); laser(canvas.width/2, canvas.height/2, 100, canvas.height, (Math.PI / 3) + angleIncrement); laser(canvas.width/2, canvas.height/2, 100, canvas.height, (Math.PI - Math.PI / 3) + angleIncrement); laser(canvas.width/2, canvas.height/2, 100, canvas.height, (Math.PI + Math.PI / 3) + angleIncrement); laser(canvas.width/2, canvas.height/2, 100, canvas.height, (Math.PI * 2 - Math.PI / 3) + angleIncrement); c.fillStyle = 'yellow'; c.beginPath(); c.arc(canvas.width/2, canvas.height/2 + 40, 130, 0, Math.PI * 2); c.fill(); c.fillStyle = 'rgb(148, 224, 77)'; c.beginPath(); c.arc(100, canvas.height + 200, 400, 0, Math.PI * 2); c.fill(); c.fillStyle = 'rgb(108, 161, 59)'; c.beginPath(); c.arc(100, canvas.height + 240, 400, 0, Math.PI * 2); c.fill(); c.fillStyle = 'rgb(148, 224, 77)'; c.beginPath(); c.arc(canvas.width - 50, canvas.height + 230, 400, 0, Math.PI * 2); c.fill(); c.fillStyle = 'rgb(108, 161, 59)'; c.beginPath(); c.arc(canvas.width - 55, canvas.height + 260, 400, 0, Math.PI * 2); c.fill(); c.setTransform(1,0,0,1,0,0); } // function that draws the pause screen function pauseScreen(){ background(); resumeButton.update(); leaveButton.update(); OptionsButton.update(); pausedGameTitle.update(); c.setTransform(1,0,0,1,0,0); } // function that draws the start screen function startScreen(){ background(); title.update(); startButton.update(); optionsButton2.update(); credits.update(); c.setTransform(1,0,0,1,0,0); } // function that draws the options screen function optionsScreen(){ background(); explosionEffect.update(); levelEffect.update(); backButton.update(); musicVlmBar.update(); soundsVlmBar.update(); c.setTransform(1,0,0,1,0,0); } // function that checks if the mouse is hovered over any // of the buttons, or any of the buttons is touched function checkForButtonClicks(){ if(endingLeaveButton.mouseOver){ alert("What's done can't be undone - William Shakespeare"); } // checks if mouseOver property of leaveButton is true if(leaveButton.mouseOver){ playSound(clickSoundEffect, buttonSoundEffectStartTime); playSound(startScreenMusic, 0); gameplayMusic1.pause(); gameOverMusicHasStarted = false; gameOverMusic.volume = 0; goodEndingMusicHasStarted = false; goodEndingMusic.volume = 0; speechSoundEffect.volume = 0; // if true then sets hasStarted, paused, // and leaveButton.mouseOver to false hasStarted = false; paused = false; leaveButton.mouseOver = false; } // checks if mouseOver property of resumeButton is true if(resumeButton.mouseOver){ playSound(clickSoundEffect, buttonSoundEffectStartTime); // if true then sets pause // and resumeButton.mouseOver to false pause = false; resumeButton.mouseOver = false; try{ try{ if(dialogState != 'finished'){ startDialogInterval(); } }catch{} }catch{} } // checks if mouseOver property of startButton is true if(startButton.mouseOver && enterGameOpacity < 0.3){ playSound(clickSoundEffect, buttonSoundEffectStartTime); playSound(clickSoundEffect, buttonSoundEffectStartTime); playSound(gameplayMusic1, 0); startScreenMusic.pause(); // if true it restarts the game and // sets hasStarted to true, pause and // startButton.mouseOver to false restart(); hasStarted = true; pause = false; startButton.mouseOver = false; } // checks if mouseOver property of optionsButton2 is true if(optionsButton2.mouseOver && enterGameOpacity < 0.3){ playSound(clickSoundEffect, buttonSoundEffectStartTime); // if true it sets optionsOpened to true // and optionsButton2.mouseOver to false optionsOpened = true; optionsButton2.mouseOver = false; } // checks if mouseOver property of backButton is true if(backButton.mouseOver){ playSound(clickSoundEffect, buttonSoundEffectStartTime); creditsOpened = false; optionsOpened = false; backButton.mouseOver = false; } // checks if mouseOver property of explosionEffect button is true if(explosionEffect.mouseOver){ playSound(clickSoundEffect, buttonSoundEffectStartTime); // if true checks if explosion_effect is true or false, and // sets it to opposite of what it currently is if(explosion_effect){ explosion_effect = false; } else{ explosion_effect = true; } // and then it sets mouseOver property to false explosionEffect.mouseOver = false; } // checks if mouseOver property of levelEffect button is true if(levelEffect.mouseOver){ playSound(clickSoundEffect, buttonSoundEffectStartTime); // if true checks if level_up_effect is true or false, and // sets it to opposite of what it currently is if(level_up_effect){ level_up_effect = false; } else{ level_up_effect = true; } // and then it sets mouseOver property to false levelEffect.mouseOver = false; } if(OptionsButton.mouseOver){ playSound(clickSoundEffect, buttonSoundEffectStartTime); optionsOpened = true; OptionsButton.mouseOver = false; } if(enterGame.mouseOver){ playSound(swallowSoundEffect, 0.3); playSound(startScreenMusic, 0); startSoundEffectLoop(bulletSoundEffect); startSoundEffectLoop(hitMarkerEffect); startSoundEffectLoop(boomSoundEffect); startSoundEffectLoop(damageSoundEffect); startSoundEffectLoop(gameOverMusic); startSoundEffectLoop(goodEndingMusic); startSoundEffectLoop(levelUpSoundEffect); startSoundEffectLoop(speechSoundEffect); enterGameOpacity = 1; swallowSoundEffect.addEventListener('ended', (e)=>{ hasEnteredTheGame = true; enterGame.mouseOver = false; }); enterGame.mouseOver = false; createButtons(); createVolumeBars(); } if(pauseButton.mouseOver){ playSound(clickSoundEffect, buttonSoundEffectStartTime); pause = true; pauseButton.mouseOver = false; } if(credits.mouseOver && enterGameOpacity < 0.3){ playSound(clickSoundEffect, buttonSoundEffectStartTime); credits.mouseOver = false; creditsOpened = true; } } function checkForDialogs(){ if((dialogState == 'finished' && pause == false) && health > 0 && pauseButton.mouseOver == false){ if(dialogCount == 0){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Very well, it seems like everything works as expected, please, try moving around, you can use the arrow keys on your keyboard or the \"move\" joystick if you are using a touch screen.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 2; } else if(dialogCount == 3){ dialogState = 'onprogress'; dialog = []; addDialog({text: "You wanna know another trick? You can actually shoot bullets too, to do that either click and hold your mouse button where you want to shoot or use the \"shoot\" joystick.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 4; } else if(dialogCount == 5){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Before we begin, take a good look at your screen, you gotta pay attention at your health bar at all times, since if you die the game will restart, and you are gonna have to listen to my boring speech all over again.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 6; } else if(dialogCount == 6){ dialogState = 'onprogress'; dialog = []; addDialog({text: "I have also created an exps bar, is there really a meaning to it though? Leveling up doesn't make you stronger or anything, perhaps there is a reason it exists, who knows.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 7; } else if(dialogCount == 7){ dialogState = 'onprogress'; dialog = []; addDialog({text: "To pause the game either click the pause button or press esc, from there you can access the options screen, and turn off some effects for better performance or change the volume settings.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 8; } else if(dialogCount == 8){ dialogState = 'onprogress'; dialog = []; addDialog({text: "I know you don't really want to spend the rest of your day shooting circles in my ugly game, so I'm only gonna give you 10 waves, complete these and the game will be finished, click your screen when you are ready for the first wave.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 9; } else if(dialogCount == 9){ dialogCount = 10; dialog = []; wave = 1; spawnEnemies(); enemiesLeft = wave * 5; } else if(dialogCount == 11){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Those monsters aren't very hard to kill, let too many gather together however and they could get dangerous, I don't really think they will be a problem for you, just be careful and have fun.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 12; } else if(dialogCount == 12){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Click your screen when you are ready for the second wave.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 13; } else if(dialogCount == 13){ dialogCount = 14; dialog = []; wave = 2; spawnEnemies(); enemiesLeft = wave * 5; } else if(dialogCount == 15){ dialogState = 'onprogress'; dialog = []; addDialog({text: "The new type of enemy you will face, is the, umm... 'kid monsters'... Do not let their appearence trick you though, they may look cute but they can be very dangerous, they do have less health, but they also run faster and are harder to hit, since they are small, be careful with those monsters.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 16; } else if(dialogCount == 16){ dialogState = 'onprogress'; dialog = []; addDialog({text: "When you are ready to meet those new enemies, click your screen and the wave will begin, good luck.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 17; } else if(dialogCount == 17){ dialogCount = 18; dialog = []; wave = 3; spawnEnemies(); enemiesLeft = 10; } else if(dialogCount == 19){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Let's continue, click your screen and the next wave will begin, there is no time to waste, those monsters aren't gonna get killed on their own.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 19.5; } else if(dialogCount == 19.5){ dialog = []; dialogCount = 20; wave = 4; spawnEnemies(); enemiesLeft = 15; } else if(dialogCount == 21){ dialogState = 'onprogress'; dialog = []; addDialog({text: "You are getting closer to the end, it will take a while, I will introduce you to one more monster later, for now let's just have fun, killing monsters, gaining exps, isn't that how people get entertained now days?", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 21.1; } else if(dialogCount == 21.1){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Anyway, see you later, have fun, and remember, when you are touched by monsters you lose health, so keep your distance.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 21.2; } else if(dialogCount == 21.2){ dialog = []; dialogCount = 22; wave = 5; spawnEnemies(); enemiesLeft = 20; } else if(dialogCount == 23){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Anyway, in order to finish the game you gotta continue with the next wave, and kill some more monsters, when you are ready click your screen, and the next wave will begin.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 24; } else if(dialogCount == 24){ dialog = []; dialogCount = 25; wave = 6; spawnEnemies(); enemiesLeft = 20; } else if(dialogCount == 26){ dialogState = 'onprogress'; dialog = []; addDialog({text: "This monster is bigger, has way more health than normal enemies, does more damage if it touches you, but also moves slower. They can be annoying, because they take a lot of effort to kill, but they really aren't too hard, when you are ready to face them click your screen.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 27; } else if(dialogCount == 27){ dialog = []; dialogCount = 28; wave = 7; spawnEnemies(); enemiesLeft = 5; } else if(dialogCount == 29){ dialog = []; dialogCount = 30; wave = 8; spawnEnemies(); enemiesLeft = 20; } else if(dialogCount == 31){ dialog = []; dialogCount = 32; wave = 9; spawnEnemies(); enemiesLeft = 15; } else if(dialogCount == 33){ dialogState = 'onprogress'; dialog = []; addDialog({text: "Let's do this now, let's beat the last wave, this will be a little bit more challenging since it is the last, the enemies will spawn much faster, so be careful.", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 50); dialogCount = 34; } else if(dialogCount == 34){ dialog = []; dialogCount = 35; wave = 10; spawnEnemies(); enemiesLeft = 20; } else if(dialogCount == 36){ dialogState = 'onprogress'; dialog = []; addDialog({text: "It was nice to meet you, dear friend, but it is now time to wake up, you cannot keep running away from reality any longer, it is your responsibility to see the world how it truly is, how you made it be, I am sorry..", color: 'white', font: `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`}, {inUse: true, color: 'black', width: 1 }, canvas.width * (10 / 100), canvas.height * (35 / 100), canvas.width * (80 / 100), 24, 60); dialogCount = 37; } else if(dialogCount == 37){ if(trueEndingMusiHasStarted == false){ playSound(trueEndingMusic, 0); trueEndingMusiHasStarted = true; } dialogCount = 38; endingScene = 1; stopSpawnInterval(); } } } // triggers when canvas is clicked canvas.addEventListener('click', (e)=>{ // runs the checkForButtonClicks function I wrote above checkForDialogs(); checkForButtonClicks(); }); // triggers when a touch ends canvas.addEventListener('touchend', (e)=>{ // prevents mouse events from triggering e.preventDefault(); // runs the checkForButtonClicks function I wrote above checkForButtonClicks(); checkForDialogs(); // resets touch.x and touch.y values to zero touch.x = 0; touch.y = 0; }); canvas.addEventListener('mousedown', (e)=>{ if(musicVlmBar.mouseOver){ musicVlmBar.mouseDown = true; } if(soundsVlmBar.mouseOver){ soundsVlmBar.mouseDown = true; } }); window.addEventListener('mouseup', (e)=>{ soundsVlmBar.mouseDown = false; musicVlmBar.mouseDown = false; }); // pauses the game when esc is pressed window.addEventListener('keyup', (e)=>{ if(health > 0){ if(e.keyCode == 27){ if(pause){ // if options screen is open // then it closes options screen if(optionsOpened || creditsOpened){ optionsOpened = false; creditsOpened = false; } // else is closes pause screen else{ try{ if(dialogState != 'finished'){ startDialogInterval(); } }catch{} pause = false; } } else{ try{ pauseDialogInterval(); }catch{} optionsOpened = false; pause = true; } } } }); // touch events for the volume bars let musicTouchIndex; let musicTouchIsActive = false; let musicTouchPosition = 0; let SoundEffectsTouchIndex; let SoundEffectsTouchIsActive = false; let SoundEffectsTouchPosition = 0; let isOverVolume = function(touch, volumeObject){ if(optionsOpened == true){ if((touch.clientX > volumeObject.x && touch.clientX < volumeObject.x + volumeObject.width) && (touch.clientY > volumeObject.y && touch.clientY < volumeObject.y + volumeObject.height)){ return true; } else { return false; } } else { return false; } } canvas.addEventListener('touchstart', (e)=>{ e.preventDefault(); let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; let touches = Array.from(e.touches); touches.forEach((touch, i) =>{ let touchOnCanvas = { clientX: touch.clientX - left, clientY: touch.clientY - top } if(isOverVolume(touchOnCanvas, musicVlmBar)){ musicTouchIndex = i; musicTouchIsActive = true; musicTouchPosition = touchOnCanvas.clientX; let distance = touchOnCanvas.clientX - musicVlmBar.x; if(distance > musicVlmBar.width){ distance = musicVlmBar.width; } if(distance < 0){ distance = 0; } musicVolume = Math.floor(100 * (distance / musicVlmBar.width)); musicVlmBar.percentage = musicVolume; updateMusicVolume(); } if(isOverVolume(touchOnCanvas, soundsVlmBar)){ SoundEffectsTouchIndex = i; SoundEffectsTouchIsActive = true; SoundEffectsTouchPosition = touchOnCanvas.clientX; let distance = touchOnCanvas.clientX - soundsVlmBar.x; if(distance > soundsVlmBar.width){ distance = musicVlmBar.width; } if(distance < 0){ distance = 0; } soundEffectsVolume = Math.floor(100 * (distance / soundsVlmBar.width)); soundsVlmBar.percentage = soundEffectsVolume; } }); }); canvas.addEventListener('touchmove', (e)=>{ e.preventDefault(); let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; let touches = Array.from(e.touches); touches.forEach((touch, i)=>{ let touchOnCanvas = { clientX: touch.clientX - left, clientY: touch.clientY - top } if(musicTouchIsActive){ if(Math.abs(musicTouchPosition - touchOnCanvas.x) < touch.radiusX + 10){ musicTouchIndex = i; } } if(SoundEffectsTouchIsActive){ if(Math.abs(musicTouchPosition - touchOnCanvas.x) < touch.radiusX + 10){ SoundEffectsTouchIndex = i; } } }); if(musicTouchIsActive){ try{ let touchOnCanvas = { clientX: e.touches[musicTouchIndex].clientX - left, clientY: e.touches[musicTouchIndex].clientY - top } musicTouchPosition = touchOnCanvas.clientX; let distance = touchOnCanvas.clientX - musicVlmBar.x; if(distance > musicVlmBar.width){ distance = musicVlmBar.width; } if(distance < 0){ distance = 0; } musicVolume = Math.floor(100 * (distance / musicVlmBar.width)); musicVlmBar.percentage = musicVolume; updateMusicVolume(); } catch{} } if(SoundEffectsTouchIsActive){ try{ let touchOnCanvas = { clientX: e.touches[SoundEffectsTouchIndex].clientX - left, clientY: e.touches[SoundEffectsTouchIndex].clientY - top } SoundEffectsTouchPosition = touchOnCanvas.clientX; let distance = touchOnCanvas.clientX - soundsVlmBar.x; if(distance > soundsVlmBar.width){ distance = musicVlmBar.width; } if(distance < 0){ distance = 0; } soundEffectsVolume = Math.floor(100 * (distance / soundsVlmBar.width)); soundsVlmBar.percentage = soundEffectsVolume; } catch{} } }); canvas.addEventListener('touchend', (e)=>{ e.preventDefault(); let box = canvas.getBoundingClientRect(); let left = box.left; let top = box.top; let touches = Array.from(e.changedTouches); touches.forEach((touch, i)=>{ let touchOnCanvas = { clientX: touch.clientX - left, clientY: touch.clientY - top } if(musicTouchIsActive){ if(Math.abs(musicTouchPosition - touchOnCanvas.clientX) < touch.radiusX + 10){ musicTouchIsActive = false; } } if(SoundEffectsTouchIsActive){ if(Math.abs(SoundEffectsTouchPosition - touchOnCanvas.clientX) < touch.radiusX + 10){ SoundEffectsTouchIsActive = false; } } }); }); // this function is used to set // mouseOver properties of paused // screen buttons to false function resetPausedButtons(){ leaveButton.mouseOver = false; resumeButton.mouseOver = false; OptionsButton.mouseOver = false; } // this function is used to set // mouseOver properties of start // screen buttons to false function resetStartScreenButtons(){ startButton.mouseOver = false; optionsButton2.mouseOver = false; credits.mouseOver = false; } // this function is used to set // mouseOver properties of options // screen buttons to false function resetOptionsButtons(){ explosionEffect.mouseOver = false; levelEffect.mouseOver = false; backButton.mouseOver = false; } // police car constructor for the ending scene let policeCar = class{ constructor(x, y, width, height, destinations, speed, angle){ this.x = x; this.y = y; this.originalPosition = {x: x, y: y, angle: angle}; this.width = width; this.height = height; this.destinations = destinations; this.speed = speed; this.num = 0; this.hasFinished = false; this.angle = angle; this.lastAngle = angle; this.state = 'rotating'; } draw(){ c.save(); c.fillStyle = 'black'; c.translate(this.x, this.y); let radians = this.angle * Math.PI / 180; c.rotate(radians); let aspectRatio = image11.naturalWidth / image11.naturalHeight; let width = (player.r * 2) * 5; let height = width / aspectRatio; c.drawImage(image11, -(width / 2), -(height / 2), width, height); c.restore(); } update(){ if(this.state != 'finished'){ let [x1, y1] = [this.x, this.y]; let [x2, y2] = [this.destinations[this.num].x, this.destinations[this.num].y]; let [vX, vY] = [x2 - x1, y2 - y1]; let λ = (vY) / (vX); let radians = Math.atan2(vY, vX); let degrees = radians * 180 / Math.PI; let distance = Math.hypot(vY, vX); let clockWiseDifference; let counterClockWiseDifference; if(this.lastAngle < 0){ if(this.lastAngle > degrees){ clockWiseDifference = 360 + degrees - this.lastAngle; counterClockWiseDifference = (360 + this.lastAngle) - (360 + degrees); } else{ clockWiseDifference = degrees + Math.abs(this.lastAngle); counterClockWiseDifference = 360 + this.lastAngle - degrees; } } else if(this.lastAngle > 0){ if(this.lastAngle > degrees){ clockWiseDifference = 360 - this.lastAngle + degrees; counterClockWiseDifference = 360 - degrees - (360 - this.lastAngle); } else{ clockWiseDifference = degrees - this.lastAngle; counterClockWiseDifference = this.lastAngle + 360 - degrees; } } else if(this.lastAngle == 0){ if(0 > degrees){ clockWiseDifference = 360 + degrees; counterClockWiseDifference = Math.abs(degrees); } else{ clockWiseDifference = degrees; counterClockWiseDifference = 360 - degrees; } } if(distance > 0){ if(clockWiseDifference < counterClockWiseDifference){ if(this.lastAngle < 0){ let finishCondition; if(degrees < 0){ finishCondition = Math.abs(this.lastAngle - degrees) < 1; } else{ finishCondition = Math.abs(degrees - this.lastAngle) < 1; } if(finishCondition){ this.state = 'ready'; } else { this.angle += 0.5; this.lastAngle += 0.5; } } else if(this.lastAngle >= 0){ let finishCondition; if(degrees < 0){ finishCondition = Math.abs(this.lastAngle - (360 + degrees)) < 1; } else{ finishCondition = Math.abs(this.lastAngle - degrees) < 1; } if(finishCondition){ this.state = 'ready'; } else { this.angle += 0.5; this.lastAngle += 0.5; } } } else{ if(this.lastAngle < 0){ if(Math.abs(360 + this.lastAngle) - degrees < 1){ this.state = 'ready'; } else { this.angle -= 0.5; this.lastAngle -= 0.5; } } else { if(Math.abs(this.lastAngle - degrees) < 1){ this.state = 'ready'; } else { this.angle -= 0.5; this.lastAngle -= 0.5; } } } if(this.state == 'ready'){ if(Math.abs(vX) > Math.abs(vY)){ if(vX > 0){ this.x += this.speed; if(this.x > this.destinations[this.num].x){ this.x = this.destinations[this.num].x } } else{ this.x -= this.speed; if(this.x < this.destinations[this.num].x){ this.x = this.destinations[this.num].x; } } this.y = λ * (this.x - x1) + y1; } else{ if(vY > 0){ this.y += this.speed; if(this.y > this.destinations[this.num].y){ this.y = this.destinations[this.num].y; } } else{ this.y -= this.speed; if(this.y < this.destinations[this.num].y){ this.y = this.destinations[this.num].y; } } this.x = (this.y / λ) + x1 - (y1 / λ); } } } else{ if(this.destinations.length - 1 == this.num){ this.x = this.x; this.y = this.y; this.angle = this.angle; this.state = 'finished'; } else{ this.num += 1; this.state = 'rotating'; if(this.lastAngle > 360){ this.lastAngle = this.lastAngle - 360; this.angle = this.angle - 360; } if(this.lastAngle < -360){ this.lastAngle = this.lastAngle + 360; this.angle = this.angle + 360; } } } } this.draw(); } } let carAspectRatio = image11.naturalWidth / image11.naturalHeight; let carWidth = (player.r * 2) * 5; let carHeight = carWidth / carAspectRatio; let policeCar1 = new policeCar(-500, 50, 50, 20, [{x: canvas.width / 2 - (((player.r * 2) * 5) / 2) + 100, y: canvas.height / 2 - ((player.r * 2) + 70)}], 3, 0); let policeCar2 = new policeCar(canvas.width + 500, canvas.height + 50, 50, 20, [{x: canvas.width / 2 + (((player.r * 2) * 5) / 2) - 100, y: canvas.height / 2 + ((player.r * 2) + 100)}], 3, - 170); let policeCar3 = new policeCar(50, canvas.height + 100, 50, 20, [{x: (canvas.width / 2) - 100, y: canvas.height / 2}], 3, -25); let policeCar4 = new policeCar(canvas.width + 50, -90, 50, 20, [{x: (canvas.width / 2) + 100, y: canvas.height / 2 + 30}], 3, 170); let policeCar5 = new policeCar(50, canvas.height + 300, 50, 20, [{x: policeCar3.destinations[0].x - carHeight - 10, y: canvas.height / 2 + 30}], 3, 170); let policeCar6 = new policeCar(-500, canvas.height, 50, 20, [{x: policeCar2.destinations[0].x - carWidth, y: policeCar5.destinations[0].y + (carWidth / 2) + 60}], 3, 170); let policeCar7 = new policeCar(canvas.width + 400, canvas.height + 400, 50, 20, [{x: policeCar2.destinations[0].x + carWidth, y: policeCar2.destinations[0].y + 20}], 3, 170); let policeCar8 = new policeCar(canvas.width + 20, -800, 50, 20, [{x: policeCar4.destinations[0].x + (carHeight) + 30, y: policeCar7.destinations[0].y - (carWidth / 2) - 50}], 3, 170); let policeCar9 = new policeCar(canvas.width + 1800, 60, 50, 20, [{x: policeCar1.destinations[0].x + carWidth, y: policeCar8.destinations[0].y - carWidth}], 3, 170); let policeCar10 = new policeCar(-1800, 500, 50, 20, [{x: policeCar5.destinations[0].x, y: policeCar5.destinations[0].y - carWidth}], 3, -30); let policeCars = [policeCar1, policeCar2, policeCar3, policeCar4, policeCar5, policeCar6, policeCar7, policeCar8, policeCar9, policeCar10]; let endingSceneData; // function that runs again and again to animate the canvas let animate = function(){ c.clearRect(0, 0, canvas.width, canvas.height); c.globalAlpha = 1; if(hasEnteredTheGame){ if(enterGameOpacity > 0){ enterGameOpacity -= 0.006; if(enterGameOpacity < 0){ enterGameOpacity = 0; } } if(hasStarted){ // checks if canvas is scrolled into view, // and if not then pauses the game if(isScrolledIntoView(canvas) == false){ pause = true; } // checks game is not paused if(pause == false || endingScene){ // sets all mouseOver properties of // paused screen buttons to false resetPausedButtons(); // resets mouseOver properties of // options screen buttons to false resetOptionsButtons(); // checks if health is greater than zero if(health > 0){ // clears the canvas c.clearRect(0, 0, canvas.width, canvas.height); // adds the blood on the canvas if blood_effect is true if(blood_effect){ c.putImageData(imageData, 0, 0); } if(endingScene > 0){ if(endingScene == 2){ c.globalAlpha = 1; c.putImageData(imageData, 0,0); player.draw(); if(opacity == 0){ policeCars.forEach((policeCar)=>{ policeCar.update(); }); if(policeCar10.state == 'finished'){ endingSceneData = c.getImageData(0, 0, canvas.width, canvas.height); opacityIncrement = Math.abs(opacityIncrement); endingScene = 3; dialog = []; } } } else if(endingScene == 3){ c.putImageData(endingSceneData, 0, 0); opacity += opacityIncrement; if(opacity >= 1){ opacity = 1; } c.globalAlpha = opacity; gameOverTitle.update(); endingLeaveButton.update(); } else{ drawParticles(); healthbarAndScores(); } if(endingScene != 3){ c.fillStyle = 'black'; c.globalAlpha = opacity; c.fillRect(0, 0, canvas.width, canvas.height); if(opacity <= 1){ opacity += opacityIncrement; if(opacityIncrement > 0){ c.globalAlpha = 1; } if(opacity <= 0){ opacity = 0; } } else if(opacity > 1){ opacityIncrement = (opacityIncrement < 0)? opacityIncrement: -1 * opacityIncrement; opacity += opacityIncrement; endingScene = 2; player.x = canvas.width / 2; player.y = canvas.height / 2; canvas.style.backgroundImage = `url(${image9.src})`; // makes blood red for(let i = 3; i < imageData.data.length; i += 4){ if((imageData.data[i] / 255) < 1){ imageData.data[i] = 0; } else{ imageData.data[i] = 140; imageData.data[i - 1] = 0; imageData.data[i - 2] = 0; imageData.data[i - 3] = 255; } } } } } else{ updateParticles(); healthbarAndScores(); } if(dialog.length > 0){ angleIncrement += 0.1; drawDialog(angleIncrement); } } // if health is not greater zero then it draws the game over screen else{ gameOver(); } } // if page is not viewed then draws the pause screen else{ pauseButton.mouseOver = false; // checks if optionsOpened is true if(optionsOpened){ // resets the mouseOver property of // paused screen buttons to false resetPausedButtons(); // draws the options screen optionsScreen(); } // else if optionsOpened isn't true else{ // resets the mouseOver property of // options screen buttons to false resetOptionsButtons(); // draws the pause screen pauseScreen(); try{ pauseDialogInterval(); }catch{} } } } else { // sets all mouseOver properties of // paused screen buttons to false resetPausedButtons(); if(optionsOpened){ // sets all mouseOver properties of // start screen buttons to false resetStartScreenButtons(); optionsScreen(); } else if(creditsOpened){ resetStartScreenButtons(); background(); c.textAlign = 'left'; let lineHeight; c.font = `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`; let ttxt = 'The game was made by me, Karak10, however, I do not own any of the music or sound effects, and most of the images also are not mine. I am not an artist, just a programmer, and this project took me weeks to make, so I hope you enjoy it. Lastly, I am not hiding that this game is indeed inspired by Pony Island, so there are a lot of similarities you may notice.'; let lines = wrapText(ttxt, canvas.width * (10 / 100), canvas.height * (40 / 100), canvas.width * (80 / 100), 20, {font: `normal px${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20} Luckiest Guy`, stroke: {inUse: true, width: 1}}); lines.forEach((line)=>{ lineHeight = line.y; }); c.lineWidth = 3; c.fillStyle = 'rgb(177, 40, 241)'; c.strokeStyle = 'black'; c.fillRect(canvas.width * (10 / 100) - 20, canvas.height * (40 / 100) - ((canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20) - 20, canvas.width * (80 / 100) + 40, lineHeight - canvas.height * (40 / 100) + 55); c.strokeRect(canvas.width * (10 / 100) - 20, canvas.height * (40 / 100) - ((canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20) - 20, canvas.width * (80 / 100) + 40, lineHeight - canvas.height * (40 / 100) + 55); c.fillStyle = 'yellow'; c.lineWidth = 1; lines.forEach((line)=>{ c.fillText(line.line, canvas.width * (10 / 100), line.y) c.strokeText(line.line, canvas.width * (10 / 100), line.y); }); backButton.update(); } else { // sets all mouseOver properties of // options screen buttons to false resetOptionsButtons(); startScreen(); } } } else { c.fillStyle = 'black'; c.globalAlpha = 1; let aspectRatio = image6.naturalWidth / image6.naturalHeight; if(canvas.height * aspectRatio > canvas.width){ let difference = (canvas.height * aspectRatio) - canvas.width; c.drawImage(image6, - (difference / 2), 0, canvas.height * aspectRatio, canvas.height); } else if(canvas.height * aspectRatio < canvas.width){ let difference = (canvas.width / aspectRatio) - canvas.height; c.drawImage(image6, 0, 0, canvas.width, (canvas.width / aspectRatio) - (difference / 2)); } else{ c.drawImage(image6, 0, 0, canvas.height * aspectRatio, canvas.height); } if(musicState == 'ready'){ if(enterGameOpacity == 0){ enterGame.update(); } } else { c.textAlign = 'left'; c.fillStyle = 'yellow'; c.strokeStyle = 'black'; c.lineWidth = 2; c.font = `normal ${(canvas.width * (3 / 100) < 20 && canvas.width * (3 / 100) > 15)? canvas.width * (3 / 100):(canvas.width * (3/ 100) <= 15)? 15: 20}px Luckiest Guy`; let ttxt = 'The game will be ready to play soon, please wait while the sources are loading...'; let lines = wrapText(ttxt, canvas.width * (10 / 100), canvas.height/2 - 20, canvas.width * (80 / 100), 20, {font: 'normal 20px Luckiest Guy', stroke: {inUse: true, width: 1}}); lines.forEach((line)=>{ c.fillText(line.line, canvas.width * (10 / 100), line.y) c.strokeText(line.line, canvas.width * (10 / 100), line.y); }); } } c.fillStyle = 'black'; c.globalAlpha = enterGameOpacity; c.fillRect(0, 0, canvas.width, canvas.height); c.setTransform(1,0,0,1,0,0); buttonsIncrement += 0.01; requestAnimationFrame(animate); } // begins the animation animate() setTimeout(()=>{ canvas.width = (innerWidth > 500)? 500: innerWidth; canvas.height = innerHeight; canvas.style.border = '3px solid black'; createButtons(); createVolumeBars(); player.x = canvas.width / 2; player.y = canvas.height / 2; repositionJoySticks(); }, 1000) }); });

nothing yet