HTML小游戏7 —— 《罗斯魔影》魔法消除游戏（附完整源码）-CFANZ编程社区

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

本节教程我会带大家使用 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源码

<div id="viewporter">
<header id="header" class="EaselJS">
</header>
<canvas id="canvas" width="640" height="960" style="position: absolute; z-index: 1;"></canvas>
<div id="portraitLock" class="portraitLock">
<img class="rotatePhoneIcon" src="assets/lock.jpg" />
</div>
</div>

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@ ;
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<xmlDomVersions.length;i++){
		try{
			xmlDoc = new ActiveXObject(xmlDomVersions[i]);
			xmlDoc.async = false;
			xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
			break;
		}catch(e){
		}
	}
}

解析xml 的案例代码，可以不用删除

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