原生JS实现的跳一跳小游戏完整实例

作为网站的作者，我很乐意为大家提供原生JS实现的跳一跳小游戏的完整攻略。

简介

跳一跳是一款非常流行的手机游戏，它的玩法简单而又有趣。本攻略将介绍如何用原生JS实现一个跳一跳的小游戏，包括如何实现小人跳跃、生成随机方块、游戏分数计算等。

实现步骤

1. 初始化游戏画布

首先，我们需要在HTML页面中创建一个画布（canvas），并通过JS获取它的上下文（context）对象，以便在画布上绘制图形：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

2. 绘制小人和起跳点

我们需要在画布上绘制一个小人和一个起跳点，代码如下：

// 绘制小人
function drawPlayer(x, y) {
  ctx.fillStyle = 'black';
  ctx.fillRect(x, y, 50, 50);
}

// 绘制起跳点
function drawStart(x, y, width) {
  ctx.fillStyle = 'red';
  ctx.fillRect(x, y, width, 10);
}

// 在画布中心位置绘制小人和起跳点
const startX = canvas.width / 2 - 25;
const startY = canvas.height - 60;
drawStart(startX, startY, 50);
drawPlayer(startX, startY - 50);

以上代码实现了在画布中心位置绘制一个小人和一个起跳点，其中参数x和y分别是小人或者起跳点在画布上绘制的起始坐标，width是起跳点的宽度。

3. 跳跃动画

当玩家点击起跳点之后，小人就会进行跳跃动画。我们需要实现一个函数来控制小人的跳跃，代码如下：

// 控制小人跳跃
function playerJump(distance, callback) {
  let height = distance;
  const jumpInterval = setInterval(() => {
    if (height > 0) {
      ctx.clearRect(startX, startY - height - 50, 50, 50);
      drawPlayer(startX, startY - height);
      height -= 2;
    } else {
      clearInterval(jumpInterval);
      callback && callback();
    }
  }, 5);
}

以上代码实现了一个名为playerJump的函数，该函数接受跳跃的距离distance和跳跃结束后的回调函数callback作为参数。在playerJump函数内部，我们先定义一个名为height的变量，封装关于控制小人跳跃的逻辑。通过setInterval实现小人跳跃动画，每隔5毫秒调用一次函数。其中，ctx.clearRect用于清除画布上原先的小人，然后调用drawPlayer函数在新位置绘制小人，height -= 2表示小人每次跳跃的高度减少2像素，直到height <= 0跳跃动画结束。

4. 生成随机方块

当小人跳跃结束后，我们需要在一个随机位置生成一个方块。代码如下：

// 生成随机方块
function generateBlock() {
  const startX = Math.floor(Math.random() * (canvas.width - 50));
  const startY = Math.floor(Math.random() * (canvas.height - 60));
  const width = Math.floor(Math.random() * 50 + 50);
  const block = { x: startX, y: startY, width: width };
  ctx.fillStyle = 'blue';
  ctx.fillRect(block.x, block.y, block.width, 10);
  return block;
}

以上代码实现了一个名为generateBlock的函数，该函数可以在画布上随机生成一个方块，函数返回一个包含方块坐标和长宽的对象。通过调用Math.floor和Math.random函数实现了随机生成方块的位置坐标和长度。

5. 计算得分

当小人跳跃且生成了方块后，我们还需要根据小人和方块的位置关系来计算得分，代码如下：

// 计算得分
function calculateScore(playerY, block) {
  if (playerY - block.y <= 10 && playerY - block.y >= -50) {
    const gap = Math.abs((block.x + block.width / 2) - (startX + 25));
    const score = Math.floor(10 * (100 - gap) / 100);
    return score > 0 ? score : 0;
  } else {
    return 0;
  }
}

以上代码实现了一个名为calculateScore的函数，该函数接受小人的Y坐标和方块的位置作为参数，根据它们的位置关系计算得分。如果小人在正上方跳过方块，则得分为100分；如果小人跳到方块两侧，则根据小人和方块的水平距离来计算得分。

6. 完整代码

最后，我们将以上函数整合为一个完整的游戏代码，如下所示：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const scoreBoard = document.getElementById('score');
let score = 0;
let block = null;

// 绘制小人
function drawPlayer(x, y) {
  ctx.fillStyle = 'black';
  ctx.fillRect(x, y, 50, 50);
}

// 绘制起跳点
function drawStart(x, y, width) {
  ctx.fillStyle = 'red';
  ctx.fillRect(x, y, width, 10);
}

// 在画布中心位置绘制小人和起跳点
const startX = canvas.width / 2 - 25;
const startY = canvas.height - 60;
drawStart(startX, startY, 50);
drawPlayer(startX, startY - 50);

// 控制小人跳跃
function playerJump(distance, callback) {
  let height = distance;
  const jumpInterval = setInterval(() => {
    if (height > 0) {
      ctx.clearRect(startX, startY - height - 50, 50, 50);
      drawPlayer(startX, startY - height);
      height -= 2;
    } else {
      clearInterval(jumpInterval);
      callback && callback();
    }
  }, 5);
}

// 生成随机方块
function generateBlock() {
  const startX = Math.floor(Math.random() * (canvas.width - 50));
  const startY = Math.floor(Math.random() * (canvas.height - 60));
  const width = Math.floor(Math.random() * 50 + 50);
  const block = { x: startX, y: startY, width: width };
  ctx.fillStyle = 'blue';
  ctx.fillRect(block.x, block.y, block.width, 10);
  return block;
}

// 计算得分
function calculateScore(playerY, block) {
  if (playerY - block.y <= 10 && playerY - block.y >= -50) {
    const gap = Math.abs((block.x + block.width / 2) - (startX + 25));
    const score = Math.floor(10 * (100 - gap) / 100);
    return score > 0 ? score : 0;
  } else {
    return 0;
  }
}

// 点击起跳点触发小人跳跃
document.addEventListener('click', () => {
  playerJump(150, () => {
    if (block) {
      score += calculateScore(startY - 150, block);
      scoreBoard.innerText = `得分：${score}`;
      ctx.clearRect(block.x, block.y, block.width, 10);
    }
    block = generateBlock();
  });
});

以上代码中，我们通过点击addEventListener事件触发小人跳跃动画，并计算得分。最后根据calculateScore函数的返回值更新得分和分数面板（scoreBoard）。

示例一： 小人跳跃距离

playerJump(150, function() {
  console.log('小人跳跃距离150px');
});

以上代码调用了playerJump函数，使得小人在画布上向上跳150px，完成一次跳跃动画。小人跳跃结束后，控制台将打印输出'小人跳跃距离150px'。

示例二： 计算得分

const playerY = 410;
const block = { x: 300, y: 350, width: 80 };
const score = calculateScore(playerY, block);
console.log(`玩家得分：${score}`);

以上代码调用了calculateScore函数，计算从画布底部高度为410px的小人跳跃过方块的得分。方块的位置是(x=300, y=350)，长度为80。控制台将打印输出'玩家得分：60'。