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_ ...
随机推荐
- ZOJ 3886 Nico Number（筛素数+Love（线）Live（段）树）
problemCode=3886">ZOJ 3886 题意: 定义一种NicoNico数x,x有下面特征: 全部不大于x且与x互质的数成等差数列,如x = 5 ,与5互素且不大于5的数 ...
- Ubuntu下pdf和图片互转
前边文章可以将ppt转换为pdf 查看 使用unoconv将ppt转为pdf,再使用imagemagick将pdf转为图片 这次想将pdf和图片进行互转 当前目录下只有2.ppt 1.ppt转pdf ...
- 深度学习中交叉熵和KL散度和最大似然估计之间的关系
机器学习的面试题中经常会被问到交叉熵(cross entropy)和最大似然估计(MLE)或者KL散度有什么关系,查了一些资料发现优化这3个东西其实是等价的. 熵和交叉熵 提到交叉熵就需要了解下信息论 ...
- [原]CentOS 7 chrony 笔记
~]# timedatectl status Local -- :: CST ==> 本地系统实际时间,设置时间timedatectl set-:: 设置日期timedatectl set- 设 ...
- Python __all__变量用法
Python中一个py文件就是一个模块,“__all__”变量是一个特殊的变量,可以在py文件中,也可以在包的__init__.py中出现. 1.在普通模块中使用时,表示一个模块中允许哪些属性可以被导 ...
- Solve Error: "errcode": 85005, "errmsg": "appid not bind weapp hint"
在使用微信官方给的添加自定义菜单的示例代码: { "button":[ { "type":"click", "name" ...
- JavaScript 运行机制详解
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- python 中的 list dict 与 set 的关系
转自: http://www.cnblogs.com/soaringEveryday/p/5044007.html list arraylist 实现(数组) List 通过内置的 append()方 ...
- 教你如何用笔记本设置超快WIFI
以win7为例 1.在主菜单运行框输入 cmd------->以管理员的身份运行 2.命令提示符中输入:netsh wlan set hostednetwork mode=allow ssid ...
- elementUI中table组件会出现空白部分
先上图: 造成原因: width全部都写死了,(注释:不要全部都写死width,没写width的会自动分配宽度)