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


Posted in HTML / CSS onJanuary 21, 2013

在这一章节我们将:

准备开发工具

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

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

获取键盘输入

Creating the Ping Pong game with scoring

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

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

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

准备开发环境

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://3water.com/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是正确设置的:

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

发生了什么?

我们只是用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>
HTML / CSS 相关文章推荐
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 #HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 #HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 #HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
You might like
php中对2个数组相加的函数
2011/06/24 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
分页栏的web标准实现
2011/11/01 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python实现随机选择元素功能
2017/09/14 Python
Python探索之pLSA实现代码
2017/10/25 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python内置模块collections知识点总结
2019/12/19 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL