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 相关文章推荐
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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 escape URL编码
2008/12/10 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python视频按帧截取图片工具
2019/07/23 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
项目专员岗位职责
2013/12/04 职场文书
实习鉴定范文
2013/12/19 职场文书
大学四年规划书范文
2013/12/27 职场文书
人民教师求职自荐信
2014/03/12 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
高考励志标语
2014/06/05 职场文书
给校长的一封检讨书
2014/09/20 职场文书
九寨沟导游词
2015/02/02 职场文书
销售口号霸气押韵
2015/12/24 职场文书
高二化学教学反思
2016/02/22 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript