Html5游戏开发之乒乓Ping Pong游戏示例(一)

所属分类: 网页制作 / html5 阅读数: 1784
收藏 0 赞 0 分享

在这一章节我们将:

准备开发工具

建立我们的第一个游戏-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,https://www.jb51.net/jiaoben/58.html

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>

更多精彩内容其他人还在看

HTML5梦幻之旅——炫丽的流星雨效果实现过程

流星出现的时候,人们都喜欢对着它们许愿,因为传说对着流星许下愿望后,愿望就能实现,最近出于兴趣,制作一个拖尾效果,后来想到可以通过拖尾效果来实现一下流星雨的效果
收藏 0 赞 0 分享

5个你不知道的HTML5的接口介绍

尽管当前的主流浏览器已经实现了很多的HTML5新特性,但是很多开发者根本就没注意到这些更简洁,也很有用的API,本系列文章介绍这些接口API,同时也希望能鼓励更多开发者去探索那些还不广为人知的API
收藏 0 赞 0 分享

HTML5 placeholder(空白提示)属性介绍

浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性,placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏
收藏 0 赞 0 分享

HTML5 自动聚焦(autofocus)属性使用介绍

一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

HTML5新增的Css选择器、伪类介绍

HTML5新增了Css选择器、伪类,本文整理了一些,并给出简单的使用介绍,喜欢html5的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

通过Canvas及File API缩放并上传图片完整示例

创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为 multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了. 好了,下面附上完整的代码示例
收藏 0 赞 0 分享

Canvas与Image互相转换示例代码

本文向大家展示怎样转换Image为canvas,以及canvas如何提取出一个Image,示例代码如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

HTML5的语法变化介绍

HTML5的语法变化主要体现在标签不再区分大小写、元素可以省略结束标签、允许省略属性值的属性等等,感兴趣的朋友可以参考下,希望对大家了解html5有所帮助
收藏 0 赞 0 分享

HTML5 预加载让页面得以快速呈现

预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源,当用户访问某个预加载的链接时,如果从缓存命中,页面就得以快速呈现
收藏 0 赞 0 分享

HTML5 input元素类型:email及url介绍

HTML5改进的地方想必大家有所知晓,下面我要介绍的是两个新的input元素类型email和url。让我们跟着代码来看看他们的好处,感兴趣的朋友可以参考下
收藏 0 赞 0 分享
查看更多