Skip to content

Commit d16623b

Browse files
Kevin SchweigertKevin Schweigert
Kevin Schweigert
authored and
Kevin Schweigert
committed
first commit
0 parents  commit d16623b

13 files changed

+300
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#watchout
2+
This is a project I completed as a student at [hackreactor](http://hackreactor.com). This project was worked on with a pair.

‎append version

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
//Moving Enemies
2+
3+
var data = [{'x':1150, 'y':750}, {'x':1150, 'y':750}, {'x':1150, 'y':750}, {'x':1150, 'y':750}, {'x':1150, 'y':750},
4+
{'x':1150, 'y':750}, {'x':1150, 'y':750}, {'x':1150, 'y':750}, {'x':1150, 'y':750}, {'x':1150, 'y':750},
5+
{'x':1150, 'y':750}, {'x':1150, 'y':750}, {'x':1150, 'y':750}];
6+
7+
var update = function(data){
8+
d3.select('body').selectAll('image').data(data).enter().append('image')
9+
.transition()
10+
.duration(1500)
11+
.attr('x', function(d){return d.x*Math.random()})
12+
.attr('y', function(d){return d.y*Math.random()})
13+
.style("height", function(d){return 50 + "px"})
14+
.style("width", function(d){return 50 + "px"})
15+
};
16+
// var update = function(data){
17+
// d3.select('body').selectAll('.enemy')
18+
// .data(data)
19+
// .transition()
20+
// .duration(1500)
21+
// .attr("x", function(d){
22+
// return d.x * Math.random()
23+
// })
24+
// .attr("y", function(d){
25+
// return d.y * Math.random()
26+
// })
27+
// };
28+
29+
update(data);
30+
31+
setInterval(function(){
32+
update(data)
33+
}, 1500);
34+
35+
//__________________________________________________________________________________________________________________
36+
//Draggable Player
37+
38+
var drag = d3.behavior.drag()
39+
// .on('dragstart', function() { circle.style('fill', 'red'); })
40+
.on('drag', function() { lebron.attr('x', d3.event.x)
41+
.attr('y', d3.event.y); })
42+
// .on('dragend', function() { circle.style('fill', 'black'); });
43+
44+
var lebron = d3.select('body').selectAll('.player')
45+
.data([{ 'x': 565, 'y': 365}])
46+
.attr('x', function(d) { return d.x; })
47+
.attr('y', function(d) { return d.y; })
48+
.call(drag)
49+
50+
//__________________________________________________________________________________________________________________
51+
//Collisions
52+
53+
var collision = function(){
54+
var array = [];
55+
56+
var enemyPos = d3.selectAll('.enemy').each(function(d){console.log(d.x)});
57+
// var playerPos = d3.selectAll('.player').each(function(d){
58+
// return d
59+
// })
60+
// console.log(enemyPos);
61+
}
62+
setInterval(function(){
63+
collision()
64+
}, 750)
65+
66+
67+
//__________________________________________________________________________________________________________________
68+
//Current Score
69+
var count = 0
70+
71+
var current = function(){
72+
d3.select('.current').selectAll('span')
73+
.text(count++)
74+
}
75+
76+
setInterval(function(){
77+
current()
78+
}, 750)
79+

‎asteroid.png

60 KB
Loading

‎basketball.gif

31.4 KB
Loading

‎d3.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gsw.png

296 KB
Loading

‎index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<link rel='stylesheet' type='css' href='styles.css'>
6+
<link href='http://fonts.googleapis.com/css?family=Orbitron:900' rel='stylesheet' type='text/css'>
7+
</head>
8+
9+
<body>
10+
<center>
11+
<div class="scoreboard">
12+
<!-- Modify the scoreboard when important events occur in your game! -->
13+
<div class="high">High score: <span>0</span></div>
14+
<div class="current">Current score: <span>0</span></div>
15+
<div class="collisions">Collisions: <span>0</span></div>
16+
</div>
17+
</center>
18+
<div class="container">
19+
<svg width="1200" height="800">
20+
</svg>
21+
</div>
22+
<script src="lib/d3.js" charset="utf-8"></script>
23+
<script src='watchout.js'></script>
24+
</body>
25+
26+
</html>

‎lbj.png

137 KB
Loading

‎lib/.DS_Store

6 KB
Binary file not shown.

‎package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "watchout",
3+
"version": "1.0.1",
4+
"description": "Asteroids-style game implemented using D3.js",
5+
"main": "client/index.html",
6+
"scripts": {
7+
"test": "echo 'Error: no test specified'",
8+
"start": "open client/index.html"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/hackreactor-labs/sprint.watchout.git"
13+
},
14+
"author": "Hack Reactor",
15+
"license": "Copyright 2014, Hack Reactor. All rights reserved.",
16+
"bugs": {
17+
"url": "https://github.com/hackreactor-labs/sprint.watchout/issues"
18+
},
19+
"homepage": "https://github.com/hackreactor-labs/sprint.watchout"
20+
}

‎styles.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* your beautiful css styling goes here! */
2+
3+
/* Note: an asteroid image is included in this repo.
4+
Feel free to use it if you like. */
5+
svg{
6+
background-image: url('gsw.png');
7+
background-size: 100%;
8+
display: inline-block;
9+
}
10+
11+
.scoreboard{
12+
width: 500px;
13+
height: 110px;
14+
margin-top: 5px;
15+
margin-bottom: 5px;
16+
color: white;
17+
background-color: #FFCC00;
18+
border-style: solid;
19+
border-color: #1947D1;
20+
margin-left: auto;
21+
display: inline-block;
22+
font-size: 35px;
23+
font-family: orbitron;
24+
}
25+
26+
.container{
27+
text-align: center;
28+
}
29+
30+
.high{
31+
margin-top: 7px;
32+
}

‎watchout.js

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
//Moving Enemies
2+
var enemyMaker = function(){
3+
this.x = 1150;
4+
this.y = 750;
5+
}
6+
7+
var data = [];
8+
9+
for(var i=0; i<13; i++){
10+
data.push(new enemyMaker())
11+
}
12+
13+
//__________________________________________________________________________________________________________________
14+
//Drag Function
15+
16+
var drag = d3.behavior.drag()
17+
.on('drag', function() { lebron.attr('x', d3.event.x)
18+
.attr('y', d3.event.y); })
19+
20+
//__________________________________________________________________________________________________________________
21+
//Define Player
22+
23+
var lebron = d3.select('svg').selectAll('.player')
24+
.data([{ 'x': 565, 'y': 365}])
25+
.enter()
26+
.append('image')
27+
.attr('class', 'player')
28+
.attr("xlink:href", "lbj.png")
29+
.attr("height", "75px")
30+
.attr("width", "75px")
31+
.attr('x', function(d) { return d.x; })
32+
.attr('y', function(d) { return d.y; })
33+
.call(drag)
34+
35+
//__________________________________________________________________________________________________________________
36+
//Define Enemies
37+
38+
var enemies = d3.select('svg').selectAll('.enemy')
39+
.data(data)
40+
.enter()
41+
.append('image')
42+
.attr('class', 'enemy')
43+
.attr("xlink:href", "basketball.gif")
44+
.attr("height", "50px")
45+
.attr("width", "50px")
46+
47+
//__________________________________________________________________________________________________________________
48+
//Update Enemies
49+
var update = function(data){
50+
enemies.transition()
51+
.duration(3000)
52+
.attr("x", function(d){
53+
return d.x * Math.random()
54+
})
55+
.attr("y", function(d){
56+
return d.y * Math.random()
57+
})
58+
};
59+
60+
update(data);
61+
62+
setInterval(function(){
63+
update(data)
64+
}, 3000);
65+
66+
67+
//__________________________________________________________________________________________________________________
68+
//Collisions
69+
70+
var colCount = 0;
71+
72+
var coordinates = function(){
73+
74+
var enemyPosX = [];
75+
var enemyPosY = [];
76+
var playerPosX = d3.select('body').selectAll('.player').attr('x');
77+
var playerPosY = d3.select('body').selectAll('.player').attr('y');
78+
79+
var enemyPos = d3.selectAll('.enemy').each(function(d){
80+
enemyPosX.push(d3.select(this).attr('x'))});
81+
82+
var enemyPos = d3.selectAll('.enemy').each(function(d){
83+
enemyPosY.push(d3.select(this).attr('y'))});
84+
85+
86+
var collisions = function(){
87+
88+
for(var i = 0; i < enemyPosX.length; i++){
89+
if(enemyPosX[i] > playerPosX){
90+
var a = enemyPosX[i] - playerPosX;
91+
} else {
92+
var a = playerPosX - enemyPosX[i];
93+
}
94+
if(enemyPosY[i] > playerPosY){
95+
var b = enemyPosY[i] - playerPosY;
96+
} else {
97+
var b = playerPosY - enemyPosY[i];
98+
}
99+
var c = Math.sqrt((a*a)+(b*b));
100+
if(c < 50){
101+
colCount++;
102+
console.log(colCount)
103+
d3.select('.collisions').selectAll('span')
104+
.text(colCount)
105+
if(currentCount>highScore){
106+
highScore = currentCount;
107+
d3.select('.high').selectAll('span')
108+
.text(highScore)
109+
}
110+
currentCount=0;
111+
}
112+
}
113+
}
114+
collisions();
115+
116+
}
117+
118+
setInterval(function(){
119+
coordinates()
120+
}, 100)
121+
122+
123+
124+
//__________________________________________________________________________________________________________________
125+
//High Score + Current Score
126+
var highScore = 0;
127+
var currentCount = 0;
128+
129+
var current = function(){
130+
d3.select('.current').selectAll('span')
131+
.text(currentCount++)
132+
}
133+
134+
setInterval(function(){
135+
current()
136+
}, 150)

0 commit comments

Comments
 (0)