原生实现微信跳一跳

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跳一跳</title>
<style>
* {margin: 0;padding: 0;box-sizing: border-box;
/* 禁止长按选择文本 */
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;
-moz-user-select: none;-ms-user-select: none;user-select: none;}
html,body {width: 100%;height: 100%;overflow: hidden;}
#stage {width: 100%;height: 100vh;}
button {position: absolute;height: 10vw;bottom: 20px;right: 20px;display: none;}
p {position: absolute;top: 20px;right: 20px;font-size: 20px;color: #00f;}
</style>
</head>

<body>
<p id="number">0</p>
<canvas id="stage" width="600" height="600"></canvas>
<button id="btn">重新开始</button>
<script>
var canvas = document.getElementById('stage');
var btn = document.getElementById('btn');
var numberbox = document.getElementById('number');
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 number = 0 //游戏得分
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 = "#000";
context.save();
context.font = "bold 30px cursive";
context.textBaseline = 'top';
var text = "游戏结束";
context.fillText(text, canvas.clientWidth / 2 - text.length * 30 / 2, 100);
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;
btn.style.display = 'block';
} else {
//跳跃成功时分数增加
number += 1
numberbox.innerHTML = number;
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;
if (player.power <= 20) player.width -= 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;
//蓄力结束后小人恢复高度
player.width = 30;
}
}
//帧刷新时执行的其他操作
var withFrameUpdate = function () {
playerJumping();
moveCamera();
}
//帧绘制
var drawFrame = function () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawPlatform();
drawTextFailed();
withFrameUpdate();
}

//pc端鼠标事件 mousedown mousemove mouseup
document.addEventListener("mousedown", PowerUp, false);
document.addEventListener("mouseup", PowerUpStop, false);

//移动端滑动事件 touchstart touchmove touchend
document.addEventListener("touchstart", PowerUp, false);
document.addEventListener("touchend", PowerUpStop, false);

var restart = function () {
//游戏结束后重新开始
window.location.reload()
}

btn.addEventListener("click", restart, false)
drawFrame();
</script>
</body>

</html>

原生实现微信跳一跳

猜你喜欢