问题：

javascript - 前端用什么包来运行以前游戏厅的街机游戏？看到很多网站都有各种平台的游戏，都是怎么做到的？

宋瀚海

2023-06-28

前端用什么包来运行以前游戏厅的街机游戏？看到很多网站都有各种平台的游戏，都是怎么做到的？

共有2个答案

刘琨

2023-06-28

一些常用的包有:

Phaser
CreateJS
Pixi.js
ImpactJS
LimeJS
GameMaker
还有其他的等等, 不要以为是街机游戏, 做法就不一样, 制作流程都是一样的,只是风格与玩法是街机的罢了
与其他的游戏没啥区别

邓业

2023-06-28

用Phaser，Canvas一类较多，我分别用phaser，canavas运行游戏举两个我写的示例你可以参考：

phaser：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="path/to/phaser.js"></script>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <script>
        // 创建游戏配置
        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            scene: {
                preload: preload,
                create: create,
                update: update
            }
        };

        // 创建游戏实例
        var game = new Phaser.Game(config);

        // 预加载资源
        function preload() {
            this.load.image('background', 'path/to/background.png');
            this.load.image('player', 'path/to/player.png');
            // 其他资源
        }

        // 创建场景
        function create() {
            this.add.image(0, 0, 'background').setOrigin(0, 0);
            this.player = this.add.sprite(400, 300, 'player');
            // 其他游戏对象的创建和设置
        }

        // 游戏更新逻辑
        function update() {
            // 游戏逻辑的更新处理
        }
    </script>
</body>
</html>

在config对象中定义了游戏的一些配置，包括画布的大小、场景的生命周期函数等。然后，我们创建了一个Phaser.Game实例并传入这些配置。然后在preload函数中，使用this.load方法加载游戏所需的资源，例如背景图像和玩家角色。然后，在create函数中，我们创建了游戏中的场景，并将加载的图像添加到场景中。同时自定义一个update函数中，我们可以编写游戏逻辑的更新代码。例如，处理玩家的输入、更新游戏对象的位置或状态等。

canavas：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

    <script>
        // 创建画布和上下文
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

        // 设置画布的宽度和高度
        canvas.width = 800;
        canvas.height = 600;

        // 游戏逻辑和渲染的更新函数
        function update() {
            // 更新游戏逻辑

            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 在画布上绘制游戏内容
            ctx.fillStyle = "red";
            ctx.fillRect(50, 50, 100, 100);
        }

        // 游戏循环函数
        function gameLoop() {
            requestAnimationFrame(gameLoop);

            // 更新游戏逻辑和渲染
            update();
        }

        // 启动游戏循环
        gameLoop();
    </script>
</body>
</html>

和上述代码类似，自定义一个update函数用于更新游戏逻辑，然后加了一个循环不断地对画质帧数一类的进行更新。

上述两个示例可以作为你对这个问题的大致理解和参考。

javascript - 前端用什么包来运行以前游戏厅的街机游戏？看到很多网站都有各种平台的游戏，都是怎么做到的？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档