-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdev.html
104 lines (99 loc) · 2.24 KB
/
dev.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block {
background-color: #ffb;
height: 30px;
width: 30px;
position: fixed;
}
.box {
position: fixed;
}
body {
height: 400px;
width: 300px;
border: 1px solid;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="box" style="height: 30px; width: 30px; border: 1px solid;"></div>
<script src="./dist/flappy.js"></script>
<script>
var Player = WASD_Flappy.Player
var Flappy = WASD_Flappy.default
var Block = WASD_Flappy.Block
window.box = document.querySelector('.box')
var player = new Player({
height: 30,
width: 30,
velocity: 15
})
var flappy = new Flappy({
canvas: {
width: 300,
height: 400,
fps: 30
},
levels: [
{
blockDistance: 40,
blocks: [
new Block({
name: '123'
}),
new Block({
name: '467',
placement: 'bottom'
}),
new Block({
name: '789'
})
]
}
],
player: player
})
var blocks = []
flappy.on('game:ready', stats => {
stats.blocks.forEach(b => {
const block = document.createElement('div')
block.classList.add('block')
blocks.push(block)
document.body.appendChild(block)
})
})
flappy.on(['game:ready', 'game:progress'], stats => {
stats.blocks.forEach((b, index) => {
// console.log(index, blocks)
if (!blocks[index]) return
blocks[index].style.left = b.startX + 'px'
blocks[index].style.top = b.startY + 'px'
})
window.box.style.top = stats.player.startY + 'px'
})
flappy.on('player:hitblock', stats => {
console.log('done')
flappy.pause()
})
flappy.on('player:hitfloor', stats => {
console.log('done hitfloor')
flappy.pause()
})
document.addEventListener('keydown', e => {
if (e.keyCode === 32) {
if (flappy.state === 'READY') {
flappy.start()
}
player.jump()
}
})
</script>
</body>
</html>