HTML5小青蛙吃蚊子小游戏代码

HTML5小青蛙吃蚊子小游戏代码

一个简单的html5青蛙小游戏源码,使用dom与css3动画和JavaScript进行事件的构建。没有使用图像,一切都是用CSS构建的,点击简单动画。支持设置:白天时间 、晚上时间、打开音乐等功能。

使用方法
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
155
156
<div class="environment">
<div class="sky"></div>
<div class="stars"></div>
<div class="sun"></div>
<div class="moon"></div>
<div class="mountains">
<div class="mountain">
<div class="trees">
<div class="tree"></div>
<div class="tree tree--2"></div>
<div class="tree tree--3"></div>
<div class="tree tree--4"></div>
</div>
</div>
<div class="mountain mountain--2"></div>
</div>
<div class="water"></div>
<div class="lily lilly-1"></div>
</div>
<div class="player">
<div class="legs">
<div class="leg leg--left">
</div>
<div class="leg leg--right">
</div>
</div>
<div class="body">
<div class="crown"></div>
<div class="belly"></div>
<div class="arms">
<div class="arm arm--left">
<div class="hand">
<div class="toe"></div>
<div class="toe"></div>
<div class="toe"></div>
</div>
</div>
<div class="arm arm--right">
<div class="hand">
<div class="toe"></div>
<div class="toe"></div>
<div class="toe"></div>
</div>
</div>
</div>
<div class="mouth">
<div class="top-lip"></div>
<div class="bottom-lip"></div>
<div class="tongue">
<div class="tongue-inner">
<div class="fly is-dead"></div>
</div>
</div>
</div>
<div class="eyes">
<div class="eye eye--left">
<div class="pupil"></div>
</div>
<div class="eye eye--right">
<div class="pupil"></div>
</div>
</div>
</div>
</div>
<div class="screen menu">
<h1>喂青蛙</h1>
<a href="#" class="btn play" onClick="play()">
<span class="text">开始</span>
<br>
<span>最好: <span class="js-best">0</span></span>
</a>
<a href="#" class="btn" onClick="settings()">设置</a>
</div>
<div class="screen game">
<div class="hud">
<div class="time">
<span class="label">时间</span>
<span class="value js-time">30</span>
</div>
<div class="score">
<span class="label">分数</span>
<span class="value js-score">0</span>
</div>
</div>
<div class="flies">
<div class="path">
<div class="target">
<div class="fly"></div>
</div>
</div>
<div class="path">
<div class="target">
<div class="fly"></div>
</div>
</div>
<div class="path">
<div class="target">
<div class="fly"></div>
</div>
</div>
<div class="path">
<div class="target">
<div class="fly"></div>
</div>
</div>
<div class="path">
<div class="target">
<div class="fly"></div>
</div>
</div>
<div class="path">
<div class="target">
<div class="fly"></div>
</div>
</div>
</div>
</div>
<div class="screen win">
<h1>完成</h1>
<div class="card">
<h3 class="highscore js-highscore is-hidden">新高分!</h3>
<div class="score">
<span class="label">分数</span>
<span class="value js-score">30</span>
</div>
<div class="best">
<span class="label">最好</span>
<span class="value js-best">0</span>
</div>
</div>
<a href="#" class="btn" onClick="play()">再玩一次</a>
<a href="#" class="btn btn--clear" onClick="menu()">返回菜单</a>
</div>
<div class="screen settings">
<h1>设置</h1>
<div class="card">
<label class="checkbox">
<input type="radio" name="theme" value="light" checked onClick="toggleTheme(this.value)">
<span>白天时间</span>
</label>
<label class="checkbox">
<input type="radio" name="theme" value="dark" onClick="toggleTheme(this.value)">
<span>晚上时间</span>
</label>
</div>
<a href="#" class="btn js-toggle-music" onClick="toggleMusic()">打开音乐</a>
<a href="#" class="btn" onClick="menu()">返回</a>
</div>
<div class="screen scoreboard">
<h1>记分牌</h1>
<div class="card">
<ol class="scoreboard-list js-scoreboard"></ol>
</div>
<a href="#" class="btn" onClick="menu()">返回</a>
</div>
<audio id="music" src="mp3/Ducky-Duck-preview.mp3"></audio>
温馨提示:此处内容需要评论本文后才能查看。
3

发表评论