簡介
????????EmulatorJS是一個基于JavaScript和Webassembly技術的虛擬環境的實現,可以在網頁中運行各種經典FC游戲系統,支持任天堂、世嘉、雅達利等經典紅白機。EmulatorJS的誕生使得諸如超級瑪麗、坦克大戰、魂斗羅等經典FC游戲能夠以一種全新的方式回歸。本文將以魂斗羅為例講述如何使用?EmulatorJS在網頁端實現經典FC游戲(僅供學習使用)。下載地址
一、創建游戲目錄
將Emulator解壓以后,進入games文件夾
在games文件夾中創建游戲目錄,本文以魂斗羅為例,顧創建了contra文件夾。如下圖所示:
二、添加游戲文件
將魂斗羅游戲文件contra.nes復制到contra文件夾中
三、創建游戲index.html
在contra文件夾中創建index.html文件,并編寫如下代碼:
<!DOCTYPE html>
<html><head><title>Contra</title><meta name = viewport content = "width = device-width, initial-scale = 1"><link rel = "stylesheet" type = "text/css" href = "../basesetting.css"><script src = "../basesetting.js"></script></head><body><script>const queryString = window.location.search;const urlParams = new URLSearchParams(queryString);let language = urlParams.get('language');//console.log('language:' + language);if (language === null || language === undefined) {language = "en-US"}window.onload = loadEvent("contra.nes",language);</script></body>
</html>
四、制作游戲圖標(可選)
可自行設計游戲圖標用于在自己的網站上展示游戲,可使用ico51來制作。
五、部署游戲
將emulator整個文件夾上傳到你網站的public或者根目錄下,訪問emulator/games/contra/index.html即可。需要注意的是,如果要在你的網頁中嵌入游戲頁面,則需要使用iframe標簽,否則可能出現CSS樣式污染。
<iframe src="/emulator/games/contra/index.html?language=zh-CN"></iframe>//language=zh-CN 表示模擬器將使用中文
//language=en-US 表示模擬器將使用英文
六、在線演示地址
https://potatoh5games.fun/gameEntrance/classic/h5contra.html
若要制作其他游戲,則重復第一到第五步,在第三步制作游戲入口Index.html時,需要將加載的游戲文件名替換為實際的游戲文件名稱
window.onload = loadEvent("contra.nes",language);// 在制作其他游戲入口時,contra.nes要替換為實際的游戲文件名稱,該處為魂斗羅游戲的示例