用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. Android-Uiautomator:[5]停止monkey测试

    方法/步骤 1 其实停止很简单,无非就是结束掉monkey的进程即可 如何停止呢 2 ps命令  查找uiautomator的进程 打开cmd命令行窗口 输入: adb shell ps | grep ...

  2. myeclipse快捷键收集整理

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行  Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt ...

  3. 4、第4次课 CSS代码第三节课20150923

    1.列表li样式及取值意义 list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower ...

  4. ORACLE输出详细错误信息错误行数

    ... COMMIT; --输出成功信息 DBMS_OUTPUT.PUT_LINE('RUN RESULT: SUCCESS'); EXCEPTION WHEN OTHERS THEN BEGIN R ...

  5. 如何动态修改grid的列名

    有这样的需求,搜索时候会选择搜索类型,每种搜索类型展示的列名不一样 如何动态修改grid的列名 效果图:点击bColumn页面切换成bColumn 实现思路:通过grid的reconfigure方法, ...

  6. deep learning in nlp 资料文献

    Deep Learning for Natural Language Processing (without Magic) http://nlp.stanford.edu/courses/NAACL2 ...

  7. Java直接插入算法

    直接插入算法是将N个带排序的元素看做成一个有序表和一个无序表. 每次从无序表中取一个元素和有序表比较,重复N-1次完成排序. 直接上代码: package test; public class Tes ...

  8. oracle 使用 ALTER 操作列

    使用 ALTER TABLE 语句追加, 修改, 或删除列的语法

  9. QT参考录

    源码参考: #include "CServerManager.h" CServerManager* CServerManager::m_pInstance = NULL; CSer ...

  10. jdk与cglib的动态代理

    JDK动态代理中包含一个类和一个接口: InvocationHandler接口: public interface InvocationHandler { public Object invoke(O ...