遊戲裡的小人如何走路？百行HTML5+JS能搜尋出路徑嗎？

阿新 • • 發佈：2021-12-14

用了HTML5裡的canvas. 這個"遊戲"的”玩法“是：

改迷宮折騰電腦
改程式折騰自己:-)。我自以為程式挺簡明，註釋挺多，比如：

- // 全域性變數坑死人，這裡曾經少個var
- // 雖然直接drawImage有時能出來，但這麼做絕對必要。坑了我好長時間。

單.HTML檔案146行，包括數張嵌入式.gif圖片和JS。下面是全部JS(112行):

ctx = gmaze.getContext('2d')

function reset_maze(){
    X = Xin.value; if(X > 32 || X < 6) X = 20
    Y = Yin.value; if 
(Y > 20 || Y < 6) Y = 13
    Xin.value = X; Yin.value = Y
    maze = new Array(); for(y = 0; y < Y; y++){
        var    row = new Array() // new Array(3)不是建立長度為3的陣列
        for(x = 0; x < X; x++) row.push(Math.random() < 0.7 ? ' ' : 'w')
        maze.push(row)
    }
    maze[cx = 0][cy = 0] = 'r'    // 
 cx,cy記錄當前機器人位置
    gmaze.width = X * 32; gmaze.height = Y * 32; draw_maze()
}; reset_maze()

function clear_path() {
    for(y = 0; y < Y; y++) for(x = 0; x < X; x++){
        var    c = maze[y][x]
        if(c == 'x' || c == 'p' || c == 'r') maze[y][x] = ' '
    }
    stepcnt = 0
}

function draw_maze(){
     
for(y = 0; y < Y; y++) for(x = 0; x < X; x++){
        var    c = maze[y][x]
        if(c == 'r') draw_img(img_robot, x, y)
        else if(c == 'w') draw_img(img_wall, x, y)
        else if(c == 'p') draw_img(img_flag, x, y)
        else if(c == ' ') draw_blk('#fff', x, y)
        else draw_blk('#f00', x, y)
    }
}

// 雖然直接drawImage有時能出來，但這麼做絕對必要。坑了我好長時間。
function draw_img(img, x, y){
    var i = new Image(); i.src = img.src
    i.onload = function(){ ctx.drawImage(i, x * 32, y * 32) }
}

function draw_blk(color, x, y){    ctx.fillStyle = color; ctx.fillRect(x * 32, y * 32, 32, 32) }

// mx, my記錄滑鼠指標位置
d = document; d.addEventListener('mousemove', function(e){ mx = e.x; my = e.y })

// 畫素座標到塊座標轉換。border+wall=8+32. round() is bad, round() is wrong.
function get_x() { // 
    var x = Math.floor((mx - 40) / 32)
    if(x < 0 || x >= X) throw 'X超出範圍。'
    return x
}
function get_y() {
    var y = Math.floor((my - 40) / 32)
    if(y < 0 || y >= Y) throw 'Y超出範圍。'
    return y
}

d.addEventListener('mousedown', function(e){ // 可以忽略exception
    if(e.which != 1) return; // Not left button
    var    x = get_x(), y = get_y()
    var    c = maze[y][x]
    if(c == 'w') maze[y][x] = ' ', draw_blk('#fff', x, y)
    else if (c == ' ') maze[y][x] = 'w', draw_img(img_wall, x, y)
})

d.addEventListener('keydown', function(e){
    if (e.keyCode != 71) return    // Not 'g'
    try{
        tx = get_x(), ty = get_y()    // target x, y, 全域性變數
        clear_path()
        //alert('Searching for ' + cx + ',' + cy + ' to ' + tx + ',' + ty)
        ok = search(cx, cy) 
        if(ok) maze[cy = ty][cx = tx] = 'r'
        else {
            maze[cy][cx] = 'r'
            alert('Please try a nearer target.')
        }
        draw_maze()
    }
    catch(e){}
})

function search(x, y){
    if(x == tx && y == ty) return true
    if(++stepcnt > 1000000) return false
    if(x<0 || x>=X || y<0 || y>=Y) {
        console.log(x, y)
        return false
    }
    if(maze[y][x] != ' ') {
        console.log(x, y, maze[y][x])
        return false
    }
    maze[y][x] = 'p'
    var    dxdy = [[0,-1],[0,1],[-1,0],[1,0]]
    var    e_i = [1,2,3,4] // evaluation_index
    var    i, j
    for(i = 0; i < 4; i++) {
        var    a = x + dxdy[i][1], b = y + dxdy[i][0]
        var    c = tx - a, d = ty - b
        var    t = c * c + d * d    // 距離的平方
        e_i[i] = (t << 2) | i
    }
    // 預設情況下，sort方法按字母順序對元素排序。https://www.codenong.com/1063007/
    e_i.sort((a, b) => a - b)
    for(j = 0; j < 4; j++) {
        i = e_i[j] & 0x3    // 全域性變數坑死人，這裡曾經少個var
        if(search(x + dxdy[i][1], y + dxdy[i][0])) return true
    }
    maze[y][x] = 'x'; return false
}

點這裡下載HTML+JS。下面是HTML的不包含嵌入圖片的部分：

<html><meta charset="gbk"><title>走迷宮</title><style>
/* https://www.w3school.com.cn/cssref/css_selectors.asp */
* { font:12pt 'Segoe UI' }
#wall { position:absolute; left:8px; top:8px; padding:32px;
background-image:url(data:image/gif;base64,...);
}
#gmaze { cursor:hand }
#panel { float:right; top:32px }
    h6 { font:bold 14pt 'Segoe UI'; color:green; margin:1em }
    input { width:2em }
pre { display:none }
</style>
<body>
<div id="wall"><canvas id="gmaze"/></div>
<div id="panel">
    <h6>你設計一個迷宮，機器人來走</h6>
    <p style="text-align:center">
        <button onclick="reset_maze()">重新生成</button>
        <input type="text" id="Xin" value="20"/> X 
        <input type="text" id="Yin" value="17"/>的迷宮
    </p>
    <ul>
    <li>編輯: 在迷宮裡按滑鼠左鍵切換路或牆。<br>最外面的牆不能改變。</li>
    <li>按 g 鍵後，機器人會試圖走到滑鼠指標所在處。</li>
    <li style='font-size:10pt'>開啟開發人員工具後，鍵盤焦點可能不在頁面內。<br>此時可點選頁面內任意文字框把焦點切回來。<br>滑鼠雙擊容易誤操作。</li>
    </ul>
</div>

遊戲裡的小人如何走路？百行HTML5+JS能搜尋出路徑嗎？

用了HTML5裡的canvas. 這個\"遊戲\"的”玩法“是：改迷宮折騰電腦改程式折騰自己:-)。我自以為程式挺簡明，註釋挺多，比如：

用matlab程式設計的人臉識別程式碼_人臉識別就這麼簡單嗎？16歲高中用Python20行程式碼就能寫出...

技術標籤：用matlab程式設計的人臉識別程式碼 16歲高中生用Python20行程式碼就能寫出

C/C++百行程式碼實現熱門遊戲消消樂功能的示例程式碼

遊戲設計首先我們需要使用第三方框架,這裡我使用的是sfml,不會使用sfml在我的上幾篇文章當中-掃雷(上)有詳細的開發環境搭建介紹

詳解python百行有效程式碼實現漢諾塔小遊戲(簡約版)

直接上程式碼: #左中右塔用一個列表儲存 left = list() center = list() right = list() \"\"\"

python百行程式碼自制電腦端網速懸浮窗的實現

前言看到某60的網速懸浮球有點心動，但是又不想裝這個流氓軟體，就自己用python加PyQt5自制了一個，實測還行，關鍵不佔用電腦一點資源，已將軟體打包，可自行下載使用。

（程式碼雨/屏保）c++百行程式碼，超簡單

（程式碼雨/屏保）c++程式碼基於Easyx，在vs端使用，若是其他編譯器自行修改scanf等函式。

CSS3+HTML5+JS 實現一個塊的收縮&展開動畫

最近在做專案時，發現CSS3中關於動畫的技術，自己很少運用在專案中，平時一些列表塊的收縮和展開動畫效果，幾乎都是使用 display 的 none 和 block，或者visibility 的 hidden 和 visible來進行控制。因此，在最近的

遊戲裡面的3D模型是怎麼製作的？有哪些特點？

現在遊戲建模這個行業非常熱門，因此有很多小夥伴夢想成為一名遊戲模型師，但是很多都對這個工作需要做什麼瞭解不深，這裡我簡單介紹一下3D遊戲模型製作。

百行徵信大揭祕，欄位中間找關係

回顧百行徵信的歷史，我們在網上隨手可查百行的成立的歷史：隨著網際網路和資訊科技的快速發展，網際網路領域的個人金融借貸迅速增加，由於央行徵信系統沒有覆蓋P2P平臺等機構，加之各家機構通常把個人資訊

關於百度地圖js api的getCurrentPosition定位不準確的解決方法

百度地圖官方獲取當前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r) {

在仙俠遊戲裡「修仙」到底有多快樂：根本無法想象

國產遊戲有 “三劍”，舊 “三劍”為《軒轅劍》、《仙劍奇俠傳》和《劍俠情緣》，新 “三劍”則是將原有的《劍俠情緣》改為了《古劍奇譚》，這些遊戲就是國產仙俠遊戲的標杆之作。但令人沒想到的是，如今佔領手遊端遊

開發微信小程式遊戲真的有手就行嗎？

每個人都有一個遊戲夢，都希望能做出一款屬於自己的遊戲。但是由於種種原因，並不是所有人都有時間、有機會進行深入的遊戲開發學習。

《死亡迴圈》關卡設計師：遊戲裡還有祕密沒被發現

《死亡迴圈》現已正式發售，這是一款充滿祕密的遊戲作品。如今開發團隊的一位成員在網路發聲，表示遊戲裡還有一些祕密尚未被玩家發現。Arkane工作室關卡設計師Julien

中國遊戲主機論壇：百家合將引進《微軟飛行模擬》，推進相關賽事

12 月 15 日訊息，由中國音像與數字出版協會指導，中國音像與數字出版協會遊戲出版工作委員會主辦，中國音像與數字出版協會、索尼互動娛樂、騰訊、微軟 Xbox 百家合等特別支援的主機遊戲產業未來論壇今日正式舉行。

《Bitburner》收穫好評如潮在遊戲裡寫程式碼升級

遊戲是由一串串程式碼組成的，而現在有一款遊戲讓玩家在遊戲裡寫程式碼，無限套娃了屬於是。

HTML5+js實現一個簡單的計算器

全部程式碼： <!DOCTYPE html><html> <head><meta charset=\"utf-8\"><title>簡單的計算器</title> </head> <body onload=\"onload()\"><div style=\"width: 12

三百行程式碼演繹樹狀陣列基礎全家桶（一維樹狀陣列 + 二維樹狀陣列）

/* #include<map> #include<cmath> #include<queue> #include<vector> #include<cstdio>

把《男生女生向前衝攻略》搬進遊戲裡是什麼體驗？網友：這不就來了！

提起《男生女生向前衝》這個闖關綜藝，相信很多小夥伴的DNA都狠狠動了，小時候坐在電視機前看別人闖關真的很帶勁，看到闖關選手一個接一個落水時甚至想衝進電視機裡自己闖關，相信有這種想法的不止我一個。

盤點遊戲裡10把很有創意的奇葩槍支武器，又搞怪又耐玩！

《小緹娜的奇幻之地》是一款畫風獨特的魔幻類射擊奪寶遊戲，由Gearbox遊戲公司開發、2K發行，3月25日在全球多個平臺上線。作為《無主之地》系列的獨立衍生作，裡面也是有著相當多的稀奇古怪、荒謬奇葩的槍械武器，讓

在遊戲裡救必死的NPC是傻逼行為嗎？

（文內有對多部作品的劇透，介意的朋友們謹慎閱讀）真新鎮小茂 | 文遊戲裡有沒有哪個NPC的死亡讓你刻骨銘心？

遊戲裡的小人如何走路？百行HTML5+JS能搜尋出路徑嗎？

相關推薦