var canvas, ctx, score, scoreAmount = 0, balls = [], table = {}, stick = {}, touch = {}, lever = {}, isMoveStick = true, isShootable = true, friction = 0.01, h = ~~(screen.height * 0.77), w = ~~(h / 1.38), k = w / 317; alert("This is a snooker simulation\n*Your main aim is to hit the other balls into the yellow pockets in the table by using the white ball and the stick\n*Swipe down on the right yellow lever to launch the white ball\n*touch across your screen to turn the stick.\nThe following ball colors carry this respective points:\n|white-0points|\n|red-1point|\n|yellow-2points|\n|green-3points|\n|brown-4points|\n|blue-5points|\n|pink-6point|\n|black-7points|\n**goodluck,ill buy you a burger if you can get all the balls into the yellow holes") window.onload = load; function load() { score = document.querySelector("#score"); canvas = document.querySelector("canvas"); canvas.height = h; canvas.width = w; ctx = canvas.getContext("2d"); touch.prevAng = 0; var add = window.addEventListener; add("touchstart", start); add("touchmove", move); add("touchend", shoot); init(); Update(); } function start(e) { //if(e.preventDefault!=undefined)e.preventDefault(); touch.x = e.touches[0].pageX; touch.y = e.touches[0].pageY; var dist = Dist(touch.x, touch.y, lever.x, lever.y); if (dist < 30 * k) { isMoveStick = false; } else { isMoveStick = true; } if (isMoveStick && isShootable) { setStick(); } } function move(e) { //if(e.preventDefault!=undefined)e.preventDefault(); touch.x = e.touches[0].pageX; touch.y = e.touches[0].pageY; if (isShootable) { if (isMoveStick) { moveStick(); } else { moveBar(); } } } function setStick() { touch.ang = Ang(touch.x, touch.y, stick.target.x, stick.target.y); touch.prevAng = touch.ang - stick.angle; stick.angle = touch.ang - touch.prevAng; } function moveStick() { touch.ang = Ang(touch.x, touch.y, stick.target.x, stick.target.y); stick.angle = touch.ang - touch.prevAng; adjustStick(); } function moveBar() { if (touch.y > lever.y && touch.y < lever.y + lever.h) lever.y2 = touch.y; } function shoot() { if (!isMoveStick && isShootable) { var dist = (lever.y2 - lever.y) * 0.8 + 2 * k; launchStick(dist); lever.x2 = lever.x; lever.y2 = lever.y; } } function launchStick(d) { stick.segmentRad = 10 * k; for (var i in balls) { if (balls[i].color == "white") { balls[i].v = d / 10; balls[i].a = stick.angle + Math.PI; balls[i].vx = Math.cos(balls[i].a) * balls[i].v; balls[i].vy = Math.sin(balls[i].a) * balls[i].v; break; } } adjustStick(); isShootable = false; checkForReset(); } function checkForReset() { var stoppedBalls = 0 for (var i in balls) { if (balls[i].vx == 0 && balls[i].vy == 0) { stoppedBalls++; } } //document.querySelector("#controls").innerHTML=stoppedBalls; if (stoppedBalls == balls.length) { resetBoard(); return; } window.requestAnimationFrame(checkForReset); } function resetBoard() { var aWhiteBall = false; for (var i in balls) { if (balls[i].color == "white") { aWhiteBall = true; } } if (aWhiteBall == false) { balls.push(new Ball(170, 250, 0, 0, "white")); } for (var i in balls) { if (balls[i].color == "white") { stick.target.x = balls[i].x, stick.target.y = balls[i].y, stick.target.xrad = Math.cos(stick.angle) * 14 * k + balls[i].x, stick.target.yrad = Math.sin(stick.angle) * 14 * k + balls[i].y break; } } stick.segmentRad = 50 * k; //stick.angle=Ang(stick.target.x,stick.target.y,table.x,table.y); adjustStick(); isShootable = true; } function Ball(x, y, a, v, c) { var points; this.x = x * k; this.y = y * k; this.a = a || 0; this.r = 6 * k; this.v = v * k; this.color = c; switch (this.color) { case "red": points = 1; break; case "white": points = 0; break; case "yellow": points = 2; break; case "green": points = 3; break; case "brown": points = 4; break; case "blue": points = 5; break; case "pink": points = 6; break; case "black": points = 7; break; } this.point = points; this.vx = Math.cos(this.a) * this.v; this.vy = Math.sin(this.a) * this.v; this.update = function() { this.x += this.vx; this.y += this.vy; this.vx *= (1 - friction); this.vy *= (1 - friction); this.vx = Math.abs(this.vx) < 0.1 ? 0 : this.vx; this.vy = Math.abs(this.vy) < 0.1 ? 0 : this.vy; } this.checkCollisions = function() { for (var i in balls) { if (balls[i] == this) continue; var dist = Dist(this.x, this.y, balls[i].x, balls[i].y); if (dist < (this.r + balls[i].r)) { collideBalls(this, balls[i]); } } var t_bound = table.boundaries; if ( (this.x - this.r) < t_bound.left || (this.x + this.r) > t_bound.right) { this.vx *= -1; } if ( (this.y - this.r) < t_bound.top || (this.y + this.r) > t_bound.bottom) { this.vy *= -1; } for (var i in table.pockets) { var p = table.pockets[i]; var dist = Dist(this.x, this.y, p[0], p[1]); if (dist < (this.r)) { callScore(this, p[0], p[1]); } } } } function collideBalls(ballA, ballB) { const vxDist = ballA.vx - ballB.vx; const vyDist = ballA.vy - ballB.vy; const xDist = ballB.x - ballA.x; const yDist = ballB.y - ballA.y; if (vxDist * xDist + vyDist * yDist >= 0) { const angle = -Math.atan2(yDist, xDist); const u1 = rotate(ballA.vx, ballA.vy, angle); const u2 = rotate(ballB.vx, ballB.vy, angle); const v1 = { x: u2.x, y: u1.y }; const v2 = { x: u1.x, y: u2.y }; const vFinal1 = rotate(v1.x, v1.y, -angle); const vFinal2 = rotate(v2.x, v2.y, -angle); ballA.vx = vFinal1.x; ballA.vy = vFinal1.y; ballB.vx = vFinal2.x; ballB.vy = vFinal2.y; } } function rotate(x, y, angle) { var length = Math.sqrt(x * x + y * y); angle += Math.atan2(y, x); return { x: length * Math.cos(angle), y: length * Math.sin(angle) }; } function callScore(ball, pocketX, pocketY) { var index = balls.indexOf(ball); scoreAmount += balls[index].point; score.innerHTML = "score:" + scoreAmount; balls.splice(index, 1); } function init() { initTable(); initBalls(); initStick(); initLever(); } function initTable() { table.x = 160 * k; table.y = 170 * k; table.w = 170 * k; table.h = 300 * k; table.boundaries = { left: table.x - table.w / 2, right: table.x + table.w / 2, top: table.y - table.h / 2, bottom: table.y + table.h / 2, } table.pockets = [ [85 * k, 30 * k], [159 * k, 30 * k], [236 * k, 30 * k], [85 * k, 155 * k], [236 * k, 155 * k], [85 * k, 309 * k], [159 * k, 309 * k], [236 * k, 309 * k], ]; } function initBalls() { /* °°°°°° °°°° °° */ var xIn = 0, xOut = 0; for (var y = 100; y < 130; y += 14) { for (var x = 130 + xIn; x < 200 - xOut; x += 15) { balls.push(new Ball(x, y, 0, 0, "red")); } xIn += 15; xOut += 15; } /* ° ° ° */ balls.push(new Ball(160, 65, 0, 0, "black")); balls.push(new Ball(160, 144, 0, 0, "red")); balls.push(new Ball(160, 157, 0, 0, "pink")); balls.push(new Ball(160, 180, 0, 0, "blue")); /*° ° °*/ balls.push(new Ball(122, 230, 0, 0, "green")); balls.push(new Ball(159, 230, 0, 0, "brown")); balls.push(new Ball(200, 230, 0, 0, "yellow")); balls.push(new Ball(170, 250, 0, 0, "white")); } function initStick() { stick.segments = []; stick.segmentRad = 50 * k; stick.angle = 2; stick.target = {}; stick.head = {} for (var i in balls) { if (balls[i].color == "white") { stick.target.x = balls[i].x, stick.target.y = balls[i].y, stick.target.xrad = Math.cos(stick.angle) * 14 * k + balls[i].x, stick.target.yrad = Math.sin(stick.angle) * 14 * k + balls[i].y break; } } stick.head.x = Math.cos(stick.angle) * stick.segmentRad + stick.target.x, stick.head.y = Math.sin(stick.angle) * stick.segmentRad + stick.target.y; for (var i = 0; i < 240 * k; i += 40 * k) { stick.segments.push({ x: Math.cos(stick.angle) * (stick.segmentRad + i) + stick.target.x, y: Math.sin(stick.angle) * (stick.segmentRad + i) + stick.target.y }); } } function adjustStick() { stick.target.xrad = Math.cos(stick.angle) * 14 * k + stick.target.x; stick.target.yrad = Math.sin(stick.angle) * 14 * k + stick.target.y; stick.head.x = Math.cos(stick.angle) * stick.segmentRad + stick.target.x, stick.head.y = Math.sin(stick.angle) * stick.segmentRad + stick.target.y; var it = 0; for (var i = 0; i < 240 * k; i += 40 * k) { stick.segments[it].x = Math.cos(stick.angle) * (stick.segmentRad + i) + stick.target.x; stick.segments[it].y = Math.sin(stick.angle) * (stick.segmentRad + i) + stick.target.y; it++; } } function initLever() { lever.x = 290 * k; lever.y = 150 * k; lever.x2 = lever.x; lever.y2 = lever.y; lever.h = 110 * k; lever.w = 20 * k; } function Update() { ctx.clearRect(0, 0, canvas.width, canvas.height); UpdateTable(); UpdateBalls(); UpdateStick(); UpdateLever(); window.requestAnimationFrame(Update); } function UpdateTable() { ctx.save(); ctx.translate(table.x, table.y); ctx.fillStyle = "green"; ctx.lineWidth = 10 * k; ctx.beginPath(); ctx.roundRect(-table.w / 2, -table.h / 2, table.w, table.h, 10 * k); ctx.stroke(); ctx.fill(); ctx.restore(); ctx.save(); ctx.beginPath(); ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.moveTo(table.boundaries.left, 230 * k); ctx.lineTo(table.boundaries.right, 230 * k); ctx.stroke(); ctx.beginPath(); ctx.arc(table.x, table.y + 60 * k, 40 * k, 0, Math.PI) ctx.stroke(); ctx.restore(); ctx.save(); for (var i in table.pockets) { var t = table.pockets[i]; ctx.beginPath(); ctx.fillStyle = "yellow"; ctx.lineWidth = 2 * k; ctx.arc(t[0], t[1], 7 * k, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); } ctx.restore(); } function UpdateBalls() { for (var i in balls) { var b = balls[i]; ctx.save(); ctx.beginPath(); ctx.lineWidth = 2 * k; ctx.fillStyle = b.color; ctx.arc(b.x, b.y, b.r, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.restore(); b.update(); b.checkCollisions(); } } function UpdateStick() { var color = "red"; ctx.save(); for (var i in stick.segments) { if (i == 0) continue; color = color == "red" ? "blue" : "red"; var seg = stick.segments[i]; var segPrev = stick.segments[i - 1]; ctx.beginPath(); ctx.lineWidth = 6 * k; ctx.strokeStyle = color; ctx.moveTo(segPrev.x, segPrev.y); ctx.lineTo(seg.x, seg.y); ctx.stroke(); } ctx.restore(); ctx.beginPath(); ctx.fillStyle = "red"; ctx.lineWidth = 2; ctx.arc(stick.head.x, stick.head.y, 7 * k, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); if (isShootable) { ctx.save(); ctx.beginPath(); ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.setLineDash([4, 2]) ctx.arc(stick.target.x, stick.target.y, 14 * k, 0, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.moveTo(stick.head.x, stick.head.y); ctx.lineTo(stick.target.xrad, stick.target.yrad); ctx.stroke(); ctx.restore(); } } function UpdateLever() { ctx.save(); ctx.beginPath(); ctx.fillStyle = "orange"; ctx.rect(lever.x, lever.y, lever.w, lever.h); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = "white"; ctx.rect(lever.x2, lever.y2, lever.w, lever.w); ctx.fill(); ctx.stroke(); ctx.font = 20 * k + "px Arial"; ctx.fillText("⬇️", lever.x2 - 3 * k, lever.y2 + 17 * k); ctx.restore(); } ; (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.setTimeout; window.requestAnimationFrame = requestAnimationFrame; })();

Snooker Simulation