心路历程之--egret 小游戏怎样才能和我的react界面交互啊

最新推荐文章于 2022-07-19 15:12:35 发布
最新推荐文章于 2022-07-19 15:12:35 发布
阅读量250 收藏
点赞数 1
分类专栏： debug 日志 文章标签： react.js 交互 前端 debug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52030069/article/details/123109347
版权
事情是这样的，我做了一个小游戏，并且打算在我的界面中可以用手势去控制小游戏中人物的行为，由于我的识别手势的界面是用react+ts搭建的，但是我的小游戏又是用egret去实现的，于是问题就来了：怎样才能把我手势识别出来的结果传递给小游戏呢？这个问题困扰了我一周之久，当然这是因为我学艺不精，但我觉得还是有必要把我的心路历程给分享出来一、iframe 传输数据由于我的小游戏是以本地形式放在iframe里的，于是自然而然的就想到用iframe传输数据，结果问题来了，虽然iframe是可以接收到数据，可.
摘要由CSDN通过智能技术生成

事情是这样的，我做了一个小游戏，并且打算在我的界面中可以用手势去控制小游戏中人物的行为，由于我的识别手势的界面是用react+ts搭建的，但是我的小游戏又是用egret去实现的，于是问题就来了：怎样才能把我手势识别出来的结果传递给小游戏呢？这个问题困扰了我一周之久，当然这是因为我学艺不精，但我觉得还是有必要把我的心路历程给分享出来

一、iframe 传输数据

由于我的小游戏是以本地形式放在iframe里的，于是自然而然的就想到用iframe传输数据，结果问题来了，虽然iframe是可以接收到数据，可是这个数据怎么去传递给整个框架呢，小游戏和react根本不是同一套东西，我又在网上搜索了“如何在egret中使用iframe接收数据"也是一无所获 。

二、egret.HttpRequest()接收数据

无意间在egret的文档中看到这一条，想着既然是网络，那我是不是可以通过网络传输数据呢，我还去仔细又研究了一遍json，弄清楚了如何发送请求，如何得到请求的结果等问题，可是，既然是由egret发送请求去得到结果，那么结果又是怎么存在的呢，我怎么用react把识别到的结果放到一个特定的地方然后再用egret去得到呢。难不成我还要数据库？况且网络请求肯定有延迟，这根本就做不到实时互动，于是这个计划又泡汤了。

三、文件读取

这时候我已经走偏了，甚至想去做文件读写了。我想是否可以react去写一份文件然后egret去读那份文件，但很明显这已经超出了我的知识范围。

四、键盘事件

既然看起来他们通过数据交互是不太可能的了，那不如各玩各的。我打算给小游

最低0.47元/天 解锁文章
Ant_ony
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
一看就会的 egret 入门教程
weixin_33849215的博客
03-13 1990
egret 是啥 egret 是一个用来帮你开发 H5 游戏的利器。也许你曾经用原生 js 写过一些小游戏，但是效率极低；也曾用 createjs 写过，但复杂起来也是力不从心，这时我们就需要学会用高级点的工具
egret键盘pc端事件监听
sxtaosdo的博客
02-16 6497
最近看egret没有监听键盘事件的方法，就自己写了一个 比较简单，只有两个公共方法 addListener//添加监听 removeListener//移出监听 class PcKeyBoardHelper { private static _instance: PcKeyBoardHelper; private list: Object;
egret 使用frame转载
kings_zqz的专栏
11-13 503
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/xiaoyang0611/article/details/49128077 egret的WebView实现（基于egret2.5） 标签（空格分隔）： egret webview 客户端开发中有一种很常见的场景就是展现web页面，也就是 W...
egret键盘事件监听
weixin_30387663的博客
03-28 1242
document.addEventListener("keydown", function (event: any) { //alert(event.key); //console.log(event.keyCode);//ASCII码 if (event.key == "1...
ivx杨帆启航React/Pixi.js/FaaS、Krpano及微服务架构
qq_46906413的博客
07-19 9553
随着社会的变化，产业的进化，编程也开始了他的变化。从最开始的二进制编码语言->低级程序语言，到现在的高级编程语言以及现在慢慢探索超高级高级语言【程序可视化，可视化编程，让编程不再枯燥】。那么是不是只要能看懂界面就可以进行编程，写出自己的小程序了呢，下面我们来一起来看看ivx。......
egret-game:egret 连连看小游戏
05-13
egret连连看小游戏 特色 关卡定制，每个关卡要清除的元素和背景图都不一样 主要功能 解锁和选择关卡、元素 游戏道具 游戏商城 游戏关卡 存储 部分截图 demo展示
egret-games:egret开发的小游戏集合
05-17
Egret Games是一款基于Egret Engine开发的小游戏合集，主要包含了“打飞机”、“成语大挑战”和“赛车”三款游戏。Egret Engine是一个强大的HTML5游戏开发框架，它采用TypeScript语言，支持2D和3D游戏开发，并且能够...
uni-app 实现小程序 仿微信 我的界面
最新发布
03-30
【uni-app实现小程序：仿微信“我的”界面详解】 在移动应用开发领域，uni-app是一个备受推崇的跨端框架，它允许开发者用一套代码编写应用，同时发布到多个平台，如微信小程序、支付宝小程序、H5、App等。本教程将...
egret-spine:Egret的Spine运行时
05-06
正在安装考虑到Egret不使用模块，正式的spine核心运行时也没有，该运行时目前也没有。 请参阅以集成到Egret项目。 或者，如果您仅打算为Web构建，则将.js文件包含在HTML中，例如： < script src =" libs/egret-...
egret 小游戏.zip
11-21
- **Egret Whiteboard**：一个基于Egret的可视化编辑器，用于快速搭建游戏界面。 - **Egret 3D**：扩展库，支持3D图形渲染，为游戏增加更多维度的表现力。 - **Egret Ticker**：性能优化工具，用于监控游戏运行时...
egret工具：事件监听管理器
04-02
src.zip中包含：DelegateUtil.ts ，Dictionary.ts ，BC.ts，Main.ts DelegateUtil.ts 函数代理，方便传递参数和函数执行空间地址，包含原始参数和附加参数。 Dictionary.ts 支持存取少量的“对象”来当作存储数据的key. 重点见介绍下面的类，养成习惯模块销毁时用一句 BC.removeEvent(this)；可以有效防止出现遗漏移除的监听. 还有BC.addOnceEvent(...)；方法是也是懒人必不可少的方法。 BC类在actionscript中已经用了将近8年了，版本陆陆续续改过5次，这几天根据ts的特性修改了一个版本，值得推荐给大家。 BC.ts : 支持模糊移除事件，“BC.removeEvent(this, ”后面3个参数为模糊参数，可有可无，明确的参数必须相等才会移除. * 000 删除所有关于监听者的所有事件,通常在类销毁时使用一次 BC.removeEvent(this); * 001 指定相同回调函数的所有监听 BC.removeEvent(this,null,null,func); * 010 指定事件名的所有监听 BC.removeEvent(this,null,Event.COMPLETE,null); * 011 指定事件名，指定回调函数的所有监听 BC.removeEvent(this,null,Event.COMPLETE,func); * 100 删除指定通知者 和 监听者之间的所有监听 BC.removeEvent(this,dispatch,null,null); * 101 删除通知者 和 监听者之间使用同一回调函数的所有监听 BC.removeEvent(this,dispatch,null,func); * 110 删除通知者 和 监听者之间指定事件的所有监听 BC.removeEvent(this,dispatch,Event.COMPLETE,null); * 111 明确删除指定的事件监听 BC.removeEvent(this,dispatch,Event.COMPLETE,func); 代码： class Main extends egret.DisplayObjectContainer{ //申明一个广播对象“dispatchSprite” private dispatchSprite: egret.Sprite; public constructor() { super(); //字典使用对象作为key引用存储数据.对象作为key实际上需要进行遍历索引，所以在同一个字典中尽量不要添加过多的key会影响性能. var dic: Dictionary = new Dictionary(); var arr1: string[] = ["我是数组"]; var obj2: any = { name: "我是对象" }; var str3: string = "我是字符"; //添加到字典 dic.add(arr1, arr1); dic.add(obj2, obj2); dic.add(str3, str3); //打印字典内部的数据 dic.dump(); //申明一个广播对象“dispatchSprite” this.dispatchSprite = new egret.Sprite(); //添加一个自动会移除监听事件 BC.addOnceEvent(this, this.dispatchSprite, egret.Event.ENTER_FRAME, this.onEnterFrameOnce); //创建和监听一个Timer事件 var timer: egret.Timer = new egret.Timer(50); BC.addEvent(this, timer, egret.TimerEvent.TIMER, this.onEnterTimer); timer.start(); } /** * dispatchSprite的帧事件 */ public onE
使用iframe的好处与坏处详细比拼
weixin_30706507的博客
01-23 344
一、使用iframe的坏处 1.搜索引擎的蜘蛛不会识别在iframe中被调用的图片、文本、url等内容的，因为该内容不属于该页面，只是访问的时候被临时的调用，而且在SEO建议中也有提到：“frame/frameset/iframee标签,会导致百度spider的抓取困难,建议不要使用”这样更能证明其弊! 2.虽然使用iframe标签有它的好处，但是在页面中不是使用越多就越好，...
【Egret】里使用iframe标签达到内嵌多个web界面
weixin_30892889的博客
05-17 625
目的：Egret里使用iframe标签达到内嵌多个web界面，模式相当于主swf调用N个子swf的效果； 目前在做项目过程中，在使用iframe的时候，碰到了一些功能需求，以及解决方法如下： 一、.在index.html里添加iframe标签， 在index.html的<body>标签下，添加iframe标签，包括：路径，宽，高，坐标X，Y，是否出现滚动条，等属性； 想...
使用TypeScript编写React
热门推荐
hsany330的专栏
11-09 1万+
缘由 最近在业余学习React，本身接触的egret一年多了，接触TypeScript时间还算有段时间，非常喜欢TypeScript。学习了TypeScript 就再也不想写JavaScript了。看了找了好些教程都是直接用JavaScript来写React,比较痛苦。今天找到了一篇比较好的教程。于是就想翻译一下，这里是 原始博客链接 ，于是就有了这篇博客。 简单的介绍使用TypeSc
egret 入门 初试
夏天的树人的专栏
04-25 8843
整理的文章《白鹭引擎入门》趁着今天周六，把苹果放下一边先。今天早上一醒来就装上了js编辑神器Webstorm ，最近也开始关注了一些移动方面的 js 前端框架。如 谷歌的Angularjs 和 fackbook 的Reactjs，这两大强势框架给人印象很深刻。过去基本上很少写js，之前因为nodejs出现开始关注这方面的资料。Html5慢慢让人接受了到尝试了在一些应用上使用。7yue大人们也开始忙碌
React入门基础-使用篇
weixin_43506403的博客
08-02 267
React 是什么？ React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、主要用于构建UI界面，Instagram，2013年开源。 React 的特点： 1、声明式的设计 2、高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。 3、灵活，跟其他库灵活搭配使用。 4、JSX，俗称JS里面写HTML，JavaScript语法的扩展。 5、组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react 6、单向数据流。没
react组件基本使用（typescript）
米斯特尔曾的博客
12-04 6162
如果是用JavaScript开发可以忽略一切typescript的东西也是可以照常执行的 新建一个组件 interface Component&lt;P = {}, S = {}, SS = any&gt;{ // ..... } 组件基类的接口定义，P表示props，S表示state，SS未知,默认可以啥也不传 新建 import React, { Component } from 'r...
Egret开发《消灭方块》后记（三）点击事件那点事
互联网开发技巧
09-19 3835
1
键盘侦听事件
却在奔跑的博客
07-15 581
在cocos中运用到比较多的玩家交互功能就是点击事件了。点击事件就是当鼠标点击的事件执行某个动作。除了鼠标点击事件之外还有键盘的侦听事件。和点击事件类似，存在默认的几个方法名，onKeyPressed,当键盘按下的时候，onKeyreleased,当键盘松开的时候。 例如：steInputControl:function(){ var self = this; //添加
egret 微信小游戏代码分包
10-01
Egret 微信小游戏中，当游戏的代码变得较大时，可以使用代码分包来进行管理和优化。代码分包可以将游戏中的代码按需加载，减少游戏的初始加载时间和包的大小。 首先，我们需要在 Egret 项目的 resource 文件夹下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值