Html JS實現動態迷宮搜尋與手動迷宮搜尋

2021-10-01 14:58:13 字數 1203 閱讀 2961

當成web作業來對待了...

乙個搞演算法的我 也有今天....

不想把這個看成演算法任務可就是演算法任務唉~

放一波效果截圖:

進入後的選擇介面

進入後的初始介面

以動畫的形式生成一條路線

自己走迷宮闖關成功

部分js**:

部分html**:

dfs一鍵生成隨機路線

bfs一鍵生成最短路線

自己走迷宮!

dfs隨機路數步數統計:

bfs最短路徑步數統計:

簡要分析:進入頁面之後,有乙個選擇難度的提示框,他會根據你選擇的難度,進行地圖的初始化,由於初始化函式涉及到迷宮的填充**太過於冗長因此不進行展示。選擇難度之後迷宮與迷宮的長寬就被確定,通過dfs和bfs搜尋得到路徑,將路徑還原出來之後,通過js中 getelement函式獲取到當前迷宮的盒模型,然後通過createlement 創立乙個新元素,這個新元素的top與left距離即為這個元素在路徑還原中(x,y)座標。創立元素之後地圖中將顯示在乙個地方填充了乙個新的元素。但是該動作不具有動畫效果,所以使用setinterval函式設立乙個時間,每隔300ms生成乙個新元素,肉眼看不出的情況下便成了動畫。人機互動模式採用js的監聽鍵盤技術,獲取keycode值判斷分別處於wasd四個方向,改變新元素的屬性即可,同理新元素的top與left均為座標(x,y)

總結:

害,怎麼說呢乙個喜歡演算法的去搞了前端,設計出來的也是關於演算法的...害

還是想讓自己的acm更上一層樓叭!加油acmer!

搜尋與回溯 1215 迷宮

一天extense在森林裡探險的時候不小心走入了乙個迷宮,迷宮可以看成是由n n的格點組成,每個格點只有2種狀態,和 前者表示可以通行後者表示不能通行。同時當extense處在某個格點時,他只能移動到東南西北 或者說上下左右 四個方向之一的相鄰格點上,extense想要從點a走到點b,問在不走出迷宮...

深度搜尋迷宮問題 C語言實現

使用乙個棧來儲存符合要求的點,每次根據棧頂的點的k值 1表示上,2表示右,3表示下,4表示左 依次取下乙個點,滿足條件則不斷迴圈 若某乙個點的四面都不行,則進行出棧回溯。當找到這樣一條路徑,也要進行回溯,這樣才能輸出所有的路徑。定義結構體 typedef struct dian dian g 30 ...

C語言實現迷宮問題 深度優先搜尋

c語言實現迷宮問題 這裡寫自定義目錄標題 小白一枚,c語言實現迷宮問題,思路為,先將初始點 i,j,di 入棧,進入迴圈,先出棧,之後判斷臨近點 row,col 如果這個點可行,留下標記 在0,1迷宮中用2來標記走過的路,然後將i,j,di入棧 然後更新點座標,找到為止,如下 勿噴,嘻嘻 inclu...