window.onload = pongGame = () =>{ const canvas = document.createElement('canvas'); canvas.id = 'canvas'; canvas.width = 350; canvas.height = 550; const context = canvas.getContext('2d'); const speed = 200; let humanScore = []; let cpuScore = []; let ballObjects = []; let numberOfBalls = 5; let playerPaddlePos = []; let computerYPos = canvas.height/2; let paddleHeight = 150; let ballObjectYPos = []; let ballObjectXPos = []; const board = { color: 'black', createCanvas(){ canvas.width = canvas.width; canvas.height = canvas.height; document.body.appendChild(canvas); }, stylizeBoard(){ context.fillStyle = this.color; context.fillRect(0, 0, canvas.width, canvas.height); } }; const net = { netColor: 'white', netWidth: 10, netHeight: 50, netYPos: 25, drawNet(){ context.fillStyle = this.netColor; for(let i = 1; i < 40; i += 4){ context.fillRect(canvas.width/2, this.netYPos * i, this.netWidth, this.netHeight); } } }; class Ball { constructor(ballXPos, ballYPos) { this.ballXPos = ballXPos; this.ballYPos = ballYPos; this.ballRadius = 10; this.ballColor = 'white'; this.ballMotionX = 1; this.ballMotionY = 1; this.ballDirection = -1; } } Ball.prototype.drawBall = function (){ context.fillStyle = this.color; context.beginPath(); context.arc(this.ballXPos, this.ballYPos, this.ballRadius, 0, 2 * Math.PI); context.fill(); }; Ball.prototype.ballMotion = function () { this.ballXPos = this.ballXPos + this.ballMotionX; this.ballYPos = this.ballYPos + this.ballMotionY; }; Ball.prototype.ballWallBounce = function (){ if(this.ballYPos - this.ballRadius <= 0){ this.ballMotionY = this.ballMotionY * this.ballDirection; } else if(this.ballYPos + this.ballRadius >= canvas.height){ this.ballMotionY = this.ballMotionY * this.ballDirection; } }; Ball.prototype.ballHumanBounce = function (){ if(this.ballXPos + this.ballRadius == (Math.round((canvas.width/20))+ 30) && this.ballYPos + this.ballRadius >= playerPaddlePos[0] && this.ballYPos + this.ballRadius <= playerPaddlePos[0] + paddleHeight*1.1){ this.ballMotionX = this.ballMotionX * this.ballDirection; } }; Ball.prototype.ballComputerBounce = function () { if(this.ballXPos + this.ballRadius == (Math.round(canvas.width *.94) ) && this.ballYPos + this.ballRadius >= computerYPos && this.ballYPos + this.ballRadius <= computerYPos + paddleHeight * 1.1){ this.ballMotionX = this.ballMotionX * this.ballDirection; } }; Ball.prototype.ballHumanScore = function (){ for(let i = 0; i <= numberOfBalls -1; i++){ if(this.ballXPos == canvas.width){ humanScore.push(1); this.ballXPos = canvas.width/2; this.ballMotionX = this.ballMotionX * this.ballDirection; } } }; Ball.prototype.ballComputerScore = function () { for(let i = 0; i <= numberOfBalls-1; i++){ if(this.ballXPos == 0){ cpuScore.push(1); this.ballXPos = canvas.width/2; this.ballMotionX = this.ballMotionX * this.ballDirection; } } }; let distance = (x1, y1, x2, y2) =>{ return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); } Ball.prototype.ballToBallBounce = function () { let obj = ballObjects; let n = 0; for(let i = 0; i < obj.length; i++){ if(ballObjects[n].ballYPos == ballObjects[i].ballYPos){ continue; } if((ballObjects[n].ballRadius + ballObjects[n].ballRadius) >= distance(ballObjects[n].ballXPos, ballObjects[n].ballYPos, ballObjects[i].ballXPos, ballObjects[i].ballYPos)) { ballObjects[n].ballMotionX = ballObjects[n].ballMotionX * -1; ballObjects[n].ballMotionY = ballObjects[n].ballMotionY * -1; ballObjects[i].ballMotionY = ballObjects[i].ballMotionY * -1; ballObjects[i].ballMotionX = ballObjects[i].ballMotionX * -1; ballObjects[n].ballXPos =- (canvas.width/3) / ballObjects[n].ballRadius; ballObjects[n].ballYPos =- (canvas.width/3) / ballObjects[n].ballRadius; ballObjects[i].ballYPos =- (canvas.width/3) / ballObjects[i].ballRadius; ballObjects[i].ballXPos =- (canvas.width/3) / ballObjects[i].ballRadius; } if(i == obj.length -1){ ++n; i = -1; if(n == obj.length-2){ return; } continue; } } }; const determineBallObjects = () => { let s = 0; for(let i = 0; i<= numberOfBalls; i++){ if(ballObjects.length -1 < numberOfBalls){ let balls = new Ball(Math.floor((Math.random() +1) * (canvas.width/3)), Math.floor((Math.random() +1) * (canvas.height/3))); ballObjects.push(balls); } else if(ballObjects.length -1 == numberOfBalls){ return; } } } const animateBalls = () =>{ for(let i = 0; i < numberOfBalls; i++){ ballObjects[i].drawBall(); ballObjects[i].ballMotion(); ballObjects[i].ballWallBounce(); ballObjects[i].ballHumanBounce(); ballObjects[i].ballComputerBounce(); ballObjects[i].ballHumanScore(); ballObjects[i].ballComputerScore(); ballObjects[i].ballToBallBounce(); } } const getScore = (userScore) => { let userScoreString = userScore.toString(); let convertToScore = eval(userScoreString.replace(/,/g, "+")); if(convertToScore == undefined){ return 0; }else{ return convertToScore; } } const scoreboard = { scoreboardColor: 'white', scoreboardFontSize: 60, scoreboardFontStyle: 'Arial', scoreboardHumanPos: canvas.width/4, scoreboardCpuPos: canvas.width/1.5, drawScoreboard(event){ const scoreboardYPos = this.scoreboardFontSize; context.fillStyle = this.scoreboardColor; context.font = this.scoreboardFontSize.toString() + 'px ' + this.scoreboardFontStyle; context.fillText(getScore(humanScore), this.scoreboardHumanPos, scoreboardYPos); context.fillText(getScore(cpuScore), this.scoreboardCpuPos, scoreboardYPos); }, }; const playerYpos = (event) =>{ let rect = canvas.getBoundingClientRect(); playerPaddlePos[0] = Math.round(event.clientY - rect.top); } canvas.addEventListener('mousemove', playerYpos); const playerPaddle = { playerColor: 'white', playerXPos: canvas.width/20, playerWidth: 15, drawPlayer(event){ context.fillStyle = this.playerColor; context.fillRect(this.playerXPos, playerPaddlePos[0], this.playerWidth, paddleHeight); } }; const getBallCoordinates = () =>{ for(let i = 0; i < ballObjects.length; i++){ ballObjectYPos[i] = ballObjects[i].ballYPos; ballObjectXPos[i] = ballObjects[i].ballXPos; } } let getClosestBall = () => { for(let n = 0; n < numberOfBalls; n++){ closestXBall = ballObjectXPos.filter((value) => value >= ballObjectXPos[n]); if(closestXBall.length == 1){ return closestXBall[0]; } } } let closestBallIndex = () => { return ballObjectXPos.indexOf(getClosestBall()); } const computerPaddle = { computerColor: 'white', computerXPos: canvas.width * 0.94, computerWidth: 15, drawComputer(){ context.fillStyle = this.computerColor; context.fillRect(this.computerXPos, computerYPos, this.computerWidth, paddleHeight); }, movePaddle(){ if ((computerYPos + (paddleHeight/2)) < ballObjectYPos[closestBallIndex()]) { computerYPos = computerYPos + 1; } else if ((computerYPos + (paddleHeight/2)) > ballObjectYPos[closestBallIndex()]) { computerYPos = computerYPos - 1; } } }; const animatePong = () => { board.createCanvas(); board.stylizeBoard(); net.drawNet(); determineBallObjects(); animateBalls(); scoreboard.drawScoreboard(); playerPaddle.drawPlayer(); getBallCoordinates(); computerPaddle.drawComputer(); computerPaddle.movePaddle(); } setInterval(animatePong, 600/speed); }

Pong 2.1