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

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

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

✨ 项目基本结构

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

├── lib
│   ├── easeljs-NEXT.min.js 79KB
│   ├── preloadjs-NEXT.min.js 30KB
│   ├── tweenjs-NEXT.min.js 17KB
│   ├── viewporter.js 6KB
│   └── soundjs-NEXT.min.js 33KB
├── jquery.min.js 94KB
├── app.css 956B
├── assets
│   ├── preloader
│   │   ├── preloader_back.jpg 29KB
│   │   ├── play.jpg 8KB
│   │   ...
│   │   └── zibbo_logo.png 105KB
│   └── art_font.json
├── payPanel.js 13KB
├── cave.js 278KB
└── index.html 3KB

场景展示

 HTML源码

CSS 源码

html,body

BODY, HTML {-webkit-touch-callout: none;                -webkit-text-size-adjust: none;             -webkit-user-select: none;                  -webkit-tap-highlight-color: transparent;margin: 			0;padding: 			0;font-family: 		Arial, Verdana, sans-serif;font-size: 			12px;font-weight:		normal;color: 				#000;background-color:	#000000;/*overflow:			hidden;*/
}

portraitLock

.portraitLock {position: absolute;display: none;width: 100%;height: 100%;background-color:	#000000;
}	

rotatePhoneIcon

.rotatePhoneIcon {width: 60%;margin: 30px auto;display: block;
}

JS 源码

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

用户登录信息

var userInfo ;   
var otherInfo = {score:0 , otherisover:false};
var key = "sdh11fgf2!2" ;
var key1= "dsg45d5d56e8@&*!s" ;
var gameId = "131" ;
var itemId = "006060751001" ;   //其余的在  index.html div中
var cpServiceId="602516026835" ;
var userload;
var fhstatus;
var ein;
var pstatus = true;

判断浏览器的类型

//支持IE浏览器
if(!window.DOMParser && window.ActiveXObject){   //window.DOMParser 判断是否是非ie浏览器var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];for(var i=0;i

function xml2Obj( result ){var xml = loadXML(result ) ;var list = xml.firstChild.childNodes ;listLen = list.length ;var key ;var value ;for( var z = 0 ; z < listLen ; z++ ){key = xml.firstChild.childNodes[z].tagName ;value = xml.firstChild.childNodes[z].textContent ;userInfo[key] = value ;}
}