-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflappy.html
154 lines (118 loc) · 3.75 KB
/
flappy.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/kaboom@3000.0.1/dist/kaboom.js"></script>
</head>
<body>
<script type="module">
// import kaboom.js
import kaboom from "https://unpkg.com/kaboom@3000.0.1/dist/kaboom.mjs";
const FLOOR_HEIGHT = 48;
const JUMP_FORCE = 750;
const SPEED = 480;
var isDouble = 0;
// initialize context
kaboom({
background: [141, 183, 255],
});
// load assets
loadSprite("bean", "https://zerohero.pages.dev/sprites/bean-head.png");
loadSprite("bean-head", "https://zerohero.pages.dev/sprites/bean-head.png");
scene("game", () => {
// define gravity
setGravity(2000);
// add a game object to screen
const player = add([
// list of components
sprite("bean"),
pos(100, 40),
area(),
body(),
]);
const game = add([
timer(),
])
// floor
add([
rect(width(), FLOOR_HEIGHT),
outline(4),
pos(0, height()),
anchor("botleft"),
area(),
body({ isStatic: true }),
color(81, 54, 30),
]);
function jump() {
player.jump(JUMP_FORCE);
}
// jump when user press space
onKeyPress("space", jump);
onClick(jump);
function spawnTree() {
// add tree obj
add([
rect(96, rand(32, height()/2 - FLOOR_HEIGHT - 20)),
area(),
outline(4),
pos(width(), height() - FLOOR_HEIGHT),
anchor("botleft"),
color(80, 180, 255),
move(LEFT, SPEED),
"tree",
]);
add([
rect(96, rand(32, height()/2 - FLOOR_HEIGHT- 20)),
area(),
outline(4),
pos(width(), 0),
anchor("topright"),
color(80, 180, 255),
move(LEFT, SPEED),
"tree",
]);
// wait a random amount of time to spawn next tree
wait(rand(0.5, 1.5), spawnTree);
}
// start spawning trees
spawnTree();
// lose if player collides with any game obj with tag "tree"
player.onCollide("tree", () => {
// go to "lose" scene and pass the score
go("lose", score);
burp();
addKaboom(player.pos);
});
// keep track of score
let score = 0;
const scoreLabel = add([
text(score),
pos(24, 24),
]);
// increment score every frame
onUpdate(() => {
score++;
scoreLabel.text = score;
});
});
scene("lose", (score) => {
add([
sprite("bean-head"),
pos(width() / 2, height() / 2 - 80),
scale(1),
anchor("center"),
]);
// display score
add([
text(score),
pos(width() / 2, height() / 2 + 80),
scale(2),
anchor("center"),
]);
// go back to game with space is pressed
onKeyPress("space", () => go("game"));
onClick(() => go("game"));
});
go("game");
</script>
</body>
</html>