HTML小游戏17 —— 弗莱迪的物理实验游戏（附完整源码）

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

给大家安利一个免费且实用的前端刷题（面经大全）网站，点击跳转到网站。

本节教程我会带大家使用 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/811/
源码也可在文末进行获取

✨ 项目基本结构

大致目录结构如下（共211个子文件）：

├── images
│   ├── androidbtn-sheet0.png
│   ...
│   └── yellowball-sheet0.png
├── media
│   ├── alarmclock_2.ogg
│   ...
│   └── splash.ogg
├── c2runtime.js
├── c2webappstart.js
├── data.js
├── index.html
├── jquery-2.1.1.min.js
├── liquidcrystal_stylesheet.css
├── liquidcrystal-normal-webfont.woff
└── loading-logo.png

场景展示

 HTML源码

您的浏览器似乎不支持 HTML5。 尝试将您的浏览器升级到最新版本。 什么是浏览器？


微软 Internet Explorer

火狐浏览器

谷歌浏览器

苹果浏览器

CSS 源码

html,body

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

canvas

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

liquidcrystal_stylesheet.css

@font-face {
    font-family: 'liquid_crystalregular';
    src: url('liquidcrystal-normal-webfont.eot');
    src: url('liquidcrystal-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('liquidcrystal-normal-webfont.woff') format('woff'),
         url('liquidcrystal-normal-webfont.ttf') format('truetype'),
         url('liquidcrystal-normal-webfont.svg#liquid_crystalregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

JS 源码

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

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

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

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

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

document.addEventListener("visibilitychange", onVisibilityChanged, false);
document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);
document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
document.addEventListener("msvisibilitychange", onVisibilityChanged, false);

图片资源

 

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

音频资源

 

源码下载

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

2.从海拥资源网下载：https://code.haiyong.site/811/
3.也可通过下方卡片添加好友回复弗莱迪的物理实验获取