/
09_arcade_shooter.html
150 lines (133 loc) · 4.22 KB
/
09_arcade_shooter.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
// NOTE for Dreamweaver: Does NOT work in "Real time preview", choose temporary file instead!
var score, gun, gunCoord, torpCoord, target, tp, w, h; // global variables
var fired = false; // keep track if torpedo is fired (true) or not (false, default)
function init(){
stage = new createjs.Stage("demoCanvas");
h = demoCanvas.height;
w = demoCanvas.width;
addScore();
drawGun();
drawTarget();
moveTarget();
createjs.Ticker.on("tick", tick); // the main listener
window.onkeydown = operateGun; //register eventhandler for window
}
function tick(event) {
//tracing the actual coordinates of the gun. Both x and y are "mapped" locally (x position: w / 2 - stagecenter, y position: h-20 - height of the gun) to the "global" coordinate space (the whole stage):
gunCoord = gun.localToGlobal(w / 2, h - 20);
win();
stage.update(event);
}
function addScore(){
score = new createjs.Text(0, "15px Arial", "#000000");
score.x = 480;
score.y = 20;
score.value = 0;
stage.addChild(score);
}
function drawGun(){
gun = stage.addChild(new createjs.Shape());
// chained style:
gun.graphics.beginFill("red").drawRect(w / 2, h - 20, 10, 20);
}
function drawTarget(){
target = stage.addChild(new createjs.Shape());
// chained style:
target.graphics.beginFill("blue").drawRect(25, 0, 35, 10);
}
function moveTarget(){
createjs.Tween.get (target, {loop:true})
.to({x:450},3500)
.to({x:-40},3500);
}
function operateGun(e){
switch (e.keyCode){
case 32:
console.log('fired!');
if (fired === false) {torpedo();}; // launch torpedo if possible
break;
case 37:
console.log('gun left');
gun.x -= 10;
break;
case 39:
console.log('gun right');
gun.x += 10;
break;
}
}
function torpedo(){
fired = true; // torpedo fired!
tp = stage.addChild(new createjs.Shape()); // creating a torpedo
tp.graphics.beginFill("green").drawRect(gunCoord.x+2.5, gunCoord.y-5, 5, 5); // start torpedo at current gun coordinates
torpCoord=gunCoord.x; // save the torpedo's x start coordinate "at gunpoint". This is necessary to create the localToLocal coordinate space in function tpControl(event)
createjs.Tween.get (tp, {loop:false}).to({y:-300},1500); // the actual shot!
createjs.Ticker.on("tick", tpControl); // callback to the torpedo's controls
}
function tpControl(event){
// creating a localToLocal coordinate space from torpedo's starting point on x up to 300 pixels on y
var pt = tp.localToLocal(torpCoord,300,target);
// pt.x = torpedp's x position local to target
// pt.y = torpedo's y position local to target
if (target.hitTest(pt.x, pt.y)) {
console.log(pt.x + '/' + pt.y);
// note that pt.x can vary while pt.y is an almost fixed value (target is only moving on x!)
stage.removeChild(tp); // avoiding "double" hits
target.alpha = 0.1;
score.value++; // registering a hit
score.text = score.value;
event.remove();
};
if (pt.y<=10){ // removing the torpedo avoiding "double hits"!
fired = false; // get ready to launch again
target.alpha = 1; // reset target
stage.removeChild(tp);
event.remove();
}
stage.update(event);
}
function win (){
if (score.value == 3)
{
stage.removeChild(target);
stage.removeChild(gun);
stage.removeChild(score);
score.value = 0;
// feedback
mesg = new createjs.Text(0, "35px Arial", "#000000");
stage.addChild(mesg);
//var b = mesg.getBounds();
mesg.x = 20;
//mesg.y = h / 2;
mesg.text = 'You won, congrats!';
// create a rectangle shape the same size as the text, and assign it as the hitArea
// note that it is never added to the display list.
// https://github.com/CreateJS/EaselJS/blob/master/tutorials/Mouse%20Interaction/hitArea.html
var hit = new createjs.Shape();
hit.graphics.beginFill("#000").drawRect(0, 0, mesg.getMeasuredWidth(), mesg.getMeasuredHeight());
mesg.hitArea = hit;
// reload
mesg.on('click', reload);
}
}
function reload() {
init();
}
</script>
<style type="text/css">
#demoCanvas {
border: 1px solid gray;
}
</style>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="300"> alternate content </canvas>
</body>
</html>