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

2016-02-19 11:18 8 1 收藏

下面图老师小编跟大家分享一个简单易学的Html5游戏开发之乒乓Ping Pong游戏示例(三)教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

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像素的大块。通过这张图像,我们就有了一把尺子,让我们能衡量元素在屏幕上的位置。

来源:http://www.tulaoshi.com/n/20160219/1596992.html

延伸阅读
标签: Web开发
对窗口对象的message事件进行监听 代码如下: window.addEventListener("message", function(event) { // 处理程序代码 }, false); 使用window对象的postMessage()方法向其他窗口发送消息,该方法的定义如下: 代码如下: otherwindow.postMessage(message, targetOrigin); 该方法使用两个参数:第一个参数为所发送的消息文本,但...
标签: Web开发
演示地址: HTML5拍照演示 首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的。 注意: 我们采用的是 640X480的分辨率,如果采用JS动态生成,那么您是可以灵活控制分辨率的。 代码如下: !-- 声明: 此div应该在允许使用webcam,网络摄像头之后动态生成 宽高: 640 *480,当然,...
如今商业网站中用于广泛的HTML5无限下拉效果已经越来越受到游戏网站的喜爱。各个品牌为了打造专属自己的游戏特色,纷纷推出了模拟HTML5效果的品牌站,且都起到了相当好的效果。可是从很多方面来说我们对HTML5的真正形态并不了解,而且在很多方便来说处于探索阶段。视觉上看上去酷炫屌的技术并不都 是HTML5,更多时候我们把HTML5当成了一切技术...
标签: Web开发
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种,一种方式是通过API来完成: 代码如下: // mouse event ca...
标签: Web开发
(1)概念的变化: HTML5专注内容与结构,而不专注的表现 header hgroup导航相关数据/hgroup /header nav菜单/nav article h1标题:HTML5专题视频教程/h1 (2)声明与标签: HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素。 HTML5标签语法介绍及新增标记 1、语法标签: (1) ...

经验教程

981

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部