-
Notifications
You must be signed in to change notification settings - Fork 0
/
2Dtiaoyitiao.html
163 lines (162 loc) · 5.18 KB
/
2Dtiaoyitiao.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
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 800px;height: 600px;margin: 0 auto">
<canvas id="stage" width="800" height="600"></canvas>
</div>
<!-- <canvas id="stage" width="800" height="600"></canvas> -->
</body>
<script type="text/javascript">
var canvas = document.getElementById('stage');
var context = canvas.getContext('2d');
Math.randomRange = function(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
var player = {
x: 0,
y: 300,
width: 30,
jumping: false, //标识是否跳跃中
power: 0, //标识蓄力程度,决定跳多远
speedY: 10 //标识Y轴上的速度,模拟重力加速度
}
var gameover = false;
var cameraMoving = false; //镜头是否移动中
var timerPowerUp; //蓄力操作用的计时器
var platforms = []; //存储所有生成的平台
//初始化平台
platforms.push({
x: 0,
width: 100
}, {
x: 200,
width: 100
});
var lastPlatform = platforms[platforms.length - 1]; //最新生成的平台
var currentPlatform = platforms[0]; //当前落脚的平台
// 绘制玩家
var drawPlayer = function() {
context.fillStyle = "blue";
context.save();
context.fillRect(player.x, player.y, player.width, player.width);
context.restore();
}
//绘制跳跃的平台
var drawPlatform = function() {
context.fillStyle = "#A3A3A3";
context.save();
platforms.forEach(function(platform) {
context.fillRect(platform.x, 300 + player.width, platform.width, 300);
});
context.restore();
}
// 挑战失败
var drawTextFailed = function() {
if (gameover) {
context.fillStyle = "#ff0000";
context.save();
context.font = "normal 30px sans-serif";
context.textBaseline = 'top';
var text = "失败!";
context.fillText(text, canvas.clientWidth / 2 - text.length * 30 / 2, 300);
context.restore();
}
}
//玩家跳跃中
var playerJumping = function() {
if (player.jumping) {
player.y -= player.speedY;
player.speedY -= 0.7;
player.x += player.power;
if (player.y >= 300) {
player.jumping = false;
player.y = 300;
player.power = 0;
if (!iscurrentplatform()) {
if (isfailed()) {
gameover = true;
} else {
currentPlatform = lastPlatform;
generateNextPlatform();
cameraMoving = true;
}
}
}
}
}
//生成下一个平台
var generateNextPlatform = function() {
var x = Math.randomRange(lastPlatform.x + 100, 500);
var width = Math.randomRange(player.width, 100);
lastPlatform = {
x: x,
width: width
}
platforms.push(lastPlatform);
}
//判断玩家位置是否在当前平台
var iscurrentplatform = function() {
return player.x > currentPlatform.x - player.width && player.x < currentPlatform.x + currentPlatform.width;
}
//判断是否失败
var isfailed = function() {
return player.x <= (lastPlatform.x - player.width) || player.x >= (lastPlatform.x + lastPlatform.width);
}
//移动镜头(场景整体移动)
var moveCamera = function() {
if (cameraMoving) {
player.x -= 10;
platforms.forEach(function(platform) {
platform.x -= 10;
});
if (player.x <= 0 || currentPlatform.x <= 0) {
cameraMoving = false;
if (player.x < 0) {
player.x = 0;
} else if (currentPlatform.x < 0) {
currentPlatform.x = 0;
}
}
}
}
//蓄力中
var PowerUping = function() {
player.power += 1;
}
//开始蓄力
var PowerUp = function() {
if (!gameover && !player.jumping) {
timerPowerUp = setInterval(PowerUping, 100);
}
}
//停止蓄力
var PowerUpStop = function() {
if (!gameover && !player.jumping) {
clearInterval(timerPowerUp);
player.jumping = true;
player.speedY = 10;
}
}
//帧刷新时执行的其他操作
var withFrameUpdate = function() {
playerJumping();
moveCamera();
}
//帧绘制
var drawFrame = function() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawPlatform();
drawTextFailed();
withFrameUpdate();
}
document.addEventListener("mousedown", PowerUp);
document.addEventListener("mouseup", PowerUpStop);
drawFrame();
</script>
</html>