分类:Div / Css / XML / HTML5 / SVG

html5游戏制作入门系列教程(七)

我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发。我们将要更新完善我们的第4课html5游戏制作入门系列教程(四)的游戏实例,并增加了火球,敌人和碰撞检测等功能模块。所以,现在我们的飞龙可以施放火球来杀死敌人(还有成绩统计)。现在,这个游戏的互动性更强了。你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(六)。我们将基于之前的程序和代码进行开发。   这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载所需文件,让我们开始编码!   步骤1:HTML 下面是基本的HTML代码: 这里是我演示的HTML,非常简单,对不对? <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" />… Read More

html5游戏制作入门系列教程(八)

今天,我已经准备了一个新的游戏 – SkyWalker。基本上 – 这是用飞飞行模拟射击类游戏。我们的目标到达终点线。这个游戏还有其它一些特点,例如使用飞机运动动画和爆炸动画,多按键处理(例如同时移动和攻击),有 一定的水平长度,增强了碰撞检测(现在的敌人可能会损坏我们的飞机) ,生命值和分数等游戏参数。你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(七)。我们将基于之前的程序和代码进行开发。   这里有我们的演示和下载包: 在线演示   好吧,下载所需文件,让我们开始编码!   步骤1:HTML 下面是基本的HTML代码: 这里是我演示的HTML,非常简单,对不对? <!DOCTYPE html> <html lang="en"… Read More

HTML5获取地理位置定位信息

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置信息。 查看演示 下载源码 如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位 更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是 不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。 function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }else{ alert("浏览器不支持地理定位。"); } } 上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对… Read More

HTML5 Geolocation API : 实时跟踪应用

getCurrentPosition与watchPosition   watchPosition会监视你的移动,并在位置改变时向你报告位置。watchPPosition方法看上去确实与getCurrentPosition方法很像,不过行为稍有不同,每次位置比阿奴啊时会重复调用你的成功处理程序 watchPosition调用步骤: 你的应用watchPosition,传入一个成功处理函数 watchPosition在后台不断监视你的位置 你的位置改变时,watchPostion调用成功处理函数来报告你的新位置 watchPostion继续监视你的位置(并向成功处理程序报告),直至你调用clearWatch将它清除   HTML代码   我们已HTML5COL学院中级课程相关章节的课程为基础,再向HTML增加几个按钮,从而能开始和结束跟踪你的位置;我们设置开始按钮是因为用户不想一直被跟踪,他们通常希望对此有些控制;设置结束按钮,是考虑到对于移动设备来说,不停检查用户的位置是一个相当耗费电的操作,如果一直打开跟踪,会严重影响电池寿命: 注: 实时跟踪用户可能非常耗电。一定要为用户提供信息,指出日前正在跟踪,另外还要提供相应的一些控件 <!DOCTYPE html> <html> <head> <meta='keywords' content='HTML5COL学院,HTML5COL,CSS3,HTML5COL,编码社区'>… Read More

HTML5 Geolocation API应用:计算两地距离

找出HTML5COL学院的位置   在HTML5COL学院的前面几个章节中我们已经对HTML5 Geolocation API有了一定认识,接下来我们要对位置做些更有意思的处理;看看你与我们HTML5COL学院的办公室秘密位置相距多远。为此我们需要HTML5COL学院的坐标,而且需要知道如何计算两个坐标之间的距离。   增加一个<div>   首先,在HTML中增加一个 <div>: <!DOCTYPE html> <html> <head> <meta='keywords' content='HTML5COL学院,HTML5COL,CSS3,HTML5COL,编码社区'> </head> <body> <div id="location">… Read More

笔记-网页内嵌Google地图与地理位置模拟

终于有机会开始玩HTML5中行动装置GPS整合应用。 我的第一步是希望能在网页整合Google地图,即便实际需求不一定需要显示地图,但在开发测试阶段,要求开发人员直接由25.1234, 121.5678之类数字判断结果是否正确未免太不人道,因此用地图方式呈现特定经纬度资料是绝对必要的。第一个练习题就来试试在网页中显示特定经纬度的地图吧! Google地图Javascript API已经发展到了V3,整合应用起来相当方便省事,而官方的说明文件写得颇为详细(甚至有中文),要上手一点也不困难。以下便是我写的超简单的入门范例,试着在网页显示以政大校园八角亭为中心的地图。(八角亭是我每次猫空LSD的起点,经纬度数据在心跳表中唾手可得) <!DOCTYPE html>   <html> <head runat="server"> <title>內嵌Google地圖</title> <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js'></script> <script src="https://maps.google.com/maps/api/js?sensor=false"></script> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />… Read More

利用HTML5中Geolocation获取地理位置在Google Map上定位

本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能。 1.获取当前地理位置 调用方法 void getCurrentPosition(onSuccess, onError, options);即可。 其中onSuccess是获取当前位置信息成功时执行的回调函数,onError是获取当前位置信息失败时所执行的回调函数,options是一些可选熟悉列表。其中第二和第三个参数为可选属性。 在onSuccess回调函数中,用到了参数position,代表一个具体的position对象,表示当前位置。其具有如下属性: latitude:当前地理位置的纬度。 longitude:当前地理位置的经度。 altitude:当前位置的海拔高度(不能获取时为null)。 accuracy:获取到的纬度和经度的精度(以米为单位)。 altitudeAccurancy:获取到的海拔高度的经度(以米为单位)。 heading:设备的前进方向。用面朝正被方向的顺时针旋转角度来表示(不能获取时为null)。 speed:设备的前进速度(以米/秒为单位,不能获取时为null)。 timestamp:获取地理位置信息时的时间。 在onError回调函数中,用到了error参数。其具有如下属性: code:错误代码,有如下值。… Read More

搞定网页打印自动分页问题

设计过程出现一个困难问题,一个php生成的HTML页面有多个表格,要求必须自动分开打印到几张A4纸张上面.经过询问资深人士,结果统一回答,HTML页面无法做打印时自动分页面打印.于是乎正准备放弃这个分页面打印念头,郁闷着被笑话着被困扰着. 一个表格被分开打印到两张A4上,多难看啊…. 无意中翻阅CSS,发现里面有两语句:page-break-beforepage-break-after 分别对应的 参数是: auto; always; left; right; 于是尝试建立一张HTML,如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>分页测试</title> <style type="text/css">… Read More

使用CSS3改变文本选中的默认颜色

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1147 关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在 CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难。但是,随着CSS3呱呱落 地,获得越来越多的浏览器认可,一切又显得那么自然而然。虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是,丝毫不影响其在其他浏 览器上对UI的又一次改进。 目前Firefox、Safari、Chrome以及Opera浏览器都支持文本选择属性,如果浏览器不支持该属性,会直接忽略它,所以不会产生任何不良的影响。   下面就简单展示下这个改进UI体验的小技巧。 二、改变默认选中颜色 首先,简单点的例子,我们可以设置整个页面文本选中的基本样式,如下: ::selection {… Read More

有意思:textarea resize属性下纯CSS交互效果

一、众所周知的 众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志。 有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做交互效果。 二、纯CSS的交互展示 您可以狠狠地点击这里:textarea resize下的纯CSS交互demo 例如,在FireFox浏览器下,拖动(往右→)下图圈中的图标: 一个半透明遮罩层随着拖动把张含韵给覆盖了,达到了半遮面的交互效果。 效果没什么,但是却完全CSS实现的,就有意思了。 三、实现原理 我们平时拖动文本域的时候,往右拖则文本域宽度往右侧扩展。但是,如果文本域右侧定位(浮动或绝对定位),则右侧不动,宽度往左侧扩展。下图演示为右100像素绝对定位:   我们还知道,textarea resize的时候宽度变化会让具有“包裹性”的父元素宽度跟着一起变化,所以,如果我们把textarea放在具有半透明背景色的层中,那拉伸的时候,这个半透明层不就可以拉拉伸伸,有了交互效果啦!这就是demo中半透明层覆盖来覆盖去的原理。 说得再多也不容易明白,demo中一些障眼的属性(overflow:hidden;、opacity:0;)去掉,你就知道大概了。下图为去掉overflow:hidden;以及文本域opacity设为0.6后的效果: 四、结束语 经测试,Opera/FireFox/Chrome浏览器支持,IE10以及下面的喽喽们都不支持。显然,兼容性是硬伤。因此,除了一些特殊情况,此实现没有多少实用价值。仅供大家娱乐,仅供大家参考。当然,您可以发挥你智慧实现其他一些交互。 唉,忧伤的三月,就这些,感谢阅读! 参考文章:Tricky Textarea… Read More