<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>spriteJs</title>

    <style>

        body {

            background: black;

        }

        div {

            width: 1000px;

            height: 600px;

            /*border: 1px solid red;*/

            border-radius: 10px;

            margin: 30px auto;

            overflow: hidden;

            background: black;

        }

    </style>

</head>

<body>

<div id="container"></div>

</body>

<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>

<script>

    // localStorage.setItem('language', 'zh-CN');

    let container = document.getElementById('container'),

        width = container.offsetWidth * 2,

        height = container.offsetHeight;

    const {Scene, Sprite} = spritejs;

    const scene = new Scene('#container', {

        // viewport: ['auto', 'auto'],

        resolution: ['flex', 'flex'],

    });

    (async function () {

        await scene.preload({

                id: 'bg',

                src: './img/bgImage.png'

            }, {

                id: 'robot',

                src: './img/robot.png'

            }, {

                id: 'rabbit',

                src: './img/rabbit.png'

            }, {

                id: 'egg1',

                src: './img/dragon-egg1.png'

            }, {

                id: 'egg2',

                src: './img/dragon-egg2.png'

            }, {

                id: 'snow',

                src: './img/snowflake.png'

            }

        )

    })();

    const layer = scene.layer();

    const robot = new Sprite('./img/robot.png');

    const rabbit = new Sprite('rabbit');

    const egg1 = new Sprite('egg1');

    const egg2 = new Sprite('egg2');

    const bg = new Sprite('bg');

    bg.attr({

        anchor: [0, 0],

        x: 0,

        y: 0,

        // size: [1000, 600]

    });

    robot.attr({

        anchor: [0.5, 0],

        x: width,

        y: 0,

        // scale: 0.5

        size: [182, 252]

    });

    let robotHeight = robot.offsetSize[1];

    async function init() {

        let rabbitP = await initEgg(rabbit);

        let egg1P = await initEgg(egg1);

        let egg2P = await initEgg(egg2);

        layer.append(bg);

        layer.append(robot);

        layer.append(rabbitP);

        layer.append(egg1P);

        layer.append(egg2P);

        animateRobot();

        // 创建300片雪花，循环，稍微节省点性能

        for (let i = 0; i < 300; i++) {

            setTimeout(async () => {

                let snow = new Sprite('snow');

                let snowP = await initSnow(snow);

                layer.append(snowP.sprite);

                animateSnow(snowP);

            }, 100 * i);

        }

    }

    // 入口

    init();

    // 初始化蛋蛋

    async function initEgg(egg) {

        await egg.attr({

            anchor: [0.5, 0.5],

            x: width / 2,

            y: (height / 2) + robotHeight,

            opacity: 0

        });

        return egg;

    }

    // 初始化雪花

    async function animateSnow(snow) {

        snow.sprite.animate([

            {

                x: snow.attribute.x,

                y: 0

            },

            {

                x: snow.attribute.x,

                y: height * 2

            }

        ], {

            duration: 5000,

            iterations: Infinity,

            direction: 'default',

        })

    }

    // 雪花的动画

    async function initSnow(snowSpite) {

        var sss = random(20, 100);

        let snow = {

            width: sss,

            height: sss,

            x: random(0, width),

            y: 0,

            opacity: random(0, 1)

        };

        await snowSpite.attr({

            anchor: [0.5, 0.5],

            x: snow.x,

            y: snow.y,

            size: [snow.width, snow.height],

            opacity: snow.opacity

        });

        let obj = {

            attribute: snow,

            sprite: snowSpite

        };

        return obj;

    }

    // 会飞的机器人

    async function animateRobot() {

        await robot.animate([

            {x: width, y: 0},

            {x: width / 2, y: height / 2},

            {x: width / 2, y: height / 2 + 60},

        ], {

            duration: 3500,

            iterations: 1,

            direction: 'default',

        }).finished;

        animateEgg(rabbit, 45);

        await robot.animate([

            {x: width / 2, y: height / 2 + 60},

            {x: width / 2, y: height / 2},

            {x: width / 2, y: height / 2 + 60},

        ], {

            duration: 1500,

            iterations: 1,

            direction: 'default',

        }).finished;

        animateEgg(egg1, -45);

        await robot.animate([

            {x: width / 2, y: height / 2 + 60},

            {x: width / 2, y: height / 2},

            {x: width / 2, y: height / 2 + 60},

        ], {

            duration: 1500,

            iterations: 1,

            direction: 'default',

        }).finished;

        animateEgg(egg2, 0);

        await robot.animate([

            {x: width / 2, y: height / 2 + 60},

            {x: width / 2, y: height / 2},

            {x: 0, y: 0}

        ], {

            duration: 2000,

            iterations: 1,

            direction: 'default',

        }).finished;

        animateRobot();

    }

    // 蛋的动画

    async function animateEgg(egg, deg) {

        egg.animate([

            {

                x: width / 2,

                y: (height / 2) + robotHeight + 60,

                opacity: 1

            },

            {

                x: width / 2 + deg,

                y: (height / 2) + robotHeight + 360,

                opacity: 1

            },

            {

                rotate: deg

            }

        ], {

            duration: 2000,

            iterations: 1,

            direction: 'default',

            // fill: 'forwards'

        });

    }

    // 随机

    function random(min, max) {

        return Math.random() * (max - min) + min;

    }

</script>

</html>

demo1:会下蛋的机器人的更多相关文章

  1. Delphi 实现 图灵机器人API（IDHTTP POST ）

    此功能所需的 Key及接口文档,都可以在图灵机器人的官网下载, 小伙伴们需要申请自己的图灵机器人账号. 申请方法请自行百度“图灵机器人”  . 登录账号后,在左侧的[机器人接入],获取需要的信息,记得 ...

  2. 【翻译】用AIML实现的Python人工智能聊天机器人

    前言 用python的AIML包很容易就能写一个人工智能聊天机器人. AIML是Artificial Intelligence Markup Language的简写, 但它只是一个简单的XML. 下面 ...

  3. 3.C#面向对象基础聊天机器人

    基于控制台的简单版的聊天机器人,词库可以自己添加. 聊天机器人1.0版本 源码如下: using System; using System.Collections.Generic; using Sys ...

  4. Python 简易聊天机器人

    聊天机器人 | |-----MySql | |---module--"逻辑运算层" | | | |---ciku--"与词库交互" | | | |---dict ...

  5. java 聊天猜拳机器人

    2016-12-06本随笔记录第一次制作经过,感谢各位大神指导. 工具:eclipse;JAVA JDK; 语言:java 时间:2016.11.23 作者:潇洒鸿图 地址:http://www.cn ...

  6. 用VB实现SmartQQ机器人

    这里为了便于介绍程序设计的流程,更多以代码形式给出,具体可用火狐浏览器的firebug插件来抓包分析,或者用谷歌浏览器的开发者工具进行抓包.抓包地址是:http://w.qq.com 第一步,是二维码 ...

  7. PHP 检测机器人，屏蔽内页

    PHP 检测机器人,屏蔽内页 <?php // SpiderHelper::rewrite301(); // SpiderHelper::showRobotTxt(); class Spider ...

  8. vijos1250 最勇敢的机器人

    背景 Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ 描述 机器人们都想知道谁是最勇敢的,于是它们比赛搬运一些物品. 它们到了一个仓库,里面有n个物品,每个物品都有一个价 ...

  9. 【chrome插件】web版微信接入图灵机器人API实现自动回复

    小贱鸡自动回复API已经不可以用了,现在改良接入图灵机器人API 360chrome浏览器团队翻译了部分谷歌插件开发文档 地址:http://open.chrome.360.cn/extension_ ...

随机推荐

  1. react服务端渲染同构报错Browser history needs a DOM

    https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..

  2. oracle 聚合函数 LISTAGG ，将多行结果合并成一行

    LISTAGG( to_char(Item_Category_Name), ',') WITHIN GROUP(ORDER BY Item_Category_Name)  -- 将 Item_Cate ...

  3. docker参数注解

    # docker --help Usage: docker [OPTIONS] COMMAND [arg...] docker daemon [ --help | ... ] docker [ -h ...

  4. vi替换字符串

    :%s/vivian/sky/g(等同于 :g/vivian/s//sky/g) 替换每一行中所有 vivian 为 sky

  5. Nest.js 添加中间件

    Docs: https://docs.nestjs.com/middleware 创建中间件 logger.middleware.ts import { Injectable, NestMiddlew ...

  6. JBPM工作流（六）——流程变量

    1.启动流程实例 ? 1 2 3 4 5 6 7 // 启动流程实例 @Test public void startProcessInstance() {     // 使用指定key的最新版本的流程 ...

  7. [转] - xargs 分析

    原文出处:http://www.cnblogs.com/f-ck-need-u/p/5925923.html 学习这个xargs花了很长时间,在网上翻了很久也查了很多书关于xargs的介绍,都只是简单 ...

  8. Codeforces 431C - k-Tree - [树形DP]

    题目链接:https://codeforces.com/problemset/problem/431/C 题意: 定义一个 $k$ 树,即所有节点都有 $k$ 个儿子节点,相应的这 $k$ 条边的权重 ...

  9. ng2-tree

    [转]https://github.com/valor-software/ng2-tree#eyes-demo  demo:http://valor-software.com/ng2-tree/

  10. ADC裸机程序

    硬件平台:JZ2440 实现功能:通过采集触摸屏ADC的电压值,推算触摸xy坐标 start.s init.c nand.c interrupt.c uart.c uart.h my_stdio.c ...