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


Posted in HTML / CSS onJanuary 21, 2013

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,我们应该看到的应该想以下截图:一个网格覆盖在游戏背景上,我们现在能看到所有元素的位置了
Html5游戏开发之乒乓Ping Pong游戏示例(三)
发生了什么?
为方便调试,我们放置了一个叫pixel_grid.jpg的图片到背景上。这张图片有许多小网格,每10x10个网格组成一个100x100像素的大块。通过这张图像,我们就有了一把尺子,让我们能衡量元素在屏幕上的位置。
HTML / CSS 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 #HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 #HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 #HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 #HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 #HTML / CSS
You might like
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
php上传文件常见问题总结
2015/02/03 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
Express之托管静态文件的方法
2018/06/01 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
艺术学院毕业生自我评价
2014/03/02 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
北大自主招生自荐信
2015/03/04 职场文书
学习心理学心得体会
2016/01/22 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫