"use strict"; const id = (arg) => document.getElementById(arg); const log = console.log; const stoperror = () => { return true; }; window.onerror = stoperror; window.onload = () => { let canvas = id("canvas"); let c = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const collision = (a, b) => { return a.x < b.x + b.width + 10 && a.x + a.width + 10 > b.x && a.y < b.y + b.height && a.y + a.height > b.y; } const collision2 = (a, b) => { return a.x - a.width/2 < b.x + b.width && a.x + a.width/2 > b.x && a.y < b.y + b.height && a.y + a.height > b.y; } let right_down, left_down, right2_down, left2_down; const getTouchXY = (e) => { left_down = right_down = left2_down = right2_down = false; for(let i = 0; i < e.touches.length; i++) { let x = e.touches[i].clientX, y = e.touches[i].clientY, t = {x: x, y: y, width: 10, height: 10}; if(collision2(t,right)) {right_down = true;} if(collision2(t,left)) {left_down = true;} if(collision2(t,right2)) {right2_down = true;} if(collision2(t,left2)) {left2_down = true;} } }; const stopTouchXY = (e) => { let x = e.changedTouches[0].clientX, y = e.changedTouches[0].clientY, t = {x: x, y: y, width: 10, height: 10}, rc = collision2(t, right), lc = collision2(t, left), rc2 = collision2(t, right2), lc2 = collision2(t, left2); if(rc) { right_down = false; } if(lc) { left_down = false; } if(rc2) { right2_down = false; } if(lc2) { left2_down = false; } }; const keyBoardL = (e) => { if(e.keyCode == 37){ left_down = true; } }; const stopKeyBoardL = (e) => { if(e.keyCode == 37){ left_down = false; } }; const keyBoardR = (e) => { if(e.keyCode == 39){ right_down = true; } }; const stopKeyBoardR = (e) => { if(e.keyCode == 39){ right_down = false; } }; window.addEventListener("touchstart", getTouchXY); window.addEventListener("touchmove", getTouchXY); window.addEventListener("touchend", stopTouchXY); window.addEventListener("touchcancel", stopTouchXY); window.addEventListener("keydown", keyBoardL); window.addEventListener("keyup", stopKeyBoardL); window.addEventListener("keydown", keyBoardR); window.addEventListener("keyup", stopKeyBoardR); class Player { constructor(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.speed = 2; this.score = 0; } shoot() { bullets.push(new Bullet(this.x + this.width/2 - 2, this.y - 10, 4, 8, "PLAYER")); } showScore() { c.fillStyle = "white"; c.font = "1em 'Press Start 2P', cursive"; c.fillText("SCORE: " + this.score, 10, canvas.height - 60); } draw() { c.beginPath(); c.save(); c.fillStyle = "white"; c.rect(this.x, this.y, this.width, this.height); c.rect(this.x + 3, this.y, this.width, 4); c.rect(this.x - 3, this.y, this.width, 4); c.rect(this.x + this.width/2 - 3, this.y - 6, 6, 6); c.rect(this.x + this.width, this.y + this.height-10, 10, 10); c.rect(this.x - this.width/2 + 5, this.y + this.height-10, 10, 10); c.fill(); c.restore(); c.closePath(); if(this.x + this.width > canvas.width) { this.x = canvas.width - this.width; } if(this.x < 0) { this.x = 0; } if(this.y + this.height > canvas.height) { this.y = canvas.height - this.height; } if(this.y < 0) { this.y = 0; } if(right_down) { this.x += this.speed; } if(left_down) { this.x -= this.speed; } } update() { this.draw(); this.showScore(); } } let player = new Player(canvas.width/2 - 15, canvas.height - 32, 30, 30); class Player2 { constructor(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.speed = 2; this.score = 0; } shoot() { bullets.push(new Bullet(this.x + this.width/2 - 2, this.y, 4, 8, "PLAYER2")); } showScore() { c.fillStyle = "white"; c.font = "1em 'Press Start 2P', cursive"; c.fillText("SCORE: " + this.score, canvas.width - 150, 85); } draw() { c.beginPath(); c.save(); c.fillStyle = "white"; c.rect(this.x, this.y, this.width, this.height); c.rect(this.x + 3, this.y + 26, this.width, 4); c.rect(this.x - 3, this.y + 26, this.width, 4); c.rect(this.x + this.width/2 - 3, this.y + 30, 6, 6); c.rect(this.x + this.width, this.y + this.height - 30, 10, 10); c.rect(this.x - this.width/2 + 5, this.y + this.height-30, 10, 10); c.fill(); c.restore(); c.closePath(); if(this.x + this.width > canvas.width) { this.x = canvas.width - this.width; } if(this.x < 0) { this.x = 0; } if(this.y + this.height > canvas.height) { this.y = canvas.height - this.height; } if(this.y < 0) { this.y = 0; } if(right2_down) { this.x -= this.speed; } if(left2_down) { this.x += this.speed; } } update() { this.draw(); this.showScore(); } } let player2 = new Player2(canvas.width/2 - 15, 5, 30, 30); var bullets = []; class Bullet { constructor(x, y, width, height, ID) { this.x = x; this.y = y; this.width = width; this.height = height; this.speed = 6; this.ID = ID; } draw() { c.beginPath(); c.save(); c.fillStyle = "white"; c.rect(this.x, this.y, this.width, this.height); c.fill(); c.restore(); c.closePath(); this.ID == "PLAYER"? this.speed = -6: this.speed = 6; this.ID == "PLAYER2"?this.speed = 6: this.speed = -6; this.y += this.speed; for(let b = bullets.length - 1; b >= 0; b--) { if(bullets[b].ID === "PLAYER2" && collision(bullets[b], player)) { player2.score++; bullets.splice(b, 1); } if(bullets[b].ID === "PLAYER" && collision(bullets[b], player2)) { player.score++; bullets.splice(b, 1); } if(bullets[b].y < 0 || bullets[b] > canvas.height + 10) { bullets.splice(b, 1); } } if(player.score > 9) { player.score = player2.score = 0; log("P1 won!"); } if(player2.score > 9) { player.score = player2.score = 0; log("P2 won!"); } } update(){ this.draw(); } } class Controls { constructor(x, y, width, height, dir) { this.x = x; this.y = y; this.width = width; this.height = height; this.dir = dir; } draw() { c.beginPath(); c.rect(this.x, this.y, this.width, this.height); const m = 10, w = this.width-2*m, h = this.height-2*m, d = h/2, t = 12, x = this.x, y = this.y; if(this.dir === "left"){ c.save(); c.fillStyle = "rgba(250, 250, 250, 0.6)"; c.strokeStyle = "rgba(250, 250, 250, 0.9)"; c.lineWidth = 0.5; c.stroke(); c.beginPath(); c.moveTo(x+m,y+h/2+m); c.lineTo(x+m+d,y+m); c.lineTo(x+m+d,y+h/2+m-t/2); c.lineTo(x+m+d+w-d,y+h/2+m-t/2); c.lineTo(x+m+d+w-d,y+h/2+m+t/2); c.lineTo(x+m+d,y+h/2+m+t/2); c.lineTo(x+m+d,y+h+m); c.lineTo(x+m,y+h/2+m); c.fill(); c.restore(); c.closePath(); } else if(this.dir === "right"){ c.save(); c.fillStyle = "rgba(250, 250, 250, 0.6)"; c.strokeStyle = "rgba(250, 250, 250, 0.9)"; c.lineWidth = 0.5; c.stroke(); c.beginPath(); c.moveTo(x+w+m,y+h/2+m); c.lineTo(x+w+m-d,y+m); c.lineTo(x+w+m-d,y+h/2+m-t/2); c.lineTo(x+m,y+h/2+m-t/2); c.lineTo(x+m,y+h/2+m+t/2); c.lineTo(x+m+w-d,y+h/2+m+t/2); c.lineTo(x+m+w-d,y+h+m); c.lineTo(x+w+m,y+h/2+m); c.fill(); c.restore(); c.closePath(); } } update() { this.draw(); } } var left = new Controls(5, canvas.height - 50, 80, 50, "left"); var right = new Controls(canvas.width - 85, canvas.height - 50, 80, 50, "right"); var left2 = new Controls(canvas.width - 85, 5, 80, 50, "right"); var right2 = new Controls(5, 5, 80, 50, "left"); let lastTime = 0; let lastTime2 = 0; const GAMELOOP = (currentTime) => { window.requestAnimationFrame(GAMELOOP); c.clearRect(0, 0, canvas.width, canvas.height); left.update(); right.update(); left2.update(); right2.update(); player.update(); player2.update(); for (let b of bullets) { b.update(); } if(currentTime > lastTime + 2000) { player.shoot(); lastTime = currentTime; } if(currentTime > lastTime2 + 2000) { player2.shoot(); lastTime2 = currentTime; } }; GAMELOOP(); }

2P Shootout