【译】Html5游戏开发示例(-)

在这一章节我们将:

准备开发工具

建立我们的第一个游戏-Ping Pong

学习使用Jquery JavaScript库做基本定位

获取键盘输入

Creating the Ping Pong game with scoring

 

下面的游戏截图就是我们本章学习后的成果。它是一款乒乓游戏,有2个玩家使用一个键盘比赛。

 

那么,现在就让我们开始创建我们的游戏。

准备开发环境

HTML5游戏开发和网站开发是相似。我们需要一个web浏览器和一个优秀的文本编辑工具。

文本编辑工具很多都很优秀,使用你喜欢的就好。如果你没有,我推荐你使用Notepad++这款体积小,速度快的编辑工具。关于浏览器,我们需要一款支持HTML5,CSS3特性和能过提供给我们调试工具的浏览器。

这有几个可供选择的浏览器:Apple Safari (http://apple.com/safari/), Google Chrome (http://www.google.com/chrome/),Mozilla Firefox (http://mozilla.com/firefox/), and Opera (http://opera.com),这几款浏览器都支持我们需要的特性。

 

准备HTML文档

每一个网站、页面和Html5游戏都是从默认的HTML文档开始。而这个HTML文档是从基本的HTML代码开始的。我们也将从index.html开始我们的HTML5游戏开发。

行动时间

我们将从头开始创建我们的HTML5乒乓游戏。这听起来是要我们自己准备所有的事情,幸运的是至少我们能够使用JavaScript库帮助我们。Jquery 就是这样的JavaScript库我们将在所有的例子中使用它。这将有助于简化我们的JavaScript逻辑:

1、  创建一个叫pingpong的新文件夹

2、  在文件夹里再创建一个叫js的文件夹

3、  下载jQuery,http://jquery.com

4、  选择Production并点击DownloadJquery.

5、  将jquery-1.7.1.min.js保存在我们新创建的2的文件夹里

6、  创建一个名叫index.html的新文件并保存到1创建的文件夹里。

7、  用文本编辑器打开index.html文件并插入空的HTML模版:

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Ping Pong</title>

</head>

<body>

<header>

<h1>Ping Pong</h1>

</header>

<footer>

This is an example of creating a Ping Pong Game.

</footer>

</body>

</html>

8、  在body结束标签前引用jQuery文件

 

<script src=”js/jquery-1.7.1.min.js></script>

9、  最后,我们要确保Jquery载入成功.我们通常在body结束标签前JQuery文件之后放置以下代码检查:

<script>

$(function(){

alert(“Welcome to the Ping Pong battle.”);

});

</script>

10、              保存index.html并用浏览器打开它。我们应该看到以下的提示窗口。这意味着我们的jQuery是正确设置的:

 

发生了什么?

我们只是用JQuery创建了一个基本的HTML5页面,并确保正确加载了jQuery。

 新的HTML5 doctype

在HTML5中DOCTYPE和meta tags都得到了简化.

在Html4.01,我们声明doctype需要以下代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

它很长,对吧?然而在HTML5,doctyp声明就简单了许多:

<!DOCTYPE html>

我们甚至没有声明HTML的版本,这意味这HTML5将兼容以前的HTML版本而未来的HTML版本也同样会支持HTML5的版本。

Meta标签也同样的到了简化,我们现在使用以下的代码定义HTML的字符集:

<meta charset=utf-8>

转载于:https://www.cnblogs.com/88999660/archive/2011/11/20/2256460.html

HTML5开发精要与实例详解(完整版源代码含说明文档)内容分为两大部分:第一部分通过一系列中大型案例全方位对html 5的各个重要知识点进行了详细的讲解,每个案例包含案例概述、页面效果展示、案例所涉及主要知识点(精要)、源代码剖析4个部分,读者既能根据书中的步骤动手实践,又能重点学习案例中用到的核心理论知识,同时还能领会源代码的设计思路和方法;第二部分讲解了jwebsocket、rgraph、webgl等3个重要框架和技术的详细使用方法。 《html 5开发精要与实例详解》一共12章:第1章分别用2个案例演示了如何利用html 5中的结构元素来构建一个博客网站和企业门户网站;第2章用2个案例讲解了表单在html 5中的使用;第3章用6个案例讲解了如何利用canvas元素来绘制图形、图像和制作动画;第4章用2个案例介绍了文件apt和拖放api的使用方法; 第5章用4个案例讲解了如何打造自己的网页视频播放器、网页音频播放器,以及实现视频实时回放和视频截图等多媒体功能;第6章用6个案例全面讲解了html 5中的本地存储技术;第7章用单点登录和获取批量数据这2个案例讲解了html 5中的跨文档的消息传输技术;第8章用2个案例讲解了如何利用web workers实现多线程处理;第9章用1个案例讲解了如何利用geolocation api来获取地理位置信息;第10~13章分别讲解了socket通信框架jwebsocket、统计图制作插件rgraph、三维web开发技术webgl的详细使用方法,并辅之以丰富的案例。 《html 5开发精要与实例详解》所有案例的源代码都是作者亲自编写并调试和运行成功的。读者可以利用这些代码进行实战练习,也可以根据需要对这些代码进行修改,以观察不同的效果,从而加深对案例代码和书中知识点的理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值