[数字华容道] Html+css+js 实现小游戏

效果图

代码预览

在线预览地址

代码示例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>数字华容道</title>

		<style>

			h1 {

				text-align: center;

			}

			.box {

				border: 1px solid #cfcfcf;

				margin: 0 auto;

				width: 322px;

				padding: 20px;

				border-radius: 20px;

			}

			.fun {

				display: flex;

				justify-content: space-between;

			}

			td {

				width: 100px;

				height: 100px;

				text-align: center;

				background-color: #f1c385;

				user-select: none;

			}

			.current {

				background-color: #fff !important;

				transition: all .3s;

			}

			#error {

				color: red;

			}

		</style>

	</head>

	<body>

		<div class="box">

			<h1>数字华容道</h1>

			<p><strong>规则：</strong>移动方块依次出现1、2、3、4、5、6、7、8就可通关！不能对角线移动，不能跳格子移动。只能相邻上下或左右</p>

			<hr />

			<div class="fun">

				<div><span>计次：</span><span id="num">0</span></div>

				<div><span>提示：</span><span id="error"></span></div>

				<div><span>功能：</span><button id="reset">重开</button></div>

			</div>

			<hr />

			<table border="1">

				<tr>

					<td>1</td>

					<td>2</td>

					<td>3</td>

				</tr>

				<tr>

					<td>4</td>

					<td>5</td>

					<td>6</td>

				</tr>

				<tr>

					<td>7</td>

					<td>8</td>

					<td class="current"></td>

				</tr>

			</table>

		</div>

		<script>

			const step = document.getElementById('num');

			const error = document.getElementById('error');

			const seed = [1, 2, 3, 4, 5, 6, 7, 8];

			// 随机数组

			const shuffle = (array) => {

				for (let i = array.length - 1; i > 0; i--) {

					const j = Math.floor(Math.random() * (i + 1));

					[array[i], array[j]] = [array[j], array[i]];

				}

				return array;

			}

			// 检查结果

			const check = () => {

				let flag = true;

				const tds = document.querySelectorAll('td');

				for (let i = 0; i < tds.length - 1; i++) {

					let td = tds[i];

					if (i + 1 !== parseInt(td.innerText)) {

						flag = false;

					}

				}

				if (flag) {

					error.innerText = '恭喜你通关啦!';

				}

			}

			// 更新 td 数据

			const init = () => {

				const data = shuffle(seed);

				const tds = document.querySelectorAll('td');

				for (let i = 0; i < tds.length - 1; i++) {

					let td = tds[i];

					td.innerText = data[i];

					td.className = ''

				}

				error.innerText = '';

				step.innerText = 0;

				tds[tds.length - 1].className = 'current'

				tds[tds.length - 1].innerText = ''

			}

			init()

			document.getElementById('reset').addEventListener('click',()=>{

				init();

			});

			// 监听点击事件，移动方块处理

			document.querySelector('table').addEventListener('click', (event) => {

				const target = event.target;

				const current = document.querySelector('.current');

				const {

					x: cx,

					y: cy

				} = current.getBoundingClientRect();

				const {

					x: tx,

					y: ty

				} = target.getBoundingClientRect();

				const w = Math.abs(cx - tx);

				const h = Math.abs(cy - ty);

				if ((cx === tx || ty === cy) && (w < 200 && h < 200)) {

					if (target.nodeName === 'TD' && target !== current) {

						const innerText = target.innerText;

						target.classList = 'current';

						target.innerText = '';

						// 当前空白块

						current.innerText = innerText

						current.classList.remove('current');

						// 更新步骤

						let num = step.innerText || 0;

						num++;

						step.innerText = num;

						error.innerText = '';

						check();

					}

				} else {

					error.innerText = '不能这样哦';

				}

			})

		</script>

	</body>

</html>

[数字华容道] Html+css+js 实现小游戏的更多相关文章

  1. 使用html+css+js实现弹球游戏

    使用html+css+js实现弹球游戏 效果图: 代码如下,复制即可使用: <!doctype html> <head> <style type="text/c ...

  2. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

  3. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  4. 例子：js超级玛丽小游戏

    韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...

  5. three.js 微信小游戏

    最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...

  6. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  7. JS扫雷小游戏

    HTML代码 <title> 扫雷 </title> <!-- ondragstart:防拖拽生成新页面 oncontextmenu:屏蔽右键菜单--> <b ...

  8. 用原生js写小游戏--Flappy Bird

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【JS入门小游戏】01-骰子游戏

    01-骰子游戏 游戏出自Udemy的JS课程中提到的一个游戏,课程主要是对JS部分进行详细的从0开始的讲解,本篇文章是对整个游戏的分析,包括HTMK,CSS和JS,也主要对JS进行刨析. 游戏链接:h ...

  10. 使用JS制作小游戏贪吃蛇

    先看效果图: 过程如下: 1.首先创建一张画布地图<div class="map"> </div>: 2.创建食物的自调用函数 (function (){ ...

随机推荐

  1. OpenHarmony创新赛 | 赛事宣讲会日期重磅官宣！为你带来超详尽的赛事攻略

      最近接到很多小伙伴私信提问,比如如何报名开放原子开源大赛OpenAtom OpenHarmony(简称:"OpenHarmony")创新赛?有哪些赛题可以报名参赛?现在,赛事宣 ...

  2. 共筑使能千行百业的数字底座 | HDC 2022松湖对话顺利召开

     11月5日,华为开发者大会2022松湖对话在东莞松山湖凯悦酒店召开,开放原子开源基金会秘书长冯冠霖.华为终端BG软件部总裁龚体.深圳国家金融科技测评中心董事长钟剑.鸿湖万联(江苏)科技发展有限公司董 ...

  3. 【直播回顾】OpenHarmony知识赋能六期第一课—OpenHarmony智能家居项目介绍

    6月16日晚上19点,知识赋能第六期第一节课 <OpenHarmony智能家居项目介绍> ,在OpenHarmony开发者成长计划社群内成功举行. 本次直播是"OpenHarmo ...

  4. HarmonyOS多音频播放并发政策及音频管理解析

      音频打断策略 多音频并发,即多个音频流同时播放.此场景下,如果系统不加管控,会造成多个音频流混音播放,容易让用户感到嘈杂,造成不好的用户体验.为了解决这个问题,系统预设了音频打断策略,对多音频播放 ...

  5. DevEco Device Tool 3.0 Release带来5大能力升级，让智能设备开发更高效

    原文:https://mp.weixin.qq.com/s/QYlHUU05BDlzVxbfZbiKOg,点击链接查看更多技术内容. DevEco Device Tool是面向智能设备开发者提供的一站 ...

  6. 鸿蒙HarmonyOS实战-ArkUI组件（Navigation）

    一.Navigation Navigation组件通常作为页面的根容器,支持单页面.分栏和自适应三种显示模式.开发者可以使用Navigation组件提供的属性来设置页面的标题栏.工具栏.导航栏等. 在 ...

  7. mysql 必知必会整理—sql 简单语句[二]

    前言 简单整理一下sql 排序与过滤. 正文 在这里需要创建一下一个数据库实例. 为了方便直接用docker 创建一下啊,方便简洁. https://hub.docker.com/_/mysql 按照 ...

  8. 最简编译CockroachDB 21.2

    编译CockroachDB比较麻烦,尤其是从git下载代码编译还需要关联项目的下载,本文整理从官网下载代码的编译过程,非常简单,几乎没有异常,供大家参考. 编译CockroachDB 21.2 1.安 ...

  9. SELECT...FROM 表 a,( SELECT...FROM...WHERE...) tc...的一些注意以及多字段之间的模糊查询

    将sql查询结果作为一个表来查询的时候的一些注意事项 因为工作,发现了这种sql的写法,但是有的时候感觉并不是自己想要的结果,自己试着玩了属于是 简单来说,这个查询并不是拼接结果的,而是将结果按照一个 ...

  10. 云钉一体：EventBridge 联合钉钉连接器打通云钉生态

    ​简介:今天,EventBridge 联合钉钉连接器,打通了钉钉生态和阿里云生态,钉钉的生态伙伴可以通过通道的能力驱动阿里云上海量的计算力. 作者:尘央 背景 "以事件集成阿里云,从 Eve ...