demo1:会下蛋的机器人

<!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:会下蛋的机器人的更多相关文章

Delphi 实现图灵机器人API（IDHTTP POST ）
此功能所需的 Key及接口文档,都可以在图灵机器人的官网下载, 小伙伴们需要申请自己的图灵机器人账号. 申请方法请自行百度“图灵机器人” . 登录账号后,在左侧的[机器人接入],获取需要的信息,记得 ...
【翻译】用AIML实现的Python人工智能聊天机器人
前言用python的AIML包很容易就能写一个人工智能聊天机器人. AIML是Artificial Intelligence Markup Language的简写, 但它只是一个简单的XML. 下面 ...
3.C#面向对象基础聊天机器人
基于控制台的简单版的聊天机器人,词库可以自己添加. 聊天机器人1.0版本源码如下: using System; using System.Collections.Generic; using Sys ...
Python 简易聊天机器人
聊天机器人 | |-----MySql | |---module--"逻辑运算层" | | | |---ciku--"与词库交互" | | | |---dict ...
java 聊天猜拳机器人
2016-12-06本随笔记录第一次制作经过,感谢各位大神指导. 工具:eclipse;JAVA JDK; 语言:java 时间:2016.11.23 作者:潇洒鸿图地址:http://www.cn ...
用VB实现SmartQQ机器人
这里为了便于介绍程序设计的流程,更多以代码形式给出,具体可用火狐浏览器的firebug插件来抓包分析,或者用谷歌浏览器的开发者工具进行抓包.抓包地址是:http://w.qq.com 第一步,是二维码 ...
PHP 检测机器人，屏蔽内页
PHP 检测机器人,屏蔽内页 <?php // SpiderHelper::rewrite301(); // SpiderHelper::showRobotTxt(); class Spider ...
vijos1250 最勇敢的机器人
背景 Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ 描述机器人们都想知道谁是最勇敢的,于是它们比赛搬运一些物品. 它们到了一个仓库,里面有n个物品,每个物品都有一个价 ...
【chrome插件】web版微信接入图灵机器人API实现自动回复
小贱鸡自动回复API已经不可以用了,现在改良接入图灵机器人API 360chrome浏览器团队翻译了部分谷歌插件开发文档地址:http://open.chrome.360.cn/extension_ ...

随机推荐

git 中merge的用法
git merge –no-ff 可以保存你之前的分支历史.能够更好的查看 merge历史,以及branch 状态. git merge 则不会显示 feature,只保留单条分支记录.
SQUAD的rnet复现踩坑记
在港科大rnet(https://github.com/HKUST-KnowComp/R-Net) 实现的基础上做了复现采用melt框架训练,原因是港科大实现在工程上不是很完美,包括固定了batch ...
新唐N32905U1DN开发教程：MDK环境下工程搭建(官方提供的固件库)（转）
前言:新唐N32905U1DN单片机不支持用户将程序烧录到内部FLASH,必须外挂FLASH存储用户程序,可以是SPI FLASH.NAND FLASH.SD卡.用户采用裸机开发的方式可使用官方提供的 ...
Git-简单的利用SourceTree提交代码（转载）
http://www.cnblogs.com/shenyangxiaohuo/p/5239723.html
jvm.option是什么,它是如何加载的
jvm.option是一些程序里边的java的配置参数的一个集合,不同的应用都会定义自己的jvm.options用来控制一些jvm的参数以下,以elasticsearch为例,来说明它是如何加载的 ...
JBPM工作流（一）——实现一个简单的工作流例子
一.JBPM定义 JBPM,全称是Java Business Process Management(业务流程管理),它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易扩展的可执行流 ...
4 html文件引用问题
通常在写html文件的时候会遇到需要引入样式文件,或者图片等问题,对于有一定开发经验的人来说,这些都不是问题,做为初学者,还是有必要理解html文件引用的“思路”的当html文件和要引用的文件在同一 ...
软件毕业设计文档流程与UML图之间的关系
每个模型都是用一种或者多种UML图来描述的,映射关系如下: 1.用例模型:使用用例图.顺序图.通信图.活动图和状态图来描述. 2.分析模型:使用类图和对象图(包括子系统和包).顺序图(时序图).通信图 ...
c++课设
#include <stdio.h>#include <time.h>#include <math.h>#define C 60000;struct Student ...
Laravel-2
● php发邮件参考:https://blog.csdn.net/sinat_37390744/article/details/54667794 ● ajax提交表单时防止csrf攻击 1. 在网页 ...

demo1:会下蛋的机器人

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

随机推荐

热门专题