【前端网页游戏开发】PixiJS开发2D闯关打怪游戏

概要

PixiJS是一个强大的2D渲染库，它使用WebGL来加速渲染，让开发者能够创建丰富且高效的2D图形和动画。PixiJS提供了易于使用的API，使得开发者能够轻松地创建和管理场景、精灵（Sprite）、纹理（Texture）和其他图形对象。同时，PixiJS还支持多种输入方式，包括鼠标和触摸事件，使得开发者能够创建具有交互性的2D应用和游戏。

在PixiJS中，精灵（Sprite）是最基本的图形单元，它们通常使用图像（例如PNG或JPG文件）作为纹理。平铺精灵（TilingSprite）是一种特殊的精灵，它允许开发者使用单个纹理来填充一个指定大小的区域，并且可以通过改变纹理的偏移量来实现滚动或动画效果。这使得平铺精灵非常适合用于创建背景或重复的图案。

游戏描述

2D闯关类游戏，目前只开发了一部分内容，人物行走，地图展示，人物攻击等，后面内容持续更新

开局先加载地图和任务和怪物模型

const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, background: 'white' })
container.value.appendChild(app.view)

let groundSprite = new GroundSprite(app)
app.stage.addChild(groundSprite.container)

let personSprite = new PersonSprite()
app.stage.addChild(personSprite.container)
hp.value = personSprite.hp

setInterval(() => {
    if (enemySpriteList.value.length < 5) {
        let enemySprite = new EnemySprite()
        app.stage.addChild(enemySprite.container)
        enemySpriteList.value.push(enemySprite)
     }
}, 5000)

人物攻击动作展示

if (e.key == 'j') {
            personSprite.attack()
            enemySpriteList.value.forEach(enemySprite => {
                let isBump = b.hit(personSprite.container, enemySprite.container)
                if (isBump) {
                    enemySprite.hurt()
                }
            })
            return
}

人物移动展示

任务移动，使用键盘事件判断按键输入，然后控制任务的坐标，并且切换跑步动画

window.addEventListener('keydown', e => {
        if (isDead.value) return
        keySet.add(e.key)
        let arr = Array.from(keySet)
        if (arr.includes('w') || arr.includes('s') || arr.includes('a') || arr.includes('d')) {
            e.preventDefault()
            num += 1
            if (num == 1) {
                personSprite.container.textures = personSprite.runTexture
                personSprite.container.play()
            }
        }
        if (arr.includes('a')) {
            personSprite.container.anchor.set(1, 0)
            personSprite.container.scale.x = -1
            if (groundSprite.container.tilePosition.x < 0) {
                groundSprite.container.tilePosition.x += 10
                enemySpriteList.value.forEach(enemySprite => {
                    enemySprite.container.x += speed + 3
                })
            }
        }
        if (arr.includes('w')) {
            if (groundSprite.container.tilePosition.y < 0) {
                groundSprite.container.tilePosition.y += 10
                enemySpriteList.value.forEach(enemySprite => {
                    enemySprite.container.y += speed + 3
                })
            }
        }
        if (arr.includes('s')) {
            let bottom = groundSprite.container.height - groundSprite.container.texture.height / 2
            if (groundSprite.container.tilePosition.y > bottom) {
                groundSprite.container.tilePosition.y -= 10
                enemySpriteList.value.forEach(enemySprite => {
                    enemySprite.container.y -= speed + 3
                })
            }
        }
        if (arr.includes('d')) {
            let right = groundSprite.container.width - groundSprite.container.texture.width / 2
            if (groundSprite.container.tilePosition.x > right) {
                groundSprite.container.tilePosition.x -= 10
                enemySpriteList.value.forEach(enemySprite => {
                    enemySprite.container.x -= speed + 3
                })
            }
        }
        if (arr.includes('w') && arr.includes('d')) {
            personSprite.container.x += speed
            personSprite.container.y -= speed
        } else if (arr.includes('w') && arr.includes('a')) {
            personSprite.container.x -= speed
            personSprite.container.y -= speed
        } else if (arr.includes('s') && arr.includes('d')) {
            personSprite.container.x += speed
            personSprite.container.y += speed
        } else if (arr.includes('s') && arr.includes('a')) {
            personSprite.container.x -= speed
            personSprite.container.y += speed
        } else if (arr.includes('w') && !arr.includes('s')) {
            personSprite.container.y -= speed
        } else if (arr.includes('a') && !arr.includes('d')) {
            personSprite.container.x -= speed
        } else if (arr.includes('s') && !arr.includes('w')) {
            personSprite.container.y += speed
        } else if (arr.includes('d') && !arr.includes('a')) {
            personSprite.container.x += speed
        }
        if (personSprite.container.y < 350) {
            personSprite.container.y = 350
        }
        if (personSprite.container.y > groundSprite.container.height - 230) {
            personSprite.container.y = groundSprite.container.height - 230
        }
        if (personSprite.container.x < 50) {
            personSprite.container.x = 50
        }
        if (personSprite.container.x > groundSprite.container.width - 100) {
            personSprite.container.x = groundSprite.container.width - 100
        }
    })

使用技术

• 包管理器使用 Vite
• 使用技术HTML5，CSS，JS，Vue
• 游戏引擎，PixiJS

小结

感兴趣可以关注收藏，后面持续更新内容，本博客做学习记录