html迷路作成_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

html迷路作成_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

神様助けてください HTMLを使って図のように迷路を作成する方法

ディスカッション（解決策）に返信

多くのメソッド、canvas、svg描画があり、tableやdivも使用できます境界線の一部を削除します (ただし、この CSS を記述するのは大変です)。

出てきました

具体的には、tablesやdivの使い方、cssを使って枠線を消す方法

表示に使いたいのか、それともWebページ上に迷路を作って人が歩けるようにしたいのかそれ？
前者の場合は、写真を投稿してください。
後者の場合は、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();

以下は、完全型迷路の生成コードです。任意の 2 つの場所を選択してください端にあるそれぞれ入り口と出口として機能します

<!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 までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。