var scene; var ctx; var direction = 0 var speed = 0 function randomInt(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min } function Player(){ this.x = innerWidth/2 - 30 this.y = innerHeight - (60 + 20) this.width = 60 this.height = 60 this.health = 100 this.score = 0 this.dead = false } function Fruit(vx, vy){ this.x = Math.floor(Math.random() * innerWidth) this.y = 0 this.width = 30 this.height = 20 this.vx = vx this.vy = vy this.pickLocation = function(){ this.x = Math.floor(Math.random() * innerWidth) this.y = 0 } this.move = function(){ this.y += this.vy } } function Bullet(){ this.x = player.x + (player.width/4) this.y = player.y + player.height this.width = 30 this.height = 20 this.vx = 0 this.vy = 5 this.isShooting = false this.shoot = function(){ this.y -= this.vy } } function Collide(rect1, rect2){ return rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y } //create the player var player = new Player() //create and push the instance of bullet to bullet array var numberOfBullets = 10 var bullets = [] for(var i = 0; i < numberOfBullets; i++){ bullets.push(new Bullet()) } //create and push the instance of fruit to fruit array var numberOfFruits = 1 var fruits = [] for(var i = 0; i < numberOfFruits; i++){ var vx = 0 var vy = randomInt(2, 5) fruits.push(new Fruit(vx, vy)) } //shoot button var index = 0 function shoot(){ if(index < bullets.length){ var bullet = bullets[index++] numberOfBullets -= 1 bullet.isShooting = true } } // initialize the scene const init = () => { //draw the canvas scene = new Scene({ canvas: document.getElementById("cvs"), width: innerWidth, height: innerHeight, controls:[{event:"joystick", style:{dynamic:true}}], debug: false }); ctx = scene.ctx; scene.mainLoop(animate); //draw the joystick scene.canvas.addEventListener("joystick", e => { direction = e.detail.angle; speed = Math.min(e.detail.magnitude, 60); }); }; // animate the scene const animate = () => { ctx.clearColor(0, 0, scene.width, scene.height); //draw the player var playerImg = new Image() playerImg.src = "https://dl.dropbox.com/s/17w5lxrnqyjslr2/images__37_-removebg-preview.png?raw=1" ctx.drawImage(playerImg, player.x, player.y, player.width, player.height); //draw the bullet var bulletImg = new Image() bulletImg.src = "https://dl.dropbox.com/s/ixwa2bzj1pbrwpe/IMG_20200912_115138.png?raw=1" for(var i = 0; i < bullets.length ; i++){ ctx.drawImage(bulletImg, bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height) if(bullets[i].isShooting) { bullets[i].shoot() } } //draw the fruit var fruitImg = new Image() fruitImg.src = "https://dl.dropbox.com/s/qmdt2rw9m0o8x0c/109-1097302_ufo-clipart-sprite-ufo-pixel-png.png?raw=1" for(var i = 0; i < numberOfFruits; i++){ ctx.drawImage(fruitImg, fruits[i].x, fruits[i].y, fruits[i].width, fruits[i].height) //the player collides with the fruits if(Collide(player, fruits[i])){ fruits[i].pickLocation() player.health -= 1 } //the fruits collide with the bottom of the screen if(fruits[i].y > innerHeight - fruits[i].height){ fruits[i].pickLocation() }else{ fruits[i].move() } } //the bullets collide with the fruits const bulletsShooting = bullets.filter(element => element.isShooting === true) for(var bulletShooting of bulletsShooting){ for(var i = 0; i < numberOfFruits; i++){ if(Collide(bulletShooting, fruits[i])){ fruits.splice(fruits.indexOf(fruits[i]), 1) numberOfFruits -= 1 player.score += 10 } } } //whenever player gets to the outside of the canvas, back to the normal position for(var i = 0; i < numberOfBullets; i++){ if(player.x > innerWidth - player.width){ player.x = innerWidth - player.width } if(player.x < 0){ player.x = 0 } if(player.y > innerHeight - (player.height + bullets[i].height)){ player.y = innerHeight - player.height - bullets[i].height } if(player.y < 0){ player.y = 0 } } //the joystick direction if(scene.joystick.isActive) { let n = new Vector( Math.cos(direction), Math.sin(direction)) .multiply({x:speed * .05, y:speed * .05}); player.x += n.x; player.y += n.y; //the bullets move according to player movement for(var i = 0; i < bullets.length ; i++){ if (bullets[i].isShooting ) continue; bullets[i].x = player.x + (player.width/4) bullets[i].y = player.y + player.height } } scene.joystick.show(); document.getElementById("score").innerHTML = player.score document.getElementById("health").innerHTML = player.health document.getElementById("bullet").innerHTML = numberOfBullets document.getElementById("fruit").innerHTML = numberOfFruits requestAnimationFrame(scene.animationFrame); }; //increment the score of player every 1 second setInterval(function(){ player.score += 1 }, 1000) //increment the numberOfFruits every 10 seconds var incrementOfFruits = 0 setInterval(function(){ incrementOfFruits += 1 numberOfFruits += incrementOfFruits for(var i = 0; i < numberOfFruits; i++){ var vx = 0 var vy = randomInt(2, 5) fruits.push(new Fruit(vx, vy)) } }, 10000) //increment the numberOfBullets every 5 seconds var incrementOfBullets = 2 setInterval(function(){ numberOfBullets += incrementOfBullets for(var i = 0; i < incrementOfBullets; i++){ bullets.push(new Bullet()) } }, 5000) addEventListener("load", init);

space shooter dump