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

这篇具有很好参考价值的文章主要介绍了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小游戏25 —— HTML5拉杆子过关小游戏(附完整源码)

场景展示

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

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)

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

内容介绍

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

源码下载

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


2.也可通过下方卡片添加好友回复拉杆子获取文章来源地址https://www.toymoban.com/news/detail-447556.html

到了这里,关于HTML小游戏25 —— HTML5拉杆子过关小游戏(附完整源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML小游戏12 —— 汽车赛道飙车游戏(附完整源码)

    💂 网站推荐:【神级源码资源网】【摸鱼小游戏】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 💬 免费且实用的计算机相关知识题库:👉进来逛逛 给大家安利一个免费且实用的前端

    2024年02月07日
    浏览(66)
  • HTML小游戏16 —— 消除游戏《魔法石》源码(附完整源码)

    💂 网站推荐:【神级源码资源网】【摸鱼小游戏】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 💬 免费且实用的计算机相关知识题库:👉进来逛逛 给大家安利一个免费且实用的前端

    2024年02月22日
    浏览(68)
  • HTML小游戏8 —— 小霸王游戏机网页版(附完整源码)

    💂 网站推荐:【神级源码资源网】【摸鱼小游戏】 🤟 风趣幽默的前端学习课程:👉28个案例趣学前端 💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 💬 免费且实用的计算机相关知识题库:👉进来逛逛 给大家安利一个免费且实用的前端刷题(面

    2024年02月04日
    浏览(76)
  • 【HTML小游戏】推箱子网页版(附完整源码)

    最近刚刚更新完了HTML,CSS的万字总结 ,有很多人已经学习完了文章,感觉反馈还不错,今天,用HTML,CSS,JS的知识编写了一个童年经典游戏 - 推箱子,供学习参考。 游戏主界面展示: 游戏界面展示: 经典的推箱子是一个非常古老游戏,甚至是80,90年代的回忆,目的是在训

    2024年02月04日
    浏览(51)
  • 【C++】做一个飞机空战小游戏(十一)——游戏过关、通关、结束的设置

     [导读]本系列博文内容链接如下: 【C++】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C++】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动 【C++】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C++】做一个飞

    2024年02月12日
    浏览(45)
  • Android Studio实现连连看小游戏,比比看谁过关最快~

    这是一款基于Android studio开发的连连看小游戏。主要实现的功能有: 难度设置 打乱重排 排行榜 计时器 背景音乐 消除音效 主要应用的技术如下: Fragment碎片 Service服务 Menu菜单 自定义view Java反射 handler消息机制 BroadcastReceiver 多线程 SQLiteOpenHelper SharedPreferences Bitmap ViewPager Me

    2023年04月08日
    浏览(40)
  • 25s数学测试小游戏

    编写一个WPF应用程序,设计一个有时间限制(25s)的数学测验小游戏。要求玩家必须在规定的时间内回答4道随机出现的加,减,乘,除计算题。如果玩家在规定的时间内全部回答正确,弹出对话框显示“恭喜,过关成功。”,否则弹出对话框显示“过关失败,请继续努力!”

    2024年02月16日
    浏览(38)
  • Python-乒乓球小游戏【附完整源码】

    乒乓球小游戏是一个简单而有趣的 2D 页面交互式游戏,玩家可以通过键盘输入来控制球拍上下移动来接球,从而体验乒乓球的乐趣。该游戏有单人和双人两种模式 运行效果: 一:主程序: 二:配置文件 - cfg.py : 三:文件包 - modules : (1) __init__.py (2) sprites.py (3) u

    2024年02月04日
    浏览(43)
  • html实现经典赛车小游戏

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/130580123 html实现经典赛车小游戏源码 html实现经典赛车小游戏源码,1.通过键盘的 上左右 键,控制汽车行走。2.通过canvas进行公路图形绘制。 实现功能: 1.进入游戏界面,通过控制键盘的 上下左右 四个键,让汽

    2024年02月04日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包