window.onload = function() { var canvas = document.getElementById("canv"); var touchPad = document.getElementById('touchPad'); var c = canvas.getContext("2d"); canvas.addEventListener("click", startGame); var level = 1; var paddleHeight = 40; c.fillRect(0,0,360,250); drawLevel(); roundRect(150,95,60,40); c.fillStyle = "black"; c.font = "900 10px sans-serif"; c.fillText("Start Game",153,125); function roundRect(x,y,w,h) { var r = 5; c.beginPath(); c.arc(x,y+r,r,Math.PI,Math.PI/180*270,false); c.arc(x+w,y+r,r,Math.PI/180*270,0,false); c.arc(x+w,y+r+h,r,0,Math.PI/180*90,false); c.arc(x,y+r+h,r,Math.PI/180*90,Math.PI,false); c.closePath(); c.fillStyle = "yellow"; c.fill(); c.beginPath(); c.arc(x+2,y+r+2,r-2,Math.PI,Math.PI/180*270); c.arc(x+w-2,y+r+2,r-2,Math.PI/180*270,0); c.arc(x+w-2,y+r+h-2,r-2,0,Math.PI/180*90); c.arc(x+2,y+r+h-2,r-2,Math.PI/180*90,Math.PI); c.closePath(); c.strokeStyle = "black"; c.fillStyle = "yellow"; c.stroke(); } function drawLevel() { c.fillStyle = "yellow"; c.font = "900 10px sans-serif"; c.fillText("Level " + level, 160,15); } function startGame() { canvas.removeEventListener("click",startGame); var fps = 700; var radius = 8; var ballX = canvas.width/2; var ballY = canvas.height/2; var ballSpeedX = 1; var ballSpeedY = 1; var paddleWidth = 7; // var paddleHeight = 50; var paddle1Y = canvas.height/2 - paddleHeight/2; var paddle2Y = canvas.height/2 - paddleHeight/2; // var paddle2Center = paddle2Y + paddleHeight/2; var playerScore = 0; var AIScore = 0; var disX = 0; var disY = 0; var touchX = 0; var touchY = 0; var paddleDis = 0; var paddle1Ynew; var si = setInterval(function() { clearCanv(); updateBall(); updatePaddle(); drawNet(); updateScore(); drawLevel(); drawPaddles(); drawBall(); },1000/fps); function calcMousePos(e) { var rect = canvas.getBoundingClientRect(); var root = document.documentElement; var mouseX = e.clientX - rect.left - root.scrollLeft; var mouseY = e.clientY - rect.top - root.scrollTop; return { x:mouseX, y:mouseY } } function calcTouchPos(ev) { var rect = canvas.getBoundingClientRect(); var root = document.documentElement; var pos = ev.changedTouches[0]; touchX = pos.clientX - rect.left - root.scrollLeft; touchY = pos.clientY - rect.top - root.scrollTop; ev.preventDefault(); } function calcMoveDis(evt) { var rect = canvas.getBoundingClientRect(); var root = document.documentElement; var move = evt.changedTouches[0]; disX = move.clientX - touchX - rect.left - root.scrollLeft; disY = move.clientY - touchY - rect.top - root.scrollTop; evt.preventDefault(); } canvas.addEventListener( "mousemove", function(e) { var mousePos = calcMousePos(e); paddle1Y = mousePos.y -( paddleHeight/2); }) touchPad.addEventListener( "touchstart", function(ev) { var touchPos = calcTouchPos(ev); // paddle1Y = paddle1Ynew; }) touchPad.addEventListener('touchmove', function(evt) { var tmovePos = calcMoveDis(evt); }) touchPad.addEventListener('touchend', function(evnt) { disY = 0; paddle1Y = paddleDis; }) function clearCanv() { c.fillStyle = "rgba(10,10,10,1)"; c.fillRect(0,0,canvas.width,canvas.height); } function updateBall() { // if ball goes right //if ball is within paddle range if(ballX+7 >= canvas.width-paddleWidth && ballY >= paddle2Y && ballY <= paddle2Y + paddleHeight) { ballSpeedX = -ballSpeedX; } if(ballX > canvas.width) { ballX = canvas.width/2; ballY = canvas.height/2; ballSpeedX = -ballSpeedX; playerScore++; } // if ball goes to left //if ball is within paddle range if(ballX-7 <= paddleWidth && ballY >= paddleDis && ballY <= paddleDis + paddleHeight) { //if upper half if(ballY <= paddleDis + paddleHeight/2) { ballSpeedX = (((paddleHeight/2)-(ballY - paddleDis))/(paddleHeight/2))+1; if(ballSpeedY < 0) { ballSpeedY = -ballSpeedX; } else { ballSpeedY = ballSpeedX; } } //if bottom half if(ballY > paddleDis + paddleHeight/2) { ballSpeedX = ((ballY - (paddleDis + paddleHeight/2))/25)+1; if(ballSpeedY < 0) { ballSpeedY = -ballSpeedX; } else { ballSpeedY = ballSpeedX; } } } else if(ballX <= 0) { ballX = canvas.width/2; ballY = canvas.height/2; ballSpeedX = 1; ballSpeedY = 1; AIScore++; } // Y coordinates if(ballY >= canvas.height) { ballSpeedY = -ballSpeedY; } if(ballY <= 0) { ballSpeedY = -ballSpeedY; } ballX += ballSpeedX; ballY += ballSpeedY; } function updatePaddle() { //player paddle paddleDis = paddle1Y + disY; paddle1Ynew = paddleDis; // AI Paddle if(paddle2Y+paddleHeight/2+3 < ballY) { paddle2Y +=1.3; } if(paddle2Y+paddleHeight/2-3 > ballY) { paddle2Y -=1.3; } } function levelUp() { paddleHeight -= 15; roundRect(150,75,60,25); c.fillStyle = "black"; c.font = "900 10px sans-serif"; c.fillText("Continue",160,90); c.fillText("Level " + level,163,103); canvas.addEventListener("click", startGame); clearInterval(si); } function YouWon() { clearInterval(si); roundRect(128,75,105,28); c.fillStyle ="blue"; c.font = "900 12px sans-serif"; c.fillText("You won!",150,90); c.fillText("Thanks for playing",130,105); roundRect(145,145,70,25); c.fillStyle ="blue"; c.font = "900 12px sans-serif"; c.fillText("Play Again?",148,167); level = 1; paddleHeight = 40; canvas.addEventListener("click", startGame); } function YouLost() { clearInterval(si); roundRect(145,75,70,25); c.fillStyle ="darkred"; c.font = "900 12px sans-serif"; c.fillText("You lost!😱",150,97); roundRect(145,145,70,25); c.fillStyle ="darkred"; c.font = "900 12px sans-serif"; c.fillText("Restart?",158,167); level = 1; paddleHeight = 40; canvas.addEventListener("click", startGame); } function drawNet() { for(var i=16; i

Tennis Game(My First Ever Game!)