Eumm... I had already included that link on my previous post...bartoleo wrote:You can look here...
http://www.squidi.net/three/index.php
Code: Select all
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Canvas Pong Experiment 2009 by Jason Anderson</title>
<style type="text/css">
body { background-color: #333; overflow: hidden; margin: 0; }
#body {
display: block;
position: absolute;
width: 640px;
height: 480px;
margin: 0 auto;
background-color: #000;
}
canvas {
display: block;
position: absolute;
width: 640px;
height: 480px;
left: 0;
top: 0;
z-index: 500;
}
#score1, #score2 {
display: block;
position: absolute;
font-size: 5em;
color: white;
z-index: 1000;
width: 315px;
text-align: center;
}
#score1 {
left: 0;
top: 10px;
}
#score2 {
right: 0;
top: 10px;
}
#divider {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 315;
border-right: 10px dotted white;
}
#debug {
display: block;
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
</style>
<script type="text/javascript">
var key=[0,0,0,0];
var tmr, pi = Math.PI;
var paddle1y, paddle2y, paddle1s, paddle2s;
var score1, score2;
var ballX, ballY, XD, YD, speed;
var game, pause, numPlayers;
function $(el) { return document.getElementById(el); }
function loadIt() {
$("debug").innerHTML = "";
game = document.getElementById("game").getContext("2d");
speedX = 4;
speedY = 4;
paddle1y = 200;
paddle2y = 200;
paddle1s = 0;
paddle2s = 0;
XD = speedX;
YD = speedY;
ballX = 320;
ballY = 240;
score1 = 0;
score2 = 0;
pause = 0;
//Set to 0 and it's CPU vs CPU... but they're in sync.. which sucks.. need to put some randomness in.
numPlayers = 1;
updateScore();
resetBall();
tmr = window.setInterval("drawStuff3();",10);
}
function drawStuff3() {
//HANDLE PLAYER ONE INPUT
if (numPlayers > 0) {
if ((key[0] && !key[1]) && paddle1y > 0) {
paddle1y -= 4;
} else if ((key[1] && !key[0]) && paddle1y < 400) {
paddle1y += 4;
}
} else {
if (ballY < paddle1y + 30 && paddle1y > 0) {
paddle1y -= 4;
} else if (ballY > paddle1y + 49 && paddle1y < 400) {
paddle1y += 4;
}
}
//HANDLE PLAYER TWO MOVEMENT
if (numPlayers == 2) {
if ((key[2] && !key[3]) && paddle2y > 0) {
paddle2y -= 4;
} else if ((key[3] && !key[2]) && paddle2y < 400) {
paddle2y += 4;
}
} else {
if (ballY < paddle2y + 30 && paddle2y > 0) {
paddle2y -= 4;
} else if (ballY > paddle2y + 49 && paddle2y < 400) {
paddle2y += 4;
}
}
//DO THE GAME BALL MOVEMENT AND STUFF
if (!pause) {
ballX += XD;
ballY += YD;
if (ballX > 630) {
XD = -speedX;
score1++;
updateScore();
resetBall();
} else if (ballX < 0) {
score2++;
updateScore();
resetBall();
}
if (ballY > 470) {
YD = -speedY;
} else if (ballY < 0) {
YD = speedY;
}
//HANDLE HITTING PLAYER ONE PADDLE
if (ballX <= 30 && ballX > 25 && ballY >= (paddle1y-10) && ballY < paddle1y + 80) {
var w = ballY - paddle1y;
if (w < 22) {
speedY = 6;
YD = -speedY;
} else if (w < 38) {
speedY = 3;
YD = -speedY;
} else if (w > 58) {
speedY = 6;
YD = speedY;
} else if (w > 42) {
speedY = 3;
YD = speedY;
} else {
speedY = 0;
YD = speedY;
}
XD = speedX;
}
//HANDLE HITTING PLAYER TWO PADDLE
if (ballX >= 610 && ballX < 615 && ballY >= (paddle2y-10) && ballY < paddle2y + 80) {
var w = ballY - paddle1y;
if (w < 22) {
speedY = 5;
YD = -speedY;
} else if (w < 38) {
speedY = 3;
YD = -speedY;
} else if (w > 58) {
speedY = 5;
YD = speedY;
} else if (w > 42) {
speedY = 3;
YD = speedY;
} else {
speedY = 0;
YD = speedY;
}
XD = -speedX;
}
}
game.clearRect(0,0,640, 480);
game.fillStyle = "#fff";
game.fillRect (20, paddle1y, 10, 80);
game.fillRect (610, paddle2y, 10, 80);
game.fillRect (ballX,ballY, 10, 10);
}
function resetBall() {
ballX = 315;
ballY = 235;
speedY = Math.floor(Math.random()*4) +1;
YD = speedY;
var r = Math.floor(Math.random()*2)+1;
if (r == 1) YD = -speedY;
//$("debug").innerHTML = r;
pause = 1;
setTimeout("pause = 0;", 1000);
}
function updateScore() {
$("score1").innerHTML = score1;
$("score2").innerHTML = score2;
}
function pauseGame() {
if (pause == 1) {
pause = 0;
$("debug").innerHTML = "";
} else {
pause = 1;
$("debug").innerHTML = "PAUSED";
}
}
function changeKey(which, to){
switch (which){
case 38: key[0]=to; break; // Up 1
case 40: key[1]=to; break; // Down 1
case 81: key[2]=to; break; // Up 2
case 65: key[3]=to; break; // Down 2
}
}
document.onkeydown=function(e){ changeKey((e||window.event).keyCode, 1); }
document.onkeyup=function(e){ changeKey((e||window.event).keyCode, 0); }
window.onload = function() { window.setTimeout("loadIt()", 1); }
</script>
</head>
<body>
<div id="body" onClick="pauseGame();">
<div id="divider"></div>
<canvas id="game" width="640" height="480">If you see this, you are unsupported</canvas>
<div id="score1"></div><div id="score2"></div>
<div id="debug"></div>
</div>
</body>
</html>Lol me and my neighbor played that for hours... Mine will be sort of like that but with simple graphics... Veeery simple.TechnoCat wrote:http://love2d.org/wiki/Rebound