js canvas迷宫

用的是并查集，还有很多小问题(不影响使用，成了之后就不想再动它了),没有查询树的深度，函数也有问题(我前面还写了两个其他方法写的迷宫，都有问题，不能用。但是有的函数还是可以用的，所以有的函数看起来好怪！)。

演示地址

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>迷宫</title><style>#cav {/* background-color: #333; */position: relative;left: 50%;transform: translateX(-50%);}h1 {text-align: center;}.box {width: 1200px;margin: 100px auto;position: relative;overflow: hidden;}.nandu {position: relative;left: 70%;top: -35px;width: 200px;}.btn {width: 100px;text-align: center;line-height: 100%;padding: 0.3em;font: 16px Arial, sans-serif bold;font-style: normal;text-decoration: none;vertical-align: text-bottom;zoom: 1;outline: none;font-size-adjust: none;font-stretch: normal;border-radius: 50px;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);color: #fefee9;border: 0.2px solid #2299ff;background-repeat: repeat;background-size: auto;background-origin: padding-box;background-clip: padding-box;background-color: #3399ff;background: linear-gradient(to bottom, #eeeff9 0%, #3399ff 100%);cursor: pointer;margin-left: 20px;margin-top: 20px;}</style>
</head><body><div class="box"><h1>迷宫好难啊</h1><div class="nandu"><select id="sele"><option value="easy">简单</option><option value="min" selected>中级</option><option value="minad" >复杂</option><option value="maxx">超难</option></select><button class="btn" onclick="finl()">我要抄答案</button></div><canvas width="1000" height="700" id="cav"> 不支持</canvas></div><script>let xianarr = [];let canvas = document.getElementById("cav");let ctx = canvas.getContext("2d");let xids = 0let sele = document.getElementById("sele");sele.addEventListener("change", (e) => {let eta = e.target;let eval = eta.value;if (eval == "easy") {xids = 0xianarr = mg_cav(15, 15)} else if (eval == "min") {xids = 0xianarr = mg_cav(20, 30)} else if (eval == "minad") {xids = 0xianarr = mg_cav(40, 30)} else if (eval == "maxx") {xids = 0xianarr = mg_cav(50, 40)}})xianarr = mg_cav(20, 30)function finl() {console.log(5888)chlsz(xianarr[0], xianarr[1], xianarr[2])}function init_arr(x, y) {let iind = 0let objj = {lianY: [],bcj: [],x: x,y: y}for (let i = 0; i < y; i++) {let iii = iobjj.lianY[iii] = [];for (let m = 0; m < x; m++) {iind = iii + m * yobjj.lianY[i][m] = [1, 1];objj.bcj[iind] = iind// bcj_rot[iind] = -1}}console.log(objj.bcj)console.log(objj.lianY)console.log(objj)return objj}function linarr(x, y) {let int = init_arr(x, y);let b_ar = int.bcj;let zs = b_ar.length - 1;let iight = 0;while (find_rt(0, b_ar) != find_rt(zs, b_ar)) {// 随机选边next_fio(x, y, int.lianY, b_ar, zs)iight += 1;if (iight > 5000) {console.log("cuo")console.log(int.lianY)console.log(b_ar)return int.lianY}}console.log(b_ar)// return int.lianYreturn {lianY: int.lianY,bcj: b_ar}}function next_fio(x, y, lianY, bar, zs) {let rnd = parseInt(Math.random() * zs)let arr = next_arr(rnd, x, y)let aelen = arr.length;let newar = [];if (aelen > 0) {for (let i = 0; i < aelen; i++) {let ymy = line_arr(rnd, arr[i], x);if (ymy) {if (lianY[ymy[0]][ymy[1]][ymy[2]]) {newar.push(arr[i])}}}if (newar.length > 0) {let ll_pr = newar[parseInt(Math.random() * (newar.length))]if (find_rt(ll_pr, bar) !== find_rt(rnd, bar)) {let ymu = line_arr(rnd, ll_pr, x);if (ymu) {lianY[ymu[0]][ymu[1]][ymu[2]] = 0;bar[find_rt(ll_pr, bar)] = bar[find_rt(rnd, bar)]}}}}}function next_arr(rnd, x, y) {let arr = []let row = parseInt(rnd / x);let lie = parseInt(rnd % x);if (row > 0) {arr.push(rnd - x)}if (lie > 0) {arr.push(rnd - 1)}if (row < (y - 1)) {arr.push(rnd + x)}if (lie < (x - 1)) {arr.push(rnd + 1)}return arr}function find_rt(num, arr) {if (arr[num] !== num) {return find_rt(arr[num], arr)} else {return num}}function line_arr(k, l, x) {let chaz = k - l;let cz_zh = Math.abs(chaz)let row_k = parseInt(k / x);let lie_k = parseInt(k % x);let row_l = parseInt(l / x);let lie_l = parseInt(l % x);if (chaz > 0) {if (cz_zh == 1) {return [row_l, lie_l, 0]// return  lianY[row_l][lie_l][0]// lianY[row_l][lie_l] = [0, 1]} else {return [row_l, lie_l, 1]// return  lianY[row_l][lie_l][1]// lianY[row_l][lie_l] = [1, 0]}} else {if (cz_zh == 1) {return [row_k, lie_k, 0]// return  lianY[row_k][lie_k][0]// lianY[row_k][lie_k] = [0, 1]} else {return [row_k, lie_k, 1]// return  lianY[row_k][lie_k][1]// lianY[row_k][lie_k] = [1, 0]}}}function mg_cav(x, y) {canvas.width = 20 + x * 21canvas.height = 20 + y * 21ctx.clearRect(0, 0, 20 + x * 21, 20 + y * 21);let dfe = linarr(x, y)console.log(dfe)lin_cav(dfe.lianY, x, y)zol(x, y, dfe.lianY)run_m(0, x, 21)// fin_lx(x, y, dfe.lianY)return [x, y, dfe.lianY]// fin_lx(dfe.bcj ,x )}function lin_cav(ar, x, y) {ctx.strokeStyle = 'rgb(255,51,0)'ctx.lineWidth = 1let kuan = 20;let kjk = 21// 以10，10为零点开始画ctx.beginPath();ctx.moveTo(10 + kjk * x, 10);ctx.lineTo(10, 10);ctx.lineTo(10, 10 + kjk * y);// ctx.lineTo(10 + kjk * x, 10 + kjk * y);// ctx.lineTo(10 + kjk * x, 10);// ctx.lineTo(800, 10);// console.log(kjk * y)ctx.stroke();let alastar = ar.length - 1 ;let arlalen = ar[alastar].length - 1 ;console.log(alastar)console.log(arlalen)console.log(ar[alastar])ar[alastar][arlalen] = [0,1]ar.forEach((a, b) => {a.forEach((m, n) => {let lly = 10 + kjk * b;let llx = 10 + kjk * n;let lrr = m[0];let lbb = m[1];// ctx.strokeStyle = '#fff'ctx.beginPath();if (lrr) {ctx.moveTo(llx + kjk, lly);ctx.lineTo(llx + kjk, lly + kjk);}if (lbb) {ctx.moveTo(llx, lly + kjk);ctx.lineTo(llx + kjk, lly + kjk);}ctx.stroke();})})}function run_m(num, x, kjk, jg = 6, col = "blue") {let kuan = kjk - jg;let row_k = parseInt(num / x);let lie_k = parseInt(num % x);let lly = 10 + kjk * row_k + jg / 2;let llx = 10 + kjk * lie_k + jg / 2;ctx.fillStyle = col;ctx.fillRect(llx, lly, kuan, kuan);}function cle_run_m(num, x, kjk, jg = 4) {let kuan = kjk - jg;let row_k = parseInt(num / x);let lie_k = parseInt(num % x);let lly = 10 + kjk * row_k + jg / 2;let llx = 10 + kjk * lie_k + jg / 2;// ctx.fillStyle = 'blue';ctx.clearRect(llx, lly, kuan, kuan);}function zol(x, y, art) {document.onkeydown = function (event) {var e = event || window.event || arguments.callee.caller.arguments[0];e.preventDefault()if (e && e.keyCode == 37) { // 左 xidslet xzs = xids - 1;pdhx(xzs, art, x, y)}if (e && e.keyCode == 38) { // 上let xzs = xids - x;pdhx(xzs, art, x, y)}if (e && e.keyCode == 39) { // 右let xzs = xids + 1;pdhx(xzs, art, x, y)}if (e && e.keyCode == 40) { // 下let xzs = xids + x;pdhx(xzs, art, x, y)}};}function pdhx(xzs, art, x, y) {let zzs = x * yif (xzs >= 0 && xzs < zzs) {let xmyx = line_arr(xids, xzs, x)if (!art[xmyx[0]][xmyx[1]][xmyx[2]]) {cle_run_m(xids, x, 21)run_m(xzs, x, 21)xids = xzs}}}function fin_lx(x, y, lanar) {let zzdw = x * y;let zzsarr = [];for (let i = 0; i < zzdw; i++) {zzsarr.push(i)}let reququ = [];let cfququ = [];let retuobj = {}cfququ.push(zzsarr[0])reququ.push(zzsarr[0])retuobj[0] = "none";while (cfququ.length !== 0) {let ppin = cfququ.pop();let arr = next_arr(ppin, x, y); //line_arr(k, l, x)let newarr = [];if (arr.length > 0) {arr.forEach((a, b) => {let xxd = line_arr(ppin, a, x)if (!lanar[xxd[0]][xxd[1]][xxd[2]]) {newarr.push(a)}})let llln = newarr.length;if (llln > 0) {for (let kk = 0; kk < llln; kk++) {if (!reququ.includes(newarr[kk])) {cfququ.push(newarr[kk]);reququ.push(newarr[kk]);retuobj[newarr[kk]] = ppin}}}}}console.log(retuobj)return retuobj}function chlsz(x, y, lanar) {let oobj = fin_lx(x, y, lanar)let zzs = x * y - 1;let bbh = zzs;let xsz = [];while (oobj[bbh] !== "none") {bbh = oobj[bbh]run_m(bbh, x, 21, 8, "#DA70D6")xsz.push(bbh)}console.log(xsz)return (xsz)}</script>
</body></html>

js canvas迷宫相关推荐

快速实现一个简单的canvas迷宫游戏
前言 (最近设计模式看的有点头大,一直面对纯js实在是有些枯燥-_-.所以写一点有趣的东西调剂一下) 现在canvas已经不算新鲜了,不过由于日常业务中并不常用,所以实践并不多,今天分享一下,如何实现 ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
PHP绘制99的棋盘,JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow ...
html5canvas下绘制gif,JS+canvas操作gif动图
这次给大家带来JS+canvas操作gif动图,JS+canvas操作gif动图的注意事项有哪些,下面就是实战案例,一起来看一下. HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现 ...
java心电图_使用原生js+canvas实现模拟心电图
从2016年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能
1,html+js+canvas实现画板涂画功能效果如下: <!DOCTYPE HTML> <html> <head><meta charset=" ...
JS——canvas基础及其应用
JS--canvas及其应用一.canvas基础 1.canvas--画布: canvas本身没有外观,只是一个画板 IE9以前不支持 canvas不要使用css来定义大小,要直接使用自身的属性wi ...

js canvas迷宫

js canvas迷宫

js canvas迷宫相关推荐

最新文章

热门文章