别人的代码，目前还在研究。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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<html>
<head>
<meta charset="UTF-8">
<title>Chrome Dinosaur Game</title>
<style type="text/css">
#game {
background-color: black;
}
</style>
</head>
<body>
<canvas id="game" height="400" width="800"></canvas>
<script type="text/javascript">
///////////////////////
// Utility Functions //
///////////////////////
function topWall(obj) {
return obj.y;
}
function bottomWall(obj) {
return obj.y + obj.height;
}
function leftWall(obj) {
return obj.x;
}
function rightWall(obj) {
return obj.x + obj.width;
}
//////////////////
// Game Objects //
//////////////////
// ----------
// DINOSAUR
function Dinosaur (x, dividerY) {
this.width = 55;
this.height = 70;
this.x = x;
this.y = dividerY - this.height;
this.vy = 0;
this.jumpVelocity = -20;
}
Dinosaur.prototype.draw = function(context) {
var oldFill = context.fillStyle;
context.fillStyle = "yellow";
context.fillRect(this.x, this.y, this.width, this.height);
context.fillStyle = oldFill;
};
Dinosaur.prototype.jump = function() {
console.log("Jump called");
this.vy = this.jumpVelocity;
};
Dinosaur.prototype.update = function(divider, gravity) {
this.y += this.vy;
this.vy += gravity;
if (bottomWall(this) > topWall(divider) && this.vy > 0) {
this.y = topWall(divider) - this.height;
this.vy = 0;
return;
}
};
// ----------
// DIVIDER
function Divider (gameWidth, gameHeight) {
this.width = gameWidth;
this.height = 4;
this.x = 0;
this.y = gameHeight - this.height - Math.floor(0.2 * gameHeight);
}
Divider.prototype.draw = function(context) {
context.fillRect(this.x, this.y, this.width, this.height);
};
// ----------
// ----------
// CACTUS
function Cactus(gameWidth, groundY){
this.width = 16; //fixed width cactus
this.height = (Math.random() > 0.5) ? 30 : 70// two different cactus
this.x = gameWidth;
this.x = gameWidth;// spawn cactus at screen end
this.y = groundY - this.height;
}
Cactus.prototype.draw = function(context){
var oldFill = context.fillStyle;
context.fillStyle = "green";
context.fillRect(this.x, this.y, this.width, this.height);
context.fillStyle = oldFill;
};
// ----------
// GAME
function Game () {
var canvas = document.getElementById("game");
this.width = canvas.width;
this.height = canvas.height;
this.context = canvas.getContext("2d");
this.context.fillStyle = "brown";
document.spacePressed = false;
document.addEventListener("keydown", function(e) {
if (e.key === " ") this.spacePressed = true;
});
document.addEventListener("keyup", function(e) {
if (e.key === " ") this.spacePressed = false;
});
this.gravity = 1.5;
this.divider = new Divider(this.width, this.height);
this.dino = new Dinosaur(Math.floor(0.1 * this.width), this.divider.y);
this.cacti = [];
this.runSpeed = -10;
this.paused = false;
this.noOfFrames = 0;
}
Game.prototype.spawnCactus = function(probability)
//Spawns a new cactus depending upon the probability
{
if(Math.random() <= probability){
this.cacti.push(new Cactus(this.width, this.divider.y));
}
}
Game.prototype.update = function () {
// Dinosaur jump start
if(this.paused){
return;
}
if (document.spacePressed == true && bottomWall(this.dino) >= topWall(this.divider)) {
console.log("Conditions met");
this.dino.jump();
}
this.dino.update(this.divider, this.gravity);
// Removing old cacti that cross the eft border of the screen
if(this.cacti.length > 0 && rightWall(this.cacti[0]) < 0) {
this.cacti.shift();
}
// Spawning new cacti
//Case 1: There are no cacti on the screen
if(this.cacti.length == 0){
//Spawn a cactus with high probability
this.spawnCactus(0.5);
}
//Case 2: There is atleast one cactus
else if (
this.cacti.length > 0 && this.width - leftWall(this.cacti[this.cacti.length-1]) > this.jumpDistance + 150)
{
this.spawnCactus(0.05);
}
// Moving the cacti
for (i = 0; i < this.cacti.length; i++){
this.cacti[i].x += this.runSpeed;
}
//Collision Detection
for(i = 0; i < this.cacti.length; i++){
if(
rightWall(this.dino) >= leftWall(this.cacti[i])
&& leftWall(this.dino) <= rightWall(this.cacti[i]) && bottomWall(this.dino) >= topWall(this.cacti[i]))
{
// COLLISION OCCURED
this.paused = true;
}
this.noOfFrames++;
this.score = Math.floor(this.noOfFrames/10);
}
//Jump Distance of the Dinosaur
// This is a CONSTANT in this gamebecause run speed is constant
//Equations: time = t * 2 * v / g where v is the jump velocity
// Horizontal ditance s = vx * t where vx is the run speed
this.jumpDistance = Math.floor(this.runSpeed * (2 * this.dino.jumpVelocity) / this.gravity);
// Math.floor() because we only use integer value.
};
Game.prototype.draw = function () {
// clear rectangle of game
this.context.clearRect(0, 0, this.width, this.height);
// draw divider line
this.divider.draw(this.context);
// draw the dinosaur
this.dino.draw(this.context);
//drawing the cactii
for (i = 0; i < this.cacti.length; i++){
this.cacti[i].draw(this.context);
}
var oldFill = this.context.fillStyle;
this.context.fillStyle = "white";
this.context.fillText(this.score, this.width-40, 30);
this.context.fillStyle = oldFill;
};
var game = new Game();
function main (timeStamp) {
game.update();
game.draw();
window.requestAnimationFrame(main);
}
var startGame = window.requestAnimationFrame(main);
</script>
</body>
</html>