-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (110 loc) · 3.8 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="URF-8">
<link rel="shortcut icon" href="src/img/favicon.ico" type="image/x-icon">
<title>Doggy Sunday</title>
<meta name="description"
content="Bark and find the lost sheep and help them get into the farm. Global Game Jam 2021.">
<meta name="keywords" content="HTML, CSS, JavaScript, Planck, Game Jam, Gobal Game Jam, Pixel Art">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://catapim.github.io/doggysunday/">
<meta property="og:type" content="website">
<meta property="og:title" content="Doggy Sunday. Global Game Jam 2021">
<meta property="og:description"
content="Bark and find the lost sheep and help them get into the farm. Global Game Jam 2021.">
<meta property="og:image" content="https://raw.githubusercontent.com/catapim/doggysunday/main/src/img/og.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="catapim.github.io">
<meta property="twitter:url" content="https://catapim.github.io/doggysunday/">
<meta name="twitter:title" content="Doggy Sunday. Global Game Jam 2021">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="https://raw.githubusercontent.com/catapim/doggysunday/main/src/img/og.png">
<link rel="stylesheet" href="src/css/style.css">
</head>
<script src="./vendor/planck-with-testbed.min.js"></script>
<body>
<div id="debug-info">
</div>
<div id="score">
</div>
<div id="how-to">
<h1>DOGGY SUNDAY</h1>
<h2>find the lost sheep</h2>
<h2>help them to get into the farm</h2>
<h3>SPACE = BARK</h3>
<h3>WASD = MOVE</h3>
</div>
<canvas width="640" height="480" id="canvas" tabindex="1">
</canvas>
</body>
<script src="./js/world.js"></script>
<script src="./js/grass.js"></script>
<script src="./js/fence.js"></script>
<script src="./js/sheep.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/clouds.js"></script>
<script src="./js/dog.js"></script>
<script src="./js/controls.js"></script>
<script>
// when window is resized, canvas must be resized
function resize_canvas_to_window_size() {
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
}
window.addEventListener('resize', resize_canvas_to_window_size);
// when DOM is loaded, resize canvas for first time and set focus.
// Also, create game elements
var dog, herd;
document.addEventListener('DOMContentLoaded', function () {
resize_canvas_to_window_size();
canvas.focus();
dog = new Dog(1.0, 1.0)
sheep = new Sheep(1.0, 1.0)
herd = [];
var i;
for (i = 0; i < TOTAL_SHEEP; i++) {
var xRandom = 1 + Math.ceil(Math.random() * TOTAL_SHEEP * 1) / 10;
var yRandom = 1 + Math.ceil(Math.random() * TOTAL_SHEEP * 2) / 10;
herd.push(new Sheep(xRandom, yRandom))
}
// left fence
new Fence([
[0.0, 0.0],
[0.1, 0.0],
[0.1, 10],
[0.0, 10]
]);
// top fence 1
new Fence([
[0.0, 0.0],
[1, 0.0],
[1, 0.1],
[0.0, 0.1]
]);
// top fence 2
new Fence([
[1.5, 0.0],
[4.5, 0.0],
[4.5, 0.1],
[1.5, 0.1]
]);
// right fence
new Fence([
[4.4, 0.0],
[4.4, 10],
[4.5, 0],
[4.5, 10]
]);
// bottom fence 2
new Fence([
[0.0, 10.0],
[4.5, 10],
[4.5, 10.1],
[0.0, 10.1]
]);
});
</script>
<script src="./js/render.js"></script>
</html>