//Created by Andres Gomez let player_sprite, player_crash; let asteroid_sprite, asteroid_destroyed; let repair_powerup, speed_powerup, resistance_powerup; let canvas, ctx; let obj; window.onload = () =>{ alert("***Instructions to play this game*** \nYou must press on a position and the spaceship will follow you, try to avoid the asteroids"); canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); const game = { p: '', difficult: 'normal', paused: false, winned: false, gameover: false, loaded: false }; let gameOverSound = new Audio('https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/videogame-death-sound-43894.mp3'); let startX = 180, startY = 380; let score = 0; let mouse = {x: 0, y: 0}; let pressed = false; let loadedImages = 0; let limitScore = 5500; let lastScore = 0; let player = new Player(startX, startY, 80, 80); let enemys = []; let powerups = []; let t; player_sprite = new Image(); player_sprite.src = "https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/Player.png"; player_crash = new Image(); player_crash.src = "https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/PlayerCrash.png"; asteroid_sprite = new Image(); asteroid_sprite.src = "https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/Asteroid.png"; asteroid_destroyed = new Image(); asteroid_destroyed.src = "https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/Destroyed.png"; repair_powerup = new Image(); repair_powerup.src = "https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/RepairPowerup.png"; speed_powerup = new Image(); speed_powerup.src = "https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/PowerupSpeed.png"; player_sprite.onload = function(){ loadedImages++; } player_crash.onload = function(){ loadedImages++; } asteroid_sprite.onload = function(){ loadedImages++; } asteroid_destroyed.onload = function(){ loadedImages++; } repair_powerup.onload = function(){ loadedImages++; } speed_powerup.onload = function(){ loadedImages++; } canvas.addEventListener('click', onClick); canvas.addEventListener('touchmove', touchMove); canvas.addEventListener('mousemove', mouseMove); canvas.addEventListener('touchstart', touchStart); canvas.addEventListener('touchend', touchEnd); canvas.addEventListener('mousedown', mouseDown); canvas.addEventListener('mouseup', mouseUp); function onClick(){ if(game.gameover || game.winned){ retry(); } } function touchMove(e){ mouse.x = e.touches[0].clientX; mouse.y = e.touches[0].clientY; player.obj = mouse; } function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; player.obj = mouse; } function touchStart(e){ mouse.x = e.touches[0].clientX; mouse.y = e.touches[0].clientY; pressed = true; } function touchEnd(e){ pressed = false; } function mouseDown(e){ mouse.x = e.clientX; mouse.y = e.clientY; pressed = true; } function mouseUp(e){ pressed = false; } /* ******************************** Motor functions (movement, collisions, logics) ******************************** */ function restartStats(){ lastScore = score; clearInterval(generateAsteroids); clearInterval(generatePowerups); clearInterval(scoreUpdate); enemys = []; powerups = []; player.speedPowerup = 0; score = 0; } function move(timepassed){ if(pressed){ player.iX = 320; player.iH = 420; player.height = player.ogHeight + 20; player.move(mouse.x, mouse.y, timepassed) } else { player.iX = 0; player.iH = 320; player.height = player.ogHeight; } } function checkGameStatus(){ if(player.life <= 0){ game.gameover = true; restartStats(); gameOverSound.play(); gameOverSound = new Audio(); } else if(score >= limitScore){ game.winned = true; restartStats(); } } function checkIsLoaded(){ if(loadedImages == 6 && gameOverSound.readyState >= 1){ game.loaded = true; } } function retry(){ player.life = 100; game.gameover = false; game.winned = false; generateAsteroids = setInterval(createAsteroid, 500); generatePowerups = setInterval(createPowerup, 1200); gameOverSound.src = "https://gitlab.com/SilverKing3434/sololearn-game/-/raw/main/videogame-death-sound-43894.mp3"; scoreUpdate = setInterval(updateScore, 150); player.x = startX; player.y = startY; player.speed = 200; } function removeDestroyedAsteroid(){ for(let i = 0; i < enemys.length; i++){ let asteroid = enemys[i]; if(asteroid.destroyed){ if(asteroid.delay == 1){ enemys.splice(i, 1); } } } } function createAsteroid(){ let asteroidWidth = 70; let asteroidHeight = 70; let pos_x = Math.random() * (canvas.width); let pos_y = Math.random() * (0 - asteroidHeight) - 50; let targetX = player.x; let targetY = player.y; if(Math.random() * 10 >= 6){ targetX = Math.random() * canvas.width; targetY = (canvas.height / 2) + Math.random() * canvas.height; } enemys.push(new Asteroid(pos_x, pos_y, asteroidWidth + (Math.random() * 50), asteroidHeight + (Math.random() * 30), targetX, targetY)); } function createPowerup(){ let probability = Math.random() * 12; let pos_x = 50 + Math.random() * (canvas.width - 100); let pos_y = 100 + Math.random() * (canvas.height - 200); let width = 60; let height = 60; if(probability <= 4){ powerups.push(new RepairPowerup(pos_x, pos_y, width, height)); } else if(probability > 4 && probability <= 7){ powerups.push(new SpeedPowerup(pos_x, pos_y, width, height)); } } function timer(){ for(let i = 0; i < enemys.length; i++){ if(enemys[i].destroyed){ enemys[i].delay++; } } } function updateScore(){ score += 2; } let timeInterval = setInterval(timer, 500); let generateAsteroids = setInterval(createAsteroid, 650); let generatePowerups = setInterval(createPowerup, 1200); let scoreUpdate = setInterval(updateScore, 150); /* ********************************************************** Render ****************** ****************************************** */ function gameOverScreen(){ if(game.gameover){ ctx.font = "50px Arial"; ctx.fillStyle = "yellow"; ctx.fillText("Game over!! ", (canvas.width / 2) - 125, canvas.height / 2); ctx.font = "20px Arial"; ctx.fillText("Click or touch to retry", (canvas.width / 2) - 85, (canvas.height / 2) + 50); } } function winScreen(){ if(game.winned){ ctx.font = "25px Arial"; ctx.fillStyle = "yellow"; ctx.fillText("You winned!! your score: " + lastScore, (canvas.width / 2) - 155, canvas.height / 2); ctx.font = "20px Arial"; ctx.fillText("Click or touch to retry", (canvas.width / 2) - 85, (canvas.height / 2) + 50); } } function drawAsteroid(timepassed){ if(enemys.length > 0){ for(let i = 0; i < enemys.length; i++){ let ast = enemys[i]; if(ast){ ast.draw(); ast.move(timepassed); } if(ast.x >= canvas.width || ast.y >= canvas.height || (ast.x <= 0 && ast.y > 0)){ enemys.splice(i, 1); i--; } } } } function drawPowerups(){ if(powerups.length > 0){ for(let i = 0; i < powerups.length; i++){ let power_up = powerups[i]; power_up.draw(); } } } let text = "Loading game"; function loadingScreen(){ ctx.beginPath(); ctx.fillStyle = "#2f2f4f"; ctx.fillRect(0, 0, canvas.width, canvas.height); text+= "."; if(text == "Loading game..."){ text = "Loading game"; } ctx.beginPath(); ctx.font = "40px Arial"; ctx.fillStyle = "yellow"; ctx.fillText(text, (canvas.width / 2) - 125, canvas.height / 2); ctx.closePath(); } t = Date.now(); function drawInfo(fps, angle){ ctx.beginPath(); ctx.font = "bold 25px Arial"; ctx.fillStyle = "yellow" ; //These texts just are game informations, like angles, positions ands others things /* ctx.fillText(`FPS: ${fps} | Angulo: ${parseInt(angle)}º`, 30, 60); ctx.fillText(`Player X: ${player.x.toFixed(3)} | Y: ${player.y.toFixed(3)}`, 30, 60); ctx.fillText(`Hipotenusa: ${parseInt(player.hip)} | Total objects: ${enemys.length + powerups.length + 1}`, 30, 90); */ ctx.fillText(`Life: ${player.life} | Score: ${score}`, 30, 30); ctx.stroke(); ctx.closePath(); } function updateGame(){ let timepassed = (Date.now() - t) / 1000; let fps = Math.round(1 / timepassed); t = Date.now(); ctx.clearRect(0, 0, innerWidth, innerHeight); canvas.width = innerWidth; canvas.height = innerHeight; checkIsLoaded(); if(game.loaded){ checkGameStatus(); if(!game.gameover && !game.winned){ player.draw(); drawPowerups(); drawAsteroid(timepassed); removeDestroyedAsteroid(); player.powerUpCollision(powerups); drawInfo(fps, player.angle * (180 / Math.PI)); move(timepassed); player.enemyCollision(enemys); } else if(game.gameover){ gameOverScreen(); } else if(game.winned){ winScreen(); } } else { loadingScreen(); } requestAnimationFrame(updateGame); } updateGame(); } /* ********************************************************* Classes ****************** ****************************************** */ /* ----------------Player */ class Player{ constructor(x, y, width, height){ this.x = x; this.y = y; this.width = width; this.height = height; this.ogHeight = height; this.image = player_sprite; this.iX = 0; this.iY = 0; this.iW = 320; this.iH = 320; this.nx = 0; this.ny = 0; this.hip = 0; this.obj = {}; this.resitance = 0; this.speedPowerup = 0; this.speed = 200; this.life = 100; this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); this.angle = 0; } move(x, y, timepassed = 1){ let dx = x - this.x; let dy = y - this.y; let dir = Math.atan2(dx, dy); this.hip = Math.hypot(dx, dy); let move_1 = Math.sin(dir) * (this.speed + this.speedPowerup); let move_2 = Math.cos(dir) * (this.speed + this.speedPowerup); if(this.hip > 15){ this.x += move_1 * timepassed; this.y += move_2 * timepassed; } } enemyCollision(arr = Array){ for(let i = 0; i < arr.length; i++){ let enemy = arr[i]; let dx = this.x - enemy.x; let dy = this.y - enemy.y; let distance = Math.hypot(dx, dy); if(distance <= 80 && !enemy.destroyed){ this.life -= 15; this.speedPowerup -= 25; enemy.speed = 0; enemy.destroyed = true; enemy.image = asteroid_destroyed; } } } powerUpCollision(arr = Array){ for(let i = 0; i < arr.length; i++){ let power_up = arr[i]; let dx = power_up.x - this.x; let dy = power_up.y - this.y; let distance = Math.hypot(dx, dy); if(distance <= 50){ power_up.powerUp(this); arr.splice(i, 1); i--; } } } logic(){ if(this.life <= 30){ this.speed = 130; this.image = player_crash; } else { this.speed = 200; this.image = player_sprite; } if(this.life <= 0){ this.life = 0; } if(this.life >= 100){ this.life = 100; } if(this.speedPowerup >= 100){ this.speedPowerup = 100; } if(this.speedPowerup <= 0){ this.speedPowerup = 0; } } draw(){ this.logic(); let dx = this.obj.x - this.x; let dy = this.obj.y - this.y; this.angle = Math.atan2(dx, -dy); //in radians this.ctx.beginPath(); this.ctx.save(); this.ctx.translate(this.x, this.y); this.ctx.rotate(this.angle); this.ctx.drawImage(this.image, this.iX, this.iY, this.iW, this.iH, -this.width / 2, -this.height / 2, this.width, this.height); this.ctx.restore(); } } /* ----------------Asteroid */ class AsteroidLogic{ constructor(x, y, width, height, targetX, targetY){ this.x = x; this.y = y; this.width = width; this.height = height; this.targetX = targetX; this.targetY = targetY; this.image = asteroid_sprite; this.delay = 0; //Delay to delete the object this.destroyed = false; this.speed = 120 + (Math.random() * 100); this.rotateAngle = Math.random() * 2; this.ctx = document.getElementById('canvas').getContext('2d'); let dx = this.targetX - this.x; let dy = this.targetY - this.y; this.dir = Math.atan2(dx, dy); } move(timepassed){ let move_x = Math.sin(this.dir) * this.speed; let move_y = Math.cos(this.dir) * this.speed; this.x += move_x * timepassed; this.y += move_y * timepassed; } draw(){ this.ctx.save(); this.ctx.beginPath(); this.ctx.translate(this.x, this.y); this.ctx.rotate(this.rotateAngle); this.ctx.drawImage(this.image, 0, 0, 320, 320, -this.width / 2, -this.height / 2, this.width, this.height); this.ctx.closePath(); this.ctx.restore(); } } class Asteroid extends AsteroidLogic{ constructor(x, y, width, height, targetX, targetY){ super(x, y, width, height, targetX, targetY); } } /* ------------Powerups */ class Powerup{ constructor(x, y, width, height){ this.x = x; this.y = y; this.width = width; this.height = height; this.image; this.ctx = document.getElementById('canvas').getContext('2d'); } powerUp(obj = Object){ } draw(){ this.ctx.save(); this.ctx.translate(this.x, this.y); this.ctx.drawImage(this.image, 0, 0, 320, 320, -this.width / 2, - this.height / 2, this.width, this.height) this.ctx.restore(); } } class RepairPowerup extends Powerup{ constructor(x, y, width, height){ super(x, y, width, height); this.image = repair_powerup; } powerUp(obj=Object){ obj.life += 25; } } class SpeedPowerup extends Powerup{ constructor(x, y, width, height){ super(x, y, width, height); this.image = speed_powerup; } powerUp(obj=Object){ obj.speedPowerup += 50; } }

Space Game | v.1.0