html制作迷宫_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

html制作迷宫_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

大神求帮助如何用HTML制作出如图的迷宫

回复讨论(解决方案)

方法很多，canvas、svg画图，也可以用表格、div去掉一部分的边框（不过这种CSS要写的很多）。

我走出来了

具体用表格和div怎么做，用css怎么去掉边框

你是要用于展示还是想在网页上做一个迷宫出来，让人能走？
前者的话，把图片贴上去就行了。
后者的话，用canvas+JS做。

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title> 页面名称 </title><style type="text/css">#map {	width: 124px;	height: 124px;}#map div {	width: 30px;	height: 30px;	float: left;	border: 1px solid transparent;	margin: 0px -1px -1px 0px;}#map .l {border-left: 1px solid #000;}#map .r {border-right: 1px solid #000;}#map .t {border-top: 1px solid #000;}#map .b {border-bottom: 1px solid #000;}</style></head><body><div id="map">	<div class="l t"></div>	<div class="l"></div>	<div class="t"></div>	<div class="t r"></div>	<div class="l"></div>	<div class="t"></div>	<div class="t l"></div>	<div class="r"></div>	<div class="l"></div>	<div class="t"></div>	<div class=""></div>	<div class="l t r"></div>	<div class="l t b"></div>	<div class="b"></div>	<div class="t b"></div>	<div class="r b"></div></div>	</body></html>

登录后复制

Jsoup
Document doc1 = Jsoup.connect("http://www.paperyy.com/").get();

以下是一个 perfect 型迷宫的生成代码, 在边缘任取两处分别作为入口和出口即可

<!DOCTYPE html><html>    <head>        <style>            #myCanvas{                border:1px solid #d3d3d3;            }        </style>    </head>    <body>        <canvas id="myCanvas" width=800 height=600 >            Your browser does not support the HTML5 canvas tag.        </canvas>    </body></html><script>    var canv = document.getElementById("myCanvas");    var cell_width = cell_height = 10;    var edge_blank = cell_width;    var clear_width = cell_width * 2 - 2;    var clear_height = cell_height * 2 - 2;    // 最大逻辑坐标, 坐标起始于 0, 终于 xe, ye    var xe = Math.floor(canv.width / cell_width - 2);    var ye = Math.floor(canv.height / cell_height - 2);    var ctx = canv.getContext("2d");    ctx.beginPath();    var x_end = edge_blank + (xe - 1) * cell_width;    y_end = edge_blank + (ye - 1) * cell_height;    for (var y = edge_blank + cell_height; y <= y_end; y += 2 * cell_height) {        ctx.moveTo(edge_blank + cell_width, y);        ctx.lineTo(x_end, y);    }    for (var x = edge_blank + cell_width; x <= x_end; x += 2 * cell_width) {        ctx.moveTo(x, edge_blank + cell_height);        ctx.lineTo(x, y_end);    }    ctx.strokeStyle = "black";    ctx.stroke();    var maze = Array(xe + 1);    for (var i = 0; i <= xe; i++) {        maze[i] = Array(ye + 1);        for (var j = 0; j <= ye; j++) {            maze[i][j] = {road: false, gen: false};        }    }    var dirs = [], cells = [];    var x = y = 2;    var item_last, dir, visit, randS, randE, dc;    while (true) {        if (maze[x][y].gen) {            if (dirs[dirs.length - 1] == 0xf) {                dirs.pop();                cells.pop();                if (cells.length == 0) {                    // alert('Maze generation completed');                    break;                }                item_last = cells[cells.length - 1];                x = item_last.x;                y = item_last.y;            } else {                item_last = cells[cells.length - 1];                x = item_last.x;                y = item_last.y;                dir = dirs[dirs.length - 1];                visit = 1;                randS = Math.round(Math.random() * 3);                randE = randS | 4;                for (var i = randS; i < randE; i++) {                    if (visit != 0) {                        dc = 1 << (i & 3);                        visit = dir & dc;                        dir |= dc;                        if (visit == 0) {                            switch (dc) {                                case 1:                                    y -= 2;                                    break;                                case 2:                                    x -= 2;                                    break;                                case 4:                                    x += 2;                                    break;                                case 8:                                    y += 2;                                    break;                            }                            dirs[dirs.length - 1] = dir; // dirs.pop(); dirs.push(dir);                        }                    }                }            }        } else { // 可通行点            if (!(0 < x && x < xe && 0 < y && y < ye)) {                item_last = cells[cells.length - 1];                x = item_last.x;                y = item_last.y;            } else {                cells.push({x: x, y: y});                maze[x][y].gen = true;                for (var i = 0; i < 2; i++) {                    maze[x][y].road = true;                    ctx.clearRect(edge_blank + (x - 1) * cell_width + 1, edge_blank + (y - 1) * cell_height + 1, clear_width, clear_height);                    switch (dc) {                        case 1:                            y += 1;                            break;                        case 2:                            x += 1;                            break;                        case 4:                            x -= 1;                            break;                        case 8:                            y -= 1;                            break;                    }                }                switch (dc) {                    case 1:                        y -= 2;                        break;                    case 2:                        x -= 2;                        break;                    case 4:                        x += 2;                        break;                    case 8:                        y += 2;                        break;                }                dc = 1 << Math.round(Math.random() * 3);                dirs.push(dc);                switch (dc) {                    case 1:                        y -= 2;                        break;                    case 2:                        x -= 2;                        break;                    case 4:                        x += 2;                        break;                    case 8:                        y += 2;                        break;                }            }        }    }</script>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn