スキップしてメイン コンテンツに移動

迷路作成アルゴリズム p5jsで作る ループ有り

 ループ有りの迷路が作れたので残しておく

ゲームだと背後に回り込むとかできるので

使えそう



<!DOCTYPE html>
<html lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<div id="p5canvas"></div>

<script>
	class mymaze {
		writex = 0;
		writey = 0;
		msize = 0;
		state = 0;
		possiblesize = 0;
		maze = [];
		xtable = [2, -2, 0, 0];
		ytable = [0, 0, 2, -2];
		constructor(n) {
			this.msize = n;
		}


		mazeloop() {
			switch (this.state) {
				//pass through candidate points
				case 0:
					this.writex += 2;
					if (this.writex > this.msize - 2) {
						this.writex = 2;
						this.writey += 2;
					}
					if (this.writey > this.msize - 2)
						this.writey = 2;

					if (this.maze[this.writey][this.writex] == 0) {
						this.maze[this.writey][this.writex] = 2;
						this.possiblesize--;

						this.state = 1;
					}
					break;


				case 1:
					let direction = parseInt(Math.random() * 4);
					let addx = this.xtable[direction];
					let addy = this.ytable[direction];
					switch (this.maze[this.writey + addy][this.writex + addx]) {
						case 0:
							this.possiblesize--;
							this.maze[this.writey + addy][this.writex + addx] = 2;
							this.maze[this.writey + addy / 2][this.writex + addx / 2] = 2;
							this.writex += addx;
							this.writey += addy;
							break;
						case 1:
							this.maze[this.writey + addy / 2][this.writex + addx / 2] = 2;
							this.state = 2;
							break;
						case 2:
							this.state = 2;
							break;
					}
					break;

				case 2:
					for (let i = 1; i < this.msize - 1; i++) {
						for (let j = 1; j < this.msize - 1; j++) {
							if (this.maze[i][j] == 2)
								this.maze[i][j] = 1;
						}
					}
					this.state = 0;
					if (this.possiblesize <= 0)
						this.state = 4;
					break;
				case 4:
					this.writex = 1;
					this.writey = 1;
					break;
			}
		}

		mazeinit() {
			this.state = 0;
			let row = [];
			for (let i = 0; i < this.msize; i++) {
				row = [];
				for (let j = 0; j < this.msize; j++) {
					if (i == 0 || i == this.msize - 1 || j == 0 || j == this.msize - 1)
						row.push(1);
					else
						row.push(0);
				}
				this.maze.push(row);
			}
			this.writex = 2;
			this.writey = 2;
			//'n*2-1'=insid width ;'n*2'=block and space;'-1'=del extra space;'4'=(side block and space)*2
			this.possiblesize = (this.msize - 3) / 2; //n*2-1+4=maze_width ->  n=(maze_width-3)/2;
			this.possiblesize *= this.possiblesize;
		}
	}

	let mazesize = 21; //maze width height ,it must odd number
	let maze;

	function setup() {
		createCanvas(500, 500).parent("p5canvas");
		textSize(17);
		noStroke();

		maze = new mymaze(mazesize);
		maze.mazeinit();
	}

	function mousePressed() {
		maze = [];
		maze = new mymaze(mazesize);
		maze.mazeinit();
	}

	function draw() {
		background(100);
		let tilesize = parseInt(500 / (mazesize + 4));
		translate(tilesize * 2, tilesize * 2);
		maze.mazeloop();
		fill(255);
		for (let i = 0; i < maze.msize; i++)
			for (let j = 0; j < maze.msize; j++) {
				if (maze.maze[i][j] == 1) {
					fill(200);
					rect(j * tilesize, i * tilesize, tilesize - 2);
				} else if (maze.maze[i][j] == 2) {
					fill(100, 200, 100);
					rect(j * tilesize, i * tilesize, tilesize - 2);
				}
				if (maze.writex == j && maze.writey == i) {
					fill(255);
					rect(j * tilesize, i * tilesize, tilesize - 2);
				}
			}
		translate(-tilesize * 2, -tilesize * 2);
	}
</script>
</html>

コメント

このブログの人気の投稿

Arduino IDE が "Downloading index: library_index.tar.bz2" で固まる問題

PCとのシリアル通信が原因の一つらしい '/home/usename/.arduino15/packages' を消すといいらしい ので消すと治った IDEの起動中にフリーズしてたのが治った Downloading index: library_index.tar.bz2 とダウンロード中だったが終了したので起動中のフリーズが起こるようになった

Blogger でp5jsがつかえた

”HTMLビュー”でHTMLを編集  divとcanvasを関連付ければ良いみたい (div id="p5canvas とcreateCanvasの.parent("p5canvas");) p5js本体はCDNを参照(https://cdnjs.com/libraries/p5.js) コードはP5サイトのEXAMPLEから(https://p5js.org/examples/3d-geometries.html) <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> function setup() { createCanvas(710, 400, WEBGL).parent("p5canvas"); } function draw() { background(250); translate(-240, -100, 0); normalMaterial(); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); plane(70); pop(); translate(240, 0, 0); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); box(70, 70, 70); pop(); translate(240, 0, 0); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); cylinder(70, 70); pop(); ...

クラスカル法

chat-gptにきいたらおしえてくれた                                                                参考動画 <!DOCTYPE html> <html lang="en"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> class Graph {   constructor() {     this.vertices = [];     this.edges = [];   }   addVertex(x, y) {     this.vertices.push({ x, y });   }   addEdge(source, destination, weight) {     if (this.vertices[source] && this.vertices[destination]) ...