-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmovement.html
75 lines (53 loc) · 1.61 KB
/
movement.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
<!doctype html>
<html>
<head>
<title>Sloots</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var stage;
var circle;
var circle2;
function init() {
stage = new createjs.Stage("canvas");
circle = new createjs.Shape();
circle2 = new createjs.Shape();
var body = document.body;
body.style.backgroundColor = 'black';
body.style.padding = 0;
body.style.margin = 0;
// change resolution via scaling
stage.canvas.style.width='50%'; // can do same for height
stage.canvas.style.backgroundColor = 'white';
circle.graphics.beginFill("Red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
circle2.graphics.beginFill("Blue").drawCircle(0, 0, 50);
circle2.x = 100;
circle2.y = 100;
stage.addChild(circle2);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", update);
if(typeof resize != 'undefined') { resize(); }
}
function update() {
circle.x += 10;
circle2.x += 10;
circle2.y += 10;
stage.update();
}
/*
// fullscreen resize capability (only scales canvas size)
function resize() {
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize, false);
*/
</script>
</head>
<body onload="init();" >
<canvas id="canvas" width="1000" height="563"></canvas>
</body>
</html>