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

G高大帅

G高大帅

2016-02-19 11:17

今天图老师小编给大家精心推荐个Html5游戏开发之乒乓Ping Pong游戏示例(一)教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

在这一章节我们将:

准备开发工具

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

获取键盘输入

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

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"
titlePing Pong/title
/head
body
header
h1Ping 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""

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

代码如下:

!DOCTYPE html

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

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

代码如下:

meta charset=utf-8

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

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

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

浅谈HTML5游戏前端开发秘籍分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈HTML5游戏前端开发秘籍分享

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5开发之viewport使用

Web开发
html5开发之viewport使用

html5 canvas 使用示例

Web开发
html5 canvas 使用示例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win8中如何关闭或开启自动播放功能

win8中如何关闭或开启自动播放功能

Android中使用PULL方式解析XML文件深入介绍

Android中使用PULL方式解析XML文件深入介绍
下拉加载更多内容 ↓