After all, who doesn't love pong :) <!-- begin snippet: js hide: false --> <!-- language: lang-html --> <!DOCTYPE html> <html> <body> <!-- Lets make a simple snake game --> <div id="gameArea"> <canvas id="canvas"></canvas> <div id="statsPanel"></div> </div> <!-- Jquery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <style> html, body { background: whiteSmoke; } canvas { position: absolute; background: whiteSmoke; } </style> <script> var ar=new Array(33,34,35,36,37,38,39,40); $(document).keydown(function(e) { var key = e.which; //console.log(key); //if(key==35 || key == 36 || key == 37 || key == 39) if($.inArray(key,ar) > -1) { e.preventDefault(); return false; } return true; }); var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight-50; rectw = 10; recth = 75; var player1 = { x: 50, y: canvas.height/2-recth/2, velY: 0, velX: 0, color: getRandomColor(), }, player2 = { x: canvas.width-(50+rectw), y: canvas.height/2-recth/2, velY: 0, velX: 0, color: getRandomColor(), }; multiply = [-1, 1]; var choice = multiply[Math.floor(Math.random() * multiply.length)]; temp = getRandomInt(2, 5); choice = multiply[Math.floor(Math.random() * multiply.length)]; temp2 = choice*Math.sqrt(18-Math.pow(temp, 2)); temp*=-1; circle = { x: canvas.width/2-rectw/2, y: canvas.height/2-recth/2, velY: temp, velX: temp2, color: getRandomColor(), } var x = 150, y = 150, velY = 0, velX = 0, speed = 3, friction = 0.98, keys = []; auto = false; score1 = score2 = 0; var atime = ptime = getTime(); function getTime(){ return(new Date().getTime() / 1000); } col1 = getRandomColor(); col2 = getRandomColor(); col3 = getRandomColor(); tempX = 0 tempY = 0 paused = false; function update() { if (keys[38]) { if (player2.velY > -speed) { player2.velY--; } } if (keys[40]) { if (player2.velY < speed) { player2.velY++; } } if (keys[65]) { if(getTime()-atime > 0.75){ if (auto == false){ auto = true; }else{ auto = false; } atime = getTime(); } } if (keys[32]) { if(getTime()-ptime > 0.75){ if(paused == false){ tempX = circle.velX; tempY = circle.velY; circle.velX = circle.velY = 0; paused = true; }else{ circle.velX = tempX; circle.velY = tempY; paused = false; } ptime = getTime(); } } if (keys[13]){ multiply = [-1, 1]; var choice = multiply[Math.floor(Math.random() * multiply.length)]; temp = getRandomInt(2, 5); choice = multiply[Math.floor(Math.random() * multiply.length)]; temp2 = choice*Math.sqrt(32-Math.pow(temp, 2)); temp*=-1; circle.x = canvas.width/2-rectw/2; circle.y = canvas.height/2-recth/2; circle.velX = circle.velY = 0; setTimeout(function(){ score1=score2=0; circle = { x: canvas.width/2-rectw/2, y: canvas.height/2-recth/2, velY: temp, velX: temp2, color: getRandomColor(), } } , 3000); } if (keys[67]){ col1 = getRandomColor(); col2 = getRandomColor(); col3 = getRandomColor(); player1.color = getRandomColor(); player2.color = getRandomColor(); circle.color = getRandomColor(); } if (auto == false){ if (keys[87]) { if (player1.velY > -speed) { player1.velY--; } } if (keys[83]) { if (player1.velY < speed) { player1.velY++; } } }else{ player1.y = circle.y-recth/2; player1.velY = 0; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.font = "30px Verdana"; // Create gradient var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop("0", col1); gradient.addColorStop("0.5", col2); gradient.addColorStop("1.0", col3); // Fill with gradient ctx.fillStyle = gradient; ctx.fillText(score1, 100, 90); ctx.fillText(score2, canvas.width-160, 90); updatePlayer(player1); updatePlayer(player2); updateCircle(circle, player1, player2); setTimeout(update, 10); document.title = score1+", "+score2; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var audio = new Audio('http://www.mediacollege.com/downloads/sound-effects/alien/alien-noise-01.ogg'); function updateCircle(player, play1, play2) { player.y += player.velY; player.x += player.velX; if (player.x >= canvas.width-(50+rectw)) { if (play2.y <= player.y && player.y <= play2.y+recth){ player.x = canvas.width-(50+rectw); player.velX*=-1; play2.color = getRandomColor(); player.color = getRandomColor(); col1 = getRandomColor(); col2 = getRandomColor(); col3 = getRandomColor(); audio.play(); }else{ player.x = canvas.width/2-rectw/2; player.y = canvas.height/2-recth/2; multiply = [-1, 1]; var choice = multiply[Math.floor(Math.random() * multiply.length)]; temp = getRandomInt(2, 5); choice = multiply[Math.floor(Math.random() * multiply.length)]; temp2 = choice*Math.sqrt(32-Math.pow(temp, 2)); temp*=-1; player.velY = temp; player.velX = temp2; score1++; } } else if (player.x <= 60) { if (play1.y <= player.y && player.y <= play1.y+recth){ player.x = 60; player.velX*=-1 play1.color = getRandomColor(); player.color = getRandomColor(); col1 = getRandomColor(); col2 = getRandomColor(); col3 = getRandomColor(); audio.play(); }else{ player.x = canvas.width/2-rectw/2; player.y = canvas.height/2-recth/2; multiply = [-1, 1]; var choice = multiply[Math.floor(Math.random() * multiply.length)]; temp = getRandomInt(2, 5); choice = multiply[Math.floor(Math.random() * multiply.length)]; temp2 = choice*Math.sqrt(32-Math.pow(temp, 2)); temp*=-1; player.velY = temp; player.velX = temp2; score2++; } } if (player.y > canvas.height-5) { player.y = canvas.height-5; player.velY*=-1 } else if (player.y <= 5) { player.y = 5; player.velY*=-1 } ctx.fillStyle = player.color; ctx.beginPath(); ctx.arc(player.x, player.y, 5, 0, Math.PI * 2); ctx.fill(); } function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function updatePlayer(player) { player.velY *= friction; player.y += player.velY; if (player.y > canvas.height-recth) { player.y = canvas.height-recth; } else if (player.y <= 0) { player.y = 0; } ctx.fillStyle = player.color; ctx.beginPath(); ctx.fillRect(player.x, player.y, 10, recth); // ctx.arc(player.x, player.y, 5, 0, Math.PI * 2); ctx.fill(); } update(); document.body.addEventListener("keydown", function (e) { keys[e.keyCode] = true; }); document.body.addEventListener("keyup", function (e) { keys[e.keyCode] = false; }); </script> </body> </html> <!-- end snippet -->