当前位置： 移动技术网 > IT编程>网页制作>Html5 > Html5游戏开发之乒乓Ping Pong游戏示例(一)

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

2019年07月25日  | 移动技术网IT编程  | 我要评论

在这一章节我们将：

准备开发工具

建立我们的第一个游戏-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代码开始的。我们也将从开始我们的html5游戏开发。

行动时间

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

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

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

3、  下载jquery，。

4、  选择production并点击downloadjquery.

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

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

7、  用文本编辑器打开文件并插入空的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、保存并用浏览器打开它。我们应该看到以下的提示窗口。这意味着我们的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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网