![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 61
时间1812
这个家伙很懒,什么都没有留下...
展开
-
Chrome 90的flexbox调试工具
时间过得真快,Chrome 的版本已经升级到90了。这次的开发者工具更新中增加了flexbox调试工具,试了一下,挺有意思的。首先在Elemets 视图下,如果一个元素的display: flex的话,元素后面会显示一个 “flex” 的按钮,点一下网页上相应的位置就会出现一个虚线框表示出这个flexbox的位置。如图然后在边栏上styles标签下对应的flex定义处会出现一个按钮点开有惊喜…...原创 2021-04-25 10:25:54 · 430 阅读 · 0 评论 -
HTML5小游戏动手做(二):使用PIXI引擎制作坦克大战游戏
这里写自定义目录标题1. 简介1.1 PIXI 简介1.2 坦克大战游戏简介2. 实现细节2.1 技术选型2.2 环境搭建2.3 创建舞台2.4 游戏状态机2.5 消息总线2.6 加载页面2.7 开始页面2.8 我们的坦克1. 简介1.1 PIXI 简介PIXI JS是一款轻量级的HTML5的2D引擎,我看现在它的官网上并没有说自己是“游戏”引擎而是说“The HTML5 Creation ...原创 2020-01-27 11:39:33 · 6075 阅读 · 0 评论 -
HTML5 游戏中 使用audio时遇到的那些坑
1. 前言过去两年我曾经在HTML5网页游戏声音播放上花费了大量时间来找坑,填坑。在这里我把过去的经验记录于此。2. IE112.1 不支持Web AudioIE 是我用过的唯一不支持 Web Audio 的浏览器。解决方案就是用HTML5 audio。什么?你的IE连HTML5 audio 也不支持?呃,那个解决的方案更简单,直接跟产品经理哭诉:不能支持IE6哇…2.2原创 2018-09-11 09:46:43 · 1139 阅读 · 0 评论 -
HTML5声音引擎Howler.js简介
Howler.js是一个不错的HTML5声音引擎。功能强大,性能不错,用起来也很方便。1. 官网https://howlerjs.com/ 其代码托管在GitHub上。2. 兼容性Howler默认使用Web Audio,但在IE上可以自动转为HTML 5 Audio。这点很是贴心。3. 声音激活移动端的Safari和Chrome都禁止网页自动播放声音,必须通过用户的操作,t原创 2018-01-28 08:15:44 · 20007 阅读 · 4 评论 -
Chrome 65 DevTools 新功能
参考: https://developers.google.com/web/updates/2018/01/devtools Chrome更新很勤快,65又出了几天了。本地覆盖过去如果我们的服务器在本地(本机,localhost)的话,chrome可以支持在devtools里面映射到本地文件夹然后直接修改代码,就像是个IDE。但是如果是远程服务器就不行了。现在有了这个本地覆盖的功能,...原创 2018-03-15 10:57:12 · 998 阅读 · 0 评论 -
HTML5小游戏动手做(一):简单的连连看
从本篇起,我将在此展示制作一些HTML5小游戏的过程和经验。本文描述的是一个经典又简单的小游戏,连连看。1. 计划1.1 目标快速建立一个连连看游戏原形。能玩就行。1.2 游戏特性介绍游戏展示一个m * n大小的表格表格每个格子里面有一个图标/符号每个图标都是成对出现玩家需要找到每对匹配的图标/符号如果玩家选中的两个图标/符号匹配并且其连线转折次数小...原创 2018-03-11 08:07:00 · 23238 阅读 · 8 评论 -
React与游戏引擎设计原理的相互印证
前几年做网页游戏,近来改做基于React的单页应用。虽然这是完全不同的两种软件产品,但感觉React和游戏引擎本身的设计颇有相似之处:架构层级中的定位无论是游戏引擎,还是React,都是作为核心基础库被应用于软件中。而且,它们的用处都是用于帮助构建图形用户界面(GUI)的工具,即视图层的基础工具组件。更具体来讲就是用于渲染。组件化为方便开发者的工作,React和游戏引擎都会提供自定义组件的...原创 2019-03-27 20:56:07 · 364 阅读 · 0 评论