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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php array的学习笔记
2012/05/16 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
对python多线程与global变量详解
2018/11/09 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
新闻专业个人自我评价
2013/09/21 职场文书
大学毕业寄语大全
2014/04/10 职场文书
教室标语大全
2014/06/21 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
投标邀请书范本
2015/02/02 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js