crashtest-r0ket/tools/game/bong/bong.js

277 lines
6.6 KiB
JavaScript

// 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)<trig){
ad=0;
}else {
if(off<0){
off+=trig;
}else{
off-=trig;
};
ad=off/(3*trig)*Math.PI/3;
};
this.ball.off=off;
this.ball.ad=ad;
return ad;
};
// Hit bat?
if(this.ball.x-this.ball.size.w<this.right.x+this.right.size.w &&
this.ball.x+this.ball.size.w>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.h<this.right.y+this.right.size.h){
this.ball.ang=Math.PI-this.ball.ang;
this.ball.ang=this.ball.ang-newang(this.ball.y-this.right.y,this.right.size.h+this.ball.size.h);
this.ball.x=this.right.x-this.right.size.w-this.ball.size.w;
this.ball.spd*=1.1;
};
if(this.ball.x-this.ball.size.w<this.left.x+this.left.size.w &&
this.ball.x+this.ball.size.w>this.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.h<this.left.y+this.left.size.h){
this.ball.ang=Math.PI-this.ball.ang;
this.ball.ang=this.ball.ang+newang(this.ball.y-this.left.y,this.left.size.h+this.ball.size.h);
this.ball.x=this.left.x+this.left.size.w+this.ball.size.w;
this.ball.spd*=1.1;
};
// Score point
if(this.ball.x+this.ball.size.w>field.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("<br>" + 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);
});