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
| // --------------------------- DECLARATIONS ----------------------------
var canvas = document.getElementById('game-canvas'),
context = canvas.getContext('2d'),
// Constants............................................................
PLATFORM_HEIGHT = 8,
PLATFORM_STROKE_WIDTH = 2,
PLATFORM_STROKE_STYLE = 'rgb(0,0,0)',
STARTING_RUNNER_LEFT = 50,
STARTING_RUNNER_TRACK = 1,
// Track baselines
//
// Platforms move along tracks. The constants that follow define
// the Y coordinate (from the top of the canvas) for each track.
TRACK_1_BASELINE = 323,
TRACK_2_BASELINE = 223,
TRACK_3_BASELINE = 123,
// Images
background = new Image(),
runnerImage = new Image(),
// Platforms
//
// Each platform has its own fill style, but the stroke style is
// the same for each platform.
platformData = [ // One screen for now
// Screen 1.......................................................
{
left: 10,
width: 230,
height: PLATFORM_HEIGHT,
fillStyle: 'rgb(255,255,0)',
opacity: 0.5,
track: 1,
pulsate: false,
},
{ left: 250,
width: 100,
height: PLATFORM_HEIGHT,
fillStyle: 'rgb(150,190,255)',
opacity: 1.0,
track: 2,
pulsate: false,
},
{ left: 400,
width: 125,
height: PLATFORM_HEIGHT,
fillStyle: 'rgb(250,0,0)',
opacity: 1.0,
track: 3,
pulsate: false
},
{ left: 633,
width: 100,
height: PLATFORM_HEIGHT,
fillStyle: 'rgb(255,255,0)',
opacity: 1.0,
track: 1,
pulsate: false,
},
];
// ------------------------- INITIALIZATION ----------------------------
function initializeImages() {
background.src = 'images/background_level_one_dark_red.png';
runnerImage.src = 'images/runner.png';
background.onload = function (e) {
startGame();
};
}
function drawBackground() {
context.drawImage(background, 0, 0);
}
function calculatePlatformTop(track) {
var top;
if (track === 1) { top = TRACK_1_BASELINE; }
else if (track === 2) { top = TRACK_2_BASELINE; }
else if (track === 3) { top = TRACK_3_BASELINE; }
return top;
}
function drawPlatforms() {
var pd, top;
context.save(); // Save context attributes on a stack
for (var i=0; i < platformData.length; ++i) {
pd = platformData;
top = calculatePlatformTop(pd.track);
context.lineWidth = PLATFORM_STROKE_WIDTH;
context.strokeStyle = PLATFORM_STROKE_STYLE;
context.fillStyle = pd.fillStyle;
context.globalAlpha = pd.opacity;
// If you switch the order of the following two
// calls, the stroke will appear thicker.
context.strokeRect(pd.left, top, pd.width, pd.height);
context.fillRect (pd.left, top, pd.width, pd.height);
}
context.restore(); // Restore context attributes
}
function drawRunner() {
context.drawImage(runnerImage,
STARTING_RUNNER_LEFT,
calculatePlatformTop(STARTING_RUNNER_TRACK) - runnerImage.height);
}
function draw(now) {
drawBackground();
drawPlatforms();
drawRunner();
}
function startGame() {
draw();
}
// Launch game
initializeImages();
|
清单 3 列出了该游戏 HTML 的起点，这只是