Html5游戏开发之乒乓Ping Pong游戏示例(三)
发布时间：2013-01-21 14:19:47 作者：佚名 
我要评论
我要评论我们已经用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: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
7、 现在在浏览器里打开index.html，我们应该看到的应该想以下截图：一个网格覆盖在游戏背景上，我们现在能看到所有元素的位置了
发生了什么？
为方便调试，我们放置了一个叫pixel_grid.jpg的图片到背景上。这张图片有许多小网格，每10x10个网格组成一个100x100像素的大块。通过这张图像，我们就有了一把尺子，让我们能衡量元素在屏幕上的位置。
【这部分就不翻了，网上有很多的。如果有不懂的部分找度娘】
用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: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
7、 现在在浏览器里打开index.html，我们应该看到的应该想以下截图：一个网格覆盖在游戏背景上，我们现在能看到所有元素的位置了
发生了什么？
为方便调试，我们放置了一个叫pixel_grid.jpg的图片到背景上。这张图片有许多小网格，每10x10个网格组成一个100x100像素的大块。通过这张图像，我们就有了一把尺子，让我们能衡量元素在屏幕上的位置。
相关文章
本文主要介绍了html网页播放多个视频的几种方法，包含iframe标签，VLC插件和一些常见的js插件，具有一定的参考价值，感兴趣的可以了解一下2024-03-04
做HTML5的video标签，本身我们有下载功能,由于权限问题，所以本文就来介绍一下HTML5中video标签禁止右键和下载视频的问题解决，具有一定的参考价值，感兴趣的可以了解一下2024-02-28html5 video标签controlslist的具体使用
HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有用的属性，本文主要介绍了html5 video标签controlslist的具体使用，具有一定的参考价值，感兴趣2024-02-27
在html5页面中嵌入视频的时候页面中只显示声音却不显示图像，本文主要介绍了HTML5 video播放有声音无图像的解决方法，具有一定的参考价值，感兴趣的可以了解一下2024-02-21
在做html5项目的时候有个需求，就是移动端长按不保存图片，本文就来介绍一下Html5移动端禁止长按保存图片的三种实现方法，具有一定的参考价值，感兴趣的可以了解一下2024-02-20- 混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体验，今天给大家分享HTML5键盘弹起遮挡输2024-01-03
本文主要介绍了html5登录玻璃界面特效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-12-12
学习Canvas的时候，打算描绘一个矩形并测试清除画布方法时，但是发现画布渲染不出来，本文就来介绍一下该问题的解决，具有一定的参考价值，感兴趣的可以了解一下2023-12-05
实际开发中，小程序和H5往往有很多业务场景需要来回跳转，本文就来介绍一下Html5页面跳转小程序的三种方式，感兴趣的可以了解一下2023-12-04
HTML5标签是HTML语言的最新版本引入的一些新的标签，这些标签用于定义网页内容的结构和语义,相比于以前的HTML版本，HTML5标签提供了更加语义化的元素，本文就给大家介绍HTM2023-11-07
最新评论