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_ ...
随机推荐
- Win2008R2+Apache+PHP+Tomcat配置
一.VC运行库 对于Apache和PHP,在Windows上运行的话都需要对应VC运行库的支持,即Apache.PHP和VC运行库这三者的版本必须相对应,这就会带来很多问题,比如下了较新的Apache ...
- Java & PHP & Javascript 通用 RSA 加密 解密 (长字符串)
系统与系统的数据交互中,有些敏感数据是不能直接明文传输的,所以在发送数据之前要进行加密,在接收到数据时进行解密处理:然而由于系统与系统之间的开发语言不同. 本次需求是生成二维码是通过java生成,由p ...
- 0710 mux协议的作用（ppp拨号时如何和gprs进行at指令交互）
ppp拨号使gprs上网的同时如何和gprs模块进行at指令的交互,这是一个问题. 在linux中,ppp拨号上网是内核中支持的,只需要在内核配置中选上. ppp拨号的方式使gprs进行上网与at指令 ...
- Java-IO基础类回忆
好记性不如烂笔头,就拿Java IO来说吧,这部分的基础类我大学都已经学过一遍了,但是现在忘记的差不多了,所以准备写一篇博客,讲这些东西都回忆一下,并且整理一下. 首先借用网上的一张图: 纵向分为字节 ...
- maven 中的mirror详解
一.前言 今天同事遇到个问题,本来公司是有maven私服的,但同事觉得上面有些东西下载不到,于是在自己本地的maven配置中加了: <mirrors> <mirror> < ...
- Retrofit2 项目配置
在项目的 app build.gradle 文件中加入 dependencies { // Retrofit2implementation 'com.squareup.retrofit2:retro ...
- [Educational Round 3][Codeforces 609E. Minimum spanning tree for each edge]
这题本来是想放在educational round 3的题解里的,但觉得很有意思就单独拿出来写了 题目链接:609E - Minimum spanning tree for each edge 题目大 ...
- CF886C Petya and Catacombs
题目描述 A very brave explorer Petya once decided to explore Paris catacombs. Since Petya is not really ...
- php 字符串截取，支持中文和其他编码
function.php //使用方法 $content= mb_substr($content,0,25,'utf-8'); /** * 字符串截取,支持中文和其他编码 * @static * @a ...
- Golang中mac地址+时间戳加入rand.Seed()产生随机数
记录一下用mac地址+local时间作为seed来产生随机数 // 首先记录一下rand.Seed()怎么用 // 官方说明,传入int64数据为Seed func (r *Rand) Seed(se ...