Cliffbreak/Pong
Archived
1
0
Fork 0
Code Releases Activity
This repository has been archived on 2019-02-05. You can view files and clone it, but cannot push or open issues or pull requests.
Pong/index.html

389 lines
12 KiB
HTML
Raw Normal View History

Initial commit
2017-01-20 22:42:49 +00:00
<!doctype html>
<html>
<head>
<title>🏓 Pong</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { height: 100vh; width: 100vw; overflow: hidden; }
canvas {border: black solid 1px; top:-1px; left:-1px; position: absolute;}
div { position: fixed; top: 0; right: 0; width: 130px; height: 60px; background: rgba(0, 0, 0, .5); color: white; padding: 5px; font-family: monospace; z-index: 100; }
</style>
</head>
<body>
<div id="debug">FPS: &nbsp;<fps>...</fps><br/>Ping: <ping>...</ping><br />ID: &nbsp;&nbsp;<id>...</id></div>
<canvas id="test"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
Cleaned code
2017-01-21 18:23:47 +00:00
/** Initialize Canvas **/
var c = document.getElementById("test");
var ctx = c.getContext("2d");
c.width = $(window).width();
c.height = $(window).height();
/** FPS Vars **/
var lastCalledTime,
lastFPSshown,
fps;
/** Global Configuration **/
var localcoop = false, // Local Coop in 1 window CURRENTLY BORKEN [WONTFIX]
width = $(window).width(),
height = $(window).height();
/** Prop-Config **/
var cube_width = 50,
cube_height = 200,
cube_speed = 7,
ball_size = 15,
ball_speed = 8,
ballX = cube_width+ball_size,
ballY = cube_height/2,
ball_owner = 1,
ball_VX = 0,
ball_VY = 0,
ball_maxAngle = 5*Math.PI/12;
/** Game Variables **/
var pid,
leftY = 0,
rightY = 0,
leftV = 0,
rightV = 0,
leftColor = 'red',
rightColor = 'blue',
score = [0,0],
gameState = 0; // 0 == Waiting for Players, 1 == Countdown, 2 == inGame, 3 == ??Win??
/** Initalize Socketio **/
Initial commit
2017-01-20 22:42:49 +00:00
var socket = io();
Cleaned code
2017-01-21 18:23:47 +00:00
/** ############## **/
/** SERVER EVENTS **/
/** ############# **/
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
socket.on('handshake', function(id, state, c_width, c_height, sp, score, fn){
Initial commit
2017-01-20 22:42:49 +00:00
$('id').text(id);
pid = id;
gameState = state;
cube_width = c_width;
cube_height = c_height;
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
cube_speed = sp;
score = score;
Initial commit
2017-01-20 22:42:49 +00:00
fn($(window).width(), $(window).height());
});
socket.on('size', function(w, h){
width = w;
height = h;
c.width = w;
c.height = h;
text = 'Starting in 5';
});
socket.on('gamestate', function(state){
gameState = state;
});
Cleaned code
2017-01-21 18:23:47 +00:00
socket.on('score', function(val){
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
score = val;
Made Snyc working again
2017-01-20 23:50:32 +00:00
});
Cleaned code
2017-01-21 18:23:47 +00:00
/** Serversided Countdown to prevent desync **/
Initial commit
2017-01-20 22:42:49 +00:00
socket.on('countdown', function(i){
text = 'Starting in ' + i;
});
Cleaned code
2017-01-21 18:23:47 +00:00
socket.on('paddlepos', function(pos, val, y){
Made Snyc working again
2017-01-20 23:50:32 +00:00
if(pos == 1){
leftV = val;
leftY = y;
Initial commit
2017-01-20 22:42:49 +00:00
}
Made Snyc working again
2017-01-20 23:50:32 +00:00
if(pos == 2){
rightV = val;
rightY = y;
Initial commit
2017-01-20 22:42:49 +00:00
}
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
(leftY);
});
socket.on('ballpos', function(data){
ballX = data['x'];
ballY = data['y'];
ball_VX = data['vx'];
ball_VY = data['vy'];
ball_speed = data['speed'];
ball_owner = data['owner'];
Initial commit
2017-01-20 22:42:49 +00:00
});
Cleaned code
2017-01-21 18:23:47 +00:00
/** Print text in local console **/
socket.on('debug', function(arg){
console.log(arg);
Initial commit
2017-01-20 22:42:49 +00:00
});
Cleaned code
2017-01-21 18:23:47 +00:00
/** ############ **/
/** DEBUG TOOLS **/
/** ########### **/
Enhanced syncing...
2017-01-21 00:01:23 +00:00
/** Meassure Ping and show **/
Initial commit
2017-01-20 22:42:49 +00:00
setInterval(function(){
var connTime = Date.now();
socket.emit('appping', function(data){
$('ping').text(Date.now()-connTime + 'ms');
});
}, 1000);
var texti = 0,
nativtext = 'Waiting for Players',
text = nativtext;
function draw() {
/** FPS Calculation **/
if(!lastCalledTime) {
lastCalledTime = Date.now();
fps = 0;
}
delta = (Date.now() - lastCalledTime)/1000;
lastCalledTime = Date.now();
fps = 1/delta;
/** Show FPS in Debug-Window **/
if(!lastFPSshown) {
lastFPSshown = Date.now();
$('fps').text('...');
}
if(lastFPSshown+1000 < Date.now()) {
lastFPSshown = Date.now();
$('fps').text(Math.round(fps));
Cleaned code
2017-01-21 18:23:47 +00:00
/** Use this timer to display loading indicator **/
Initial commit
2017-01-20 22:42:49 +00:00
if(gameState == 0)
switch(texti){
case 0: text = nativtext; texti++; break;
case 1 :
case 2 : text+='.'; texti++; break;
case 3 : text+='.'; texti = 0; break;
}
}
Cleaned code
2017-01-21 18:23:47 +00:00
/** ############## **/
/** CLIENT RENDER **/
/** ############# **/
Initial commit
2017-01-20 22:42:49 +00:00
/** Clear Drawing-Region **/
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
/** Points **/
var scoretxt = score[0] + ' : ' + score[1];
ctx.fillStyle = 'black';
ctx.font = '40px monospace';
ctx.textAlign = 'center';
ctx.fillText(scoretxt, width/2, 70);
Initial commit
2017-01-20 22:42:49 +00:00
if(gameState < 2){
ctx.fillStyle = 'black';
ctx.font = '30px monospace';
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
ctx.textAlign = 'center';
ctx.fillText(text, width/2, height/2-30);
Initial commit
2017-01-20 22:42:49 +00:00
}
if(gameState == 2 && pid > 2){
var specstr = "Spectator-Mode"
ctx.fillStyle = 'black';
ctx.font = '15px monospace';
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
ctx.textAlign = 'center';
ctx.fillText(specstr, width/2, 25);
Initial commit
2017-01-20 22:42:49 +00:00
}
/** Draw Cube **/
/** Note: Get position by multiplying it with the "Render-Delta" - for same speed on every system **/
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
// console.log(leftV*delta*60*cube_speed);
// leftY -= leftV*delta*60*cube_speed;
// rightY -= rightV*delta*60*cube_speed;
// NOTE Server is calcualating Position -> Client is only drawing
Initial commit
2017-01-20 22:42:49 +00:00
ctx.fillStyle = leftColor;
ctx.fillRect(0, leftY, cube_width, cube_height);
ctx.fillStyle = rightColor;
ctx.fillRect(width-cube_width, rightY, cube_width, cube_height);
Cleaned code
2017-01-21 18:23:47 +00:00
// NOTE Physics moved to Server
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
// /** Move Ball with Paddle if owned by owner (@roundstart) **/
// if(ball_owner == 1){
// ballX = cube_width+ball_size,
// ballY = leftY+cube_height/2;
// }
// else if(ball_owner == 2){
// ballX = width-cube_width-ball_size,
// ballY = rightY+cube_height/2;
// }
//
// /** ############ **/
// /** Ball Physics **/
// /** ############ **/
//
// /** Collide with right Paddle or get point and respawn **/
// if(ballX > width - cube_width){
// if(ballY < rightY || ballY > rightY+cube_height){
// console.log('Point for Left');
// ball_VX = 0;
// ball_VY = 0;
// ball_owner = 1;
// } else {
// var intersect = ((rightY+cube_height/2)-ballY)/(cube_height/2);
// console.log('Intersect with right at:');
// console.log(intersect);
// console.log('###########################');
// ball_VX = -ball_speed*Math.cos(intersect*ball_maxAngle);
// ball_VY = -ball_speed*Math.sin(intersect*ball_maxAngle);
// }
// }
//
// /** Collide with left Paddle or get point and respawn **/
// if(ballX < cube_width){
// if(ballY < leftY || ballY > leftY+cube_height){
// console.log('Point for Right');
// ball_VX = 0;
// ball_VY = 0;
// ball_owner = 2;
// } else {
// var intersect = ((leftY+cube_height/2)-ballY)/(cube_height/2);
// console.log('Intersect with left at:');
// console.log(intersect);
// console.log('###########################');
// ball_VX = ball_speed*Math.cos(intersect*ball_maxAngle);
// ball_VY = ball_speed*Math.sin(intersect*ball_maxAngle);
// }
// }
//
//
// /** Collide with walls **/
// if(ballY <= 0 || ballY >= height-ball_size){
// ball_VY = -ball_VY;
// console.log(ballX + ' : ' + ballY);
// }
Initial commit
2017-01-20 22:42:49 +00:00
/** Draw Ball **/
ctx.fillStyle = 'black';
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
// ballX += Math.round((1*delta)*60)*ball_VX;
// ballY += Math.round((1*delta)*60)*ball_VY;
Initial commit
2017-01-20 22:42:49 +00:00
ctx.beginPath();
ctx.arc(ballX, ballY, ball_size, 0, 2*Math.PI);
ctx.fill();
}
/** ############## **/
/** Input Handlers **/
/** ############## **/
$(window).on('keydown', function(e) {
if(localcoop){
switch(e.keyCode) {
Made Snyc working again
2017-01-20 23:50:32 +00:00
case 38 : if(leftY <= 0) break; setV(1, 1); break;
case 40 : if(leftY >= height-cube_height) break; setV(1, -1); break;
case 87 : if(rightY <= 0) break; setV(2, 1); break;
case 83 : if(rightY >= height-cube_height) break; setV(2, -1); break;
Initial commit
2017-01-20 22:42:49 +00:00
case 37 :
case 39 : if(ball_owner != 1) break; shootBall(); break;
case 65 :
case 68 : if(ball_owner != 2) break; shootBall(); break;
}
Made Snyc working again
2017-01-20 23:50:32 +00:00
} else if(pid == 1 || pid == 2){
switch(e.keyCode) {
case 38 :
case 87 : if(pid == 1){
if(leftY <= 0) break; setV(1, 1);
} else if(pid == 2) {
if(rightY <= 0) break; setV(2, 1);
}
break;
case 40 :
case 83 : if(pid == 1){
if(leftY >= height-cube_height) break; setV(1, -1);
} else if(pid == 2){
if(rightY >= height-cube_height) break; setV(2, -1);
}
break;
case 37 :
case 39 :
case 65 :
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
case 68 : if(ball_owner != pid)break; if(ball_owner == 1) socket.emit('ballshoot', leftY); else if(ball_owner == 2) socket.emit('ballshoot', rightY); break;
Made Snyc working again
2017-01-20 23:50:32 +00:00
}
}
Initial commit
2017-01-20 22:42:49 +00:00
});
$(window).on('keyup', function(e) {
if(localcoop){
switch(e.keyCode) {
case 38 :
Cleaned code
2017-01-21 18:23:47 +00:00
case 40 : setV(1, 0); break;
Initial commit
2017-01-20 22:42:49 +00:00
case 87 :
Made Snyc working again
2017-01-20 23:50:32 +00:00
case 83 : setV(2, 0); break;
}
}else if(pid == 1 || pid == 2){
switch(e.keyCode) {
case 38 :
case 87 : if(pid == 1){
setV(1, 0);
} else if(pid == 2) {
setV(2, 0);
}
break;
case 40 :
case 83 : if(pid == 1){
setV(1, 0);
} else if(pid == 2){
setV(2, 0);
}
break;
Initial commit
2017-01-20 22:42:49 +00:00
}
}
});
Made Snyc working again
2017-01-20 23:50:32 +00:00
function setV(pos, val){
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
var time = Date.now();
Made Snyc working again
2017-01-20 23:50:32 +00:00
if(pos == 1){
leftV = val;
if(!localcoop)
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
socket.emit('vchange', pos, val, leftY, time);
Made Snyc working again
2017-01-20 23:50:32 +00:00
}
if(pos == 2){
rightV = val;
if(!localcoop)
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
socket.emit('vchange', pos, val, rightY, time);
Made Snyc working again
2017-01-20 23:50:32 +00:00
}
}
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
function shootBall() {
Cleaned code
2017-01-21 18:23:47 +00:00
// NOTE moved to Server
Handle all Physics serverside
2017-01-21 17:58:44 +00:00
// console.log('### Ball shoot event ###');
// /** TODO Tewak and Add MAX_Speed **/
// if(ball_owner == 1){
// ball_VX = ball_speed;
// console.log('owner: left - at:' + leftY);
//
// }
// else if(ball_owner == 2){
// ball_VX = -ball_speed;
// console.log('owner: right - at:' + rightY);
// if(!localcoop)
// socket.emit('ballshoot', rightY);
// }
// ball_owner = 0;
Initial commit
2017-01-20 22:42:49 +00:00
}
function animloop() {
draw();
window.requestAnimationFrame(animloop);
}
animloop();
</script>
</body>
</html>
Copy permalink