JavaScript繪制游戲地圖并且操控人物移動
更新時間：2023年10月21日 16:50:48 作者：青花鎖
JavaScript開發(fā)小游戲,目標是使用JavaScript繪制簡單的二維地圖,采用二維數(shù)組存儲地圖信息,使用表格繪制地圖,每個td單元格存儲數(shù)據(jù),使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵,按鍵觸發(fā)時人物做出相應操作,人物下一步碰撞到障礙物,終止人物運動
JavaScript開發(fā)小游戲，目標是使用JavaScript繪制簡單的二維地圖，采用二維數(shù)組存儲地圖信息，使用表格繪制地圖，每個td單元格存儲數(shù)據(jù)。使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵，按鍵觸發(fā)時人物做出相應操作。人物下一步碰撞到障礙物，終止人物運動。
一、列計劃
1.1、目標
做一個2D二維地圖繪制、人物移動、障礙檢測相關的單頁面游戲
1.2、步驟
準備素材(圖片)：草坪、人物(熊貓)、障礙(石頭)
初始化布局(表格)，邊距設置為0，無邊框，設置背景圖(草坪)平鋪拉滿
標記草坪、熊貓、石頭的代碼
初始化二維地圖數(shù)據(jù)，初始化障礙物圍墻，初始化人物位置
計算公共變量二維地圖的行、列
合并二維地圖數(shù)據(jù)、人物位置數(shù)據(jù)，渲染到頁面
設置全局鍵盤事件(在Body上添加)，監(jiān)聽wasd按鍵事件：w(上) s(下) a(左) d(右)
在事件里增加任務移動邏輯、增加邊界邏輯
在事件里增加障礙檢測邏輯
二、使用步驟
2.1、準備素材(圖片)：草坪、人物(熊貓)、障礙(石頭)
2.2、初始化布局(表格)，邊距設置為0，無邊框，設置背景圖(草坪)平鋪拉滿
設置table的ID：map1001
代表是編號1001的地圖
<style>
table { border-collapse: collapse; padding: 0 ; background: url("../img/item/grass.png"); width:100%;
height:100% ; background-position: center; background-size:cover; background-repeat: no-repeat; }
td { width: 100px; height: 100px; }
tr { display: block; margin: -5px; }
</style>
<body onload="init()" onkeypress="keypress(event)">
<table id="map1001">
</table>
</body>2.3、標記草坪、熊貓、石頭的代碼
<script>
var empty = 0; //空地或草坪
var stone = 1; //石頭的標記是1
var panda = 9; //熊貓的標記是9
</script>2.4、初始化二維地圖數(shù)據(jù)，初始化障礙物圍墻，初始化人物位置
<script>
/**
* 加載地圖數(shù)據(jù)
* 0 空地/草坪
* 1 石頭
* 9 熊貓
* @type {number[]}
*/
var mapData = [
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1] ,
[ 1 , 0 , 1 , 0 , 0 , 0 , 0 , 1] ,
[ 1 , 0 , 0 , 1 , 0 , 1 , 0 , 1] ,
[ 1 , 0 , 0 , 0 , 0 , 1 , 0 , 1] ,
[ 1 , 0 , 1 , 0 , 1 , 1 , 0 , 1] ,
[ 1 , 0 , 1 , 0 , 0 , 0 , 0 , 1] ,
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1]
]
var initPoint = [1,4]; //初始化熊貓的位置是 1,4
</script>2.5、計算公共變量二維地圖的行、列
<script>
var row = mapData.length; //地圖的行
var column = mapData[0].length; //地圖的列
</script>2.6、合并二維地圖數(shù)據(jù)、人物位置數(shù)據(jù)，渲染到頁面
<script>
/**
* 合并二維地圖數(shù)據(jù)、人物位置數(shù)據(jù)，渲染到頁面
*/
function init() {
//二維數(shù)組里，去初始化熊貓的位置
mapData[initPoint[0]][initPoint[1]] = panda
loadData(mapData);
}
/**
* 渲染地圖
* @param mapData
*/
function loadData(mapData) {
// 獲取地圖對象
var map = document.getElementById("map1001");
//渲染一行八列的數(shù)據(jù)
var mapHTML = "";
for (var i = 0; i < row; i++) {
mapHTML += "<tr>";
for (var j = 0; j < column; j++) {
if( mapData[i][j] == 0 ){
mapHTML += "<td></td>";
} else if( mapData[i][j] == 1 ){
mapHTML += '<td><img src="../img/item/stone.png" style="height: 90px; height: 90px; border-radius: 50%;" ></td>';
} else if( mapData[i][j] == 9 ){
mapHTML += '<td><img src="../img/item/panda1.png" style="height: 90px; height: 90px; border-radius: 50%;" ></td>';
}
}
mapHTML += "</tr>";
}
map.innerHTML = mapHTML;
}
</script>
<body onload="init()" >2.7、設置全局鍵盤事件(在Body上添加)，監(jiān)聽wasd按鍵事件：w(上) s(下) a(左) d(右)、在事件里增加任務移動邏輯/增加邊界邏輯、在事件里增加障礙檢測邏輯
<script>
/**
* 監(jiān)聽wasd按鍵事件：w(上) s(下) a(左) d(右)
* @param e
*/
var keypress = function keypress(e){
var keynum = window.event ? e.keyCode : e.which;
if( 119 == keynum ) {
var point = initPoint;
if( point[0] < row - 1 ) {
var xPoint = initPoint[1];
var yPoint = initPoint[0] - 1;
if( checkStone(yPoint,xPoint) ){
console.log("碰撞到石頭了，停止動作")
return
}
console.log("移動后的位置：x:" + xPoint + " , y:" + yPoint )
initPoint = [yPoint,xPoint]
operatePanda(point);
console.log("向上")
} else {
console.log("超出地圖范圍了，停止動作")
}
} else if( 97 == keynum ) {
var point = initPoint;
if( point[1] > 0 ) {
var xPoint = initPoint[1] -1;
var yPoint = initPoint[0];
if( checkStone(yPoint,xPoint) ){
console.log("碰撞到石頭了，停止動作")
return
}
console.log("移動后的位置：x:" + xPoint + " , y:" + yPoint )
initPoint = [yPoint,xPoint]
operatePanda(point);
console.log("向左")
} else {
console.log("超出地圖范圍了，停止動作")
}
} else if( 115 == keynum ) {
var point = initPoint;
if( point[0] < row - 1 ) {
var xPoint = initPoint[1];
var yPoint = initPoint[0] + 1;
if( checkStone(yPoint,xPoint) ){
console.log("碰撞到石頭了，停止動作")
return
}
console.log("移動后的位置：x:" + xPoint + " , y:" + yPoint )
initPoint = [yPoint,xPoint]
operatePanda(point);
console.log("向下")
} else {
console.log("超出地圖范圍了，停止動作")
}
} else if( 100 == keynum ) {
var point = initPoint;
if( point[1] < column -1 ) {
var xPoint = initPoint[1] + 1;
var yPoint = initPoint[0];
if( checkStone(yPoint,xPoint) ){
console.log("碰撞到石頭了，停止動作")
return
}
console.log("移動后的位置：x:" + xPoint + " , y:" + yPoint )
initPoint = [yPoint,xPoint]
operatePanda(point);
console.log("向右")
} else {
console.log("超出地圖范圍了，停止動作")
}
}
}
/**
* 障礙檢測（可加多個障礙條件）
* @param yPoint
* @param xPoint
* @returns {boolean}
*/
function checkStone(yPoint , xPoint ) {
return mapData[yPoint][xPoint] == stone;
}
</script>
<body onload="init()" onkeypress="keypress(event)">3、部分效果
嘗試走到右上角的位置，初始化位置：1,4，目標值：1,1
嘗試走直線，從左走到目標，中途碰到石頭障礙就走不動了，此時上下左都有石頭障礙，都走不動，只能向右走
向右走1格
向下走2格
向左走2格
向上走一格
向左走一格
向上走一格
抵達目標
總結
以上就是今天要講的內容，本文僅僅簡單介紹了2D二維地圖繪制、人物移動、障礙檢測，可以根據(jù)此開發(fā)出自動尋徑避障、多障礙物繪制、NPC自動出現(xiàn)并移動、人物動畫動作、多地圖切換、裝備倉庫、裝備效果等。例如：推箱子、走迷宮、副本游戲、熊貓吃竹子等。
相關文章
我們在編寫 JS 代碼時,經(jīng)常會遇到邏輯判斷復雜的情況,這篇文章主要給大家介紹了關于JavaScript如何優(yōu)化邏輯判斷代碼的相關資料,需要的朋友可以參考下2021-06-06
今天小編就為大家分享一篇layui的table中顯示圖片方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
js判斷當頁面無法回退時關閉網(wǎng)頁否則就history.go(-1)
當頁面沒有前驅歷史記錄時，點擊返回按鈕時直接關閉頁面，否則就退回到前一頁2014-08-08
下面小編就為大家分享一篇基于JavaScript中標識符的命名規(guī)則介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript中數(shù)組flat方法的使用與實現(xiàn)方法
在Array的顯示原型下有一個flat方法,可以將多維數(shù)組,降維,傳的參數(shù)是多少就降多少維,下面這篇文章主要給大家介紹了關于JavaScript中數(shù)組flat方法的使用與實現(xiàn)的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)刮刮獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JavaScript中ES6字符串擴展方法的相關資料,非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-08-08
這篇文章主要介紹了JavaScript的Proxy可以做哪些有意思的事兒,Proxy是ES6中提供的新的API，可以用來定義對象各種基本操作的自定義行為 （在文檔中被稱為traps，我覺得可以理解為一個針對對象各種行為的鉤子），,需要的朋友可以參考下2019-06-06
javascript FAQ函數(shù)，當點擊問題時顯示下面的回復內容。2009-07-07
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標移動事件畫筆，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08