HTML5 2D 游戏开发 Snail Bait 简介（2）Snail Bait 的 HTML 和 CSS
|
- UID
- 1066743
|
HTML5 2D 游戏开发 Snail Bait 简介（2）Snail Bait 的 HTML 和 CSS
Snail Bait 的 HTML 和 CSSSnail Bait 代码统计代码行数：
- HTML：276
- CSS：410
- JavaScript：3,898
Snail Bait 是通过 HTML、CSS 和 JavaScript 实现的；但是，正如您从 侧栏中看到的，大多数代码是 JavaScript。事实上，该系列的其余部分主要关注 JavaScript，只是偶尔谈及 HTML 和 CSS3。
图 8 显示了适合该游戏的 HTML 元素及其相应 CSS，忽略了其他元素的 HTML 和 CSS，比如 toasts 和积分：
图 8. 游戏的 HTML 和 CSS（省略了盒状阴影的说明） CSS 大多都很不起眼，除了我在 中高亮显示的那几个关注的属性。首先，我将 wrapper 元素的 margin 属性设置为 0 auto，这意味着包装器（以及其中包含的一起）在窗口中水平居中。其次，lives 和 sound-and-music 元素有一个 absolute 位置。如果采用了默认位置，即 relative，那么这些 relative 会扩展到与画布一样宽，它们的邻居（分别是记分和操作说明）将在它们之下运动。最后，keys 和 explanation CSS 类有一个 display 属性 inline，用于将相关元素放在同一行上。
清单 2 显示了 中的 CSS：
清单 2. game.css（摘录）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
| #arena {
text-align: center;
padding: 5px;
width: 805px;
height: 445px;
}
#copyright {
margin-top: -35px;
float: right;
margin-right: 12px;
padding: 2px;
color: blue;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
font-size: 0.8em;
}
.explanation {
color: #ff0;
text-shadow: 1px 1px 1px rgba(0,0,0,1.0);
display: inline;
margin-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 2px;
}
#game-canvas {
border: 2px inset rgba(0,0,80,0.62);
-webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
}
#instructions {
height: 30px;
margin-right: 8px;
padding-top: 6px;
padding-left: 25px;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
-o-transition: opacity 2s;
transition: opacity 2s;
color: #ff0;
font-size: 1.05em;
opacity: 1.0;
}
.keys {
color: blue;
text-shadow: 1px 1px 1px rgba(255,255,0,1.0);
background: rgba(0,0,0,0.1);
border: thin solid rgba(0,0,0,0.20);
border-radius: 5px;
margin-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
display: inline;
}
#sound-and-music {
position: absolute;
top: 495px;
margin-left: 10px;
color: #ff0;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
background: rgba(0,0,0,0.1);
border-radius: 5px;
border: thin solid rgba(0,0,0,0.20);
padding-top: 2px;
padding-bottom: 2px;
z-index: 1;
}
#wrapper {
margin: 0 auto;
margin-top: 20px;
padding: 5px;
width: 817px;
height: 520px;
}
|
正如您在清单 3 中看到的（清单 3 列出了 中显示的 HTML），该游戏的 HTML 是一堆 DIV 和画布，以及少许图像和几个复选框：
清单 3. game.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
| <!DOCTYPE html>
<html>
<!-- Head........................................................-->
<head>
<title>Snail Bait</title>
</head>
<!-- Body........................................................-->
<body>
<!-- Wrapper..................................................-->
<div id='wrapper'>
<!-- Header.................................................-->
<div id='header'>
<div id='lives'>
<img id='life-icon-left' src='images/runner-small.png'/>
<img id='life-icon-middle' src='images/runner-small.png'/>
<img id='life-icon-right' src='images/runner-small.png'/>
</div>
<div id='score'>0</div>
<div id='fps'></div>
</div>
<!-- Arena..................................................-->
<div id='arena'>
<!-- The game canvas.....................................-->
<canvas id='game-canvas' width='800' height='400'>
Your browser does not support HTML5 Canvas.
</canvas>
<!-- Sound and music.....................................-->
<div id='sound-and-music'>
<div class='checkbox-div'>
Sound <input id='sound-checkbox'
type='checkbox' checked/>
</div>
<div class='checkbox-div'>
Music <input id='music-checkbox'
type='checkbox' checked/>
</div>
</div>
<!-- Instructions........................................-->
<div id='instructions'>
<div class='keys'>
d / k
<div class='explanation'>
move left/right
</div>
</div>
<div class='keys'>
f / j
<div class='explanation'>
jump
</div>
</div>
<div class='keys'>
p
<div class='explanation'>
pause
</div>
</div>
</div>
<!-- Copyright...........................................-->
<div id='copyright'> ©2012 David Geary</div>
</div>
</div>
<!-- JavaScript................................................-->
<script src='js/stopwatch.js'></script>
<script src='js/animationTimer.js'></script>
<script src='js/sprites.js'></script>
<script src='js/requestNextAnimationFrame.js'></script>
<script src='js/behaviors/bounce.js'></script>
<script src='js/behaviors/cycle.js'></script>
<script src='js/behaviors/pulse.js'></script>
<script src='game.js'></script>
</body>
</html>
|
canvas 元素是所有活动发生的地方。此画布有一个 2D 环境和一个功能强大的 API 来实现 2D 游戏，以及其他。canvas 元素中的文本是可退回文本，只有当该浏览器不支持 HTML5 Canvas 才显示。
关于该游戏 HTML 和 CSS 最后一个注意事项：注意画布的宽度和高度是通过 canvas 元素的 width 和 height 属性来指定的。这些属性都是与 canvas 元素的大小以及 包含在此元素中的绘图表面的大小相关的。
另一方面，使用 CSS 设置 canvas 元素的宽度和高度，仅设置该元素的大小。绘图表面仍然保持其默认宽度和高度，分别为 300 和 150 像素。这意味着很可能 canvas 元素大小与绘图表面大小不匹配，而那时浏览器可能会调整绘图表面大小以适应该元素。大多数时间这会产生不利影响，因此绝不使用 CSS 设置 canvas 元素大小将是一个不错的主意。
在一个小画布上绘图然后通过 CSS 放缩？一些游戏特意在一个小画布上绘制，然后使用 CSS 将画布扩大到适当大小。这样，您就不需要操作很多画布像素，这将会提高性能。通常，使用 CSS 进行画布扩展是硬件加速的，因此扩展的成本非常小。然而今天 — 由于几乎所有现代浏览器版本都附带有硬件加速 Canvas —。大多数情况下，这与在全尺寸画布上绘图一样快。
正如热映的电影 Pulp Fiction，您已经看到了故事结局。现在我们回到开始。 |
|
|
|
|
|
