Html5游戏开发之乒乓Ping Pong游戏示例(三)

jianquv3bko

jianquv3bko

2016-02-19 11:18

下面图老师小编跟大家分享一个简单易学的Html5游戏开发之乒乓Ping Pong游戏示例(三)教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!
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像素的大块。通过这张图像,我们就有了一把尺子,让我们能衡量元素在屏幕上的位置。
展开更多 50%)
分享

猜你喜欢

Html5游戏开发之乒乓Ping Pong游戏示例(三)

Web开发
Html5游戏开发之乒乓Ping Pong游戏示例(三)

Html5游戏开发之乒乓Ping Pong游戏示例(一)

Web开发
Html5游戏开发之乒乓Ping Pong游戏示例(一)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Html5游戏开发之乒乓Ping Pong游戏示例(二)

Web开发
Html5游戏开发之乒乓Ping Pong游戏示例(二)

浅谈HTML5游戏前端开发秘籍分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈HTML5游戏前端开发秘籍分享

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5开发之viewport使用

Web开发
html5开发之viewport使用

html5 canvas 使用示例

Web开发
html5 canvas 使用示例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win 8双屏可以显示两个Metro吗?

Win 8双屏可以显示两个Metro吗?

android手机获取gps和基站的经纬度地址实现代码

android手机获取gps和基站的经纬度地址实现代码
下拉加载更多内容 ↓