在線演示地址：https://code.haiyong.site/964/
源碼也可在文末進(jìn)行獲取

? 項(xiàng)目基本結(jié)構(gòu)

大致目錄結(jié)構(gòu)如下（共3個(gè)子文件）：

├── js
│ ? └──script.js 13KB
├── css
│ ? └── style.css 1KB
└── index.html 2KB

場景展示

HTML源碼

<div class="container">
  <div id="score"></div>
  <canvas id="game" width="375" height="375"></canvas>
  <div id="introduction">按住鼠標(biāo)伸出一根棍子</div>
  <div id="perfect">雙倍積分</div>
  <button id="restart">重新開始</button>
</div>

CSS 源碼

html,body

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
}

container

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

score

#score {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 2em;
  font-weight: 900;
}

introduction

#introduction {
  width: 200px;
  height: 150px;
  position: absolute;
  font-weight: 600;
  font-size: 0.8em;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  transition: opacity 2s;
}

restart

#restart {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
  color: white;
  background-color: red;
  border: none;
  font-weight: 700;
  font-size: 1.2em;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  display: none;
  cursor: pointer;
}

perfect

#perfect {
  position: absolute;
  opacity: 0;
  transition: opacity 2s;
}

JS 源碼

js 代碼較多，這里提供部分，完整源碼可以在文末下載

配置

const canvasWidth = 375;
const canvasHeight = 375;
const platformHeight = 100;
const heroDistanceFromEdge = 10; // 等待時(shí)
const paddingX = 100; // 從原始畫布尺寸開始，英雄的等待位置
const perfectAreaSize = 10;

重置游戲變量和布局，但不啟動(dòng)游戲（游戲在按鍵時(shí)開始）

function resetGame() {
  // 重置游戲進(jìn)度
  phase = "waiting";
  lastTimestamp = undefined;
  sceneOffset = 0;
  score = 0;

  introductionElement.style.opacity = 1;
  perfectElement.style.opacity = 0;
  restartButton.style.display = "none";
  scoreElement.innerText = score;

  // 第一個(gè)平臺總是相同的x+w必須匹配paddingX
  platforms = [{ x: 50, w: 50 }];
  generatePlatform();
  generatePlatform();
  generatePlatform();
  generatePlatform();

  sticks = [{ x: platforms[0].x + platforms[0].w, length: 0, rotation: 0 }];

  trees = [];
  generateTree();
  generateTree();
  generateTree();
  generateTree();
  generateTree();
  generateTree();
  generateTree();
  generateTree();
  generateTree();
  generateTree();

  heroX = platforms[0].x + platforms[0].w - heroDistanceFromEdge;
  heroY = 0;

  draw();
}

最遠(yuǎn)樹右邊緣的X坐標(biāo)

  const lastTree = trees[trees.length - 1];
  let furthestX = lastTree ? lastTree.x : 0;

如果按下空格鍵，則重新啟動(dòng)游戲

window.addEventListener("keydown", function (event) {
  if (event.key == " ") {
    event.preventDefault();
    resetGame();
    return;
  }
});

返回棍子擊中的平臺（如果沒有擊中任何棍子，則返回未定義）

function thePlatformTheStickHits() {
  if (sticks.last().rotation != 90)
    throw Error(`Stick is ${sticks.last().rotation}°`);
  const stickFarX = sticks.last().x + sticks.last().length;

  const platformTheStickHits = platforms.find(
    (platform) => platform.x < stickFarX && stickFarX < platform.x + platform.w
  );

  // 如果棍子擊中完美區(qū)域
  if (
    platformTheStickHits &&
    platformTheStickHits.x + platformTheStickHits.w / 2 - perfectAreaSize / 2 <
      stickFarX &&
    stickFarX <
      platformTheStickHits.x + platformTheStickHits.w / 2 + perfectAreaSize / 2
  )
    return [platformTheStickHits, true];

  return [platformTheStickHits, false];
}

將主畫布區(qū)域居中到屏幕中間

  ctx.translate(
    (window.innerWidth - canvasWidth) / 2 - sceneOffset,
    (window.innerHeight - canvasHeight) / 2
  );

繪制場景

  drawPlatforms();
  drawHero();
  drawSticks();

山丘是伸展的正弦波下的形狀

function drawHill(baseHeight, amplitude, stretch, color) {
  ctx.beginPath();
  ctx.moveTo(0, window.innerHeight);
  ctx.lineTo(0, getHillY(0, baseHeight, amplitude, stretch));
  for (let i = 0; i < window.innerWidth; i++) {
    ctx.lineTo(i, getHillY(i, baseHeight, amplitude, stretch));
  }
  ctx.lineTo(window.innerWidth, window.innerHeight);
  ctx.fillStyle = color;
  ctx.fill();
}

??? 好書推薦

《電腦入門基礎(chǔ)教程（Windows 11+Office 2021）》

內(nèi)容介紹

全書共 15 章，系統(tǒng)并全面地講解了電腦基礎(chǔ)知識、電腦入門操作、Windows 11 系統(tǒng)的操作與應(yīng)用、電腦打字的方法、電腦文件的管理、電腦軟件的安裝與管理、電腦連網(wǎng)和上網(wǎng)操作、網(wǎng)絡(luò)通信與聊天交流、網(wǎng)上日常生活與娛樂、電腦系統(tǒng)維護(hù)與安全防范，以及使用Word 2021、Excel 2021 和PowerPoint 2021 高效辦公等知識技能。

源碼下載

1.CSDN資源下載：https://download.csdn.net/download/qq_44273429/87778335

2.也可通過下方卡片添加好友回復(fù)拉桿子獲取文章來源地址http://www.zghlxwxcb.cn/news/detail-447556.html

到了這里，關(guān)于HTML小游戲25 —— HTML5拉桿子過關(guān)小游戲（附完整源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！