【前端网页游戏开发】PixiJS开发2D游戏，更新内容

新增内容

游戏内容新增主界面，以及设置按钮和音乐播放、网页全屏，增加游戏丰富性

效果

主界面背景为4张地图的图片，并且循环播放

主界面代码，开局先加载4张地图图片，然后用定时器循环判断，再修改背景图片backgroundPositionX属性值，移动图片的位置，当播放到第4张图片时回到第一张

<template>
    <div class="container" ref="container"
        :style="{ backgroundImage: `url('${imgList[index]}')`, backgroundPositionX: num + '%' }">
        <div class="title">
            【游戏名称】暂定
        </div>
        <div class="btn" @click="emit('start')">开始游戏</div>
        <div class="btn" @click="showAbout = true">关于</div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const emit = defineEmits(['start'])

const container = ref()

const index = ref(0)
const num = ref(0)
const imgList = [
    '/public/map/PNG/game_background_1/game_background_1.png',
    '/public/map/PNG/game_background_2/game_background_2.png',
    '/public/map/PNG/game_background_3/game_background_3.png',
    '/public/map/PNG/game_background_4/game_background_4.png',
]

const audioNo = ref(true)
const showAbout = ref(false)

function closeAudio() {
    audioNo.value = !audioNo.value
    if (audioNo.value) {

    } else {

    }
}

onMounted(() => {
    container.value.style.width = window.innerWidth + 'px'
    container.value.style.height = window.innerHeight + 'px'

    setInterval(() => {
        num.value += 1
        if (num.value == 100) {
            num.value = 0
            index.value += 1
            if (index.value == 4) {
                index.value = 0
            }
        }
    }, 50)
})

点击开始按钮后进入游戏

右上角新增设置按钮，点击可以关闭或开启背景音乐，可以全屏，可以回到主界面

小结

本博客作为学习记录，喜欢可以关注，后续继续开发游戏内容