火星網(wǎng)校
js怎么開發(fā)游戲(怎樣用JavaScript開發(fā)一個(gè)Web版的迷宮游戲？這是第一講)
發(fā)布時(shí)間：2023-11-27 17:40:33 瀏覽量：110次
?怎樣用JavaScript開發(fā)一個(gè)Web版的迷宮游戲？這是第一講
為了減小篇幅，我計(jì)劃分2-3篇來寫，不足之處，歡迎指正。
在這里，我教大家如何實(shí)現(xiàn)一個(gè)簡單的迷宮游戲。這個(gè)迷宮很簡單，但可以玩。最終效果如下圖所示。
初始界面
挑戰(zhàn)成功界面
這是我?guī)啄昵皩懙挠螒?，代碼可能寫的不是很好，當(dāng)時(shí)用的語言是typescript，改成JS版很容易。
我是用畫布實(shí)現(xiàn)的，要實(shí)現(xiàn)這個(gè)游戲，主要需要這些步驟：
我們需要根據(jù)視口寬度，行數(shù)和列數(shù)，以及墻的厚度來生成迷宮。我們需要根據(jù)設(shè)備像素比來更新畫布的寬和高，并計(jì)算路的寬度。在這里，我將路稱為單元格。
private updateSize (options: UiOptions = {}) {
this.cols = options.cols || this.cols || 16
const width = this.cvs.offsetWidth * this.pixRatio
const maxWallWidth = width / (this.cols * 2 + 1)
const wallWidth = Math.min(maxWallWidth, options.wallWidth || this.pixRatio * 5)
const cellWidth = (width - (this.cols + 1) * wallWidth) / this.cols
const maxHeight = (this.cvs.parentElement?.offsetHeight as number) * this.pixRatio
const maxRows = Math.floor((maxHeight - wallWidth) / (cellWidth + wallWidth))
this.rows = Math.min(maxRows, options.rows || this.cols)
this.realRows = this.rows * 2 - 1
this.realCols = this.cols * 2 - 1
this.cellWidth = cellWidth
this.wallWidth = wallWidth
this.cvs.width = this.gameCvs.width = width
this.cvs.height = this.gameCvs.height = this.rows * (cellWidth + wallWidth) + wallWidth
}我們需要根據(jù)行數(shù)和列數(shù)，生成一個(gè)初始的網(wǎng)格，這個(gè)網(wǎng)格是一個(gè)二維數(shù)組，包含：墻和單元格。我們需要一個(gè)標(biāo)識(shí)，來確定格子的類型。
private genGrid () {
const grid: Block[][] = []
const { realRows, realCols } = this
for (let row = 0; row < realRows; row++) {
grid[row] = []
for (let col = 0; col < realCols; col++) {
grid[row][col] = {
row,
col,
type: row % 2 || col % 2 ? BlockType.WALL : BlockType.CELL
}
}
}
return grid
}有了尺寸和網(wǎng)格，我們還需要生成入口和出口位置。這個(gè)位置是根據(jù)列數(shù)，以及單元格和墻的寬度，隨機(jī)生成的。代碼如下：
private getStartPoint () {
const col = getRandInt(0, this.cols - 1)
const { cellWidth, wallWidth } = this
return {
x: (cellWidth + wallWidth) * (col + 1 / 2),
y: wallWidth + cellWidth / 2 - this.pixRatio / 2
}
}
private getEndPoint () {
const col = getRandInt(0, this.cols - 1)
const { cellWidth, wallWidth } = this
return {
x: (cellWidth + wallWidth) * col + wallWidth / 2,
y: this.cvs.height - this.wallWidth
}
}在迷宮圖中，我們的可移動(dòng)目標(biāo)是一個(gè)圓形物體。需要給它一個(gè)初始位置，這個(gè)位置就是入口。還需要提供一個(gè)半徑，用于繪制，這個(gè)圓的直徑必須小于單元格寬度。
this.ball = { ...this.startPoint, r: this.cellWidth * .32 }感謝閱讀！以上就是本篇文章的全部內(nèi)容，童鞋們都看懂了嗎？下篇文章，我將給大家講解迷宮圖的生成，以及怎樣在迷宮中移動(dòng)目標(biāo)，還會(huì)涉及到碰撞檢測等。
#頭條創(chuàng)作挑戰(zhàn)賽# #前端##程序員#
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設(shè)計(jì)領(lǐng)域和數(shù)字藝術(shù)教育的重要性，歡迎點(diǎn)擊咨詢報(bào)名。
-
2. 手機(jī)游戲如何開發(fā)(如何制作傳奇手游，都需要準(zhǔn)備些什么？)
?如何制作傳奇手游，都需要準(zhǔn)備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時(shí)代在進(jìn)步游戲在更新，更趨于方便化移動(dòng)化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費(fèi)、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費(fèi)、一鍵制作炫酷特效，適合新手小白。快來試試！
-
4. Steam值得入手的武俠游戲盤點(diǎn)，各具特色的快意江湖
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個(gè)抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結(jié)局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經(jīng)濟(jì)體系揭秘，不同玩家角色的經(jīng)濟(jì)活動(dòng)
Bigtime加密游戲經(jīng)濟(jì)模型分析，探討游戲經(jīng)濟(jì)特點(diǎn)，幫助玩家更全面了解這款GameFi產(chǎn)品。
-
6. 3D動(dòng)漫建模全過程，不是一般人能學(xué)的會(huì)的，會(huì)的多不是人?
步驟01:面部,頸部,身體在一起這次我不準(zhǔn)備設(shè)計(jì)圖片,我從雕刻進(jìn)入。這一次,它將是一種純粹關(guān)注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
7. 3D動(dòng)畫軟件你知道幾個(gè)?3ds Max、Blender、Maya、Houdini大比拼
當(dāng)提到3D動(dòng)畫軟件或動(dòng)畫工具時(shí),指的是數(shù)字內(nèi)容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術(shù)動(dòng)畫的軟件程序。但是,在3D動(dòng)畫軟件中還包含了其他類型的...
-
?三昧動(dòng)漫對(duì)于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應(yīng)并不會(huì)推出《巫師4》。因?yàn)椤段讕煛废盗性诓邉澋臅r(shí)候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
9. 3D打印技巧揭秘！Cura設(shè)置讓你的模型更堅(jiān)固
想讓你的3D打印模型更堅(jiān)固？不妨嘗試一下Cura參數(shù)設(shè)置和設(shè)計(jì)技巧，讓你輕松掌握！
-
10. Unity3D入門:手把手帶你開發(fā)一款坦克大戰(zhàn)的游戲
Unity工程創(chuàng)建完成后如圖所示: 接下來應(yīng)該導(dǎo)入此項(xiàng)目所需的Unity Package文件,要用到的Unity package文件大家可以去Unity3D的官方網(wǎng)站下載(地址:ht...
最新文章
