Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
DoNaTio s.r.o.
PiPo
Commits
82b84156
Commit
82b84156
authored
Dec 05, 2014
by
DoNaTio s.r.o.
Browse files
create collision class
parent
6a087969
Changes
6
Hide whitespace changes
Inline
Side-by-side
public/ClientBall.js
View file @
82b84156
...
...
@@ -9,9 +9,11 @@ function ClientBall($el) {
var
attributes
=
{
el
:
$el
,
x
:
0
,
y
:
0
,
x
:
10
0
,
y
:
10
0
,
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
();
...
...
public/ClientCollision.js
0 → 100644
View file @
82b84156
/**
* 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
);
}
}
}
public/ClientMain.js
View file @
82b84156
$
(
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
()
{
...
...
public/ClientPlayground.js
0 → 100644
View file @
82b84156
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
}
}
}
}
public/index.html
View file @
82b84156
...
...
@@ -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>
...
...
public/style_boot.css
View file @
82b84156
...
...
@@ -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
;
bor
de
r
:
1px
solid
red
;
z-in
de
x
:
2
;
}
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment