基本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. Qt中Pro文件变量详细说明

    学习Qt时,发现有些知识看了不经常用就忘了,以下是书本上写的一些关于qmake的相关知识,自己看后,打算把一些经常用到的记下来,整理整理. Qt程序一般使用Qt提供的qmake工具来编译. qmake ...

  2. Spring 4 官方文档学习（十一）Web MVC 框架之URI Builder

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-uri-building ...

  3. Android Studio怎样查看资源或者函数在哪些类中被引用

    很多人在做完Keymap匹配到Eclispe快捷键后,发现查看资源或者函数在哪些地方被引用的快捷键"Ctrl+Shift+G"不灵 了.你选中某个函数后,使用这个快捷键.发现仅仅会 ...

  4. jQuery动态生成Bootstrap表格

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. 1亿条数据在PHP中实现Mysql数据库分表100张

    当数据量猛增的时候,大家都会选择库表散列等等方式去优化数据读写速度.笔者做了一个简单的尝试,1亿条数据,分100张表.具体实现过程如下: 首先创建100张表: $i=0; while($i<=9 ...

  6. Java精选笔记_IO流(字符输入输出流、字符文件输入输出流、字符流的缓冲区)

    字符流 Reader是字符输入流的基类,用于从某个源设备读取字符 Writer是字符输出流,用于向某个目标设备写入字符 字符流操作文件 字符输入流FileReader,通过此流可以从关联的文件中读取一 ...

  7. Java精选笔记_集合【Set(集合)接口】

    Set(集合)接口 简介 同样继承自Collection接口,它与Collection接口中的方法基本一致,并没有对Collection接口进行功能上的扩充,只是比Collection接口更加严格了. ...

  8. swift - UILabel的用法

    1.label的声明 class FirstyViewController: UIViewController { var label = UILabel()//初始化 override func v ...

  9. Windows 端口占用

    1.netstat -ano | findstr "80"( 80为提示被占用的端口): 2.tasklist | findstr "5584"(5584是从上 ...

  10. C语言编程基础学习字符型数据的ASCII码值为何是负数？

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...