本想按照PHASER的HTML Dom元素官方实例:http://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q= 来创建HTML DOM元素,但this.add.dom 一直提示错误,无奈直接用HTML5的语法来创建DOM元素,然后在Phaser内获取该DOM元素,也不用再使用第三方的Phaser Html Input插件Plugin,还是挺方便快捷的. 按照这个思路,还可以创建listView,ScrollView等

本文中phaser具体版本 phaser2:2.8.1 phaser3:3.17.0 一.实现效果二.实现细节三.项目总结四.参考文档 一.实现效果 源码地址(phaser2&phaser3):https://github.com/jinglecjy/phaser-dadishu/体验地址:https://jinglecjy.github.io/phaser-dadishu/ver-phaser2/dist/ 二.实现细节 这个demo其实是之前学习phaser2的时候做的,现在用来改成phas

Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希望大家看后也能做出自己的html5游戏.大家可以先点击这里来试玩一下我已经做好的这个游戏,感受一下Phaser的游戏效果,游戏的完整代码我已经放到github上了.支持的浏览器:IE9+.Firefox.Chrome.Opera.Safari以及移动端的能支持html5的浏览器,推荐使用谷歌浏览器,

Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希望大家看后也能做出自己的html5游戏.大家可以先点击这里来试玩一下我已经做好的这个游戏,感受一下Phaser的游戏效果,游戏的完整代码我已经放到github上了.支持的浏览器:IE9+.Firefox.Chrome.Opera.Safari以及移动端的能支持html5的浏览器,推荐使用谷歌浏览器,

Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希望大家看后也能做出自己的html5游戏.大家可以先点击这里来试玩一下我已经做好的这个游戏,感受一下Phaser的游戏效果,游戏的完整代码我已经放到github上了.支持的浏览器:IE9+.Firefox.Chrome.Opera.Safari以及移动端的能支持html5的浏览器,推荐使用谷歌浏览器,

首发:个人博客,更新&纠错&回复 phaser官方示例学习进行中,把官方示例调整为简明的目录结构,学习过程中加了点中文注释,代码在这里. 目前把官方的完整游戏示例看了一大半, breakout是敲砖块,gemmatch是钻石消除,invaders是小蜜蜂,matching是配对,simon是记忆游戏,sliding是拼图,starstruck类似超级马里奥,tanks是坦克游戏. 游戏场面上看,敲砖块.小蜜蜂是竖版,超级马里奥是横版,坦克游戏是俯瞰,钻石.配对.记忆.拼图这四个都是棋盘.

/** * #这是一个对jQuery.isPlainObject(obj)稍加修改的方法. 一个 普通对象 obj.toString() => "[object Object]" * This is a slightly modified version of jQuery.isPlainObject. A plain object is an object whose internal class property is [object Object]. * @method P

前言 这一章节介绍 DOM, 使用 DOM 的目的是使的网页能够变得 dynamic,使得 pages that react, that respond, that update themselves after they've been loaded. 什么是 DOM ? 结构: 以 document 开始,接下来是 这个element,接下来是 和 这两个 element,不断内嵌深入. 定义: When you load a page into the browser, ont only

第五章 网页交互——文本对象模型[Document object model] 1 简单介绍DOM,dom是将html与javascript进行交互的工具. [使用innerHTML时注意:html中的内容是按照HTML本身的先后顺序加载的.故js对应代码应置于html之后] 问题: *document.getElementById时,id不存在返回null,存在返回对应字符串: *planet.innerHTML其中innerHTML属性可以修改字符串的内容: *getElementsByCl

Phaser是一个流行的2D开源游戏框架,可以用来开发桌面或手机浏览器HTML5游戏,适合侧视或顶视风格: Phaser同时支持Canvas和WebGL渲染引擎,预置了完备的精灵动画.输入 管理.瓦片地图.补间动画.资源加载器.物理系统.粒子系统等特性,几乎能够 满足你开发一个2D游戏的任何需求: Phaser最值得称道的是它的插件机制,以及由此而衍生出的Phaser生态 社区.例如,借助于isometric插件,你可以开发出具有(伪)3D效果的游戏: Phaser的下一个版本是3.0(刚发布)

这篇博客主要讲一下上一篇博客的右侧和底部出现的问题.就是页面会有偏移量.说一下这个产生的原因吧. 一开始在构建html页面的时候,习惯性的在页面中加了 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 加了这个,导致canvas画出的图在移动端上有些模糊,尤其是后面我们在画

你已经了解了HTML标记(也称为结构),而且知道了CSS样式(也称为表示),剩下的就是Javascript(也称为行为). JavaScript的工作方式 1. 编写 你创建HTML标记和JavaScript代码,并把它们放在文件中,比如说index.html和index.js(或者,也可以都放在HTML文件中). 2. 加载 浏览器获取并加载你的页面,从上到下解析它的内容.遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码.浏览器还会建立HTML的一个内部模型,称为DO

前言 最近公司做项目的时候正好使用到phaser,在这里做一下自己整理出来的一些心得,方便大家参考,phaser这一个游戏引擎通常是做2d游戏的,入门也非常简单,只需你会一点的javascript,但是你想做一个比较完美的游戏的话,那么光靠一点点的javascript是远远不够的,本篇博客将快速带你入门phaser. phaser简介 phaser是一款快速,免费及开源HTML5游戏框架,它支持WebGL和Canvas两种渲染模式,可以在任何web浏览器环境下运行,游戏可以通过第三方工具转为iO

 写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 既

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator

1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.href = url } 通过顶层框架的判断,得知自己所在的框架是否是顶层框架.来判断自己页面所在的情况. 知识点:不同域中的iframe不能相互访问. 比如我们的页面在别人的页面iframe中,我们的页面跟别人的页面就在不同的域中. 这时候我们通过window.top.location是无法访问loc

DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系统的讲解下DOM的相关知识,如有遗漏或错误,还请大家指出一起讨论^ ^. 一.DOM是什么? DOM(文档对象模型)是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 这个说法很官方,大家肯定还是不明白. 举个例子:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节

本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3. HTML DOM 节点属性:介绍HTML DOM节点属性,如:innerHTML.innerText.nodeName.nodeValue以及nodeType等. 4. 获取 HTML 元素节点方法:介绍文档节点(document).元素节点可以通过getElementById.getEleme

本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2. Element 对象:表示文档中的元素,可包含为元素节点.文本节点以及注释节点. 3. Attr 属性对象:表示一个Element节点的属性.可获取.添加.修改指定的属性. 4. Event 对象:表示事件发生时的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态等等.

1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.innerText和innerHTML 方法 含义 innerText 设置或返回表格行的开始和结束标签之间的文本(剥离html) innerHTML 设置或返回表格行的开始和结束标签之间的HTML 3.遍历操作 方法 返回 含义 firstChild Node 返回子节点列表中的第一个节点 lastCh