HTML小游戏16 —— 消除游戏《魔法石》源码（附完整源码）

news2025/1/13 10:09:31

💂 网站推荐:【神级源码资源网】【摸鱼小游戏】
🤟 前端学习课程：👉【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/798/
源码也可在文末进行获取

✨ 项目基本结构

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

├── lib
│   ├── jquery-1.11.1.min.js
│   └── underscore.min.js
├── js
│   ├── developer.js
│   └── game.js
├── img
│   └── logo_A10_202x50.png
├── res
│   ├── audio
│   │   ├── audiosprite.ogg
│   │   ├── music_ingame.ogg
│   │   └── music_menu.ogg
│   ├── bg
│   │   ├── black_bg.png
│   │   ├── gp_bg.png
│   │   └── mm_bg.png
│   ├── css
│   │   ├── pattern.png
│   │   └── styles.css
│   ├── dragonBones
│   ├── fonts
│   ├── frameByFrame
│   ├── img
│   ├── levels
│   ├── loadingScreen
│   ├── ui
│   ├── achievements.json
│   └── localization.json
├── game.min.js
├── yx8.js
└── index.html

场景展示

HTML源码

<div id="gameContainer"></div>
<a href="https://code.haiyong.site/moyu" target="_blank" class="btn btn_left">更多游戏</a>
<a href="https://code.haiyong.site/ziyuan/game/" target="_blank" class="btn btn_right" id="fullscr">游戏源码</a>

CSS 源码

body

body {
    margin: 0;
    padding: 0;
    background-image: url("pattern.png");
    background-repeat: repeat;
}

rotate-device-overlay

#rotate-device-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9998;
    top: 0;
    left: 0;
    background-size: auto
}

rotate-device-image

.rotate-device-image {
    background: #26252e url('rotation_screen.png') no-repeat center center
}

a:link { color: #d07500;}
a:visited { color:#d07500;}
a:hover { color:#ffffff;}
a:active { color:#f0f0f0;}

JS 源码

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

初始化游戏 HTML5 API

GameAPI.loadAPI(function(apiInstance) {
	// API已准备好使用
	API_INSTANCE = apiInstance;
	if (window.console && window.console.log) {
		console.log('GameAPI version ' + apiInstance.version + ' loaded!');
	}
	initgame();
}, SpilData);

yx8.js

{
	"configar": {
		"branding": {
			"main": {
				"label": "main",
				"image": "img\/logo_A10_202x50.png",
				"url": "http:\/\/www.haiyong.site\/moyu",
				"style": "",
				"width": "202",
				"height": "50",
				"mime": "image\/png",
				"type": "png",
				"handler": "newTab",
				"blacklisted": false
			},
			"more_games": {
				"label": "more_games",
				"image": "#",
				"url": "http:\/\/www.haiyong.site\/moyu",
				"style": "",
				"width": "0",
				"height": "0",
				"mime": "image\/png",
				"type": "png",
				"handler": "newTab",
				"blacklisted": false
			},
			"logo": {
				"label": "logo",
				"image": "img\/logo_A10_202x50.png",
				"url": "http:\/\/www.haiyong.site\/moyu",
				"style": "",
				"width": "202",
				"height": "50",
				"mime": "image\/png",
				"type": "png",
				"handler": "newTab",
				"blacklisted": true
			},
			"splash_screen": {
				"label": "splash_screen",
				"image": "place_holder_string",
				"url": "http:\/\/www.haiyong.site\/moyu",
				"style": "",
				"width": "0",
				"height": "0",
				"mime": "image\/png",
				"type": "png",
				"handler": "newTab",
				"blacklisted": true
			},
			"google_play": {
				"label": "google_play",
				"image": "img\/google_play.png",
				"url": "https:\/\/play.google.com\/store\/apps\/details?id=com.spilgames.shopaholicworld&hl=nl_NL",
				"style": "",
				"width": "270",
				"height": "80",
				"mime": "image\/png",
				"type": "png",
				"handler": "newTab",
				"blacklisted": false
			},
			"appstore": {
				"label": "appstore",
				"image": "img\/appstore.png",
				"url": "https:\/\/itunes.apple.com\/app\/shopaholic-world\/id514563522?mt=8",
				"style": "",
				"width": "240",
				"height": "80",
				"mime": "image\/png",
				"type": "png",
				"handler": "newTab",
				"blacklisted": false
			}
		}
	}
}

侦听来自父级的方向更改事件，并在发送后模拟本机事件

utils.addEventListener('message', function (message) {
	if (
		message &&
			message.data.mssg &&
			message.data.mssg === 'orientationchange'
	) {
		var orientationEvent = d.createEvent('Event');

		orientationEvent.initEvent('orientationchange', true, true);
		orientationEvent.orientation = message.data.orientation;

		w.dispatchEvent(orientationEvent);

		// 由于最小的ui错误而向后滚动
		w.scrollTo(0, 0);
	}
}, w);