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_ ...
随机推荐
- 配置python开发环境（Eclipse + pyDev）
jdk-11.0.2eclipse 2018-12python 3.7.2 1. install jdk, 配置环境变量 新建JAVA_HOME 系统变量,C:\Program Files\Java\ ...
- 【2019年04月03日】A股最便宜的股票
太钢不锈(SZ000825) - 当前便宜指数:161.66 - 滚动扣非市盈率PE:4.62 - 滚动市净率PB:1.03 - 动态年化股息收益率:4.53% - 太钢不锈(SZ000825)的历史 ...
- Linux下">/dev/null 2>&1 "相关知识说明
在学习Linux的过程中,常会看到一些终端命令或者程序中有">/dev/null 2>&1"出现,由于已经遇到了好几次了,为了理解清楚,不妨花点时间百度或者go ...
- ganglia-gmond.conf配置文件
运行下列命令可以生成gmond默认配置文件: User@host:$ gmond -t 配置文件由大括弧括起来的几个section组成.这些section可以粗略划分为两个逻辑分类.第一类中的sect ...
- perl 递归删除目录和目录中的文件
#!/usr/bin/perl use autodie; use utf8; use Encode qw(decode encode); sub del_dir{ my $path = shift @ ...
- oracle xe 创建表空间
使用OracleXE控制台,我们会发现一个奇怪的现象:没有提供创建表空间.增加数据文件等功能.这似乎和我们使用Oracle标准版控制台不一样. 其实在OracleXE中可以创建新的表空间,不过一般情况 ...
- 已知两点的经度和纬度，计算两点间的距离(php，javascript)
php代码:转载 http://www.cnblogs.com/caichenghui/p/5977431.html /** * 求两个已知经纬度之间的距离,单位为米 * * @param lng1 ...
- PHP base64数据与图片的互相转换
1.解析base64数据成图片 The problem is that data:image/bmp;base64, is included in the encoded contents. This ...
- mysql sql注入getshell新姿势
sql.php?sql=1'报错信息为:1064:You have an error in your SQL syntax; check the manual that corresponds to ...
- 13.vue组件
vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8& ...