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_ ...
随机推荐
- springboot-custom starter
Spring Boot由众多Starter组成,随着版本的推移Starter家族成员也与日俱增.在传统Maven项目中通常将一些层.组件拆分为模块来管理, 以便相互依赖复用,在Spring Boot项 ...
- 再整合ssh时，关于Spring IOC注入问题
No matching editors or conversion strategy found IOC问题: EmpService bean 实现了 Iemp接口,就不能直接作为参数传入Action ...
- Tomcat以Daemon的方式启动（CentOS6&7）
1 前言 一直以来都觉得Tomcat以root身份运行非常不安全,故研究Tomcat如何以普通用户身份运行,以下是参考网络上的一些配置实现Tomcat以daemon方式运行于CentOS 6& ...
- 为什么要用kafka、rabbit等消息队列
1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多消息队列所采用的&q ...
- MySQL加密解密
1. 加密:mysql323,不可逆 select old_password('bbs.antian365.com'); # 10c886615b135b38 2. 加密:mysqlsha1,不可逆 ...
- JVM可达性分析算法中，哪些可以作为 root ？
被启动类(bootstrap 加载器)加载的类和创建的对象: JavaStack 中的引用的对象 (栈内存中引用的对象): 方法区中静态引用指向的对象: 方法区中常量引用指向的对象: Native 方 ...
- 恒生UFX交易接口基本介绍说明
1.恒生UFT和UFX有什么区别? UFT是一个极速交易系统,UFX是一个统一接入系统.交易系统很显然是可以进行股票交易的,UFX是所有后台交易系统的接入系统,不管后台是什么样子的交易系统都是可以通过 ...
- python nose测试框架全面介绍十二 ----用例执行顺序打乱
在实际执行自动化测试时,发现我们的用例在使用同一个资源的操作时,用例的执行顺序对测试结果有影响,在手工测试时是完全没法覆盖的. 但每一次都是按用例名字来执行,怎么打乱来执行的. 在网上看到一个有意思的 ...
- nw.js---创建一个点击菜单
使用nw.js创建一个可点击的菜单: <!doctype html> <html lang="en"> <head> <meta char ...
- Java基础学习笔记十九 File
IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把这些数据 ...