基本html布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin:0;padding:0;}

        .game{

            position:relative;

            width: 320px;

            height: 568px;

            margin: 50px auto;

            background: url('image/bg.png');

        }

        .game>img,.score,.life{

            position: absolute;

        }

        .score{

            top: 20px;

        }

        .life{

            right: 0;

            top: 20px;

        }

        .life{width:60px;}

        .life img{float: left;}

    </style>

</head>

<body>

    <div class="game">

        <div class="score">得分:0</div>

        <div class="life">

            <img src="data:image/heart.png" alt="">

            <img src="data:image/heart.png" alt="">

            <img src="data:image/heart.png" alt="">

        </div>

    </div>

</body>

</html>

效果展示

游戏引擎engine.js

/*

游戏引擎

 */

var Engine = {

    //刚开始的游戏状态

    gameStatus:false,

    //所以敌机

    enemy:{},

    //子弹

    bullet:{},

    //得分

    score:0,

    //背景图片

    game:document.querySelector('.game'),

    //初始化

    init:function(){

        this.gameStart();

    },

    //游戏开始

    gameStart:function(){

        var _this = this;

        //点击图片的时候判断游戏状态

        this.game.onclick = function(){

            if(!_this.gameStatus){

                _this.gameStatus = true;

                //移动移动

                _this.bgMove();

            }

        }

    },

    //背景移动

    bgMove:function(){

        var y=0;

        var _this = this;

        this.bgTimer = setInterval(function(){

            y+=2;

            _this.game.style['background-position-y']=y+'px';

        },50)

    }

};

Engine.init();

如果做到这的话点击game背景会移动

javascript飞机大战-----002游戏引擎的更多相关文章

  1. javascript飞机大战-----009游戏结束

    /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0 ...

  2. canvas绘制“飞机大战”小游戏，真香！

    canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...

  3. javascript飞机大战-----001分析

    1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...

  4. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  5. javascript 飞机大战完整代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 用面向对象的编程方式实现飞机大战小游戏，java版

    概述 本文将使用java语言以面向对象的编程方式一步一步实现飞机大战这个小游戏 本篇文章仅供参考,如有写的不好的地方或者各位读者哪里没看懂可以在评论区给我留言 或者邮件8274551712@qq.co ...

  7. javascript飞机大战-----0010完整版代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript飞机大战-----008积分

    /* 创建敌机: */ function Enemy(blood,speed,imgs,scroe){ //敌机left this.left = 0; //敌机top this.top = 0; // ...

  9. javascript飞机大战-----007爆炸效果

    要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候 首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 ga ...

随机推荐

  1. socket和http

    套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议 ...

  2. 机器学习理论之SVM

    支持向量机系列 (1) 算法理论理解 http://blog.pluskid.org/?page_id=683 手把手教你实现SVM算法(一) (2) 算法应用 算法应用----python 实现实例 ...

  3. RequireJS使用小结1——for Effective JavaScript Module Loading

    1. require和define的区别 The require() function is used to run immediate functionalities, while define() ...

  4. Android多线程任务的优化1：AsyncTask的缺陷 (转至 http://www.linuxidc.com/Linux/2011-09/43150.htm)

    导语:在开发Android应用的过程中,我们需要时刻注意保障应用的稳定性和界面响应性,因为不稳定或者响应速度慢的应用将会给用户带来非常差的交互体验.在越来越讲究用户体验的大环境下,用户也许会因为应用的 ...

  5. 【Java面试题】44 java中有几种类型的流？JDK为每种类型的流提供了一些抽象类以供继承，请说出他们分别是哪些类？

    字节流,字符流.字节流继承于InputStream OutputStream,字符流继承于InputStreamReader OutputStreamWriter.在java.io包中还有许多其他的流 ...

  6. JavaSE（八）集合之Set

    今天这一篇把之前没有搞懂的TreeSet中的比较搞得非常的清楚,也懂得了它的底层实现.希望博友提意见! 一.Set接口 1.1.Set集合概述 Set集合:它类似于一个罐子,程序可以依次把多个对象 “ ...

  7. 如何用MathType编辑集合运算符号

    在涉及到集合的运算中,有交并且几种常见的运算,这在数学问题中也是很常见的公式.在用MathType编辑这些符号时,该怎么编辑呢?下面就介绍MathType集合运算符号的编辑方法. 具体操作过程如下: ...

  8. _variant_t和_bstr_t

    _variant_t和_bstr_t这两个类分别封装并管理VARIANT和BSTR这两种数据类型, VARIANT和BSTR这两种类型是COM中使用的数据类型. 实现_variant_t向int,St ...

  9. linux环境中,查询网卡的速度(带宽)

    需求描述: 今天一同事要整理测试环境的主机硬件配置信息,需要提供网卡的速度的信息, 所以,就查询了下,在此记录下. 操作过程: 1.首先通过ip a命令查询主机的网口名称 [root@redhat6 ...

  10. zookeeper 系列文章

    http://blog.csdn.net/tswisdom/article/details/41522069 http://blog.csdn.net/tswisdom/article/details ...