-
Notifications
You must be signed in to change notification settings - Fork 0
/
game_start.html
134 lines (111 loc) · 5.99 KB
/
game_start.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<title>Pirate Clash</title>
<script src="d3.js" charset="utf-8"></script>
<script src="jquery-2.1.4.min.js" charset="utf-8"></script>
<script src="keybinding.js" charset="utf-8"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<svg swidth="1080px" height="768px" style="height: 100%;width: 100%" >
<defs>
<g id="projectile">
<path d="M0,0 L6,0 L8,2 L6,4 L0,4 L0,0" style="fill:none;stroke:black; stroke-width: 1px"/>
</g>
<g id="projectile_reverse">
<path d="M0,0 L-6,0 L-8,2 L-6,4 L0,4 L0,0" style="fill:none;stroke:black; stroke-width: 1px"/>
</g>
</defs>
</svg>
<script type="text/javascript">
var gobject;
var x;
var y;
var moveSpeed=30;
var currentDirection;
var socketio = io.connect("127.0.0.1:3000");
socketio.on("connectionResponse", function(data) {
d3.select('body').select('svg').append('g').html(data['init_object']);
gobject = d3.select('body').select('svg').select('#tank');
d3.select(gobject).node().attr("transform", "translate(50,50)");
console.log("object detail x:" +d3.transform(gobject.attr("transform")).translate[0] + " y:" + d3.transform(gobject.attr("transform")).translate[1]);
});
socketio.on("moveResponse", function(data) {
var direct = data['direction'];
x = d3.transform(gobject.attr("transform")).translate[0];
y = d3.transform(gobject.attr("transform")).translate[1];
switch(direct){
case "left":
currentDirection="left";
d3.select('body').select('svg').append("path").attr("d","M" + x + ","+ y + " L" + x + "," + (y - 4) +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select('body').select('svg').append("path").attr("d","M" + x + ","+ (y - 36) + " L" + x + "," + (y - 40) +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select(gobject).node().transition().duration(350).ease("linear").attr("transform", "translate(" + (parseInt(x) - moveSpeed ).toString() + "," + y + ") rotate(180)");
break;
case "up":
currentDirection="up";
d3.select('body').select('svg').append("path").attr("d","M" + x + ","+ y + " L" + (x + 4) + "," + y +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select('body').select('svg').append("path").attr("d","M" + (x + 36) + ","+ y + " L" + (x + 36 + 4) + "," + y +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select(gobject).node().transition().duration(350).ease("linear").attr("transform", "translate(" + x + "," + (parseInt(y) - moveSpeed ).toString() + ") rotate(-90)");
break;
case "right":
currentDirection="right";
d3.select('body').select('svg').append("path").attr("d","M" + x + ","+ y + " L" + x + "," + (y + 4) +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select('body').select('svg').append("path").attr("d","M" + x + ","+ (y + 36) + " L" + x + "," + (y + 36 + 4) +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select(gobject).node().transition().duration(350).ease("linear").attr("transform", "translate(" + (parseInt(x) + moveSpeed ).toString() + "," + y + ")");
break;
case "down":
currentDirection="down";
d3.select('body').select('svg').append("path").attr("d","M" + x + ","+ y + " L" + (x - 4) + "," + y +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select('body').select('svg').append("path").attr("d","M" + (x - 36) + ","+ y + " L" + (x - 40) + "," + y +"").attr("style", "fill:none;stroke:black; stroke-width: 1px").transition().duration(5000).remove();
d3.select(gobject).node().transition().duration(350).ease("linear").attr("transform", "translate(" + x + "," + (parseInt(y) + moveSpeed ).toString() + ") rotate(90)");
break;
default:
break;
}
console.log("current x:" +x);
console.log("current y:" +y);
//console.log(data['users']);
});
function move(direct) {
return function(event) {
event.preventDefault();
socketio.emit("moveRequest", { direction : direct});
};
}
function fire() {
return function(event) {
event.preventDefault();
if (x && y && currentDirection) {
var projectileX = 120;
var projectileY = 18;
var projectileRange = 500;
switch(currentDirection){
case "left":
var projectile = d3.select('body').select('svg').append("use").attr("x", (x - projectileX)).attr("y", (y - projectileY - 4)).attr("xlink:href", "#projectile_reverse");
d3.select(projectile).node().transition().duration(1000).ease("linear").attr("x", (x - projectileX - projectileRange)).attr("y", (y - projectileY - 4)).transition().duration(1).remove();;
break;
break;
case "up":
break;
case "right":
var projectile = d3.select('body').select('svg').append("use").attr("x", (x + projectileX)).attr("y", (y + projectileY)).attr("xlink:href", "#projectile");
d3.select(projectile).node().transition().duration(1000).ease("linear").attr("x", (x + projectileX + projectileRange)).attr("y", (y + projectileY)).transition().duration(1).remove();;
break;
case "down":
break;
default:
break;
}
}
};
}
d3.select('body').call(d3.keybinding()
.on('a', move("left"))
.on('w', move("up"))
.on('d', move("right"))
.on('s', move("down"))
.on('space', fire()));
</script>
</body>
</html>