-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (85 loc) · 2.17 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<canvas id="screen" width="640" height="480" >
</canvas>
<!--<button id="loadResource" >Load Resource</button>
<button id="drawResource" >Draw Resource</button>-->
<script type="text/javascript" src="main.js" ></script>
<script type="text/javascript" >
var loadedIMG = false;
var pos = {
x:1,
y:1
};
var canvas = {
top: 0,
left: 0,
right: 640,
bottom: 480
};
var increments = {
x: 2,
y: 1
}
/*
document.getElementById("loadResource").onclick = function() {
game.resources.loadImage({
name:"unicorn",
url:"unicorn.jpg",
loaded:drawUnicorn
});
loadedIMG = true;
};
document.getElementById("drawResource").onclick = function() {
game.screen.draw({
name:"unicorn",
x:0,
y:0,
height:100,
width:200
});
};
*/
var drawUnicorn = function() {
if(!loadedIMG) //If the image is not loaded load it
{
game.resources.loadImage({
name:"unicorn",
url:"unicorn.jpg",
loaded:drawUnicorn
});
loadedIMG = true;
}
game.screen.draw({
name:"unicorn",
x:pos.x,
y:pos.y,
height:100,
width:200
});
};
window.setInterval(function(){
var imgEdges = {
top: pos.y,
left: pos.x,
right: pos.x + 200,
bottom: pos.y + 100
}
if(imgEdges.top <= canvas.top || imgEdges.bottom >= canvas.bottom) //If hitting the top or bottom
{
increments.y = -increments.y;
}
else if(imgEdges.left <= canvas.left || imgEdges.right >= canvas.right) //If hitting the left or right
{
increments.x = -increments.x;
}
pos.x += increments.x;
pos.y += increments.y;
drawUnicorn();
}, 10);
</script>
</body>
</html>