基本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. 关于Struts2的action的execute方法

    这个方法必须要有一个String类型的返回值,所以如果写很多if else的话,记得要在最后加一个else,就是无论如何就会放回一个字符串,否则编译会报错,在execute方法名字下面有红线.

  2. Spring Tools Suite (STS) 简介

    首先,sts是一个定制版的Eclipse,专为Spring开发定制的,方便创建调试运行维护Spring应用. 官方页面.下载地址(3.8.1 win x64). 其次,没什么好介绍的,用一下就明白了. ...

  3. 在windows下编译x264

    最近因为各种原因,对流媒体的学习,突然中断在了编码这块.今天难得静下心来,从新拿起了代码. 对encode这边,因为之前虽然也接触了,也找了两个例子,但目前还没真正开始,所以先从编译x264这个库开始 ...

  4. 文件名中含有连续字符abc，相应文件中也含有字符串abc

    find ./ -name '*abc*' -exec grep 'abc' {} -H \; find ./ -name '*abc*' | xargs -I '{}' grep abc {} -H ...

  5. 【HMM】隐马尔科夫模型

    http://www.hankcs.com/nlp/hmm-and-segmentation-tagging-named-entity-recognition.html

  6. Eclipse导入android项目包xml报错未生成R文件

    最近很是头痛的就是项目带回家做的时候.导入各种问题.自从升级23以后. 生成的带appcompat_v7包.copy时不论是新建还是导入这个包,项目都会报错. 网上的方法试了各种clean各种fix等 ...

  7. Socket网络编程精华篇

    几个和Socket编程紧密相关的概念: TCP/IP层次模型 当然这里我们只讨论重要的四层 01,应用层(Application):应用层是个很广泛的概念,有一些基本相同的系统级TCP/IP应用以及应 ...

  8. listView解决滑动时黑色背景问题

    listView.setCacheColorHint(Color.TRANSPARENT);//解决滑动时黑色背景问题 listView滑动时黑色背景问题 原因在于ListView存在缓存颜色机制,因 ...

  9. swift - UIDatePicker 的用法

    1.初始化button,datepicker,label等控件,初始化时间格式化器     var datePicker = UIDatePicker()    var btnShows = UIBu ...

  10. Mac普通用户修改了/etc/sudoers文件的解决办法

    1.开启 Root 账户 打开“系统偏好设置”,进入“用户与群组”面板,记得把面板左下角的小锁打开,然后选择面板里的“登录选项”.在面板右边你会看到“网络账户服务 器”,点击它旁边的“加入…”按钮,再 ...