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 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 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 flv视频时间获取函数
2010/06/29 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php的memcached客户端memcached
2011/06/14 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
css3的transition属性详解
2014/12/15 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
小学少先队活动方案
2014/02/18 职场文书
教师读书活动总结
2014/05/07 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
广播体操比赛口号
2014/06/10 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
盲山观后感
2015/06/11 职场文书
永远是春天观后感
2015/06/12 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书