<!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>
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>
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>