forked from presstube/cyclic-vacuum-cannon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (52 loc) · 1.44 KB
/
index.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
<html>
<head>
<title>Cyclic Vacuum Cannon</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background-color: #333;
}
</style>
</head>
<body onload="new p.CyclicVacuumCannonApp">
<canvas id="canvas"></canvas>
<script type="text/javascript" src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script type="text/javascript">
// herein lies the juice
// namespacing & shortcuts
var c = createjs;
var presstube = {};
var p = presstube;
// create our app
p.CyclicVacuumCannonApp = function() {
var canvas = document.getElementById("canvas");
var stage = new c.Stage(canvas);
var bgRect = new c.Shape;
var centeredContainer = new c.Container;
var placeholderDot = new c.Shape;
c.Ticker.setFPS(30);
c.Ticker.addListener(stage);
stage.onTick = function(e) {
// console.log("stage tick here!", e);
}
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
bgRect.graphics.clear().beginFill("333").drawRect(0, 0, canvas.width, canvas.height);
centeredContainer.x = canvas.width / 2;
centeredContainer.y = canvas.height / 2;
}
resize();
window.onresize = resize;
stage.onClick = function(e) {
// console.log("stage click here!", e);
}
stage.addChild(bgRect);
placeholderDot.graphics.beginFill("f00").drawCircle(0, 0, 30);
centeredContainer.addChild(placeholderDot);
stage.addChild(centeredContainer);
}
</script>
</body>
</html>