方法
所有方法都挂载于组件实例上,如果你使用TS,可以通过nes-vue提供的NesVueInstance获取实例类型。
vue
<script setup lang="ts">
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
import type { NesVueInstance } from 'nes-vue'
const nes = ref<NesVueInstance>()
</script>
<template>
<nes-vue
ref="nes"
url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
import type { NesVueInstance } from 'nes-vue'
const nes = ref<NesVueInstance>()
</script>
<template>
<nes-vue
ref="nes"
url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
/>
</template>start
开始游戏
ts
start(url?: string) => voidstart(url?: string) => voidstart的主要作用是让停止的游戏开始运行,一般不需要url参数 。
如果携带参数,且参数与当前游戏的URL不一致,就会切换游戏,但强烈建议不要这么做,切换游戏建议用props,重启游戏建议用reset
TIP
在大多数情况下,点击屏幕中间的文字(也就是label)即可开始游戏,不需要用start这个方法。
WARNING
如果你一定要用start来切换游戏, 那就必须使用 v-model 指令绑定url属性,这样在切换游戏后,nes-vue组件才会更新url的值。
reset
重启游戏。
ts
reset() => voidreset() => voidstop
停止游戏。
ts
stop() => voidstop() => voidpause
游戏暂停,可恢复。
ts
pause() => voidpause() => voidplay
恢复游戏。
ts
play() => voidplay() => voidsave
传一个任意id将存档保存与本地
WARNING
只有在游戏运行时才能存档、读档,读档还需要保证存档与游戏的一致性。
ts
save(id: string) => stringsave(id: string) => string默认情况下,存档是保存在 indexedDB,你可以设置storage属性让其保存在localStorage。
每个存档大约200kB,如果需要保存较多的数据,建议使用默认的 indexedDB。
load
读档
ts
load(id: string) => voidload(id: string) => void存档、读档示例:
vue
<script setup>
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
const nes = ref()
const id = 'example'
function save() {
// save state
nes.value.save(id)
}
function load() {
// load state
nes.value.load(id)
}
</script>
<template>
<nes-vue
ref="nes"
url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
width="512"
height="480"
/>
<button @click="save">Save</button>
<button @click="load">Load</button>
</template><script setup>
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
const nes = ref()
const id = 'example'
function save() {
// save state
nes.value.save(id)
}
function load() {
// load state
nes.value.load(id)
}
</script>
<template>
<nes-vue
ref="nes"
url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
width="512"
height="480"
/>
<button @click="save">Save</button>
<button @click="load">Load</button>
</template>vue
<script setup lang="ts">
import type { Ref } from 'vue'
import type { NesVueInstance } from 'nes-vue'
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
const nes = ref() as Ref<NesVueInstance>
const id = 'example'
function save() {
// save state
nes.value.save(id)
}
function load() {
// load state
nes.value.load(id)
}
</script>
<template>
<nes-vue
ref="nes"
url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
width="512"
height="480"
/>
<button @click="save">Save</button>
<button @click="load">Load</button>
</template><script setup lang="ts">
import type { Ref } from 'vue'
import type { NesVueInstance } from 'nes-vue'
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
const nes = ref() as Ref<NesVueInstance>
const id = 'example'
function save() {
// save state
nes.value.save(id)
}
function load() {
// load state
nes.value.load(id)
}
</script>
<template>
<nes-vue
ref="nes"
url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
width="512"
height="480"
/>
<button @click="save">Save</button>
<button @click="load">Load</button>
</template>getCurrentData()
remove
删除存档。
ts
remove(id: string) => voidremove(id: string) => voidclear
清空所有存档。
ts
clear() => voidclear() => voidgetCurrentData
获取实际存档数据,你可以将它保存于任意地方。
ts
interface SavedData {
hash: string
data: Uint8Array
}
getCurrentData() => SavedData | nullinterface SavedData {
hash: string
data: Uint8Array
}
getCurrentData() => SavedData | nullloadGameData
加载实际存档数据。
ts
loadGameData(savedData: SavedData) => voidloadGameData(savedData: SavedData) => voidscreenshot
截图
ts
screenshot(download?: boolean, imageName?: string) => HTMLImageElementscreenshot(download?: boolean, imageName?: string) => HTMLImageElement调用screenshot(true) 会在浏览器中开始下载游戏截图。
返回值是截图的image元素。
fm2URL
ts
fm2URL(url: string) => Promise<fm2Play>fm2URL(url: string) => Promise<fm2Play>读取*.fm2录像文件,见播放录像。
fm2Text
ts
fm2Text(text: string) => Promise<fm2Play>fm2Text(text: string) => Promise<fm2Play>读取*.fm2录像文件文本,见播放录像。
fm2Play
ts
fm2Play() => voidfm2Play() => void开始播放录像,见播放录像。
fm2Stop
ts
fm2Stop() => voidfm2Stop() => void停止播放录像,见播放录像。
cheatCode
ts
cheatCode(code: string) => voidcheatCode(code: string) => void添加金手指。见金手指。
cancelCheatCode
ts
cancelCheatCode(code: string) => voidcancelCheatCode(code: string) => void取消添加的金手指。见金手指。
cancelCheatCodeAll
ts
cancelCheatCodeAll() => voidcancelCheatCodeAll() => void取消所有添加的金手指。见金手指。