首页 专题 H5案例 前端导航 UI框架

Phaser游戏初级教程(三)

一个游戏,当然不能只有静态的物体,我们需要让NPC玩家动起来。

Phaser内建了键盘管理器(Phaser.Key),我们可以使用这个便利的函数:

cursors = game.input.keyboard.createCursorKeys();

这将给cursors对象填入四个属性:up,down,left,right,这些属性都是Phaser.Key对象的实例。接下来我们需要的就是在update循环里轮询这些:
阅读 391 · 评论 0 · 喜欢 1 阅读全文

Phaser游戏初级教程(二)

一、游戏世界的创建
通过game.add.sprite在内部创建一个新的Phaser.Sprite对象然后把它添加到游戏世界。这个世界将包含这个游戏所有的对象,和Actionscript3的Stage(http://www.photonstorm.com/topics/as3)差不多。

注意:游戏世界中没有固定的大小,它能在各个方向上无限延伸,坐标0,0作为它的中心。为方便起见,Phaser将这个坐标放在游戏的左上角,通过使用内置的Camera可以任意移动。

世界类可以通过game.world获取,它带来了很多便利的方法和属性,以帮助你在世界里分发你的物体。它包含一些简单的属性像game.world.height,但是也包含一些更高级的东西,我们会在另一个教程里用到。
阅读 942 · 评论 0 · 喜欢 1 阅读全文

CSS3 Background

Background,中文名称是“背景”,在开发中,这个属性我们用的频率很高,在这里,我们就一起来了解一下Background的属性。

CSS2 中有5个主要的背景(background)属性,它们是:

background-color: 指定填充背景的颜色。
background-image: 引用图片作为背景。
background-position: 指定元素背景图片的位置。
background-repeat: 决定是否重复背景图片。
background-attachment: 决定背景图是否随页面滚动。

在CSS3中,新增的属性:

多个背景图片
background-clip  能够控制背景显示的位置
background-origin  此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似background-clip)
background-size  用来调整背景图的大小
阅读 751 · 评论 0 · 喜欢 1 阅读全文

img 标签下多余空白的解决方法

有些时候,我们会发现div排版布局中,我们并没有设置padding和margin,可img标签下方还是会出现多余的空白,这是为什么呢?
其实,在浏览器中,图片默认的vertical-align是baseline,如图:

可以看到图片是与字母x的下边距对齐的,也就是baseline。
那么,我们该如何去掉这多余的空白呢?
阅读 434 · 评论 0 · 喜欢 1 阅读全文

chrome表单自动填充去掉input黄色背景解决方案

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; }

阅读 998 · 评论 0 · 喜欢 1 阅读全文

如何为input的date类型设置默认值!

要为input的date类型设置默认值时,目前来说,代码只支持yyyy-MM-ddTHH:mm:ss.SSS(或其部分)这种形式的的字符串:

<input type="date" value="2015-12-01" id="mydate"/>



阅读 1869 · 评论 0 · 喜欢 1 阅读全文

CSS3 Transition

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

浏览器支持

Internet Explorer 10, Firefox, Chrome和 Opera均支持这下面四个属性

但在Safari中,必须 通过私有属性 -webkit-t支持。

注意:Internet Explorer 9及更早IE版本不支持transition-timing-function 属性


语法

transition : property duration timing-function delay;

阅读 335 · 评论 0 · 喜欢 1 阅读全文

CSS3 Transform 2D和3D转换

CSS3转换,我们可以移动,缩放,反过来,旋转,和拉伸元素。
一、2D转换

1.1 移动 
语法

transform : translate(x,y);

-webkit-transform : translate(x,y);

根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

阅读 644 · 评论 0 · 喜欢 1 阅读全文

CSS3滤镜

用过Photoshop的对滤镜肯定不陌生,在CSS3中,对各种滤镜效果已经有了支持,可以做出很多效果。

语法

filter: function(param);

CSS滤镜支持的方法(function)有


grayscale 灰度

sepia 褐色

saturate 饱和度

hue-rotate 色相旋转

invert 反色

opacity 透明度

brightness 亮度

contrast 对比度

blur 模糊

drop-shadow 阴影

阅读 910 · 评论 0 · 喜欢 1 阅读全文

css3 Gradient渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
首先,我们先来了解一下目前的几种现代浏览器的内核,主流的主要有Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(presto)(Opera浏览器)、Trident(IE浏览器)。
接下来,我们就来详解Gradient渐变的具体用法。
一、linear-gradient(线性渐变)
1.1 语法

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } //标准写法

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } //在WebKit浏览器下的应用

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) //在Mozilla浏览器下的应用

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); //在Opera浏览器下的应用

阅读 568 · 评论 0 · 喜欢 1 阅读全文

使用Camera

通过Camera API,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.这些操作主要是通过一个input元素来实现的,其中该元素的type属性必须为"file",accept属性要允许图片格式,这样才能知道这个文件选择框是用来选择图片的。
语法

<input type="file" id="take-picture" accept="image/*">

当用户点击激活这个input后,我们可以选择本地的图片文件,也可以通过摄像头直接拍摄照片作为所选文件。

阅读 312 · 评论 0 · 喜欢 1 阅读全文

Canvas入门基础(一):绘制基础形状

一、什么是canvas
<canvas>是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素。

<canvas> 元素不被一些老的浏览器所支持,但是所有的主流浏览器的近期版本都支持。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素. 注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

模板骨架

<canvas id="mycanvas" width="200" height="300">

您的浏览器不支持canvas

</canvas>


<script>

var cc=document.getElementById("mycanvas");

var cxt=cc.getContext("2d");

</script>

阅读 1282 · 评论 0 · 喜欢 1 阅读全文

Touch触摸事件详解

为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力。

一、触摸事件的类型

1.1 touchstart
当用户在触摸平面上放置了一个触点时触发。
事件的目标 element 将是触点位置上的那个目标 element。

element.addEventListener("touchstart",function(e){})


1.2 touchend
当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

element.addEventListener("touchend",function(e){})

1.3 touchmove
当用户在触摸平面上移动触点时触发。

element.addEventListener("touchmove",function(e){})

阅读 418 · 评论 0 · 喜欢 1 阅读全文

检测设备方向

越来越多支持web功能的设备拥有检测自身方向的能力了;也就是说,这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。特别地,通过这些数据,像手机等一些手持设备可以实现自动调整旋转角度来保持显示直立,以及当设备旋转到宽屏时(宽度大于高度),自动提供宽屏的网页效果。

一、DeviceOrienttationEvent
当加速度传感器检测到设备在方向上产生变化时触发。

要接收设备方向变化信息,我们只需注册监听deviceorientation事件:

if(window.DeviceOrientationEvent){

  window.addEventListener("deviceorientation",handleOrientation,true)

}else{

  console.log("对不起,您的浏览器不支持Device Orientation");

}

阅读 548 · 评论 0 · 喜欢 1 阅读全文

地理位置定位

地理位置 API 允许用户向 Web 应用程序提供他们的位置。
当然,出于隐私考虑,访问地理位置前,浏览器都会先请求用户许可。

地理位置 API 通过 navigator.geolocation 提供。
获取到用户的地理位置的前提是浏览器支持此属性,我们可以用以下代码判断:

if ("geolocation" in navigator) { /* 地理位置服务可用 */ } else { /* 地理位置服务不可用 */ }

当浏览器支持navigator,我们怎样去获取当前定位?
阅读 307 · 评论 0 · 喜欢 1 阅读全文