草庐IT

HTML小游戏23 —— 仿《黄金矿工》HTML网页游戏（附完整源码）

鲸落✗ 2023-04-15 原文

 

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 仿《黄金矿工》HTML网页游戏

✨ 前言

《黄金矿工》是一款经典的HTML网页游戏，早在2004年就已经问世。这款游戏简单易懂，但却充满了挑战和乐趣，深受玩家的喜爱。游戏中，玩家需要扮演一名矿工，利用钩子和绳索，挖掘地下的黄金、钻石等宝石，并尽可能多地收集金币。随着游戏难度的增加，矿工会面临越来越多的挑战，需要灵活运用技巧和策略来获取更多的财富。现在，《黄金矿工》已经成为经典的HTML游戏之一，深受玩家们的欢迎和喜爱。在本文中，我们将详细介绍这款经典的HTML游戏，并分享一些游戏技巧和心得。


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

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


✨ 项目基本结构


大致目录结构如下：

├── images
│   ├── background_game-sheet0.png
│   ├── background_loading-sheet0.png
│   ├── background_main-sheet0.png
│   ├── ...
│   └── total_score_font.png
├── c2runtime.js
├── 20180516105536.png
├── media
│   ├── bomb.m4a
│   ├── bomb.ogg
│   ├── ...
│   └── winch.ogg
├── data.js
├── icon-16.png
├── icon-32.png
├── icon-114.png
├── icon-128.png
├── icon-256.png
├── jquery-2.1.1.min.js
├── loading-logo.png
├── offlineClient.js
└── index.html 3KB

场景展示

 HTML源码

<div id="fb-root"></div>
<div id="c2canvasdiv">
	<canvas id="c2canvas" width="1920" height="1080">	
	</canvas>
</div>

CSS 源码

html,body

html, body {
	background: #000;
	color: #fff;
	overflow: hidden;
	touch-action: none;
	-ms-touch-action: none;
}

canvas

canvas {
	touch-action-delay: none;
	touch-action: none;
	-ms-touch-action: none;
}

JS 源码

js 代码较多，这里提供部分，完整源码可以在文末下载

在窗口加载时启动Construct 2项目。

jQuery(document).ready(function ()
{			
	// 使用c2canvas创建新的运行时
	cr_createRuntime("c2canvas");
});

页面变为可见/不可见时暂停并继续

function onVisibilityChanged() {
	if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)
		cr_setSuspended(true);
	else
		cr_setSuspended(false);
};

当准备好启动缓存时（即启动后），运行时调用此全局方法。这将注册缓存资源以获得脱机支持的服务工作程序。

window.C2_RegisterSW = function C2_RegisterSW()
{
	if (!navigator.serviceWorker)
		return;		// 不支持软件，忽略呼叫
	
	try {
		navigator.serviceWorker.register("sw.js", { scope: "./" })
		.then(function (reg)
		{
			console.log("Registered service worker on " + reg.scope);
		})
		.catch(OnRegisterSWError);
	}
	catch (e)
	{
		OnRegisterSWError(e);
	}
};

图片资源

一共一百五十多张图片，全都打包放在文末的下载链接里了。

音频资源

一共四十多个媒体文件。 

  ⭐️ 好书推荐

《短视频策划、拍摄、制作与运营从入门到精通》

【内容简介】

1.知识体系完备，核心技巧突出。全面讲解短视频策划、拍摄、后期处理与推广、快速变现等全流程知识点。
2.理论前沿新颖，案例典型实用。紧随新行业发展变化，从调研的上百个热门短视频账号和数十位短视频创作者的成功经验中精选案例。
3.编排循序渐进，新手轻松入门。章节编排从基础到进阶，从软硬件工具到高端方法论指导科学合理，新手也能快速掌握。
4.图文并茂讲解，阅读轻松有趣。图、文、表结合叙述，阅读过程不枯燥。
5.附赠学习资源，享受超值服务。

源码下载

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

2.从海拥资源网下载：https://code.haiyong.site/950/
3.也可通过下方卡片添加好友回复黄金矿工获取

黄金矿mdashxff0cxffclasshtml游戏前端

有关HTML小游戏23 —— 仿《黄金矿工》HTML网页游戏（附完整源码）的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  7. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  8. ruby - 我需要从 facebook 游戏中抓取数据——使用 ruby - 2

    修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息；但是，我遇到了一堵又一堵砖墙。据我所知，主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是，当我尝试抓取该iframe时，它​​是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具，这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据，也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它，但它仍然不存在)。发生这种情况是因为

  9. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  10. RUBY - 网页抓取 - (OpenURI::HTTPError) - 2

    我正在尝试用ruby​​编写一个简单的网络抓取代码。它一直工作到第29个url，然后我收到此错误消息:C:/Ruby193/lib/ruby/1.9.1/open-uri.rb:346:in`open_http':500InternalServerError(OpenURI::HTTPError)fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:775:in`buffer_open'fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:203:in`blockinopen_loop'fromC:/Ruby193/lib/r

随机推荐