Skip to main content
Post Made Community Wiki by animusonStaffMod
added 80 characters in body
Source Link
A.J. Uppal
  • 19.2k
  • 11
  • 10
<!DOCTYPE html>
<html>
<body>

<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: #171700;
}

canvas {
    position: absolute;fixed;
left:0;
top:0;
width:100%;
height:100%;
    background: #171700;
    
}
</style>
<script>
var ar=new Array(32, 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 = 6.333;
recth = 50;

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(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 2,
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(0.5, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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;*/
return "whiteSmoke";
}

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>
<!DOCTYPE html>
<html>
<body>

<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: #171700;
}

canvas {
position: absolute;
background: #171700;

}
</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 = 6.333;
recth = 50;

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(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 2,
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(0.5, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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;*/
return "whiteSmoke";
}

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>
<!DOCTYPE html>
<html>
<body>

<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: #171700;
}

canvas {
    position:fixed;
left:0;
top:0;
width:100%;
height:100%;
    background: #171700;
    
}
</style>
<script>
var ar=new Array(32, 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 = 6.333;
recth = 50;

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(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 2,
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(0.5, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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;*/
return "whiteSmoke";
}

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>
added 13 characters in body
Source Link
A.J. Uppal
  • 19.2k
  • 11
  • 10

Hit enter to restart
Hit space to pause
Hit c to change the color of everything (in case something isn't visible)
Hit a to turn on the automatic mode for the left paddle

<!DOCTYPE html>
<html>
<body>

<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;#171700;
}

canvas {
position: absolute;
background: whiteSmoke;#171700;

}
</style>
<script>
var ar=new Array(32, 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 = 6.333;
recth = 50;

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(10.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 1.52,
friction = 0.977598,
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(10.5, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(10.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(10.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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;color;*/
return "whiteSmoke";
}

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>

Hit enter to restart
Hit space to pause
Hit c to change the color of everything (in case something isn't visible)
Hit a to turn on the automatic mode for the left paddle

<!DOCTYPE html>
<html>
<body>

<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(32, 33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
 var key = e.which;
  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 = 6.333;
recth = 50;

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(1, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 1.5,
friction = 0.9775,
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(1, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(1, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(1, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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>

Hit enter to restart
Hit space to pause
Hit a to turn on the automatic mode for the left paddle

<!DOCTYPE html>
<html>
<body>

<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: #171700;
}

canvas {
position: absolute;
background: #171700;

}
</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 = 6.333;
recth = 50;

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(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 2,
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(0.5, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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;*/
return "whiteSmoke";
}

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>
deleted 83 characters in body
Source Link
A.J. Uppal
  • 19.2k
  • 11
  • 10

Hit enter to restart
Hit space to pause
Hit c to change the color of everything (in case something isn't visible) 
Hit a to turn on the automatic mode for the left paddle

<!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(32, 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 = 6.333;
recth = 50;

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(0.51, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 1.5,
friction = 0.9775,
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(0.51, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(0.51, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(0.51, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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>

Hit enter to restart
Hit space to pause
Hit c to change the color of everything (in case something isn't visible) Hit a to turn on the automatic mode for the left paddle

<!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(32, 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 = 6.333;
recth = 50;

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(0.5, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 1.5,
friction = 0.9775,
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(0.5, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(0.5, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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>

Hit enter to restart
Hit space to pause
Hit c to change the color of everything (in case something isn't visible) 
Hit a to turn on the automatic mode for the left paddle

<!DOCTYPE html>
<html>
<body>

<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(32, 33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
 var key = e.which;
  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 = 6.333;
recth = 50;

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(1, 2.5);
choice = multiply[Math.floor(Math.random() * multiply.length)];
temp2 = choice*Math.sqrt(8-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 = 1.5,
friction = 0.9775,
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(1, 2.5);
  choice = multiply[Math.floor(Math.random() * multiply.length)];
  temp2 = choice*Math.sqrt(8-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(1, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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(1, 2.5);
        choice = multiply[Math.floor(Math.random() * multiply.length)];
        temp2 = choice*Math.sqrt(8-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>
deleted 1111 characters in body
Source Link
A.J. Uppal
  • 19.2k
  • 11
  • 10
Loading
deleted 1111 characters in body
Source Link
A.J. Uppal
  • 19.2k
  • 11
  • 10
Loading
deleted 1 character in body
Source Link
A.J. Uppal
  • 19.2k
  • 11
  • 10
Loading
Source Link
A.J. Uppal
  • 19.2k
  • 11
  • 10
Loading