-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
118 lines (106 loc) · 3.77 KB
/
test.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
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="Common.js"></script>
<script type="text/javascript" src="Sprite.js"></script>
<script type="text/javascript" src="TileSet.js"></script>
<script type="text/javascript" src="CollisionBlock.js"></script>
<script type="text/javascript" src="SceneObject.js"></script>
<script type="text/javascript" src="SceneObserver.js"></script>
<script type="text/javascript" src="CollisionObserver.js"></script>
<script type="text/javascript" src="Scene.js"></script>
<script type="text/javascript" src="PhysicsObject.js"></script>
<script type="text/javascript" src="TileObject.js"></script>
<script type="text/javascript" src="Actor.js"></script>
<script type="text/javascript" src="Controller.js"></script>
</head>
<body style="margin: 0px; padding: 0px; scrolling: none;">
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript" >
//Initializing the canvas
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//Canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.style.width = W;
canvas.style.height = H;
context.canvas.width = W;
context.canvas.height = H;
//Define a sprite with two states: walker left, and walking right
var spr = new Sprite({
src:'Test Resources/triceratops.png',
});
spr.addAnimation({
name : 'WalkLeft',
startX : 0,
startY : 0,
width : 78,
height : 40,
padding : 0,
frames : 8,
speed : 3
});
spr.addAnimation({
name : 'WalkRight',
startX : 0,
startY : 40,
width : 78,
height : 40,
padding : 0,
frames : 8,
speed : 3
});
spr.setState({state : 'WalkLeft',loop:false,nextState:'WalkRight'});
//This is the collision box of the Actor we're going to define (just a solid rectangle the size of the sprite)
var c1 = new CollisionBlock({
width: 78,
height: 40,
matrix: [[1]]
});
//This is the collision box of the invisible TileObject we're going to define that will stop the Actor from falling (100x10 solid rectangle).
var c2 = new CollisionBlock({
width: 100,
height: 10,
matrix: [[1]]
});
//Here we create our Actor, give it the Dino sprite, its CollisionBox, and a downward Acceleration of 100 px/second
var a = new Actor({
x: 10,
y: 10,
z: 0,
yAcceleration: 100,
sprite: spr,
collisionBlock: c1
});
//Here we create a TileObject -- invisible static object whose sole purpose is to make the BG interactive. We don't have a tileset here, so it's just an invisible floor.
var to = new TileObject({
x: 0,
y: 400,
z: 0,
collisionBlock: c2
});
//In order for the Dino Actor to actually stop when it hits the floor, we need something to tell it that it hit the floor.
//For this, we use a CollisionObserver object and register all SceneObjects which may collide.
var observer = new CollisionObserver();
observer.registerObject(a);
observer.registerObject(to);
//Define the scene, make it the size of our screen
var scene = new Scene({
width: W,
height: H
});
//Add our Dino Actor, the TileObject floor, and the CollisionObserver to the scene.
scene.addSceneObject(a);
scene.addSceneObject(to);
scene.addObserver(observer);
//This is our draw loop. It will call the update method on the scene, claiming 33 ms have passed, and then draw the scene.
//This is not good behaviour, the time interval should not be fixed, and you should use RequestAnimationFrame. This is just a bare-bones demo
function draw() {
scene.update({ms:33});
scene.draw({context:context});
}
//window.setInterval(draw, 33);
</script>
</body>
</html>