var gameCanvas; //Game's canvas var draw; //Canvas context is stored in this eventually var isInit = false; //Is the game initialized? var gameInt; //Update interval var falseKeycode = {}; //Keys NOT being pressed var keycode = {}; //Keys being pressed var touches; //Tracks touches on the screen var bar1X = 0; //Determines initial positions for ball and bars var bar1Y = 100; var bar2X = 450; var bar2Y = 100; var ballX = 375; var ballY = 250; var touchY, touchY2; var barUp; //Directional variables var barDown; var bar2Up; var bar2Down; var ballUp = true; var ballDown = false; var barDir = false; //If true, change direction var ballSpeed = 5; //Speeds for the bar/ball; experiment if you'd like! var barSpeed = 7; var barScore = 0; //Score tracking var barScore2 = 0; var ballScore = 0; //Deprecated var playAI = false; //If true, you're playing against AI var paused; //Is the game paused? var mainLoop = function() { //Main loop for the game; gets updated every frame updateGame(); updateCanvas(); } function initCanvas() { if (!isInit) { gameCanvas = document.getElementById("gameCanvas"); //gameCanvas.width = 500; gameCanvas.width = window.innerWidth; //Set canvas dimensions to the window's inner dimensions //gameCanvas.height = 450; gameCanvas.height = window.innerHeight; if (window.innerWidth > 500) { //Cap the width gameCanvas.width = 500; } if (window.innerHeight > 450) { //Cap the height gameCanvas.height = 450; } else { gameCanvas.height = 350; } bar2X = gameCanvas.width - 50; draw = gameCanvas.getContext("2d"); gameCanvas.addEventListener("touchmove", checkTouchPos, false); //Listens for these events gameCanvas.addEventListener("touchend", checkTouchRelease, false); gameCanvas.addEventListener("keydown", checkKeypress, false); gameCanvas.addEventListener("keyup", checkKeyup, false); alert("Canvas initialized!"); gameInt = setInterval(mainLoop, 1000/60); //Divide 1000 by number of frames you want per second isInit = true; //Prevents this function from being called twice } } function drawImg() { //Draw the rectangles on the screen (as well as the score) draw.fillRect(bar1X, bar1Y + 30, 50, 150); draw.fillRect(bar2X, bar2Y + 30, 50, 150); draw.fillRect(ballX, ballY, 50, 50); draw.fillText(barScore, 0, 10); draw.fillText(barScore2, 300, 10); } function updateGame() { //Main update function for the game; called every frames if (playAI) { ai(); } //Movement//////////////////// if (touches) { if (touches[0]) { if (touchY !== null && touches[0].pageX <= 100) { bar1Y = touchY - 150; } else if (touchY !== null && touches[0].pageX > 100) { bar2Y = touchY - 150; } } if (touches[1]) { if (touchY2 !== null && touches[1].pageX > 100) { bar2Y = touchY2 - 150; } else if (touchY2 !== null && touches[1].pageX <= 100) { bar1Y = touchY2 - 150; } } } if (barUp) { bar1Y = bar1Y - barSpeed; } if (barDown) { bar1Y = bar1Y + barSpeed; } if (bar2Up) { bar2Y = bar2Y - barSpeed; } if (bar2Down) { bar2Y = bar2Y + barSpeed; } if (ballUp) { ballY = ballY - ballSpeed; } if (ballDown) { ballY = ballY + ballSpeed; } if (barDir) { ballX = ballX - 7; } else { ballX = ballX + 7; } ///////////////////////// //Border Creation/////// if (bar1Y > gameCanvas.height - 75/*375*/) { bar1Y = 375; } else if (bar1Y < 0) { bar1Y = 0; } if (bar2Y > gameCanvas.height - 75) { bar2Y = 375; } else if (bar2Y < 0) { bar2Y = 0; } if (ballY > gameCanvas.height - 50) { ballY = gameCanvas.height - 50; ballDown = false; ballUp = true; } else if (ballY < 25) { ballY = 25; ballUp = false; ballDown = true; } //////////////////////// //Change Ball Direction/ if (barDir && ballX < bar1X + 50 && ballY >= bar1Y && ballY <= bar1Y + 200) { if (ballX > 0) { barDir = false; //barScore = barScore + 1; } if (ballUp) { ballUp = false; ballDown = true; ballSpeed = Math.random(5, 7) * 10; } else { ballUp = true; ballDown = false; ballSpeed = Math.random(5, 7) * 10; } //Increment bar point by .5 } else if (!barDir && ballX + 25 > bar2X - 25 && ballY >= bar2Y && ballY <= bar2Y + 200) { if (ballX < 100) { barDir = true; //barScore = barScore + 1; } else { barDir = true; //barScore2 = barScore2 + 1; } //Increment bar point by .5 if (ballUp) { ballUp = false; ballDown = true; ballSpeed = Math.random(5, 7) * 10; } else { ballUp = true; ballDown = false; ballSpeed = Math.random(5, 7) * 10; } } if (ballX >= gameCanvas.width || ballX <= -100) { if (ballX < 0) { barScore2 = barScore2 + 1; } else if (ballX > gameCanvas.width) { barScore = barScore + 1; } ballX = gameCanvas.width / 2/*200*/; ballY = gameCanvas.height / 2/*250*/; ballUp = false; ballDown = false; ballScore = ballScore + 1; //Increment point for ball by 1 } //////////////////////// } function pauseGame() { if (!paused) { clearInterval(gameInt); //Stop updating paused = true; } else { gameInt = setInterval(mainLoop, 1000/60); //Resume updating paused = false; } } function changeAIEnable() { if (playAI) { document.getElementById('butt').innerHTML='Toggle to AI'; //Change text playAI = false; //Disable AI } else if (!playAI) { document.getElementById('butt').innerHTML='Toggle to 2P'; playAI = true; //Enable AI } } function ai() { //Check ball position and respond accordingly if (barDir) { if (bar2Y < bar1Y) { bar2Up = true; bar2Down = false; } else { bar2Up = false; bar2Down = true; } } else { if (ballUp || ballDown) { if (ballUp) { if (ballY < bar2Y) { bar2Up = true; bar2Down = false; } else { bar2Up = false; bar2Down = true; } } if (ballDown) { if (ballY > bar2Y) { bar2Down = true; bar2Up = false; } else { bar2Down = false; bar2Up = true; } } } else { if (ballY > bar2Y) { bar2Up = false; bar2Down = true; } else if (ballY < bar2Y) { bar2Up = true; bar2Down = false; } } } } function resetScore() { //Resets the score barScore = 0; barScore2 = 0; bar1Y = 100; bar2Y = 100; } function checkTouchPos(e) { //Checks where user is touching e.preventDefault(); touches = e.changedTouches; touchY = touches[0].pageY; if (touches[1]) { touchY2 = touches[1].pageY; } } function checkTouchRelease(e) { //Random unused function is random may use it later } function checkClick(e) { //Checks user clicks if (e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if (e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } } function checkKeypress(e) { //Check keypresses e.preventDefault(); keycode[e.keyCode] = true; if (keycode[87]) { barUp = true; falseKeycode[87] = false; } if (keycode[83]) { barDown = true; falseKeycode[83] = false; } if (!playAI) { if (keycode[38]) { bar2Up = true; falseKeycode[38] = false; } if (keycode[40]) { falseKeycode[40] = false; bar2Down = true; } if (!keycode[87] && !keycode[83] && !keycode[38] && !keycode[40]) { barUp = false; barDown = false; bar2Up = false; bar2Down = false; } } //alert(keycode); } function checkKeyup(e) { //Check key releases falseKeycode[e.keyCode] = true; //keycode[e.keyCode] = false; if (falseKeycode[87]) { barUp = false; keycode[87] = false; } if (falseKeycode[83]) { barDown = false; keycode[83] = false; } if (!playAI) { if (falseKeycode[38]) { bar2Up = false; keycode[38] = false; } if (falseKeycode[40]) { bar2Down = false; keycode[40] = false; } } } function newWidth() { //Have user define a custom width & height var canWidth = prompt("Insert the new canvas width. MAX 500"); if (canWidth > 0) { gameCanvas.width = canWidth; } else { alert('Please input a valid width.'); } } function newHeight() { var canHeight = prompt("Insert the new canvas height. MAX 450"); if (canHeight > 0) { gameCanvas.height = canHeight; } else { alert('Please input a valid height.'); } } function updateCanvas() { //Clear the canvas and redrdaw everything gameCanvas.width = gameCanvas.width; drawImg(); }

Pong [MOBILE and PC SUPPORTED] [AI UPDATE]