用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. motan源码分析二:使用spi机制进行类加载

    在motan的源码中使用了很多的spi机制进行对象的创建,下面我们来具体分析一下它的实现方法. 1.在实际的jar包的\META-INF\services目录中引入相关的文件,例如下图中,我解压了co ...

  2. File类学习笔记

    File类 首先,要明确的一点就是,在整个IO包中,唯一表示与文件有关的类局势File类. 它可以实现创建或删除文件等操作.下面看看它的构造方法: File(String pathname) 通过将给 ...

  3. APP开发者到期续费说明

    几步搞明白APP开发者续费,不再苦恼.1.APP开发者账号快满一年时,注册邮箱会收到一封提醒续费的邮件.主题类似5 days left to renew your iOS Developer Prog ...

  4. Windows消息传递机制具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka Windows是一个消息(Message)驱动系统.Windows的消息提供了应用程序之间.应 ...

  5. ViewPager 详解(四)----自主实现滑动指示条

    前言:前面我们用了三篇的时间讲述了有关ViewPager的基础知识,到这篇就要进入点实际的了.在第三篇<ViewPager 详解(三)---PagerTabStrip与PagerTitleStr ...

  6. Spring AOP 实现原理与 CGLIB 应用--转

    AOP(Aspect Orient Programming),作为面向对象编程的一种补充,广泛应用于处理一些具有横切性质的系统级服务,如事务管理.安全检查.缓存.对象池管理等.AOP 实现的关键就在于 ...

  7. Java基础知识强化21:Java中length、length()、size()区别

    1.java中的length属性是针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了length这个属性.2.java中的length()方法是针对字符串String说的,如果想看这个 ...

  8. 配置Android开发环境

    1.下载JAVASE http://www.oracle.com/technetwork/java/javase/downloads/index.html 根据自己系统选择JAVASE版本 2.下载A ...

  9. 小学生之JAVA中的分层

    三层架构 三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL). 区分层次的目的即为了“高内聚,低 ...

  10. struts2获取request、session、application

    struts2获取request.session.application public class LoginAction extends ActionSupport implements Reque ...