Html5游戏开发之乒乓Ping Pong游戏示例(二)
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
Headerandfooter 引进了许多新的特性和改进，其中一项就是语义。Html5增加了新的元素来加强语义。我们现在只使用2个，header和footer。&header&标签定义文档的页眉（介绍信息），&footer&标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。 [语义标签在HTML中提供有意义的信息，而不只是定义视觉效果。] 放置代码的最佳位置 我们将JavaScript代码放置在&/body&标签之前所有页面内容之后，而不是放置到&head&&/head&区域是有理由的。 通常，浏览器载入和渲染内容是从上到下的。如果将JavaScript代码放置到head区域，那么在将所有的JavaScript代码载入完成之前Html文档的内容是不会被载入的。实际上，所有的载入和渲染都是被阻塞的(blocked)，如果浏览器加载页面中的JavaScript代码。这就是我们为什么将JavaScript代码放置在文档最后的理由，这样我们能够提供更高的性能。 在翻译这本书的时候，最新的jQuery版本是1.7(原话是:Atthetimeofwritingthisbook,thelatestjQueryversionis1.4.4。JQuery是有min版和开发版的，你可以随意选择)。这就是为什么jQuery文件在我们的代码示例中的名字是jquery-1.7.min.js。这个版本号也许会和你使用的不通，但是用法是一样的，除非jQuery有大的修改使新版本不再向下兼容。 页面准备好后运行我们的代码 我们需要在运行我们的JavaScript代码前确保页面已经准备就绪.否则，当我们尝试访问没有加载完的元素的时候我们会得到一个错误。jQuery提供给我们了一个方法来确保页面是被加载完成的。代码如下： 复制代码代码如下: jQuery(document).ready(function(){ //codehere. }); 实际上，我们只需要这样写： 复制代码代码如下: $(function(){ //codehere. }); 这个$标记是jQuery的简写。当我们calling（这个词是调用的意思，zhuangbility一下）$(something),我们实际上是在callingjQery(something). $(function_callback)是readyevent(事件)的另一个简写。 它是和以下代码相同的： 复制代码代码如下: $(document).ready(function_callback); 同样，和下面的也相同: 复制代码代码如下: jQuery(ducument).ready(function_callbak); 小测验 1、那个位置最适合放置JavaScript代码？ a.&head&标签之前 b.插入到&head&&/head&元素中间。 c.&body&标签后 d.&/body&标签前 创建PingPong游戏的元素 我们已经准备就绪，是时候创建PingPong游戏了。 动起来 1、我们将继续我们的jQuery安装示例，在编辑器里打开index.html。 2、然后，在body里用DIV节点创建游戏平台，在游戏平台中有2个拍子和一个球： 复制代码代码如下: &divid="game"& &divid="playground"& &divid="paddleA"class="paddle"&&/div& &divid="paddleB"class="paddle"&&/div& &divid="ball"&&/div& &/div& &/div& 3、我们现在构建了游戏的对象，现在给他们样式。放置一下代码到head元素中： 复制代码代码如下: &style& #playground{ background:#e0ffe0; width:400 height:200 position: overflow: } #ball{ background:# position: width:20 height:20 left:150 top:100 border-radius:10 } .paddle{ background:# left:50 top:70 position: width:30 height:70 } #paddleB{ left:320 } &/style& 4、在最后的部分，我们将JavaScript逻辑放置到jQuery引用之后。我们将它写到一个单独的文件里，因为我们的代码会越来越大。因此，我们需要创建一个名为html5games.pingpong.js在js文件夹里。 5、我们准备好了JavaScript文件后，需要将他们连接到我们的Html文件。放置以下代码在index.html文件的&/body&标签前： 复制代码代码如下: &scriptsrc="js/jquery-1.7.min.js"&&/script& &scriptsrc="js/html5games.pingpong.js"&&/script& [译者友情提示：试试 复制代码代码如下: &scriptsrc="js/jquery-1.4.4.js"/& &scriptsrc="js/html5games.pingpong.js"/& 你会发现按规范写会避免很多麻烦] 6、我们将游戏的逻辑放到html5games.pingpong.js。下面是我们现在唯一的逻辑，初始化球拍： 复制代码代码如下: //codeinside$(function(){}willrunaftertheDOMisloadedand ready $(function(){ $("#paddleB").css("top","20px"); $("#paddleA").css("top","60px"); }); 7、现在让我们在浏览器中测试我们的成果。在浏览器中打开index.html文件我们应该看到先以下截图类似的画面： &发生了什么？ 在我们的游戏里有了2个球拍和1个球。我们还使用jQuery初始化了2个球拍的位置。 [今天就到这里，后面马上就是关于jQuery选择器和CSS函数的部分，有什么错误或疑问欢迎给我留言] 看见你的评论是我最大的动力！
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
你不用很厉害之后才开始，但开始后一定要变得很厉害！
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.netPingPongGame 乒乓球游戏，图形界面很好，运行效果流畅，一个不错的 GUI Develop 编程 238万源代码下载-
&文件名称: PingPongGame
& & & & &&]
&&所属分类:
&&开发工具: Visual C++
&&文件大小: 17022 KB
&&上传时间:
&&下载次数: 6
&&提 供 者:
&详细说明：乒乓球游戏，图形界面很好，运行效果流畅，一个不错的乒乓球游戏-table tennis Game
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&乒乓球&&......\pingpang&&......\pingpang.ncb&&......\pingpang.sln&&......\pingpang.suo&&......\........\Ball.cpp&&......\........\Ball.h&&......\........\BallGame.cpp&&......\........\BallGame.h&&......\........\bin&&......\........\...\bass.dll&&......\........\...\hge.dll&&......\........\...\profile&&......\........\...\.......\Ball.ini&&......\........\...\.......\NPC.ini&&......\........\...\.......\NPClist0.ini&&......\........\...\.......\Player.ini&&......\........\...\.......\Sence0.ini&&......\........\...\.......\StageManager.ini&&......\........\...\res&&......\........\...\...\ball&&......\........\...\...\....\0.png&&......\........\...\...\....\1.png&&......\........\...\...\....\ball.psi&&......\........\...\...\....\beixi.mp3&&......\........\...\...\....\boom.psi&&......\........\...\...\....\classic.psi&&......\........\...\...\....\s.png&&......\........\...\...\....\Thumbs.db&&......\........\...\...\....\trail.psi&&......\........\...\...\....\光圈.png&&......\........\...\...\ifo&&......\........\...\...\...\BallDown.mp3&&......\........\...\...\...\fen.png&&......\........\...\...\...\GameOver.png&&......\........\...\...\...\ming.png&&......\........\...\...\...\Thumbs.db&&......\........\...\...\...\win.mp3&&......\........\...\...\...\win.png&&......\........\...\...\logo&&......\........\...\...\....\0.mp3&&......\........\...\...\....\1.mp3&&......\........\...\...\....\2.wav&&......\........\...\...\....\3.wav&&......\........\...\...\....\logo0001.png&&......\........\...\...\....\logo0002.png&&......\........\...\...\....\logo0003.png&&......\........\...\...\....\logo0004.png&&......\........\...\...\....\logo0005.png&&......\........\...\...\....\logo0006.png&&......\........\...\...\....\logo0007.png&&......\........\...\...\....\logo0008.png&&......\........\...\...\....\logo0009.png&&......\........\...\...\....\logo0010.png&&......\........\...\...\....\logo0011.png&&......\........\...\...\....\logo0012.png&&......\........\...\...\....\logo0013.png&&......\........\...\...\....\logo0014.png&&......\........\...\...\....\logo0015.png&&......\........\...\...\....\logo0016.png&&......\........\...\...\....\logo0017.png&&......\........\...\...\....\logo0018.png&&......\........\...\...\....\logo0019.png&&......\........\...\...\....\logo0020.png&&......\........\...\...\....\logo0021.png&&......\........\...\...\....\logo0022.png&&......\........\...\...\....\logo0023.png&&......\........\...\...\....\logo0024.png&&......\........\...\...\....\logo0025.png&&......\........\...\...\....\logo0026.png&&......\........\...\...\....\logo0027.png&&......\........\...\...\....\logo0028.png&&......\........\...\...\....\logo0029.png&&......\........\...\...\....\logo0030.png&&......\........\...\...\....\logo0031.png&&......\........\...\...\....\logo0032.png&&......\........\...\...\....\logo0033.png&&......\........\...\...\....\logo0034.png&&......\........\...\...\....\logo0035.png&&......\........\...\...\....\logo0036.png&&......\........\...\...\....\logo0037.png&&......\........\...\...\....\logo0038.png&&......\........\...\...\....\logo0039.png&&......\........\...\...\....\logo0040.png&&......\........\...\...\....\logo0041.png&&......\........\...\...\....\logo0042.png&&......\........\...\...\....\logo0043.png&&......\........\...\...\....\logo0044.png&&......\........\...\...\....\logo0045.png&&......\........\...\...\....\logo0046.png&&......\........\...\...\....\logo0047.png&&......\........\...\...\....\logo0048.png&&......\........\...\...\....\logo0049.png&&......\........\...\...\....\logo0050.png&&......\........\...\...\....\logo0051.png&&......\........\...\...\....\logo0052.png&&......\........\...\...\....\logo0053.png&&......\........\...\...\....\logo0054.png&&......\........\...\...\....\logo0055.png&&......\........\...\...\....\logo0056.png
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - GSM短信猫二次开发包,包含java、vb、asp等语言的例程以及AT指令等。
&[] - JPIP iis version intergaraion with openjpp
&[] - 基于MATLAB，实现乒乓球的定位运动跟踪分类：|大小：1306K|日期：
介绍：一款有趣的乒乓球挑战赛，游戏随着时间的推移，乒乓球会越来越多。赶紧去游戏中看看你能坚持到什么时候吧！！
请记住本站网址，点击，方便下次再玩
此游戏适合设备:iPhone&nbsp&nbspiPad&nbsp&nbsp安卓
鼠标点击拖动控制挡板移动。
游戏加载完毕点击页面即可开始游戏
合理控制挡板，挡住所有的乒乓球吧！
不用下载，立即可玩！点击“”试玩更多更好玩！
请记住本站网址，点击，方便下次再玩。 《最难乒乓球》小游戏由4399用户提供。
相关游戏推荐
作品版权归作者所有，如果侵犯了您的版权，请，本站将在3个工作日内删除。温馨提示：抵制不良游戏，拒绝盗版游戏，注意自我保护，谨防受骗上当，适度游戏益脑，沉迷游戏伤身，合理安排时间，享受健康生活
| | |||||&关注：
||||&法律顾问：北京盛峰律师事务所
文明办网文明上网举报电话：&|&举报邮箱：&||
Copyright & 2004 -
All Rights Reserved. 四三九九网络股份有限公司 版权所有今天看啥 热点：
点评：我们已经用jQuery初始化了球拍。现在我们做一个如何使用jQuery安置游戏元素,用网格背景来检查我们游戏的元素位置的实验，感兴趣的朋友可以了解下，祝大家游戏开发快乐
jQuery 介绍 【这部分就不翻了，网上有很多的。如果有不懂的部分找度娘】 用jQuery操作游戏元素 我们已经用jQuery初始化了球拍。现在我们做一个如何使用jQuery安置游戏元素的实验。 动起来-使用jQuery修改元素的位置 让我们用网格背景来检查我们游戏的元素位置： 1、我们继续使用PingPong示例。 2、从这里下载我们需要的网格背景图片。 3、在练习目录下创建一个名字叫images的文件夹。 4、将下载的图片放置到jimages文件夹里。这个图片将有助于我们以后检查像素的位移。 5、接下来，在编辑器里打开index.html. 6、修改playground DIV的background属性如下，使它包含像素网格图片。 代码如下: #playground{ background: #e0ffe0 url(images/pixel_grid.jpg); width: 400 height: 200 position: overflow: } 7、 现在在浏览器里打开index.html，我们应该看到的应该想以下截图：一个网格覆盖在游戏背景上，我们现在能看到所有元素的位置了 发生了什么？ 为方便调试，我们放置了一个叫pixel_grid.jpg的图片到背景上。这张图片有许多小网格，每10x10个网格组成一个100x100像素的大块。通过这张图像，我们就有了一把尺子，让我们能衡量元素在屏幕上的位置。
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
HTML5最近更新Html5游戏开发之乒乓Ping Pong游戏示例(二)_模板无忧
Html5游戏开发之乒乓Ping Pong游戏示例(二)_HTML5教程
推荐：前面介绍了很多的基本元素，包括结构相关的组合和重用元素，这里主要是对SVG的文档结构中剩下的相关元素简单总结一下，感兴趣的朋友可不要错过哦，然后继续向前领略SVG的其他特性
Headerandfooter Html5引进了许多新的特性和改进，其中一项就是语义。Html5增加了新的元素来加强语义。我们现在只使用2个，header和footer。&header&标签定义文档的页眉（介绍信息），&footer&标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。 [语义标签在HTML中提供有意义的信息，而不只是定义视觉效果。] 放置JavaScript的最佳位置 我们将JavaScript代码放置在&/body&标签之前所有页面内容之后，而不是放置到&head&&/head&区域是有理由的。 通常，浏览器载入和渲染内容是从上到下的。如果将JavaScript代码放置到head区域，那么在将所有的JavaScript代码载入完成之前Html文档的内容是不会被载入的。实际上，所有的载入和渲染都是被阻塞的(blocked)，如果浏览器加载页面中的JavaScript代码。这就是我们为什么将JavaScript代码放置在文档最后的理由，这样我们能够提供更高的性能。 在翻译这本书的时候，最新的版本是1.7(原话是:Atthetimeofwritingthisbook,thelatestjQueryversionis1.4.4。JQuery是有min版和开发版的，你可以随意选择)。这就是为什么jQuery文件在我们的代码示例中的名字是-1.7.min.js。这个版本号也许会和你使用的不通，但是用法是一样的，除非jQuery有大的修改使新版本不再向下兼容。 页面准备好后运行我们的代码 我们需要在运行我们的JavaScript代码前确保页面已经准备就绪.否则，当我们尝试访问没有加载完的元素的时候我们会得到一个错误。jQuery提供给我们了一个方法来确保页面是被加载完成的。代码如下： 复制代码 代码如下: jQuery(document).ready(function(){ //codehere. }); 实际上，我们只需要这样写： 复制代码 代码如下: $(function(){ //codehere. }); 这个$标记是jQuery的简写。当我们calling（这个词是调用的意思，zhuangbility一下）$(something),我们实际上是在callingjQery(something). $(function_callback)是readyevent(事件)的另一个简写。 它是和以下代码相同的： 复制代码 代码如下: $(document).ready(function_callback); 同样，和下面的也相同: 复制代码 代码如下: jQuery(ducument).ready(function_callbak); 小测验 1、那个位置最适合放置JavaScript代码？ a.&head&标签之前 b.插入到&head&&/head&元素中间。 c.&body&标签后 d.&/body&标签前 创建PingPong游戏的元素 我们已经准备就绪，是时候创建PingPong游戏了。 动起来 1、我们将继续我们的jQuery安装示例，在器里打开index.html。 2、然后，在body里用DIV节点创建游戏平台，在游戏平台中有2个拍子和一个球： 复制代码 代码如下: &divid="game"& &divid="playground"& &divid="paddleA"class="paddle"&&/div& &divid="paddleB"class="paddle"&&/div& &divid="ball"&&/div& &/div& &/div& 3、我们现在构建了游戏的对象，现在给他们样式。放置一下代码到head元素中： 复制代码 代码如下: &style& #playground{ background:#e0ffe0; width:400 height:200 position: overflow: } #ball{ background:# position: width:20 height:20 left:150 top:100 border-radius:10 } .paddle{ background:# left:50 top:70 position: width:30 height:70 } #paddleB{ left:320 } &/style& 4、在最后的部分，我们将JavaScript逻辑放置到jQuery引用之后。我们将它写到一个单独的文件里，因为我们的代码会越来越大。因此，我们需要创建一个名为html5games.pingpong.js在js文件夹里。 5、我们准备好了JavaScript文件后，需要将他们连接到我们的Html文件。放置以下代码在index.html文件的&/body&标签前： 复制代码 代码如下: &scriptsrc="js/jquery-1.7.min.js"&&/script& &scriptsrc="js/html5games.pingpong.js"&&/script& [译者友情提示：试试 复制代码 代码如下: &scriptsrc="js/jquery-1.4.4.js"/& &scriptsrc="js/html5games.pingpong.js"/& 你会发现按规范写会避免很多麻烦] 6、我们将游戏的逻辑放到html5games.pingpong.js。下面是我们现在唯一的逻辑，初始化球拍： 复制代码 代码如下: //codeinside$(function(){}willrunaftertheDOMisloadedand ready $(function(){ $("#paddleB").("top","20px"); $("#paddleA").css("top","60px"); }); 7、现在让我们在浏览器中测试我们的成果。在浏览器中打开index.html文件我们应该看到先以下截图类似的画面： &发生了什么？ 在我们的游戏里有了2个球拍和1个球。我们还使用jQuery初始化了2个球拍的位置。 [今天就到这里，后面马上就是关于jQuery选择器和CSS函数的部分，有什么错误或疑问欢迎给我留言] 看见你的评论是我最大的动力！
分享：我们已经用jQuery初始化了球拍。现在我们做一个如何使用jQuery安置游戏元素,用网格背景来检查我们游戏的元素位置的实验，感兴趣的朋友可以了解下，祝大家游戏开发快乐
相关HTML5教程：
Div+Css教程搜索
HTML5教程推荐
猜你也喜欢看这些