最近微信小程序跳一跳很火
，又掀起了一阵浪潮！身为一个二手前端，本着万物皆代码的原则，趁四下无人、闲来无事之时，想尝试一下能不能敲出来？？翻了几本Javascript资料，猫了几眼大神的博客，在论坛田里也搂了两耙子，写了一个2D版本的跳一跳。话不多说，直接上干货：
1、HTML
2、JS
a.即使代码千变万化，也要先进行初始化
b.既然是跳一跳，最基本的人物角色和默认平台总要有的
c.一开始角色(小方块认停在第一个平台，接下来就要判断玩家做了什么操作？(ps:这里长按鼠标左键为蓄力，松开则为释放)
d.松开鼠标方块跳跃，绘制下一个平台
扫描二维码关注公众号，回复：
1113380 查看本文章
e.判断方块位置，是否失败，移动镜头（可视区域）（๑乛◡乛๑）
f.跳跃中,如果失败就结束
f.每一帧画面的绘制
运行效果如图：
fail-1
fail-2
success
所有代码：
<!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>github源码：
传送门