"use strict" window.onload = () => { declare(); setCanvasSize(); Pad.setUp(); Ball.setUp(); for (let i = 0; i < 5; i++) { obstacles.push([]); for (let n = 0; n < 6; n++) obstacles[i].push(new Obstacle(i, n)); } requestAnimationFrame(update); }; let c, ctx, W, H, move, stop, started = false, died = false, dCount = 0, keyed = false, obstacles = []; const {PI, sqrt} = Math; const declare = () => { c = document.querySelector("canvas"); ctx = c.getContext("2d"); W = window.innerWidth; H = window.innerHeight - 4; }; const setCanvasSize = () => { c.width = W; c.style.width = W; c.height = H; c.style.height = H; }; const Pad = { setUp() { this.x = W / 2; this.y = 47 / 48 * H; }, move(i) { if (this.x - W / 10 < 0) this.x = W / 10; else if (this.x + W / 10 > W) this.x = 9 / 10 * W; else this.x += W / 180 * i; if (stop) { stop = false; return; } if (!keyed) requestAnimationFrame(() => { this.move(i); }); else keyed = false; }, draw() { ctx.fillRect(this.x - W / 10, this.y, W / 5, H / 48); } }; const Ball = { setUp() { this.r = W / 40; this.x = W / 2; this.y = Pad.y - this.r; this.vx = 1.7; this.vy = -1.5; }, update() { this.bounceWall(); this.bouncePad(); this.bounceObstacle(); if (started) { this.x += this.vx; this.y += this.vy; } this.die(); this.draw(); }, bounceWall() { let wallBounced = false; if (this.x - this.r < 0) { this.x = this.r; this.vx *= -1; wallBounced = true; } else if (this.x + this.r > W) { this.x = W - this.r; this.vx *= -1; wallBounced = true; } if (this.y - this.r < 0) { this.y = this.r; this.vy *= -1; wallBounced = true; } if (wallBounced) { let add = random(.2) - .1; this.vx += add; this.vy += (random() > .5? 1: -1) * sqrt(.01 - add ** 2); } }, bouncePad () { if (this.y + this.r > Pad.y && this.x > Pad.x - W / 10 && this.x < Pad.x + W / 10) { this.y = Pad.y - this.r; this.vy *= -1; let add = random(.2) - .1; this.vx += add; this.vy += (random() > .5? 1: -1) * sqrt(.01 - add ** 2); } }, bounceObstacle() { for (let i = 0; i < 5; i++) for (let n = 0; n < 6; n++) if (!obstacles[i][n].crushed) if (this.x + this.r > obstacles[i][n].x - obstacles[i][n].w / 2 && this.x - this.r obstacles[i][n].y - obstacles[i][n].h / 2 && this.y - this.r H) died = true; }, draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, PI * 2, true); ctx.closePath(); ctx.fill(); } }; class Obstacle { constructor(row, column) { this.x = (W / 10) * (2 * row) + W / 10; this.y = (H / 24) * (2 * column) + H / 24 this.w = W / 6; this.h = H / 14; this.crushed = false; } draw() { if (!this.crushed) ctx.fillRect(this.x - this.w / 2, this.y - this.h / 2, this.w, this.h); } crush() { if (!this.crushed); this.crushed = true; } } const update = () => { ctx.clearRect(0, 0, W, H); ctx.fillStyle = "#FFFFFF"; Pad.draw(); Ball.update(); let count = 0; for (let i = 0; i < 5; i++) for (let n = 0; n < 6; n++) { obstacles[i][n].draw(); count = obstacles[i][n].crushed? ++count: count; } if (died) { requestAnimationFrame(die); return; } if (count === 30) { requestAnimationFrame(win); return; } requestAnimationFrame(update); }; const die = () => { if (!started) return; ctx.clearRect(0, 0, W, H); dCount++; ctx.fillStyle = `rgb(255, 255, 255, ${(50 - dCount) / 50})`; Pad.draw(); for (let i = 0; i < 5; i++) for (let n = 0; n < 6; n++) obstacles[i][n].draw(); ctx.textAlign = "center"; ctx.font = "bold 18vw Arial Narrow"; ctx.fillStyle = `rgb(255, 255, 255, ${dCount / 100})`; ctx.strokeStyle = `rgb(0, 0, 0, ${dCount / 100})`; ctx.fillText("Game Over!", W / 2, H / 2); ctx.strokeText("Game Over!", W / 2, H / 2); ctx.font = "bold 8vw Arial Narrow"; ctx.fillStyle = `rgb(255, 255, 255, ${(dCount - 80) / 80})`; ctx.strokeStyle = `rgb(0, 0, 0, ${(dCount - 80) / 80})`; ctx.fillText("Tap to play again", W / 2, H / 2 + H / 6); ctx.strokeText("Tap to play again", W / 2, H / 2 + H / 6); window.onclick = reset; requestAnimationFrame(die); }; const win = () => { if (!started) return; ctx.clearRect(0, 0, W, H); dCount++; ctx.fillStyle = `rgb(255, 255, 255, ${(50 - dCount) / 50})`; Pad.draw(); for (let i = 0; i < 5; i++) for (let n = 0; n < 6; n++) obstacles[i][n].draw(); ctx.textAlign = "center"; ctx.font = "bold 18vw Arial Narrow"; ctx.fillStyle = `rgb(255, 255, 255, ${dCount / 100})`; ctx.strokeStyle = `rgb(0, 0, 0, ${dCount / 100})`; ctx.fillText("You Won!", W / 2, H / 2); ctx.strokeText("You Won!", W / 2, H / 2); ctx.font = "bold 8vw Arial Narrow"; ctx.fillStyle = `rgb(255, 255, 255, ${(dCount - 80) / 80})`; ctx.strokeStyle = `rgb(0, 0, 0, ${(dCount - 80) / 80})`; ctx.fillText("Tap to play again", W / 2, H / 2 + H / 6); ctx.strokeText("Tap to play again", W / 2, H / 2 + H / 6); window.onclick = reset; requestAnimationFrame(win); }; window.addEventListener("touchstart", e => { if (!started) { started = true; Ball.vx *= e.touches[0].clientX > W / 2? 1: -1; } move = requestAnimationFrame(() => { Pad.move(e.touches[0].clientX > W / 2? 1: -1); }); }); window.addEventListener("touchend", () => { stop = true; }); window.addEventListener("keydown", e => { if (!started) { started = true; Ball.vx *= e.keyCode === 37? -1: 1; } keyed = true; Pad.move(e.keyCode === 37? -1: e.keyCode === 39? 1: 0); }); const reset = () => { started = false; died = false; dCount = 0; Pad.setUp(); Ball.setUp(); for (let i = 0; i < 5; i++) for (let n = 0; n < 6; n++) obstacles[i][n].crushed = false; window.onclick = () => {}; requestAnimationFrame(update); }; const random = (max = 1, min = 0) => max > min? Math.random() * (max - min) + min: Math.random() * (min - max) + max;

Pong Game