//coded by Spentify early 2020 //globals let ball, player, blocks, bCount, dx, dy, lvl, xCount, yCount, bw, pw, score, fps, lastCall, hardMode, ball2, dx2, dy2, joker, AI; //fps system lastCall = Date.now(); //start level & score lvl = 1; score = 0; //start the game window.addEventListener("load", startGame); //initialize game function startGame() { map.el.removeEventListener("click", startGame); let canv = document.querySelector("canvas"); if (canv !== null) { canv.parentNode.removeChild(canv); } if (lvl == 1) { removeEvent(); hardMode = false; AI = false; let conf2 = confirm("Do you want to see an AI to learn from it?"); if (conf2) { AI = true; } else { let conf = confirm("Do you want to enable hard mode?"); if (conf) { hardMode = true; } } if (!AI) { addEvent(); } } pw = 100, bw = 80; dx = 2.5, dy = 2.5; dx2 = 2.5, dy2 = 2.5; blocks = []; xCount = 10, yCount = 10; if (lvl != 1) { bw /= 1 + (lvl / 10); pw /= 1 + (lvl / 12); dx *= (1 + (lvl / 10)); dy *= (1 + (lvl / 10)); dx2 *= (1 + (lvl / 10)); dy2 *= (1 + (lvl / 10)); } map.start(); ball = new b("ball", 145, 300, 10, "red"); if (hardMode) { ball2 = new b("ball2", 180, 300, 10, "yellow"); if (lvl == 1) { joker = 3; } } player = new p(200, 400, pw, 10); for (let i = 1; i <= lvl * 4; i++) { blocks.push(new obj(xCount, yCount, bw, 20, "enabled")); xCount += blocks[i - 1].w + 10; if (xCount + bw > 300) { yCount += 30; xCount = 10; } } bCount = blocks.length; }; //defining map let map = { el : document.createElement("canvas"), start : function() { this.el.width = 300; this.el.height = 500; document.body.insertBefore(this.el, document.body.childNodes[0]); this.context = this.el.getContext("2d"); this.iv = window.requestAnimationFrame(updateG); }, clear : function() { this.context.clearRect(0, 0, this.el.width, this.el.height); }, } //create ball function b(name, x, y, r, c) { this.name = name; this.r = r; this.x = x; this.y = y; this.updateObj = function() { ctx = map.context; ctx.beginPath(); ctx.strokeStyle = c; ctx.lineWidth = 3; ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.stroke(); } } //create player function p(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; this.updatePly = function() { ctx = map.context; ctx.fillStyle = "rgb(0, 100, 150)"; ctx.fillRect(this.x, this.y, this.w, this.h); } } //create blocks function obj(x, y, w, h, status) { this.x = x; this.y = y; this.w = w; this.h = h; this.status = status; this.draw = function() { ctx = map.context; ctx.fillStyle = "lightgreen"; ctx.fillRect(this.x, this.y, this.w, this.h); } } //touchevents for the player function addEvent() { window.addEventListener("touchstart", touchhandler); window.addEventListener("touchmove", touchhandler); window.addEventListener("touchcancel", touchhandler); } function removeEvent() { window.removeEventListener("touchstart", touchhandler); window.removeEventListener("touchmove", touchhandler); window.removeEventListener("touchcancel", touchhandler); } function touchhandler(e) { player.x = e.targetTouches[0].screenX - map.el.offsetLeft - player.w / 2; } //the main game loop function updateG() { map.clear(); fps = getFps(); if (((!hardMode && ball.y < 490) || (hardMode && ball.y < 490 && ball2.y < 490)) && bCount !== 0) { window.requestAnimationFrame(updateG); ball.x += dx; ball.y += dy; if (hardMode) { ball2.x += dx2; ball2.y += dy2; } if (hardMode && ((ball.y >= 390 && ball.y <= 400) && (ball2.y >= 390 && ball2.y <= 400)) && Math.abs(ball.x - ball2.x) >= player.w && joker > 0) { dy *= -1; dy2 *= -1; joker--; } if (AI) { if (Math.sign(dx) == -1) { player.x = ball.x - player.w / 2.5; } else { player.x = ball.x - 2 * (player.w / 2.5); } } if (checkCollision(ball, player, false)) { dy *= -1; dx *= dynamic_bounce(ball, player, dx); } if (hardMode && checkCollision(ball2, player, false)) { dy2 *= -1; dx2 *= dynamic_bounce(ball2, player, dx2); } if (ball.y <= 10) { dy *= -1; } if (ball.x >= map.el.width - 10 || ball.x <= 10) { dx *= -1; } if (hardMode) { if (ball2.y <= 10) { dy2 *= -1; } if (ball2.x >= map.el.width - 10 || ball2.x <= 10) { dx2 *= -1; } } if (hardMode) { checkCollision(ball, ball2, true, dx, dy, "radial"); checkCollision(ball2, ball, true, dx, dy, "radial"); } for (let i in blocks) { if (checkCollision(ball, blocks[i], true, dx, dy, "linear") || (hardMode && checkCollision(ball2, blocks[i], true, dx2, dy2, "linear"))) { score++; blocks[i].status = "disabled"; bCount--; } if (blocks[i].status == "enabled") { blocks[i].draw(); } } ball.updateObj(); if (hardMode) { ball2.updateObj(); } player.updatePly(); updtGameData(); } else if (bCount === 0) { ctx = map.context; ctx.fillStyle = "white"; ctx.font = "30px Arial" ctx.fillText("You won!", 90, 200); ctx.font = "20px Times New Roman"; ctx.fillText("Click for level " + (lvl + 1), 80, 250); lvl++; map.el.addEventListener("click", startGame); } else { ctx = map.context; ctx.fillStyle = "white"; ctx.font = "30px Arial" ctx.fillText("You lost!", 90, 200); ctx.font = "20px Times New Roman"; ctx.fillText(`Your score: ${score} (level ${lvl}).`, 50, 250); ctx.fillText("Click to restart...", 80, 280); map.el.addEventListener("click", resetGame); } } function dynamic_bounce(obj, p, dn) { if (((Math.sign(dn) == -1 || Math.sign(dn) == 0) && obj.x - p.x < p.w / 2) || (Math.sign(dn) == 1 && obj.x - p.x > p.w / 2)) { return 0.2 + 1.8 * Math.abs(p.w / 2 - (obj.x - p.x)) / (0.8 * p.w / 2); } else if (((Math.sign(dn) == 1 || Math.sign(dn) == 0) && obj.x - p.x < p.w / 2) || (Math.sign(dn) == -1 && obj.x - p.x > p.w / 2)) { return -0.2 + -1.8 * Math.abs(p.w / 2 - (obj.x - p.x)) / (0.8 * p.w / 2); } } //Check the collisions. This was probably the hardest part to code. function checkCollision(a, b, c, nx, ny, f) { if (!c) { if (a.y >= b.y - 10 && a.y < b.y && a.x >= b.x && a.x <= b.x + b.w) { return true; } return false; } else { if (f == "linear") { if (b.status == "enabled" && ((a.x >= b.x && a.x <= b.x + b.w && a.y <= b.y + b.h + 10 && a.y > b.y && Math.sign(ny) == -1) || (a.x >= b.x && a.x <= b.x + b.w && a.y >= b.y - 10 && a.y < b.y && Math.sign(ny) == 1))) { if (a.name == "ball") { dy *= -1; } if (a.name == "ball2") { dy2 *= -1; } return true; } if (b.status == "enabled" && ((a.x >= b.x - 10 && a.x < b.x && a.y >= b.y && a.y <= b.y + b.h && Math.sign(nx) == 1) || (a.x <= b.x + b.w + 10 && a.x > b.x + b.w && a.y >= b.y && a.y <= b.y + b.h && Math.sign(nx) == -1))) { if (a.name == "ball") { dx *= -1; } if (a.name == "ball2") { dx2 *= -1; } return true; } return false; } if (f == "radial") { if ((a.x >= b.x - b.r && a.x <= b.x + b.r && a.y <= b.y + b.r + 10 && a.y > b.y && Math.sign(ny) == -1) || (a.x >= b.x - b.r && a.x <= b.x + b.r && a.y >= b.y - b.r - 10 && a.y < b.y - b.r && Math.sign(ny) == 1)) { if (a.name == "ball") { dy *= -1; } if (a.name == "ball2") { dy2 *= -1; } return true; } if ((a.x >= b.x - b.r - 10 && a.x < b.x - b.r && a.y >= b.y - b.r && a.y <= b.y && Math.sign(nx) == 1) || (a.x <= b.x + b.r + 10 && a.x > b.x + b.r && a.y >= b.y - b.r && a.y <= b.y && Math.sign(nx) == -1)) { if (a.name == "ball") { dx *= -1; } if (a.name == "ball2") { dx2 *= -1; } return true; } return false; } } } //my fps calculator function getFps() { let timeDiff = Date.now() - lastCall; lastCall = Date.now(); return Math.round(1000 / timeDiff); } function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } //update the game data on UI function updtGameData() { ctx = map.context; ctx.fillStyle = "white"; ctx.font = "15px Arial" ctx.fillText("Score: " + score, 10, 465); ctx.fillText("Level: " + lvl, 90, 465); ctx.fillText("FPS: " + fps, 150, 465); ctx.font = "10px Arial" ctx.fillText("Remaining", 210, 460); ctx.fillText("Blocks: ", 220, 470); ctx.font = "15px Arial" ctx.fillText(bCount, 265, 465); if (hardMode) { ctx.font = "15px Arial"; ctx.fillText("Joker: " + joker, 130, 485); } } //reset the game function resetGame() { map.el.removeEventListener("click", resetGame); lvl = 1; score = 0; startGame(); } alert("An (quite) old code from February 2020"); alert("Try to hit all blocks to make it to the next level.\n\nCan you make it to level 10?\n\nNotice: If it's IMPOSSIBLE to reach both balls in hard mode, the system helps you by using one of your jokers.");

The bouncing ball [Game] v1.3