class Abstract { constructor(ctx, src, x, y, width, height, player) { this.ctx = ctx; this.img = new Image(); this.img.src = src; this.img.onload = () => {}; this.x = x; this.y = y; this.width = width; this.height = height; this.health = 100; this.player = player; this.isHealth = false; } draw() { if(this.isHealth == false)this.health_status(); this.ctx.drawImage(this.img, this.x, this.y, this.width, this.height); } health_status() { this.ctx.fillStyle = (this.health >= 50) ? "green":( this.health >= 20 && this.health <= 49)?"yellow":"red"; this.ctx.fillRect(this.x, (this.player == true)? this.y - 10: this.y + this.height + 5, this.health, 10); } } class Player extends Abstract { constructor(ctx, src, x, y, width, height, player) { super(ctx, src, x, y, width, height, player); this.score = 0; } } class HealthKit extends Abstract { constructor(ctx, src, x, y, width, height, player) { super(ctx, src, x, y, width, height, player); this.isHealth = true; } update() { this.y += Math.floor(Math.random() * 10); this.draw(); } } class Bullet { constructor(ctx, x, y, color, player) { this.ctx = ctx; this.x = x; this.y = y; this.color = color; this.player = player; this.height = 5; this.width = 5; } draw() { this.ctx.fillStyle = this.color; this.ctx.fillRect(this.x, this.y, this.width, this.height); } update() { this.y = (this.player == true)?this.y - 10:this.y + 10; this.draw(); } } class Star { constructor(ctx, x, y) { this.ctx = ctx; this.x = x; this.y = y; this.radius = Math.random() * 2; } draw() { this.ctx.beginPath(); this.ctx.fillStyle = (Math.ceil(this.radius) == 2)? "white":"lightgray"; this.ctx.arc(this.x, this.y, this.radius, 0.0, 2*Math.PI, false); this.ctx.fill(); this.ctx.closePath(); } } const noError = () => true; onerror = () => noError(); const jetShootOut = () => { let area = { canvas:document.createElement("canvas"), start(){ let canvas = this.canvas; this.cw = canvas.width = innerWidth; this.ch = canvas.height = innerHeight; this.ctx = canvas.getContext("2d"); canvas.style.backgroundColor = "black"; document.body.insertBefore(this.canvas, document.body.childNodes[1]); this.ctx.clearRect(0, 0, this.cw, this.ch); } } let bottomsheet = document.querySelector("#bottomsheet"); bottomsheet.innerHTML = `

🎌Jet Sh🌝🌝t-out

`; let btn = document.getElementById("startBtn"); area.start(); let cw = area.cw; let ch = area.ch; let ctx = area.ctx; let isPlaying = false; // star params let stars = []; for(let _=0; _<=60; _++){ let [x, y] = [Math.random()*cw, Math.random()*ch]; stars.push(new Star(ctx, x, y)); } // player1 params let player1_image = "https://i.ibb.co/k9xW3wx/jet.png"; let player1 = new Player(ctx, player1_image, cw / 2, ch - 110, 100, 100, true); // player2 params let player2_image = "https://i.ibb.co/L8g3tSX/airplane.png"; let player2 = new Player(ctx, player2_image, cw / 2, 0, 100, 100, false); // player's bullet let bullet1 = []; const pushBullet1 = () => { for(let _=0; _<1; _++) { bullet1.push(new Bullet(ctx, player1.x + (player1.width / 2), player1.y, "lightskyblue", true)); } } //if(isPlaying)setInterval(pushBullet1, 300); // computer's bullet let bullet2 = []; const pushBullet2 = () => { for(let _=0; _<2; _++) { bullet2.push(new Bullet(ctx, player2.x + (player2.width / 2), player2.y,"red", false)); } } // healthkit let healthkit = []; healthkit_image = "https://image.ibb.co/iTrjuU/hospital.png"; const pushHealthKit = () => { for(let _=0; _<1; _++){ let [x, y] = [Math.random() * cw, -(Math.random() * ch)]; healthkit.push(new HealthKit(ctx, healthkit_image, x, y, 30, 30, false)); } } function isCollided(a, b){ return a.x + a.width > b.x && b.x + b.width > a.x && a.y + a.height > b.y && b.y + b.height > a.y } const main = () => { distancePoint(); for(let _=0; _ ch)bullet2.splice(_, 1); else if(isCollided(bullet2[_], player1)){ bullet2.splice(_, 1); player2.score += 5; player1.health -= 5; if(player1.health === 0) { isPlaying = false; animate(); console.log("Loser!!!"); player2.health = 0; player1.health = 0; } } } for(let _=0; _ ch)healthkit.splice(_, 1); } for(let _=healthkit.length - 1; _>=0; _--) { for(let bull=bullet1.length - 1; bull >=0; bull--) { if(isCollided(healthkit[_], bullet1[bull])) { healthkit.splice(_, 1); bullet1.splice(bull, 1); player1.health += (player1.health < 100)?5:0; } } } for(let _=healthkit.length - 1; _>=0; _--) { for(let bull=bullet2.length - 1; bull >=0; bull--) { if(isCollided(healthkit[_], bullet2[bull])) { healthkit.splice(_, 1); bullet2.splice(bull, 1); player2.health += (player2.health < 100)?5:0; } } } player1.draw(); player2.draw(); stars.forEach(star => star.draw()); // health ctx.fillStyle = "white"; ctx.font = "bold 20px Arial"; ctx.fillText(`Score : ${player1.score}`, 10, 30); } const animate = () => { if(isPlaying) { bottomsheet.style.display = "none"; area.start(); ctx.clearRect(0, 0, cw, ch); requestAnimationFrame(animate); main(); }else{ bottomsheet.style.display = "block"; area.start(); stars.forEach(star => star.draw()); } } animate(); function distancePoint () { let dist = player1.x - player2.x; if(dist < 0){ player2.x -= 2; if(player2.x === player1.x)player2.x = player1.x; } else if(dist > 0) { player2.x += 2; if(player2.x === player1.x)player2.x = player1.x; } } btn.addEventListener("click", ()=>{ btn.style.display = "none"; isPlaying = true; animate(); setInterval(pushBullet1, 1300); setInterval(pushHealthKit, 15000); setInterval(pushBullet2, 1200); }) area.canvas.addEventListener("mousemove", evt=>{ let scene = area.canvas.getBoundingClientRect(); let posX = Math.round(evt.clientX - scene.left); player1.x = posX - (player1.width / 2); // let a = setInterval(distancePoint, 1200); }, false); area.canvas.addEventListener("mouseup", evt=>{ player1.x = player1.x; player2.x = player1.x; }) area.canvas.addEventListener("touchmove", evt=>{ let posX = evt.changedTouches[0]; let x = parseInt(posX.clientX); player1.x = x - (player1.width / 2); // let a = setInterval(distancePoint, 1200); }, false); window.addEventListener("keydown", evt=>{ if(evt.keyCode === 37) player1.x -= 10; else if(evt.keyCode === 39) player1.x += 10; // let a = setInterval(distancePoint, 1200); }, false); } const init = () => jetShootOut(); window.addEventListener("load", init, false);

Jet shoot