系列文章目錄
第一章 2D二維地圖繪制、人物移動、障礙檢測
第二章 跟隨人物二維動態(tài)地圖繪制、自動尋徑、小地圖顯示(人物紅點顯示)
第三章 繪制冰宮寶藏地圖、人物鼠標點擊移動、障礙檢測
第四章 繪制Q版地圖、鍵盤上下左右地圖場景切換
前言
本章內(nèi)容在第一章的基礎上進行了升級，因此帶大家回顧下第一章的內(nèi)容。
第一章：
- 使用JavaScript繪制簡單的二維地圖
采用二維數(shù)組存儲地圖信息，使用表格繪制地圖，每個td單元格存儲數(shù)據(jù) - 鍵盤上下左右控制
使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵，按鍵觸發(fā)時人物做出相應操作 - 障礙物碰撞檢測(采用格子碰撞檢測)
人物下一步碰撞到石頭時，提示遇到障礙，終止人物運動
本章節(jié)采用第一章節(jié)的鍵盤上下左右事件控制，同時把地圖層與數(shù)據(jù)層（二維網(wǎng)格、人物）分離，作為單獨的模塊。
一、本章節(jié)效果圖
![[JavaScript游戲開發(fā)] 繪制Q版地圖、鍵盤上下左右地圖場景切換,前端小游戲,javascript,html小游戲,Q版地圖](https://imgs.yssmx.com/Uploads/2023/08/650629-1.gif)
二、任務拆解
1、準備【地圖層圖片】，找一張酷炫的地圖
2、準備【游戲窗口層】，設置為瀏覽器可視區(qū)域高、寬
3、準備【游戲地圖層】，設置為地圖圖片自身高、寬
4、實現(xiàn)【鍵盤上下左右操作】，讓【游戲地圖層】在【游戲窗口層】可視區(qū)域內(nèi)上下作用移動，并實現(xiàn)邊界功能
5、看看最終效果![[JavaScript游戲開發(fā)] 繪制Q版地圖、鍵盤上下左右地圖場景切換,前端小游戲,javascript,html小游戲,Q版地圖](https://imgs.yssmx.com/Uploads/2023/08/650629-2.png)
2.1、準備【地圖層圖片】
找到一張足夠大的Q版地圖（PS：傳奇、問道的大地圖寬度可達2萬+px）![[JavaScript游戲開發(fā)] 繪制Q版地圖、鍵盤上下左右地圖場景切換,前端小游戲,javascript,html小游戲,Q版地圖](https://imgs.yssmx.com/Uploads/2023/08/650629-3.png)
2.2、準備【游戲窗口層】
設置游戲窗口層為瀏覽器可視區(qū)域高、寬，其余內(nèi)容將不可見
1、指定div的ID=parentDiv（id=“parentDiv”）；
2、指定塊高、塊寬為瀏覽器窗口的95%（width: 95%; height: 95%; ）；
3、指定parentDiv，相對于body元件定位，初始狀態(tài)下margin-left、margin-top都為0(默認值) （ position: absolute; ）；
4、設置背景色為紅色（便于調(diào)試時避免圖層超出游戲窗口層）（background-color: red; ）;
5、設置游戲窗口層溢出被剪切，其余內(nèi)容將不可見(展示固定窗口的地圖，其余內(nèi)容不可見)（overflow: hidden; ）
<body>
<div style="width: 95%; height: 95%; position: absolute;
background-color: red; overflow: hidden; " id="parentDiv">
</div>
</body>
涉及知識點：CSS position屬性、CSS overflow屬性、CSS background-color屬性![[JavaScript游戲開發(fā)] 繪制Q版地圖、鍵盤上下左右地圖場景切換,前端小游戲,javascript,html小游戲,Q版地圖](https://imgs.yssmx.com/Uploads/2023/08/650629-4.png)
2.2.1、CSS position屬性
position屬性指定用于元素的定位方法的類型（static, relative, absolute, fixed, sticky）
- CSS語法
position: static|absolute|fixed|relative|sticky|initial|inherit; - 屬性值
性值 描述 tatic 默認值。 按它們出現(xiàn)在文檔流中元素順序呈現(xiàn) bsolute 元件相對于其第一定位（非靜態(tài)）祖先元件定位 ixed 元素相對于瀏覽器窗口定位 elative 元素相對于其正常位置定位，因此“l(fā)eft：20px”將20個像素添加到元素的左邊位置 ticky 元素根據(jù)用戶的滾動位置定位，粘性元素在相對和固定之間切換，具體取決于滾動位置。 它被相對定位，直到在視口中滿足給定的偏移位置 - 然后它“粘住”到位（如position:fixed） nherit 從其父元素繼承此屬性
2.2.2、CSS overflow屬性
overflow屬性指定內(nèi)容溢出元素框時應發(fā)生的情況。此屬性指定當元素的內(nèi)容太大而無法放入指定區(qū)域時是剪輯內(nèi)容還是添加滾動條。
注意：overflow屬性僅適用于具有指定高度的塊元素。
- CSS語法
overflow: visible|hidden|scroll|auto|initial|inherit; - 屬性值
性值 描述 isible 溢出沒有被剪裁。 它呈現(xiàn)在元素框之外。 這是默認的 idden 溢出被剪切，其余內(nèi)容將不可見 croll 剪輯溢出，但添加滾動條以查看其余內(nèi)容 uto 如果剪切了溢出，則應添加滾動條以查看其余內(nèi)容 nherit 從其父元素繼承此屬性
2.2.3、CSS background-color屬性
background-color屬性設置元素的背景顏色。元素的背景是元素的總大小，包括填充和邊框（但不是邊距）。
提示：使用背景顏色和文本顏色使文本易于閱讀，此處便于調(diào)試時便于調(diào)整畫布的邊界
- CSS語法
background-color: color|transparent|inherit; - 屬性值
性值 描述 olor 指定背景顏色。 查看CSS顏色值以獲取可能顏色值的完整列表。 ransparent 指定背景顏色應該是透明的。 這是默認的 nherit 從其父元素繼承此屬性。
2.3、準備【游戲地圖層】
1、在id="parentDiv"的div容器里，放置【游戲地圖層】;
2、設置【游戲地圖層】的id=“mapDiv”;
3、設置【游戲地圖層】的高度、寬度，1比1比例還原原圖尺寸；
4、設置【游戲地圖層】的z-index，使得能顯示出來的地圖，放置在parentDiv容器之上；
<div style="width: 95%; height: 95%; position: absolute;
background-color: red; overflow: hidden; " id="parentDiv">
<div style="z-index: 1; height: 2480px; width: 3280px" id="mapDiv">
</div>
</div>
![[JavaScript游戲開發(fā)] 繪制Q版地圖、鍵盤上下左右地圖場景切換,前端小游戲,javascript,html小游戲,Q版地圖](https://imgs.yssmx.com/Uploads/2023/08/650629-5.png)
**涉及知識點：CSS z-index屬性
2.3.1、CSS z-index屬性
z-index屬性指定元素的堆棧順序。堆棧順序較大的元素始終位于堆棧順序較低的元素前面。
注意： z-index僅適用于定位元素（position:absolute, position:relative, 或 position:fixed）
- CSS語法
z-index: auto|number|inherit; - 屬性值
性值 描述 uto 將堆棧順序設置為等于其父項。 這是默認的 umber 設置元素的堆棧順序。 允許使用負數(shù) nherit 從其父元素繼承此屬性。
2.4、實現(xiàn)【鍵盤上下左右操作】
讓【游戲地圖層】在【游戲窗口層】可視區(qū)域內(nèi)上下作用移動，并實現(xiàn)邊界功能![[JavaScript游戲開發(fā)] 繪制Q版地圖、鍵盤上下左右地圖場景切換,前端小游戲,javascript,html小游戲,Q版地圖](https://imgs.yssmx.com/Uploads/2023/08/650629-6.png)
文章來源：http://www.zghlxwxcb.cn/news/detail-650629.html
<script>
//文檔準備好之后開始執(zhí)行
window.onload = function () {
init();
}
var mapDivEle;
var parentDivEle;
var stepDistance = 20;
/**
* 定義游戲窗口層、游戲地圖層，并渲染頁面
*/
function init() {
// 定義游戲窗口層
parentDivEle = document.getElementById("parentDiv");
// 定義游戲地圖層
mapDivEle = document.getElementById('mapDiv');
//渲染地圖
loadData();
}
/**
* 渲染地圖
* @param mapData
*/
function loadData() {
// 加載地圖
mapDivEle.style.background= 'url("../img/item/bg/os.jpg")';
}
/**
* 定義 鍵盤上下左右事件
* 并判斷邊界
* @param e
*/
var keydown = function (e) {
if (e.keyCode == 37) {
console.log("向左")
if( Number(mapDivEle.style.marginLeft.replaceAll("px", "")) < 0 ) {
mapDivEle.style.marginLeft = Number(mapDivEle.style.marginLeft.replaceAll("px", "")) + stepDistance + "px";
} else {
console.log("超出邊界")
}
} else if (e.keyCode == 38) {
console.log("向上")
if( Number(mapDivEle.style.marginTop.replaceAll("px", "")) < 0 ) {
mapDivEle.style.marginTop = Number(mapDivEle.style.marginTop.replaceAll("px", "")) + stepDistance + "px";
} else {
console.log("超出邊界")
}
} else if (e.keyCode == 39) {
console.log("向右")
if ( (parentDivEle.clientWidth) - mapDivEle.clientWidth + stepDistance <= Number(mapDivEle.style.marginLeft.replaceAll("px", ""))) {
mapDivEle.style.marginLeft = Number(mapDivEle.style.marginLeft.replaceAll("px", "")) - stepDistance + "px";
} else {
console.log("超出邊界")
}
} else if (e.keyCode == 40) {
console.log("向下")
if( (parentDivEle.clientHeight) - mapDivEle.clientHeight + stepDistance <= Number(mapDivEle.style.marginTop.replaceAll("px", "")) ) {
mapDivEle.style.marginTop = Number(mapDivEle.style.marginTop.replaceAll("px", "")) - stepDistance + "px";
} else {
console.log("超出邊界")
}
}
}
</script>
<body onkeydown="keydown(event)">
......
</body>
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅簡單介紹地圖的移動，后續(xù)以此為基本，實現(xiàn)地圖跟隨英雄人物動態(tài)移動功能。文章來源地址http://www.zghlxwxcb.cn/news/detail-650629.html
到了這里，關(guān)于[JavaScript游戲開發(fā)] 繪制Q版地圖、鍵盤上下左右地圖場景切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[JavaScript游戲開發(fā)] Q版地圖上讓英雄、地圖都動起來](https://imgs.yssmx.com/Uploads/2024/02/629190-1.png)
