//Created by Paxton Programmer window.onload = function() { var canvas = document.getElementById("canvas"); var circle = canvas.getContext("2d"); //variables for player and enemies and score (e stands for enemy) var playerX = 300; var playerY = 370; var e1x = 0; var e1y = 10; var e2x = 115; var e2y = 0; var e3x = 190; var e3y = 0; var e4x = 265; var e4y = 0; var e5x = 340; var e5y = 0; var e6x = 415; var e6y = 0; alert("Goal: Try to avoid the blue balls to get higher scores. The longer you are alive, the more points scored.") alert("Please upvote! :)") var score = 0; let speed1 = 200; let dir = 0; let eSpeed = new Array(200, 150, 250, 230, 175, 225, 100, 210, 215, 160, 190, 180); var t = Date.now(); let up = document.getElementById("up"); let left = document.getElementById("left"); let right = document.getElementById("right"); let down = document.getElementById("down"); function circleCollision(x1, y1, r1, x2, y2, r2) { let distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); return distance < r1 + r2; } //functionality area up.onmousedown = function() { dir = 3;} left.onmousedown = function() { dir = 2;} right.onmousedown = function() { dir = 1;} down.onmousedown = function() {dir = 4;} up.ontouchstart = function() { dir = 3;} left.ontouchstart = function() { dir = 2;} right.ontouchstart = function() { dir = 1;} down.ontouchstart = function() {dir = 4;} up.onmouseup = function() { dir = 0;} left.onmouseup = function() { dir = 0;} right.onmouseup = function() { dir = 0;} down.onmouseup = function() {dir = 0;} up.ontouchend = function() { dir = 0;} left.ontouchend = function() { dir = 0;} right.ontouchend = function() { dir = 0;} down.ontouchend = function() {dir = 0;} function draw() { var timePassed = (Date.now() - t) / 1000; t = Date.now(); var fps = Math.round(1 / timePassed); circle.clearRect(0, 0, 600, 400); //player circle.strokeStyle = 'black'; circle.beginPath(); circle.arc(playerX, playerY, 20, 20, 20 * Math.PI); circle.stroke(); if(playerY >= 385){ playerY -= (50 * timePassed); } if(dir == 1) { if(playerX < 600) { playerX += (speed1 * timePassed); score += 1; } } else if(dir == 2) { if(playerX > 0) { playerX -= (speed1 * timePassed); score += 1; } } else if(dir == 3) { if(playerY > 0) { playerY -= (speed1 * timePassed); score += 1; } } else if(dir == 4) { if(playerY < 400) { playerY += (speed1 * timePassed); score += 1; } } //enemies circle.fillStyle = 'blue'; circle.beginPath(); circle.arc(e1x, e1y, 20, 20, 20 * Math.PI); circle.fill(); circle.fillStyle = 'blue'; circle.beginPath(); circle.arc(e2x, e2y, 20, 20, 20 * Math.PI); circle.fill(); circle.fillStyle = 'blue'; circle.beginPath(); circle.arc(e3x, e3y, 20, 20, 20 * Math.PI); circle.fill(); circle.fillStyle = 'blue'; circle.beginPath(); circle.arc(e4x, e4y, 20, 20, 20 * Math.PI); circle.fill(); circle.fillStyle = 'blue'; circle.beginPath(); circle.arc(e5x, e5y, 20, 20, 20 * Math.PI); circle.fill(); circle.fillStyle = 'blue'; circle.beginPath(); circle.arc(e6x, e6y, 20, 20, 20 * Math.PI); circle.fill(); //enemy movment e1x += (eSpeed[0] * timePassed) e1y += (eSpeed[1] * timePassed) if(e1x <= -10 || e1x >= 580 || e1x === e2x){ eSpeed[0] *= -1; } if(e1y >= 380 || e1y <= -10 || e1y === e2y){ eSpeed[1] *= -1; } e2x -= (eSpeed[2] * timePassed) e2y -= (eSpeed[3] * timePassed) if(e2x <= -10 || e2x >= 580){ eSpeed[2] *= -1; } if(e2y >= 380 || e2y <= -10){ eSpeed[3] *= -1; } e3x += (eSpeed[4] * timePassed) e3y += (eSpeed[5] * timePassed) if(e3x <= -10 || e3x >= 580){ eSpeed[4] *= -1; } if(e3y >= 380 || e3y <= -10){ eSpeed[5] *= -1; } e4x -= (eSpeed[6] * timePassed) e4y -= (eSpeed[7] * timePassed) if(e4x <= -10 || e4x >= 580){ eSpeed[6] *= -1; } if(e4y >= 380 || e4y <= -10){ eSpeed[7] *= -1; } e5x += (eSpeed[8] * timePassed) e5y -= (eSpeed[9] * timePassed) if(e5x <= -10 || e5x >= 580){ eSpeed[8] *= -1; } if(e5y >= 380 || e5y <= -10){ eSpeed[9] *= -1; } e5x -= (eSpeed[10] * timePassed) e5y -= (eSpeed[11] * timePassed) if(e5x <= -10 || e5x >= 580){ eSpeed[10] *= -1; } if(e5y >= 380 || e5y <= -10){ eSpeed[11] *= -1; } e6x -= (eSpeed[12] * timePassed) e6y -= (eSpeed[13] * timePassed) if(e6x <= -10 || e6x >= 580){ eSpeed[12] *= -1; } if(e6y >= 380 || e6y <= -10){ eSpeed[13] *= -1; } //Collison detection if (circleCollision(playerX, playerY, 20, e1x, e1y, 20)){ score -= 1; document.write("You are out! Score:" + score + "! "); navigator.vibrate(999999); } if (circleCollision(playerX, playerY, 20, e2x, e2y, 20)){ score -= 1; document.write("You are out! Score:" + score + "! "); navigator.vibrate(999999); } if (circleCollision(playerX, playerY, 20, e3x, e3y, 20)){ score -= 1; document.write("You are out! Score:" + score + "! "); navigator.vibrate(999999); } if (circleCollision(playerX, playerY, 20, e4x, e4y, 20)){ score -= 1; document.write("You are out! Score:" + score + "! "); navigator.vibrate(999999); } if (circleCollision(playerX, playerY, 20, e5x, e5y, 20)){ score -= 1; document.write("You are out! Score:" + score + "! "); navigator.vibrate(999999); } if (circleCollision(playerX, playerY, 20, e6x, e6y, 20)){ score -= 1; document.write("You are out! Score:" + score + "! "); navigator.vibrate(999999); } if(score >= 300){ eSpeed[0] += .5; eSpeed[1] += .5; eSpeed[2] += .5; eSpeed[3] += .5; eSpeed[4] += .5; eSpeed[5] += .5; eSpeed[6] += .5; eSpeed[7] += .5; eSpeed[8] += .5; eSpeed[9] += .5; eSpeed[10] += .5; eSpeed[11] += .5; eSpeed[12] += .5; eSpeed[13] += .5; } window.requestAnimationFrame(draw); } draw(); }

Dodge Ball Bounce V2 [game]