Commit 82b84156 authored by DoNaTio s.r.o.'s avatar DoNaTio s.r.o.
Browse files

create collision class

parent 6a087969
......@@ -9,9 +9,11 @@ function ClientBall($el) {
var attributes = {
el: $el,
x: 0,
y: 0,
x: 100,
y: 100,
z: 0,// :)
vx: -1.5 + Math.random()*3,
vy: 5 * Math.random()*1.5,
speed: 10,
width: 20,
height: 20
......@@ -21,21 +23,37 @@ function ClientBall($el) {
init: function () {
},
collides: function () {
getAxis: function(){
return {
x:attributes.x,
y:attributes.y
};
},
getVectors: function(){
return {
vx:attributes.vx,
vy:attributes.vy
};
},
setAxis: function (x, y) {
attributes.x = x;
attributes.y = y;
},
setVectors: function (vx, vy) {
attributes.vx = vx;
attributes.vy = vy;
},
redraw: function () {
attributes.x += attributes.vx;
attributes.y += attributes.vy;
attributes.el.css('top', attributes.y);
attributes.el.css('left', attributes.x);
},
create: function () {
attributes.el.css({
'width': attributes.width,
'height': attributes.height,
'height': attributes.height
});
this.redraw();
......
/**
* ClientCollision
* @param Playground
* @param Ball
* @returns {{collision: Function}}
* @constructor
*/
function ClientCollision(Playground, Ball){
var attributes = {
'ball': Ball,
'playground': Playground
};
return {
collision: function(){
var ballAxis = attributes.ball.getAxis();
var ballVectors = attributes.ball.getVectors();
var playgroundDimension = attributes.playground.getDimension();
if(ballAxis.y > playgroundDimension.h) {
ballAxis.y = playgroundDimension.h;
attributes.ball.setAxis(ballAxis.x, ballAxis.y);
}
else if(ballAxis.y < 0) {
ballAxis.y = 0;
}
// If ball strikes the vertical walls, invert the
// x-velocity vector of ball
if(ballAxis.x > playgroundDimension.w) {
ballVectors.vx = -ballVectors.vx;
ballAxis.x = playgroundDimension.w;
}
else if(ballAxis.x < 0) {
ballVectors.vx = -ballVectors.vx;
ballAxis.x = 0;
}
attributes.ball.setAxis(ballAxis.x,ballAxis.y);
attributes.ball.setVectors(ballVectors.vx, ballVectors.vy);
}
}
}
$(function () {
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
return window.setTimeout(callback, 1000 / 60);
};
})();
// Initialize varibles
var $window = $(window);
......@@ -10,8 +21,18 @@ $(function () {
var score = new ClientScore( $('.score') );
var ball = new ClientBall( $('#ball') );
ball.setAxis(100,100);
var clientPlayground = new ClientPlayground( $("#playground"));
clientPlayground.init();
var collision = new ClientCollision( clientPlayground, ball);
ball.create();
// Prompt for setting a username
var user = new ClientPlayer($('.pages'));
user.setLoginCallback(function () {
......@@ -29,11 +50,13 @@ $(function () {
var socket = io();
$(document).mousemove(function (event) {
var $playground = $("#playground");
$playground.mousemove(function (event) {
var d = {
id: user.getId(),
x: event.pageX,
y: event.pageY
x: event.pageX - $playground.offset().left,
y: event.pageY - $playground.offset().top
};
drawRacket(d)
socket.emit('move racket', d);
......@@ -45,6 +68,14 @@ $(function () {
log.add("Joined: " + data.numUsers);
log.add("Your name: " + data.username);
user.setId(data.id);
function animloop() {
init = requestAnimFrame(animloop);
ball.redraw();
collision.collision();
}
animloop();
});
socket.on('show racket', function (data) {
......@@ -62,7 +93,7 @@ $(function () {
});
function drawRacket(data) {
$('div.racket' + data.id).css({left: data.x + 20, top: data.y + 20});
$('div.racket' + data.id).css({left: data.x, top: data.y});
}
$('.logout').click(function () {
......
function ClientPlayground(el){
var attributes = {
'el': el,
w: 0,
h: 0
};
return {
init: function(){
attributes.w = attributes.el.width();
attributes.h = attributes.el.height();
},
getDimension: function(){
return {
w:attributes.w,
h:attributes.h
}
}
}
}
......@@ -74,6 +74,8 @@
<script src="/socket.io/socket.io.js"></script>
<script src="/ClientScore.js"></script>
<script src="/ClientCollision.js"></script>
<script src="/ClientPlayground.js"></script>
<script src="/ClientBall.js"></script>
<script src="/ClientPlayer.js"></script>
<script src="/Log.js"></script>
......
......@@ -106,6 +106,7 @@ body {
position: absolute;
top:100px;
left: 100px;
z-index: 1;
}
.score{
......@@ -125,5 +126,5 @@ body {
top:100px;
left: 100px;
background: url(images/ball.png) no-repeat;
border: 1px solid red;
z-index: 2;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment