Category: Div / Css / XML / HTML5 / SVG

April 29, 2015

html5游戏制作入门系列教程（二）

By  Div / Css / XML / HTML5 / SVG  0 Comments
今天，我们继续html5游戏制作入门系列的系列文章。今天，我们将继续基础知识（也许甚至是高级技巧的基础）。我要告诉你如何具有渐变颜色填充对象，绘制文本，使用自定义的字体绘制文本，基本的动画，以及最重要的UI元素 – 按钮。   我们以前的文章中，你可以在这里阅读：html5游戏制作入门系列教程（一）。我们会用到以前的脚本，并将其功能加强。我要绘制文本，使用自定义字体，动画对象（方形）与渐变色填充，将利用“播放/暂停”按钮暂停动画。   这里有我们的演示和下载包： 在线演示 源码下载   好吧，下载所需文件，让我们开始编码！   步骤1： HTML 这里是我演示的HTML  … Read More
Read More
April 29, 2015

html5游戏制作入门系列教程（三）

By  Div / Css / XML / HTML5 / SVG  0 Comments
今天，我们继续一系列文章，使用HTML5的canvas组件进行游戏开发。接下来，我们将开始学习如何添加动画以及一些更有趣的功能。我 们的演示将包括一艘太空船飞越时空，并使用一个新的游戏元素 – 对话框。对话框将包含两页，我们的按钮用来切换对话框的页面，并隐藏对话框。   你可以点击这里阅读这一系列教程的前一篇文章：html5游戏制作入门系列教程（二）。我们的将基于之前的程序和代码进行开发。 这里有我们的演示和下载包： 在线演示 源码下载   好吧，下载所需文件，让我们开始编码！   步骤1： HTML 这里是我演示的HTML <!DOCTYPE html> <html lang="… Read More
Read More
April 29, 2015

html5游戏制作入门系列教程（四）

By  Div / Css / XML / HTML5 / SVG  0 Comments
html5游戏制作入门系列教程（四）
今天，我们继续一系列文章，使用HTML5的canvas组件进行游戏开发。今天我们要学习下元素：声音控制与动画。在我们的演示中，你会 看到一个飞龙。我们会听到持续的翅膀拍打的声音（我们将循环这个声音），和龙的怒吼声（mouseup事件）。最后，我们会让我们的龙不断的接近鼠标光标 （当我们按住鼠标）。 你可以点击这里阅读这一系列教程的前一篇文章：html5游戏制作入门系列教程（三）。我们的将基于之前的程序和代码进行开发。 这里有我们的演示和下载包： 在线演示 源码下载   好吧，下载所需文件，让我们开始编码！   步骤1： HTML 这里是我演示的HTML <!DOCTYPE html> <… Read More
Read More
April 29, 2015

html5游戏制作入门系列教程（五）

By  Div / Css / XML / HTML5 / SVG  0 Comments
我们继续这一系列文章，使用HTML5的canvas组件进行游戏开发。今天，这是相当完整的游戏例子 – 它会回顾经典的旧电脑游戏 – 坦克大战。我会教你使用阵列地图并教你如何检测活动对象（坦克）与环境（基于阵列的地图）的碰撞。 你可以点击这里阅读这一系列教程的前一篇文章：html5游戏制作入门系列教程（四）。我们的将基于之前的程序和代码进行开发。   这里有我们的演示和下载包： 在线演示 源码下载   好吧，下载所需文件，让我们开始编码！   步骤1： HTML 这里是我演示的HTML，非常简单，对不对？ <!DOCTYPE html> <html lang="en" > <h… Read More
Read More
April 29, 2015

html5游戏制作入门系列教程（六）

By  Div / Css / XML / HTML5 / SVG  0 Comments
我们继续这一系列文章，使用HTML5的canvas组件进行游戏开发。今天，我们将创建我们的第一个完整的游戏 – 打砖块。在这一课中，我会告诉你如何检测基本的碰撞和HTML5的本地存储。您可以使用鼠标和键盘（左/右按钮）来操作垫拍左右运动。我们将html5本 地存储技术存储经过历史的游戏时间和碎砖（点）的数据。   这里有我们的演示和下载包： 在线演示 源码下载   好吧，下载所需文件，让我们开始编码！   步骤1： HTML 这里是我演示的HTML，非常简单，对不对？ <!DOCTYPE html> <html lang="en" > <head> <meta c… Read More
Read More
April 29, 2015

html5游戏制作入门系列教程（七）

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

html5游戏制作入门系列教程（八）

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

HTML5获取地理位置定位信息

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network  0 Comments
HTML5获取地理位置定位信息
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置信息。 查看演示 下载源码 如何使用HTML5地理位置定位功能 定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位 更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是 不可用的，所以我们在访问该应用时会… Read More
Read More
April 26, 2015

HTML5 Geolocation API : 实时跟踪应用

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network, Javascript /Jquery / React / Bootstrap / Web  0 Comments
HTML5 Geolocation API : 实时跟踪应用
getCurrentPosition与watchPosition   watchPosition会监视你的移动，并在位置改变时向你报告位置。watchPPosition方法看上去确实与getCurrentPosition方法很像，不过行为稍有不同，每次位置比阿奴啊时会重复调用你的成功处理程序 watchPosition调用步骤： 你的应用watchPosition，传入一个成功处理函数 watchPosition在后台不断监视你的位置 你的位置改变时，watchPostion调用成功处理函数来报告你的新位置 watchPostion继续监视你的位置（并向成功处理程序报告），直至你调用clearWa… Read More
Read More
April 26, 2015

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

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network, Javascript /Jquery / React / Bootstrap / Web  0 Comments
HTML5 Geolocation API应用：计算两地距离
找出HTML5COL学院的位置   在HTML5COL学院的前面几个章节中我们已经对HTML5 Geolocation API有了一定认识，接下来我们要对位置做些更有意思的处理；看看你与我们HTML5COL学院的办公室秘密位置相距多远。为此我们需要HTML5COL学院的坐标，而且需要知道如何计算两个坐标之间的距离。   增加一个<div>   首先，在HTML中增加一个 <div>: <!DOCTYPE html> <html> <head> <meta='keywords' content='HTML5COL学院,HTML5C… Read More
Read More
April 26, 2015

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

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network  0 Comments
终于有机会开始玩HTML5中行动装置GPS整合应用。 我的第一步是希望能在网页整合Google地图，即便实际需求不一定需要显示地图，但在开发测试阶段，要求开发人员直接由25.1234, 121.5678之类数字判断结果是否正确未免太不人道，因此用地图方式呈现特定经纬度资料是绝对必要的。第一个练习题就来试试在网页中显示特定经纬度的地图吧! Google地图Javascript API已经发展到了V3，整合应用起来相当方便省事，而官方的说明文件写得颇为详细(甚至有中文)，要上手一点也不困难。以下便是我写的超简单的入门范例，试着在网页显示以政大校园八角亭为中心的地图。(八角亭是我每次猫空LSD的起点，经纬度… Read More
Read More
April 26, 2015

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

By  Div / Css / XML / HTML5 / SVG  0 Comments
利用HTML5中Geolocation获取地理位置在Google Map上定位
本小菜刚开始学习HTML5，现在对其中的Geolocation颇感兴趣，结合Google Map的API实现基本的地图定位功能。 1.获取当前地理位置 调用方法 void getCurrentPosition(onSuccess, onError, options);即可。 其中onSuccess是获取当前位置信息成功时执行的回调函数，onError是获取当前位置信息失败时所执行的回调函数，options是一些可选熟悉列表。其中第二和第三个参数为可选属性。 在onSuccess回调函数中，用到了参数position，代表一个具体的position对象，表示当前位置。其具有如下属性： latitude：当前地理位置… Read More
Read More
April 25, 2015

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

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

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

By  Div / Css / XML / HTML5 / SVG  0 Comments
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1147 关于浏览器文字选中颜色 以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器： 在 CSS3的爸爸妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。但是，随着CSS3呱呱落 地，获得越来越多的浏览器认可，一切又显得那么自然而然。虽然有些顽固的糟老头（如IE… Read More
Read More