HTML小游戏25 —— HTML5拉杆子过关小游戏(附完整源码)

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个HTML5拉杆子过关小游戏

✨ 前言


🕹️ 本文已收录于🎖️100个HTML小游戏专栏:100个H5游戏专栏https://blog.csdn.net/qq_53544522/category_12064846.html
🎮 目前已有100+小游戏,源码在持续更新中,前100位订阅限时优惠,先到先得。
🐬 订阅专栏后可阅读100个HTML小游戏文章;还可私聊进前端/游戏制作学习交流群;领取一百个小游戏源码。

在线演示地址:https://code.haiyong.site/964/
源码也可在文末进行获取


✨ 项目基本结构


大致目录结构如下(共3个子文件):

├── 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">按住鼠标伸出一根棍子</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; // 等待时
const paddingX = 100; // 从原始画布尺寸开始,英雄的等待位置
const perfectAreaSize = 10;

重置游戏变量和布局,但不启动游戏(游戏在按键时开始)

function resetGame() {
  // 重置游戏进度
  phase = "waiting";
  lastTimestamp = undefined;
  sceneOffset = 0;
  score = 0;

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

  // 第一个平台总是相同的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();
}

最远树右边缘的X坐标

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

如果按下空格键,则重新启动游戏

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
  );

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

  return [platformTheStickHits, false];
}

将主画布区域居中到屏幕中间

  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();
}

 ⭐️ 好书推荐

电脑入门基础教程(Windows 11+Office 2021)

内容介绍

全书共 15 章,系统并全面地讲解了电脑基础知识、电脑入门操作、Windows 11 系统的操作与应用、电脑打字的方法、电脑文件的管理、电脑软件的安装与管理、电脑连网和上网操作、网络通信与聊天交流、网上日常生活与娱乐、电脑系统维护与安全防范,以及使用Word 2021、Excel 2021 和PowerPoint 2021 高效办公等知识技能。

源码下载

1.CSDN资源下载:https://download.csdn.net/download/qq_44273429/87778335


2.也可通过下方卡片添加好友回复拉杆子获取

  • 48
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 39
    评论
### 回答1: HTML5杆子过关小游戏的原理是通过使用HTML5、CSS3和JavaScript等技术,实现了一个基于浏览器的小游戏。游戏中玩家需要控制一个杆子从一个位置向另一个位置移动,以达到过关的条件。游戏的难度随着关卡的增加而不断增加,玩家需要精确控制杆子的移动位置、速度和力度,以克服不同的难题。 该游戏采用了HTML5 Canvas技术,使得整个游戏画面可以通过JavaScript实时绘制在屏幕上。玩家通过鼠标或触屏设备控制杆的位置和移动方向,游戏中所用到的物理引擎可以模拟物体受力的运动状态;同时游戏中还使用了音效、计分等功能,以增加游戏的可玩性和趣味性。 总之, HTML5杆子过关小游戏是通过对HTML5、CSS3和JavaScript等技术的灵活应用,实现了一个基于浏览器的有趣小游戏。 ### 回答2: HTML5杆子过关小游戏原理就是使用HTML5语言编写出一个杆子过关小游戏,玩家需要通过杆子来将小球顺利引导到终点。游戏是由HTML5的canvas标签渲染实现的,玩家通过鼠标点击、拖拽来杆子,控制小球的方向和移动速度,游戏中需要注意小球的重力和摩擦力,以及障碍物的位置和形状,通过观察和调整杆子的角度、力度等参数,玩家可以将小球顺利引导到终点,达到过关的目标。HTML5杆子过关小游戏采用了简单易懂的操作方式和有趣的游戏方式,具有良好的可玩性和趣味性,是一款很受欢迎的小游戏。 ### 回答3: HTML5杆子过关小游戏原理是利用HTML5技术实现游戏的基本逻辑和功能。游戏主要包含三个部分:界面设计、游戏逻辑和数据交互。界面设计通过HTML5的canvas技术绘制游戏场景和游戏元素,如杆、球等。游戏逻辑核心是通过javascript代码处理游戏过程中的事件和变化,如杆的旋转角度、球的运动轨迹、分数的累计等。数据交互则是通过前端和后端的交互实现排行榜等功能。游戏的实现需要注意前后端之间的数据同步,保证游戏的公平性和游戏体验的良好性。HTML5杆子过关小游戏的原理相较于Flash等其他技术实现的游戏,更为灵活、方便和易于开发和传播。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 39
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸落✗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值