Phaser游戏框架与HTML Dom元素之间的通信交互

xiaowugui666 发布于2019-08-30 15:55 / 2287人阅读

摘要：本想按照的元素官方实例来创建元素，但一直提示错误，无奈直接用的语法来创建元素，然后在内获取该元素，也不用再使用第三方的插件，还是挺方便快捷的。按照这个思路，还可以创建等一系列元素，然后再在内操作其对应的就可以了，而至于元素则用监听即可。

本想按照PHASER的HTML Dom元素官方实例：http://labs.phaser.io/index.h... Canvas来创建HTML DOM元素，但this.add.dom 一直提示错误，无奈直接用HTML5的语法来创建DOM元素，然后在Phaser内获取该DOM元素，也不用再使用第三方的Phaser Html Input插件Plugin，还是挺方便快捷的。

按照这个思路，还可以创建listView,ScrollView等一系列HTML Dom元素，然后再在Phaser内操作其对应的div ID就可以了，而至于BUTTON元素则用addEventListerner监听即可。

HTML代码

PHASER 代码

 //MARK:-- create element
    createBetElement: function () {
        document.getElementById("gameBetZone").style.display = "none"; // block
        document.getElementById("rowBet").style.display = "block";
        document.getElementById("rowSearching").style.display = "none";
    }

// 取得输入框 amount的值
this.amountEle = document.getElementById("amount");
this.betButton = document.getElementById("betButton");
me.betButton.addEventListener("click", myClickEvent, false);
function myClickEvent() {
           
            // REMOVE EXISTING BUTTON EVENT;
            me.betButton.removeEventListener("click", myClickEvent, false);
            //TODO:sending this value to server;
            console.log("me.amountEle.value$", me.amountEle.value);
          
        }

更多游戏教程：www.iFIERO.com -- 为游戏开发深感自豪

专线服务云服务器大数据与共享经济之间的联系 html5与js交互 html5元素与标签 DOM交互操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117160.html

Phaser游戏框架与HTML Dom元素之间的通信交互

摘要：本想按照的元素官方实例来创建元素，但一直提示错误，无奈直接用的语法来创建元素，然后在内获取该元素，也不用再使用第三方的插件，还是挺方便快捷的。按照这个思路，还可以创建等一系列元素，然后再在内操作其对应的就可以了，而至于元素则用监听即可。本想按照PHASER的HTML Dom元素官方实例：http://labs.phaser.io/index.h... Canvas来创建HTML DO...

Neilyo 2019-08-02 14:00 评论0 收藏0
Phaser游戏框架与HTML Dom元素之间的通信交互

摘要：本想按照的元素官方实例来创建元素，但一直提示错误，无奈直接用的语法来创建元素，然后在内获取该元素，也不用再使用第三方的插件，还是挺方便快捷的。按照这个思路，还可以创建等一系列元素，然后再在内操作其对应的就可以了，而至于元素则用监听即可。本想按照PHASER的HTML Dom元素官方实例：http://labs.phaser.io/index.h... Canvas来创建HTML DO...

Freelander 2019-08-05 15:53 评论0 收藏0
SegmentFault 技术周刊 Vol.24 - “游戏” 已启动：Are you ready?

摘要：仅支持开发游戏，因为专注，所以高效。游戏相关的一些概念画布一般来说，做游戏的话基于会比基于性能要好很多，尤其是涉及大量动画的情况下。游戏即将开始这一节我们来完成游戏最核心的场景。我们首先布置了游戏场景，加入了背景音乐。 showImg(https://segmentfault.com/img/bVOxvd?w=900&h=385); 今天是六一国际儿童节，祝小伙伴们六一快乐！本期技术周...

dockerclub 2019-08-05 11:19 评论0 收藏0
游戏开发

摘要：工欲善其事必先利其器游戏环境对比发表算法在游戏上超过人类之后，游戏研究迅速成为了研究热点。当然这不是网络游戏服务器架构概述一架构模型现代电子游戏，基本上都会使用一定的网络功能。每个程序员都需要知道一些游戏网络知识本文主要针对游戏的网络设计，在文章中目前主流的网络游戏实现方案都有讲解。从Peer-to-Peer 帧同步，客户端/服务器（c/s架构），客户端预测（Client-Side...

Enlightenment 2019-08-21 18:45 评论0 收藏0
从零到一：用Phaser.js写意地开发小游戏（Chapter 1 - 认识Phaser.js）

摘要：由于公司项目转型，需要创造一个小游戏平台，需要使用一个比较成熟的前端游戏框架来快速开发小游戏。仅支持开发游戏，因为专注，所以高效。早在年的光棍节前一天晚上，这个游戏就诞生了。原型是一个之前很火的非常魔性的小游戏，叫寻找程序员。 showImg(https://segmentfault.com/img/bVMGY5?w=900&h=500); 写在前面实际上我从未想过我会接触到H5小游...

Ashin 2019-08-05 11:10 评论0 收藏0