您现在的位置是：网站首页> 编程资料编程资料

Html5游戏开发之乒乓Ping Pong游戏示例(二)html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

2023-10-15 419人已围观

简介我们已经准备就绪，是时候创建PingPong游戏了1、我们将继续我们的jQuery安装示例，在编辑器里打开index.html2、然后，在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文件我们应该看到先以下截图类似的画面：