//canvas variable var canvas; var canvasContext; //about the ball var ballRadius = 6; //the color of the ball var ballColor = 'white'; //how fast the fast moves in the x and y directions var ballSpeedX = 4; var ballSpeedY = 4; //when the ball hits the paddle multiply its speed var speedmultiplier = 0.2; //paddlemargin so the paddle can't go out and have some distance at the corner var paddlemargin = 30; //paddle ai can't always chase the ball there is some rest when it can rest when the ball is near var diffrencefromcenter = 20; //how fast the ai paddle can move var aispeed = 12; //the default score of the playrs and the score required to win var player1Score = 0; var player2Score = 0; var player3Score = 0; var player4Score = 0; const WINNING_SCORE = 3; //to show the winning dialouge box var showingWinScreen = false; //initial x and y positions of paddles //paddle1 and paddle2 are placed verically so Y var paddle1Y = 250; var paddle2Y = 250; //paddle3 and paddle4 are placed horizontally so X var paddle3X = 400; var paddle4X = 400; //some constant variables about the paddles const PADDLE_THICKNESS = 10; const PADDLE_HEIGHT = 80; //this array difines the problem sequence when the ball stuck at 45deg angle at the corner var errorlist1 = ['blue', 'red', 'blue', 'red']; var errorlist2 = ['blue', 'yellow', 'blue', 'yellow']; var last4moves = []; //a function to get the mouse postion function calculateMousePos(evt) { var rect = canvas.getBoundingClientRect(); var root = document.documentElement; var mouseX = evt.clientX - rect.left - root.scrollLeft; var mouseY = evt.clientY - rect.top - root.scrollTop; return { x:mouseX, y:mouseY }; } //when showing the win screen after clicking reset the game function handleMouseClick(evt) { if(showingWinScreen) { player1Score = 0; player2Score = 0; player3Score = 0; player4Score = 0; showingWinScreen = false; } } //initalize the components function init(){ //get the canvas element canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); canvasContext.canvas.font = "30px Comic Sans MS"; //we want the complete screen display var myWidth = window.innerWidth; var myHeight = window.innerHeight; canvasContext.canvas.width = myWidth - 20; canvasContext.canvas.height = myHeight - 20; //the center positions in the canvas cmx = canvas.width/2; cmy = canvas.height/2; } //execute this block only after the window is loaded window.onload = function() { //initialize the components init(); ballReset(); //this statement is repeated here because of a bug canvasContext.font = "30px Comic Sans MS"; //everytime the window is resized fire this function window.addEventListener('resize', init, false) var framesPerSecond = 40; //this function is called after every freame setInterval(function() { moveEverything(); drawEverything(); }, 1000/framesPerSecond); //get the mouse click canvas.addEventListener('mousedown', handleMouseClick); //while the mouse moves do this canvas.addEventListener('mousemove', function(evt) { var mousePos = calculateMousePos(evt); paddle4X = mousePos.x - (PADDLE_HEIGHT/2); }); //for touch sreens move canvas.addEventListener("touchmove", function(e){ var rect = canvas.getBoundingClientRect(); var root = document.documentElement; var touch = e.changedTouches[0]; var touchX = parseInt(touch.clientX) - rect.top - root.scrollTop ; e.preventDefault(); paddle4X = touchX - PADDLE_HEIGHT/2;}); } //checking equal arrays function Array.prototype.equals = function (array, strict) { if (!array) return false; if (arguments.length == 1) strict = true; if (this.length != array.length) return false; for (var i = 0; i < this.length; i++) { if (this[i] instanceof Array && array[i] instanceof Array) { if (!this[i].equals(array[i], strict)) return false; } else if (strict && this[i] != array[i]) { return false; } else if (!strict) { return this.sort().equals(array.sort(), true); } } return true; } //debug the error function debugerror() { if (last4moves.length >= 4){ last4moves = last4moves.slice(4); } last4moves.unshift(ballColor); if (last4moves.equals(errorlist1, false) || last4moves.equals(errorlist2, false)){ paddle1Y = 200; paddle2Y = 200; ballReset(); } } //to reset the ball function ballReset() { //check if someone has won if(player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE || player3Score >= WINNING_SCORE || player4Score >= WINNING_SCORE) { //if won then show the winningscreen showingWinScreen = true; } ballColor = 'white'; //for deciding the direction taken by the ball //generate a random number speedcondition = Math.floor(Math.random() * (5 - 1) + 1); //swith between differnt values switch(speedcondition){ case 1: ballSpeedX = 4; ballSpeedY = 4; break; case 2: ballSpeedX = -4; ballSpeedY = 4; break; case 3: ballSpeedX = 4; ballSpeedY = -4; break; case 4: ballSpeedX = -4; ballSpeedY = -4; break; } //set the ball's postion to the center ballX = canvas.width/2; ballY = canvas.height/2; } function score() { if (ballColor == 'yellow'){ player1Score++; } else if (ballColor == 'red') { player2Score++; } else if (ballColor == 'blue') { player3Score++; } else if (ballColor == 'green') { player4Score++; } } // var ballX = cmx; // var ballY = cmy; //moving the red computer function firstcomputerMovement() { var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2) + 10; if(paddle2YCenter < ballY - diffrencefromcenter) { if(paddle2Y + PADDLE_HEIGHT <= canvas.height - paddlemargin){ paddle2Y = paddle2Y + aispeed; } } else if(paddle2YCenter > ballY + diffrencefromcenter) { if(paddle2Y >= paddlemargin){ paddle2Y = paddle2Y - aispeed; } } } function secondcomputerMovement() { var paddle3XCenter = paddle3X + (PADDLE_HEIGHT/2); if(paddle3XCenter < ballX - diffrencefromcenter) { if(paddle3X + PADDLE_HEIGHT <= canvas.width - paddlemargin){ paddle3X = paddle3X + aispeed; } } else if(paddle3XCenter > ballX + diffrencefromcenter) { if(paddle3X >= paddlemargin){ paddle3X = paddle3X - aispeed; } } } function thirdcomputerMovement() { var paddle1YCenter = paddle1Y + (PADDLE_HEIGHT/2); if(paddle1YCenter < ballY - diffrencefromcenter) { if(paddle1Y + PADDLE_HEIGHT <= canvas.height - paddlemargin){ paddle1Y = paddle1Y + aispeed; } } else if(paddle1YCenter > ballY + diffrencefromcenter) { if(paddle1Y >= paddlemargin){ paddle1Y = paddle1Y - aispeed; } } } function fourthcomputerMovement() { var paddle4XCenter = paddle4X + (PADDLE_HEIGHT/2); if(paddle4XCenter < ballX - diffrencefromcenter) { if(paddle4X + PADDLE_HEIGHT <= canvas.width - paddlemargin){ paddle4X = paddle4X + aispeed; } } else if(paddle4XCenter > ballX + diffrencefromcenter) { if(paddle4X >= paddlemargin){ paddle4X = paddle4X - aispeed; } } } function moveEverything() { if(showingWinScreen) { return; } firstcomputerMovement(); secondcomputerMovement(); thirdcomputerMovement(); // fourthcomputerMovement(); ballX = ballX + ballSpeedX; ballY = ballY + ballSpeedY; if(ballX-ballRadius <= 10) { if(ballY > paddle1Y && ballY < paddle1Y+PADDLE_HEIGHT) { ballSpeedX = -ballSpeedX; ballColor = 'yellow' debugerror(); var deltaY = ballY -(paddle1Y+PADDLE_HEIGHT/2); ballSpeedY = deltaY * speedmultiplier; } else { if(ballColor=='white'){ player1Score--; } else{ score();// must be BEFORE ballReset() } ballReset(); } } if(ballX+ballRadius >= canvas.width-10) { if(ballY > paddle2Y && ballY < paddle2Y+PADDLE_HEIGHT) { ballSpeedX = -ballSpeedX; ballColor = 'red'; debugerror(); var deltaY = ballY -(paddle2Y+PADDLE_HEIGHT/2); ballSpeedY = deltaY * speedmultiplier; } else { if(ballColor=='white'){ player2Score--; } else{ score();// must be BEFORE ballReset() } ballReset(); } } if(ballY-ballRadius <= 10) { // ballSpeedY = -ballSpeedY; if(ballX > paddle3X && ballX < paddle3X+PADDLE_HEIGHT) { ballSpeedY = -ballSpeedY; ballColor = 'blue'; debugerror(); var deltaX = ballX -(paddle3X+PADDLE_HEIGHT/2); ballSpeedX = deltaX * speedmultiplier; } else { if(ballColor=='white'){ player3Score--; } else{ score();// must be BEFORE ballReset() } ballReset(); } } if(ballY+ballRadius >= canvas.height - 10) { // ballSpeedY = -ballSpeedY; if(ballX > paddle4X && ballX < paddle4X+PADDLE_HEIGHT) { ballSpeedY = -ballSpeedY; ballColor = 'green'; debugerror(); var deltaX = ballX -(paddle4X+PADDLE_HEIGHT/2); ballSpeedX = deltaX * speedmultiplier; } else { if(ballColor=='white'){ player4Score--; } else{ score();// must be BEFORE ballReset() } ballReset(); } } } // function drawNet() { // for(var i=0;i= WINNING_SCORE) { canvasContext.fillStyle = 'yellow'; canvasContext.fillText("Yellow Player Won", cmx, cmy); } else if(player2Score >= WINNING_SCORE) { canvasContext.fillStyle = 'red'; canvasContext.fillText("Red Player Won", cmx, cmy); } else if(player3Score >= WINNING_SCORE) { canvasContext.fillStyle = 'blue'; canvasContext.fillText("Blue Player Won", cmx, cmy); } else if(player4Score >= WINNING_SCORE) { canvasContext.fillStyle = 'green'; canvasContext.fillText("Green Player Won", cmx, cmy); } canvasContext.fillText("click to continue", cmx, canvas.height - 100); return; } // drawNet(); // this is left player paddle colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'yellow'); // this is right computer paddle colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'red'); colorRect(paddle3X, 0, PADDLE_HEIGHT, PADDLE_THICKNESS, 'blue'); colorRect(paddle4X, canvas.height - 10, PADDLE_HEIGHT,PADDLE_THICKNESS, 'green'); // next line draws the ball colorCircle(ballX, ballY, ballRadius, ballColor); canvasContext.fillStyle = 'yellow'; canvasContext.fillText(player1Score, 100, canvas.height-100); canvasContext.fillStyle = 'red'; canvasContext.fillText(player2Score, canvas.width-100, 100); canvasContext.fillStyle = 'blue'; canvasContext.fillText(player3Score, 100, 100); canvasContext.fillStyle = 'green'; canvasContext.fillText(player4Score, canvas.width-100, canvas.height - 100); } function colorCircle(centerX, centerY, radius, drawColor) { canvasContext.fillStyle = drawColor; canvasContext.beginPath(); canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true); canvasContext.lineWidth = 2; canvasContext.strokeStyle = "white"; canvasContext.stroke(); canvasContext.fill(); } function colorRect(leftX,topY, width,height, drawColor) { canvasContext.fillStyle = drawColor; canvasContext.fillRect(leftX,topY, width,height); } // function drawNet() { // colorRect(200, 0, 10, 150, 'blue'); // colorRect(canvas.width - 200, 0, 10, 150, 'blue'); // colorRect(0, 150, 150, 10, 'yellow'); // colorRect(0, canvas.height - 150, 150, 10, 'yellow'); // colorRect(200, canvas.height, 10, -150, 'green'); // colorRect(canvas.width-200, canvas.height, 10, -150, 'green'); // colorRect(canvas.width, 150, -150, 10, 'red'); // colorRect(canvas.width, canvas.height - 150, -150, 10, 'red'); // }

Pong 4Player {GAME}