189 8069 5689
Html5怎么开发乒乓Ping Pong游戏，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
Headerandfooter
Html5引进了许多新的特性和改进，其中一项就是语义。Html5增加了新的元素来加强语义。我们现在只使用2个，header和footer。
代码如下:
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.
代码如下:
3、我们现在构建了游戏的对象，现在给他们样式。放置一下代码到head元素中：
代码如下:
4、在最后的部分，我们将JavaScript逻辑放置到jQuery引用之后。我们将它写到一个单独的文件里，因为我们的代码会越来越大。因此，我们需要创建一个名为html5games.pingpong.js在js文件夹里。
5、我们准备好了JavaScript文件后，需要将他们连接到我们的Html文件。放置以下代码在index.html文件的标签前：
代码如下:
[译者友情提示：试试
代码如下:
你会发现按规范写会避免很多麻烦]
6、我们将游戏的逻辑放到html5games.pingpong.js。下面是我们现在的逻辑，初始化球拍：
代码如下:
//codeinside$(function(){}willrunaftertheDOMisloadedand
ready
$(function(){
$("#paddleB").css("top","20px");
$("#paddleA").css("top","60px");
});
7、现在让我们在浏览器中测试我们的成果。在浏览器中打开index.html文件我们应该看到先以下截图类似的画面：
发生了什么？
在我们的游戏里有了2个球拍和1个球。我们还使用jQuery初始化了2个球拍的位置。
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联网站建设公司，的支持。