awa1024 2025-08-06 12:26 采纳率: 100%
浏览 7
已结题

emscripten无法使用虚拟按键

我在用emscripten移植一款cpp编写的游戏，编译为js后可以显示画面。后来我加了移动端适配，就是在左下角加了四个虚拟按键，但是这是个按键死活用不了，改了又改都不行。求解，我到底踩了什么坑啊。。
github.com/turkey1024/LastTrainHome

  • 写回答

3条回答 默认 最新

  • 檀越@新空间 2025-08-06 12:27
    关注

    中午好🌞🌞🌞
    本答案参考通义千问

    你提到的问题是关于 Emscripten 移植游戏时虚拟按键无法使用，这是一个常见的移动端适配问题。根据你的描述和提供的 GitHub 项目链接（turkey1024/LastTrainHome），我们可以从以下几个方面进行排查和解决。

    ✅ 问题分析

    在 Emscripten 中，HTML5 和 JavaScript 的事件机制与原生 C++ 的输入处理不同，你需要通过 JavaScript 来监听触摸事件，并将这些事件传递给 C++ 代码。你可能没有正确地将触摸事件绑定到 C++ 的输入系统中，或者事件未被正确解析。

    此外，虚拟按键（如左下角的按钮）需要通过 HTML 元素实现，并且需要将其点击事件与 C++ 的输入逻辑连接起来。

    🔧 解决方案步骤

    1. 确认触摸事件是否被正确捕获

    确保你已经在 HTML 页面中添加了对触摸事件的支持，比如：

    <script>
    document.addEventListener('touchstart', function(e) {
        // 将触摸点信息传给 C++
        Module.ccall('handleTouchStart', null, ['number', 'number'], [e.touches[0].clientX, e.touches[0].clientY]);
    });

    document.addEventListener('touchend', function(e) {
        Module.ccall('handleTouchEnd', null, ['number', 'number'], [e.changedTouches[0].clientX, e.changedTouches[0].clientY]);
    });
</script>

    注意： Module 是 Emscripten 编译后生成的模块对象，ccall 用于调用 C++ 函数。

    2. 将虚拟按键的点击事件绑定到 C++ 输入函数

    如果你已经创建了虚拟按键的 HTML 按钮元素，例如：

    <div id="virtual-button" style="position: absolute; left: 20px; bottom: 20px;">A</div>

    你可以这样绑定点击事件：

    <script>
    document.getElementById('virtual-button').addEventListener('click', function() {
        Module.ccall('handleVirtualButtonPress', null, [], []);
    });
</script>

    然后在 C++ 中定义对应的函数：

    extern "C" {
    void handleVirtualButtonPress() {
        // 处理虚拟按键逻辑
        printf("Virtual button pressed!\n");
    }
}

    3. 检查 C++ 输入逻辑是否接受外部输入信号

    确保你的 C++ 游戏逻辑中有如下部分：

    • 虚拟按键触发后，能够更新游戏状态或触发动作。
    • 如果你使用的是 SDL 或 GLFW 等库，请确认它们是否支持触摸事件或虚拟按键模拟。

    4. 调试建议

    a. 使用控制台输出调试

    在 C++ 中加入 printf 或 std::cout 输出关键逻辑，确认函数是否被调用。

    b. 使用浏览器开发者工具

    打开浏览器的 开发者工具 (F12)，查看是否有 JavaScript 错误或事件未被触发。

    c. 检查 HTML 元素是否被正确渲染

    确保虚拟按键的 HTML 元素确实出现在页面上，并且没有被其他元素覆盖。

    🛠️ 示例代码片段（修改后的）

    HTML 部分（添加虚拟按键）

    <!DOCTYPE html>
<html>
<head>
    <title>LastTrainHome</title>
</head>
<body>
    <canvas id="canvas"></canvas>

    <!-- 虚拟按键 -->
    <div id="virtual-button" style="position: absolute; left: 20px; bottom: 20px; width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 80px; font-size: 20px;">A</div>

    <script src="your_game.js"></script>
    <script>
        document.getElementById('virtual-button').addEventListener('click', function() {
            Module.ccall('handleVirtualButtonPress', null, [], []);
        });
    </script>
</body>
</html>

    C++ 部分（添加虚拟按键回调）

    // 在你的主循环或输入处理部分
extern "C" {
    void handleVirtualButtonPress() {
        // 这里是你想执行的游戏逻辑
        std::cout << "Virtual button pressed!" << std::endl;
        // 可以在这里设置一个标志位，让游戏知道按键被按下
        g_virtualButtonPressed = true;
    }
}

    ⚠️ 常见坑总结

    | 问题 | 原因 | 解决办法 | |------|------|----------| | 虚拟按键无效 | 未绑定点击事件或未调用 C++ 函数 | 使用 ccall 调用 C++ 函数 | | 触摸事件未响应 | 未监听 touchstart / touchend | 添加事件监听器并传递坐标 | | C++ 未接收输入 | 输入逻辑未更新 | 在 C++ 中处理输入并更新游戏状态 |

    📁 参考资源

    如果你能提供具体的 C++ 代码或 HTML 结构，我可以进一步帮你定位具体问题所在。希望这些建议对你有帮助！

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • JavaScript仿真器项目集合：跨平台编程的探索
    2024-11-09 16:18
    DataInnovator的博客 简介：JavaScript不仅适用于网页开发，还可用来创建计算机系统和游戏机的...Emscripten编译器使得C和C++代码可以被转译为JavaScript，为开发者提供了一种将仿真器核心移植到Web环境的手段。本集合提供一系列...
  • OpenGL_CMake_Skeleton：跨平台OpenGL应用的快速开发框架
    2025-07-29 04:02
    codingdie的博客 GLFW是一个开源、跨平台的库，用于管理...OpenGL易用性扩展库（Graphics Library Extension Wrangler，简称GLEW）是一个用于管理OpenGL扩展的C/C++库，其主要目的是提供一个跨平台的方式加载和使用OpenGL的扩展功能。
  • JavaScript 资源大全中文版
    2016-03-19 13:28
    郎涯技术的博客 它是声明式的、高效的和极度灵活的，并使用虚拟 DOM 作为其不同的实现。 官网 react-native：一个用 React 构建原生应用的框架。 官网 riot：类 React 库，但很轻量。 官网 thorax：加强你的 Backbone。 官网 ...
  • JavaScript资源大全中文版（Awesome最新版）
    2016-11-18 10:31
    码飞_CC的博客 它是声明式的、高效的和极度灵活的，并使用虚拟 DOM 作为其不同的实现。 官网 react-native：一个用 React 构建原生应用的框架。 官网 riot：类 React 库，但很轻量。 官网 thorax：加强你的 Backbone。 官网 ...
  • 基于WebAssembly的前端视频编辑器设计与实现（个人毕设论文删改）
    2021-09-09 19:39
    KinKey233的博客 基于WebAssembly的前端视频编辑器设计与...当前，人们可能为了使用一些简单功能而下载安装软件，然而使用这些功能的频率低，当不需要使用这些功能时，还需要手动卸载这些应用。如果，浏览器能运行这些功能，人们只需打
  • 前端常用js插件
    2021-01-14 16:03
    逆-血的博客 浏览目录包管理器加载器打包工具测试框架框架断言覆盖率运行器QA 工具MVC 框架和库基于 Node 的 CMS 框架模板引擎Flux数据可视化时间轴编辑器文件函数式编程响应式编程数据结构日期字符串数字存储颜色国际化和本地化...
  • Unity 3D 中的专业“术语表”。
    2020-11-29 23:03
    妙·缘的博客 无法直接测量参与度，但经常使用以下指标评估参与度：留存率、DAU、MAU、DAU/MAU、会话数量和会话长度。更多信息 F2P*： （免费游戏，Free to Play）这是一种商业模式，让用户免费访问游戏全部功能和大量应用程序...
  • javascript功能插件大集合，写前端的亲们记得收藏
    2019-10-09 08:52
    diaozhu1028的博客 它是声明式的、高效的和极度灵活的，并使用虚拟 DOM 作为其不同的实现。 •react-native – 一个用 React 构建原生应用的框架。 •riot – 类 React 库，但很轻量。 •thorax – 加强你的 Backbone。 •...
  • javascript功能插件大集合
    2019-10-06 14:44
    dengji1882的博客 它是声明式的、高效的和极度灵活的，并使用虚拟 DOM 作为其不同的实现。 •react-native – 一个用 React 构建原生应用的框架。 •riot – 类 React 库，但很轻量。 •thorax – 加强你的 Backbone。 •...
  • javascript功能插件大集合 前端常用插件 js常用插件
    2018-10-22 17:20
    weixin_34337381的博客 它是声明式的、高效的和极度灵活的，并使用虚拟 DOM 作为其不同的实现。 •react-native – 一个用 React 构建原生应用的框架。 •riot – 类 React 库，但很轻量。 •thorax – 加强你的 Backbone。 •chaplin – ...
  • 【干货】JavaScript 资源大全
    2019-04-25 12:49
    ShuYunBIGDATA的博客 它是声明式的、高效的和极度灵活的，并使用虚拟 DOM 作为其不同的实现。 react-native - 一个用 React 构建原生应用的框架。 riot - 类 React 库，但很轻量。 thorax - 加强你的 Backbone。 chaplin - ...
  • awesome-javascript
    2018-04-21 12:03
    weixin_30781107的博客 一系列令人敬畏的浏览器端JavaScript库，资源和闪亮的东西。 令人敬畏的JavaScript 包管理员 装载机 捆扎机 测试框架 ...功能编程 无功编程 数据结构 日期 串 数 存储 颜色 I18...
  • JavaScript 资源大全
    2018-02-06 17:13
    jackie_bobo的博客 它是声明式的、高效的和极度灵活的，并使用虚拟 DOM 作为其不同的实现。 官网 react-native：一个用 React 构建原生应用的框架。 官网 riot：类 React 库，但很轻量。 官网 thorax：加强你的 Backbone。 官网 ...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 8月16日
  • 已采纳回答 8月16日
  • 修改了问题 8月6日
  • 创建了问题 8月6日