// Initialisation var socket = "ws://127.0.0.1:8888/data"; var field= { w: 320, h: 240 }; var paddle = { w: 2, h: 30 }; var ball = { w: 5, h: 5, s: 5 }; // Pong game class function pong() { this.ball = {}; this.left = {}; this.right = {}; this.score = {}; this.score.left = {}; this.score.right = {}; this.cnt = {}; this.cnt.left = {}; this.cnt.right = {}; this.field = {}; this.game = { run: 0 }; this.ball.size=ball; this.left.size=paddle; this.right.size=paddle; this.field.size=field; this.left.x=-field.w+3*this.left.size.w; this.right.x=field.w-3*this.right.size.w; this.ball.avatar=$('div#ball'); this.left.avatar=$('div#paddle_left'); this.right.avatar=$('div#paddle_right'); this.score.left.avatar=$('div#score_left'); this.score.right.avatar=$('div#score_right'); this.field.avatar=$('#playfield'); function setupavatar(obj){ obj.avatar.width(2*obj.size.w) .height(2*obj.size.h); }; setupavatar(this.ball); setupavatar(this.left); setupavatar(this.right); setupavatar(this.field); this.cnt.left.avatar=$('div#player_left'); this.cnt.right.avatar=$('div#player_right'); $('div#player_left').css({top: 2*this.field.size.h-30}); $('div#player_right').css({top: 2*this.field.size.h-30}); this.field.avatar.focus(); this.score.left.pts=0; this.score.right.pts=0; this.setup( (Math.random()>0.5)?1:-1); this.field.avatar.keydown(this,function(ev){ if(ev.which == 67) ev.data.socketstart(socket); if(ev.which == 81) ev.data.game.run=0; if(ev.which == 82) ev.data.game.run=1; if(ev.which > 48 && ev.which <=57) ev.data.setleft((ev.which-53)/4); }); $('#debug').css({left:0,top:2*this.field.size.h+10}); $('#socket').css({left:0,top:2*this.field.size.h+30}); } pong.prototype.setleft = function(where){ this.left.y=where*(this.field.size.h-this.left.size.h); }; pong.prototype.setright = function(where){ this.right.y=where*(this.field.size.h-this.right.size.h); }; pong.prototype.setup = function(rtl){ this.ball.x=0; this.ball.y=0; this.ball.ang=Math.random()*20/180*Math.PI; if(rtl<0) this.ball.ang=Math.PI-this.ball.ang; this.ball.spd=this.ball.size.s; this.left.y=0; this.right.y=0; this.game.run=0; }; pong.prototype.update= function(t){ var upv=0; this.ball.vx=Math.cos(this.ball.ang)*this.ball.spd; this.ball.vy=Math.sin(this.ball.ang)*this.ball.spd; this.ball.x+=t*this.ball.vx; this.ball.y+=t*this.ball.vy; this.ball.x+=t*this.ball.vx; this.ball.y+=t*this.ball.vy; // Clipping if(this.ball.y-this.ball.size.h<-field.h){ this.ball.ang=-this.ball.ang; this.ball.y=-field.h+this.ball.size.h; }; if(this.ball.y+this.ball.size.h>field.h){ this.ball.ang=-this.ball.ang; this.ball.y=field.h-this.ball.size.h; }; function newang(off,bath){ var trig=(bath-1)/4; var ad=0; if(Math.abs(off)this.right.x-this.right.size.w && this.ball.y+this.ball.size.h>this.right.y-this.right.size.h && this.ball.y-this.ball.size.hthis.left.x-this.left.size.w && this.ball.y+this.ball.size.h>this.left.y-this.left.size.h && this.ball.y-this.ball.size.hfield.w){ this.score.left.pts++; this.setup(-1); this.ball.ang=Math.PI-this.ball.ang; this.game.run=1; }; if(this.ball.x-this.ball.size.w<-field.w){ this.score.right.pts++; this.setup(1); this.game.run=1; }; if(this.ball.ang<0) this.ball.ang+=2*Math.PI; if(this.ball.ang>2*Math.PI) this.ball.ang-=2*Math.PI; $('#debug').html("ang="+Math.abs(this.ball.ang/Math.PI*180)+" ,x="+Math.ceil(this.ball.x)+" ,y="+Math.ceil(this.ball.y));//+" ,off="+(this.ball.off)+" ,ad="+Math.ceil(this.ball.ad)); }; pong.prototype.display=function(){ function move(obj,av){ var x = obj.x - obj.size.w + field.w; var y = obj.y - obj.size.h + field.h; obj.avatar.css({left:x,top:y}); }; move(this.ball); move(this.left); move(this.right); this.score.left.avatar.html(this.score.left.pts); this.score.right.avatar.html(this.score.right.pts); }; var time = function() { return +(new Date) / 100 }; var last = time(); pong.prototype.run = function(){ var now = time(); if(game.game.run==1) game.update(now - last); game.display(); last=now; }; pong.prototype.socketstart = function(uri){ function debug(str){ $("#socket").append("
" + str); }; ws = new WebSocket(uri); debug("ws start"); ws.onopen = function() { debug("ws open"); $('#socket').css({"color": "green"}); ws.send("hello"); this.game.run=1; }; ws.onmessage = function (evt) { var data = evt.data; $('#socket').html(data); if(data.slice(0,1)=="{"){ var result=JSON.parse(data); if (result.right){ this.setright(result.right); } ; if (result.left){ this.setleft(result.left); }; if (result.cntl){ this.cnt.left.avatar.html(result.cntl); }; if (result.cntr){ this.cnt.right.avatar.html(result.cntr); }; }else{ // unknown non-json input }; }; ws.onclose = function() { debug("socket closed"); $('#socket').css({"color": "red"}); // reconnect }; }; // Start utility stuff (function() { var onEachFrame; if (window.webkitRequestAnimationFrame) { onEachFrame = function(cb) { var _cb = function() { cb(); webkitRequestAnimationFrame(_cb); } _cb(); }; } else if (window.mozRequestAnimationFrame) { onEachFrame = function(cb) { var _cb = function() { cb(); mozRequestAnimationFrame(_cb); } _cb(); }; } else { onEachFrame = function(cb) { setInterval(cb, 1000 / 60); } } window.onEachFrame = onEachFrame; })(); var game; $(document).ready(function(){ game=new pong(); if (window.MozWebSocket) { window.WebSocket = window.MozWebSocket; } if ("WebSocket" in window) { game.socketstart(socket); } else { alert("You have no web sockets"); }; window.onEachFrame(game.run); });