Cliffbreak/Pong
Archived
1
0
Fork 0
Code Releases Activity

Cleaned code

Browse source
This commit is contained in:
Simon Giesel 2017-01-21 19:23:47 +01:00
parent 8cf7f9336c
commit ea18058098
2 changed files with 71 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
index.html
View file

@ -15,8 +15,52 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <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 src="/socket.io/socket.io.js"></script>
<script> <script>
/** 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 **/
var socket = io(); var socket = io();
var pid;
/** ############## **/
/** SERVER EVENTS **/
/** ############# **/
socket.on('handshake', function(id, state, c_width, c_height, sp, score, fn){ socket.on('handshake', function(id, state, c_width, c_height, sp, score, fn){
$('id').text(id); $('id').text(id);
pid = id; pid = id;
@ -40,38 +84,16 @@
gameState = state; gameState = state;
}); });
socket.on('scoreChange', function(val){ socket.on('score', function(val){
score = val; score = val;
}); });
// Obsolete /** Serversided Countdown to prevent desync **/
// socket.on('shootball', function(y){
// if(ball_owner == 1) leftY = y;
// if(ball_owner == 2) rightY = y;
// shootBall();
// });
/** Make Countdown serversided No cheating possible **/
socket.on('countdown', function(i){ socket.on('countdown', function(i){
text = 'Starting in ' + i; text = 'Starting in ' + i;
}); });
socket.on('start', function(){ socket.on('paddlepos', function(pos, val, y){
leftOr = 'none';
rightOr = 'none';
leftY = 0;
rightY = 0;
leftV = 0;
rightV = 0;
ballX = cube_width+ball_size;
ballY = cube_height/2;
ball_owner = 1;
ball_VX = 0;
ball_VY = 0;
gameState = 2;
});
socket.on('changeV', function(pos, val, y){
if(pos == 1){ if(pos == 1){
leftV = val; leftV = val;
leftY = y; leftY = y;
@ -92,48 +114,15 @@
ball_owner = data['owner']; ball_owner = data['owner'];
}); });
socket.on('test', function(arg){ /** Print text in local console **/
(arg); socket.on('debug', function(arg){
console.log(arg);
}); });
/** Initialize Canvas **/
var c = document.getElementById("test");
var ctx = c.getContext("2d");
c.width = $(window).width();
c.height = $(window).height();
var leftY = 0;
var rightY = 0;
var leftV = 0;
var rightV = 0;
var leftColor = 'red';
var rightColor = 'blue';
var gameState = 0; // 0 == Waiting for Players, 1 == Countdown, 2 == inGame, 3 == ??Win??
var score = [0,0];
/** FPS Vars **/
var lastCalledTime,
lastFPSshown,
fps;
/** Global Configuration **/
var localcoop = false, // Local Coop in 1 window
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;
/** ############ **/
/** DEBUG TOOLS **/
/** ########### **/
/** Meassure Ping and show **/ /** Meassure Ping and show **/
setInterval(function(){ setInterval(function(){
var connTime = Date.now(); var connTime = Date.now();
@ -166,7 +155,7 @@
lastFPSshown = Date.now(); lastFPSshown = Date.now();
$('fps').text(Math.round(fps)); $('fps').text(Math.round(fps));
/** Use this timer for displaying loading indicator **/ /** Use this timer to display loading indicator **/
if(gameState == 0) if(gameState == 0)
switch(texti){ switch(texti){
case 0: text = nativtext; texti++; break; case 0: text = nativtext; texti++; break;
@ -176,14 +165,14 @@
} }
} }
/** ############## **/
/** CLIENT RENDER **/
/** ############# **/
/** Clear Drawing-Region **/ /** Clear Drawing-Region **/
ctx.fillStyle = 'white'; ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
/** Points **/ /** Points **/
var scoretxt = score[0] + ' : ' + score[1]; var scoretxt = score[0] + ' : ' + score[1];
ctx.fillStyle = 'black'; ctx.fillStyle = 'black';
@ -221,6 +210,8 @@
ctx.fillStyle = rightColor; ctx.fillStyle = rightColor;
ctx.fillRect(width-cube_width, rightY, cube_width, cube_height); ctx.fillRect(width-cube_width, rightY, cube_width, cube_height);
// NOTE Physics moved to Server
// /** Move Ball with Paddle if owned by owner (@roundstart) **/ // /** Move Ball with Paddle if owned by owner (@roundstart) **/
// if(ball_owner == 1){ // if(ball_owner == 1){
// ballX = cube_width+ball_size, // ballX = cube_width+ball_size,
@ -269,7 +260,6 @@
// } // }
// } // }
// //
// /** TODO INCREASE SPEED ON PADDLE HIT (weiter außen = schneller) **/
// //
// /** Collide with walls **/ // /** Collide with walls **/
// if(ballY <= 0 || ballY >= height-ball_size){ // if(ballY <= 0 || ballY >= height-ball_size){
@ -331,16 +321,7 @@
if(localcoop){ if(localcoop){
switch(e.keyCode) { switch(e.keyCode) {
case 38 : case 38 :
case 40 : case 40 : setV(1, 0); break;
//TODO (maybe) add Smooth stopping to Paddles
// case 40 : var i = 100;
// var interval = setInterval(function(){
// i--;
// leftV = i/100*(0,002-i/100);
// if(i == 0) clearInterval(interval);
// }, Math.round((1*delta)*60)*10);
setV(1, 0);
break;
case 87 : case 87 :
case 83 : setV(2, 0); break; case 83 : setV(2, 0); break;
} }
@ -380,6 +361,7 @@
} }
function shootBall() { function shootBall() {
// NOTE moved to Server
// console.log('### Ball shoot event ###'); // console.log('### Ball shoot event ###');
// /** TODO Tewak and Add MAX_Speed **/ // /** TODO Tewak and Add MAX_Speed **/
// if(ball_owner == 1){ // if(ball_owner == 1){

25
index.js
View file

@ -23,7 +23,6 @@ var cube_width = 50,
/** Networking-Config **/ /** Networking-Config **/
var tickrate = 20; var tickrate = 20;
/** Ball-Config **/ /** Ball-Config **/
var ball_size = 15, var ball_size = 15,
ball_speed = 15, ball_speed = 15,
@ -66,10 +65,6 @@ if(gameState > 0) socket.emit('size', width, height);
/** Ballshoot **/ /** Ballshoot **/
/** ######### **/ /** ######### **/
socket.on('ballshoot', function(y){ socket.on('ballshoot', function(y){
// shottball event obsolet
// socket.emit('shootball', y);
// socket.broadcast.emit('shootball', y);
console.log('### Ball shoot event ###'); console.log('### Ball shoot event ###');
if(ball_owner == 1){ if(ball_owner == 1){
ball_VX = ball_speed; ball_VX = ball_speed;
@ -114,8 +109,8 @@ if(gameState > 0) socket.emit('size', width, height);
// console.log('Diff:' + diff); // console.log('Diff:' + diff);
// console.log('Got: ' + y + ' @ ' + timestamp); // console.log('Got: ' + y + ' @ ' + timestamp);
// console.log('Expected:' + players[pos-1].y + ' @ ' + Date.now()); // console.log('Expected:' + players[pos-1].y + ' @ ' + Date.now());
socket.emit('changeV', pos, val, players[pos-1].y); // socket.emit('changeV', pos, val, players[pos-1].y);
socket.broadcast.emit('changeV', pos, val, players[pos-1].y); // socket.broadcast.emit('changeV', pos, val, players[pos-1].y);
}); });
/** ########## **/ /** ########## **/
@ -133,7 +128,7 @@ if(gameState > 0) socket.emit('size', width, height);
clients.splice(index, 1); clients.splice(index, 1);
console.log('Client disconnected. ID=' + (oldid+1)); console.log('Client disconnected. ID=' + (oldid+1));
if(clients.length == 1){ if(clients.length == 1){
clients[0].socket.emit('test', 'player_left'); //TODO win-event clients[0].socket.emit('debug', 'player_left'); //TODO win-event
console.log('Only one Player left. Sending win-event'); console.log('Only one Player left. Sending win-event');
// Debug Restart: // Debug Restart:
gameState = 0; gameState = 0;
@ -204,8 +199,8 @@ function setUp(socket){
clearInterval(startinterval); clearInterval(startinterval);
gameState = 2; gameState = 2;
broadcastGameState(socket); broadcastGameState(socket);
socket.emit('start'); socket.emit('gamestate');
socket.broadcast.emit('start'); socket.broadcast.emit('gamestate');
} }
}, 1000); }, 1000);
} }
@ -229,8 +224,8 @@ function calculatePlayerPosition(){
if(player.y > height-player.height || player.y < 0) player.vY = 0; if(player.y > height-player.height || player.y < 0) player.vY = 0;
if(player.y < 0) player.y = 0; if(player.y < 0) player.y = 0;
if(player.y > height-player.height) player.y = height-player.height; if(player.y > height-player.height) player.y = height-player.height;
player.socket.emit('changeV', player.id, player.vY, player.y); player.socket.emit('paddlepos', player.id, player.vY, player.y);
player.socket.broadcast.emit('changeV', player.id, player.vY, player.y); player.socket.broadcast.emit('paddlepos', player.id, player.vY, player.y);
}); });
} }
@ -289,8 +284,6 @@ function calculateBallPosition(){
} }
} }
/** TODO INCREASE SPEED ON PADDLE HIT (weiter außen = schneller) **/
/** Collide with walls **/ /** Collide with walls **/
if(ballY <= 0 || ballY >= height-ball_size){ if(ballY <= 0 || ballY >= height-ball_size){
ball_VY = -ball_VY; ball_VY = -ball_VY;
@ -311,8 +304,8 @@ function calculateBallPosition(){
function changeScore(id, val){ function changeScore(id, val){
score[id-1] = val; score[id-1] = val;
players[0].socket.emit('scoreChange', score); players[0].socket.emit('score', score);
players[0].socket.broadcast.emit('scoreChange', score); players[0].socket.broadcast.emit('score', score);
} }
function resetPlayers(){ function resetPlayers(){