当前位置: 首页 > 知识库问答 >
问题:

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函数用于更新游戏逻辑,然后加了一个循环不断地对画质帧数一类的进行更新。

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

 类似资料:
  • 2024.02.26 一面 谈谈两个印象深刻的项目 css隐藏元素的几种方式 通过link引入样式和import有什么区别 跨域是如何产生的,该如何解决跨域 vue缓存数据和组件的方式 面试官只问了几个问题,相对简单。

  • 缘起 我记得自己很小的时候(大概3岁还是4岁),我爸喜欢用红白机玩坦克大战和魂斗罗。但是我妈不喜欢,她认为打游戏会影响休息,而且伤眼睛,还减少电视机的寿命。我印象里面他们为此吵过架,我妈赢了,还把游戏机摔坏了,我们就没得玩了。 直到再后来我快10岁,我爸以学电脑、练五笔打字为由,又弄回来一台小霸王学习机。放假的时候我们爷俩终于又可以一起通关魂斗罗了。但是平时我妈依然不让我玩,而且这次我爸也跟她站在

  • 背景:广州某山旮旯本科 计算机专业 长时间摆烂 0实习经验 但是有几段工作经历(要是有大佬无意看到了这篇文章也别喷我,就记录一下 因为专业问题,之前投的都是开发岗,在冰川二面的时候寄了,感觉自己还是不太适合做开发,编码能力差点意思,加上自己还是倾向于在游戏公司工作。 5.25在boss投的3k运营岗(校招),6.7的时候HR通知简历初筛过了,需要做一份巨兽战场的游戏体验报告,为期三天,8号正式拉群

  • 不知道为啥在****上投了一万个数据分析岗没回应,结果多益的hr直接找上来问我对游戏玩的多不多,对游戏策划感不感兴趣,莫名其妙的就投了简历,填完了测评(看别人都说有些都乱填,就我兢兢业业填了快一千多个字?),明天笔试不知道考啥 多益很缺策划?鼠鼠就一破打游戏的能面游戏策划吗? 8.5一面(面试官的麦经常会听不清,反问了好几次,然后回答问题的时候眼睛不由自主往左下瞄,我也不知道为啥,下次屏幕中间贴个

  • 你好,所以我只能看到子弹,当我关闭我的游戏的窗口,但我没有看到错误。导入py游戏,数学,随机,操作系统pygame.init()时钟=pygame.time.时钟()宽度=800高度=608屏幕=pygame.display.set_mode((宽度,高度))运行=真正的游戏结束=假水平=假水平=0费迪格=假跳转=假

  • 好吧,首先,我想让你们知道,我已经一年多没有使用python了,所以如果答案很明显,我只是愚蠢,那么请原谅我的无知哈哈。 接下来,我正在创建一个太空入侵者类型的游戏,除了从主屏幕切换到游戏屏幕外,一切都进行得很顺利。这可能只是我用来改变屏幕的方法,但我以前在其他程序中使用过这种方法,从来没有出现过任何问题。或者可能只是试图同时运行太多进程。不管怎样,我找不到任何类似的问题,所以我求助于寻求帮助。