我们已经准备就绪,是时候创建PingPong游戏了。1、我们将继续我们的jQuery安装示例,在编辑器里打开index.html;2、然后,在body里用DIV节点创建游戏平台,在游戏平台中有2个拍子和一个球,闲话不多说看代码吧
Headerandfooter
Html5引进了许多新的特性和改进,其中一项就是语义。Html5增加了新的元素来加强语义。我们现在只使用2个,header和footer。
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个球拍的位置。
[今天就到这里,后面马上就是关于jQuery选择器和CSS函数的部分,有什么错误或疑问欢迎给我留言]
看见你的评论是我最大的动力!
推荐学习:《HTML视频教程》《JavaScript视频教程》