var can; var c; const width = 7; const height = 9; const cellWidth = 35; var grid; var balls; var spawnSpecifications; var userStartPosition; var userCurrentPosition; var levelDone; var stage; window.onload = function() { can = document.getElementById("can"); can.width = width * cellWidth; can.height = height * cellWidth; c = can.getContext("2d"); c.lineWidth = 4; can.addEventListener("mousedown", function(e) { try { e.preventDefault(); if (balls.length !== 0) { return; } userStartPosition = [e.pageX - can.offsetLeft + can.width / 2, e.pageY - can.offsetTop + can.height / 2]; userCurrentPosition = [e.pageX - can.offsetLeft + can.width / 2, e.pageY - can.offsetTop + can.height / 2]; spawnSpecifications.startX = spawnSpecifications.nextStartX; } catch (Exception) { return; } }); can.addEventListener("mousemove", function(e) { try { e.preventDefault(); if (balls.length !== 0) { return; } userCurrentPosition = [e.pageX - can.offsetLeft + can.width / 2, e.pageY - can.offsetTop + can.height / 2]; } catch (Exception) { return; } }); can.addEventListener("mouseup", function(e) { try { e.preventDefault(); if (balls.length !== 0) { return; } if (Math.hypot(userStartPosition[0] - userCurrentPosition[0], userStartPosition[1] - userCurrentPosition[1]) > 10 && Math.abs(spawnSpecifications.throwAngle) > spawnSpecifications.lowestAngle) { spawnSpecifications.nextStartX = undefined; spawnSpecifications.spawnedBalls = 0; levelDone = false; } userStartPosition = undefined; userCurrentPosition = undefined; spawnSpecifications.framesSinceUserInteraction = 0; } catch (Exception) { return; } }); can.addEventListener("touchstart", function(e) { try { e.preventDefault(); if (balls.length !== 0) { return; } userStartPosition = [e.pageX - can.offsetLeft + can.width / 2, e.pageY - can.offsetTop + can.height / 2]; userCurrentPosition = [e.pageX - can.offsetLeft + can.width / 2, e.pageY - can.offsetTop + can.height / 2]; spawnSpecifications.startX = spawnSpecifications.nextStartX; } catch (Exception) { return; } }); can.addEventListener("touchmove", function(e) { try { e.preventDefault(); if (balls.length !== 0) { return; } userCurrentPosition = [e.pageX - can.offsetLeft + can.width / 2, e.pageY - can.offsetTop + can.height / 2]; } catch (Exception) { return; } }); can.addEventListener("touchend", function(e) { try { e.preventDefault(); if (balls.length !== 0) { return; } if (Math.hypot(userStartPosition[0] - userCurrentPosition[0], userStartPosition[1] - userCurrentPosition[1]) > 10 && Math.abs(spawnSpecifications.throwAngle) > spawnSpecifications.lowestAngle) { spawnSpecifications.nextStartX = undefined; spawnSpecifications.spawnedBalls = 0; levelDone = false; } userStartPosition = undefined; userCurrentPosition = undefined; spawnSpecifications.framesSinceUserInteraction = 0; } catch (Exception) { return; } }); reset(); loop(); } function reset() { userStartPosition = undefined; userCurrentPosition = undefined; levelDone = false; spawnSpecifications = { throwAngle: 0, startX: can.width / 2, nextStartX: can.width / 2, spawnableBalls: 1, nextSpawnableBalls: 1, spawnedBalls: 1, framesSinceUserInteraction: 0, spawnFrame: 5, lowestAngle: Math.PI * 0.55, } stage = 0; balls = []; grid = []; var row = []; for (var i = 0; i < height; i++) { row = []; for (var j = 0; j < width; j++) { row.push(new EmptyCell()); } grid.push(row); } } function loop() { c.fillStyle = "#000000"; c.fillRect(0, 0, can.width, can.height); if (spawnSpecifications.framesSinceUserInteraction % spawnSpecifications.spawnFrame === 0) { if (spawnSpecifications.spawnedBalls < spawnSpecifications.spawnableBalls) { balls.push(new Ball(spawnSpecifications.startX, can.height, spawnSpecifications.throwAngle)); spawnSpecifications.spawnedBalls++; } } for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[i].length; j++) { grid[i][j].show(c, j, i); } } for (var i = balls.length - 1; i >= 0; i--) { balls[i].show(c); balls[i].update(); try { var indexes = balls[i].generateGridIndexes(); grid[indexes[0]][indexes[1]].interactWithBall(indexes[1], indexes[0], balls[i]); } catch (Exception) { } if (balls[i].y > can.height) { if (spawnSpecifications.nextStartX === undefined) { spawnSpecifications.nextStartX = balls[i].x; } balls.splice(i, 1); } } if (balls.length === 0 && !levelDone && spawnSpecifications.spawnedBalls == spawnSpecifications.spawnableBalls) { shiftGrid(); levelDone = true; } if (userStartPosition !== undefined) { c.fillStyle = "rgba(255, 255, 255, 0.2)"; c.arc(userStartPosition[0], userStartPosition[1], 5, 0, 2 * Math.PI); c.fill(); c.closePath(); spawnSpecifications.throwAngle = Math.atan2(userStartPosition[0] - userCurrentPosition[0], userStartPosition[1] - userCurrentPosition[1]); var dist = Math.hypot(userStartPosition[0] - userCurrentPosition[0], userStartPosition[1] - userCurrentPosition[1]) if (dist > 10 && Math.abs(spawnSpecifications.throwAngle) > spawnSpecifications.lowestAngle) { c.strokeStyle = "#FFFFFF"; c.beginPath(); c.moveTo(spawnSpecifications.startX, can.height); c.lineTo(spawnSpecifications.startX + Math.sin(spawnSpecifications.throwAngle) * 25, can.height + Math.cos(spawnSpecifications.throwAngle) * 25); c.stroke(); c.setLineDash([dist / 20, dist / 10]); c.beginPath(); c.moveTo(spawnSpecifications.startX, can.height); c.lineTo(spawnSpecifications.startX + Math.sin(spawnSpecifications.throwAngle) * dist * 4, can.height + Math.cos(spawnSpecifications.throwAngle) * dist * 4); c.stroke(); c.setLineDash([]); } } spawnSpecifications.framesSinceUserInteraction++; requestAnimationFrame(loop); } function shiftGrid() { stage++; var row = []; var emptyRow = []; for (var i = 0; i < width; i++) { if (Math.random() < 0.5) { row.push(new Block(stage)); } else { row.push(new EmptyCell()); } emptyRow.push(new EmptyCell()); } row[parseInt(Math.random() * row.length)] = new MoreBalls(); grid.splice(grid.length - 1, 1); grid.splice(0, 1); grid.unshift(row); grid.unshift(emptyRow); spawnSpecifications.spawnableBalls = spawnSpecifications.nextSpawnableBalls; spawnSpecifications.spawnedBalls = spawnSpecifications.spawnableBalls; for (var i = 0; i < grid[grid.length - 1].length; i++) { if (grid[grid.length - 1][i] instanceof Block) { if (grid[grid.length - 1][i].value > 0) { reset(); shiftGrid(); return; } } } } function EmptyCell() { this.show = function(c, x, y) { } this.interactWithBall = function(x, y, ball) { } } function Block(value) { this.value = value; this.show = function(c, x, y) { if (this.value > 0) { c.strokeStyle = "hsl(" + parseInt(360 * (this.value - 1) / stage) + ", 100%, 50%)"; c.beginPath(); c.strokeRect((x + 0.1) * cellWidth, (y + 0.1) * cellWidth, cellWidth * 0.8, cellWidth * 0.8); c.fillStyle = c.strokeStyle; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(this.value, (x + 0.5) * cellWidth, (y + 0.5) * cellWidth); } } this.interactWithBall = function(x, y, ball) { if (this.value > 0) { if (ball.x - ball.radius < (x + 0.1) * cellWidth && ball.xSpeed > 0) { ball.xSpeed *= -1; } else if (ball.x + ball.radius > (x + 0.9) * cellWidth && ball.xSpeed < 0) { ball.xSpeed *= -1; } if (ball.y - ball.radius < (y + 0.1) * cellWidth && ball.ySpeed > 0) { ball.ySpeed *= -1; } else if (ball.y + ball.radius > (y + 0.9) * cellWidth && ball.ySpeed < 0) { ball.ySpeed *= -1; } this.value--; } } } function MoreBalls() { this.got = false; this.show = function(c, x, y) { if (!this.got) { c.strokeStyle = "#FFFF00"; c.beginPath(); c.arc((x + 0.5) * cellWidth, (y + 0.5) * cellWidth, cellWidth * 0.35, 0, 2 * Math.PI); c.stroke(); } } this.interactWithBall = function(x, y, ball) { if (!this.got) { spawnSpecifications.nextSpawnableBalls++; this.got = true; } } } function Ball(x, y, angle) { this.x = x; this.y = y; this.xSpeed = Math.sin(angle) * 4; this.ySpeed = Math.cos(angle) * 4; this.radius = 5; this.update = function() { this.x += this.xSpeed; this.y += this.ySpeed; if (this.x < this.radius){ this.x = this.radius; this.xSpeed *= -1; }else if(this.x > can.width - this.radius) { this.x = can.width - this.radius; this.xSpeed *= -1; } if (this.y < this.radius) { this.y = this.radius; this.ySpeed *= -1; } } this.show = function(c) { c.fillStyle = "#0000FF"; c.beginPath(); c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); c.fill(); } this.generateGridIndexes = function() { return [Math.floor(this.y / cellWidth), Math.floor(this.x / cellWidth)]; } }

Balls and Blocks || game