用jquery 实现的旧版微信飞机大战。

以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏。

方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)!

主要都是用div+Css实现的,然后用Jquery动态控制div的Css 实现整个小游戏

整体来说该有的功能都实现了吧。

也有一些问题

-webkit-background-size: 1024px 512px;
-webkit-transform: rotate(-90deg);

这个属性IE都不支持,Google Chrome到时支持 可是也遇到了一些

使用-webkit-transform: rotate(-90deg) 后, 在去重新调整Top 或者left 属性的时候,会出现设置的值和实际的值不符的情况, 具体原因我也没有找了,在这里,不知道有那个大神可以帮助解惑。

最终也只能把这两条属性摒弃掉了。哎!

由于我把所有的素材都放在一张大图上,这两条Css不能用的情况下,我就只能很蛋疼的去物理操作图片的大小 和方向, 也就变成了素材冲一张大图变成了多张图

此外,哪位大神有比较好的方式用键盘来控制飞机更平滑的移动。

下面看效果

X 0

 

用DIV+Css+Jquery 实现的旧版微信飞机大战。的更多相关文章

  1. 最流行的JavaScript库jQuery不再支持旧版IE

    直到JQuery2.0的发布,流行的jQuery JavaScript库到了一个重要里程碑.2.0版本比前任版本在大小上缩减了12%,但是更大的新闻是,jQuery 2.0不在对IE6,7,8三个版本 ...

  2. div+css+jQuery图片横向滚动代码(带左右点击按钮)

    首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

  3. Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  4. div+css+jQuery简单实现投票功能

    昨天看到C#群里有人问一个投票功能如何实现... 我对此很感兴趣,为了练习一下,就有了以下代码. 投票功能使用jQuery实现..纯html代码...数据通过json字符串传递,通过 eval转换为j ...

  5. 微信5.0 Android版飞机大战破解无敌模式手记

    微信5.0 Android版飞机大战破解无敌模式手记 转载: http://www.blogjava.net/zh-weir/archive/2013/08/14/402821.html 微信5.0 ...

  6. Python版飞机大战

    前面学了java用java写了飞机大战这次学完python基础后写了个python版的飞机大战,有兴趣的可以看下. 父类是飞行物类是所有对象的父类,setting里面是需要加载的图片,你可以换称自己的 ...

  7. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  8. Jquery 设置class 和 div CSS

    Jquery 设置class 和 div CSS 1 Jquery 根据标签内容获取标签div,从而修改该div CLASS //追加 $('label:contains("labelcon ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

随机推荐

  1. ceph主要数据结构解析3-Ceph_fs.h文件

    (1)集群内部子版本协议类型宏定义:与公共协议保持独立性,以便消息类型和协议升级受影响 #define CEPH_OSDC_PROTOCOL   24 /* server/client */OSD服务 ...

  2. poj 3271 Lilypad Pond bfs

    因为有了1的存在,使得问题变得比较难搞了,所以比较简单的做法就是把1去掉,先做一次bfs,处理出每个点能够一步到达的点(一定是1步). 然后就可以在新图上用bfs算出两个点之间的最短路,和最短路的个数 ...

  3. [Redux] Writing a Todo List Reducer (Toggling a Todo)

    Learn how to implement toggling a todo in a todo list application reducer. let todo = (state = [], a ...

  4. ubuntu12.04软件中心打开错误和 ubuntu 包管理之“:E: 读错误 - read (5: 输入/输出错误) E: 无法解析或打开软件包的列表或是状态文件。”的解决

    执行ubuntu软讲中心时打不开.老是崩溃,从终端也下载不了软件. 执行包管理的update或者search等等会报错: E: 读错误 - read (5: 输入/输出错误) E: 无法解析或打开软件 ...

  5. B/S架构的几种形式

    1. 什么是B/S架构 B/S架构的全称为Browser/Server,即浏览器/服务器结构.Browser指的是Web浏览器,极少数事务逻辑在前端实现,但主要事务逻辑在服务器端实现.B/S架构的系统 ...

  6. Java 小型学生管理系统心得

    这个学生管理系统相对来说比较简单,主要就是复习下java怎么连接数据库,然后你怎么来实现这个功能,我简单的说下思路吧. 首先你要构思好这个界面,他包括增删查改这些基本功能,然后你去分析这些功能都能怎么 ...

  7. Installing node-oracledb on Microsoft Windows

    版本 7 由 Laura Ramsey-Oracle 于 2015-10-19 下午11:46创建,最后由 cj 于 2015-10-22 下午7:44修改. Installing node-orac ...

  8. ajax分页实现,jquery.pagination.js

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代 ...

  9. office2010删除多余空行

    选择 ctrl+H,弹出 "查找和替换"对话框,在"查找内容"输入"^p^p",并在"替换为"输入"^p&qu ...

  10. IE9的BUG?jQuery的BUG?

    本文转载自http://big-student.iteye.com/blog/1898213 在IE9和IE10中,当对一个html的样式初始了一个很大的left或者top时,使用jQuery的off ...