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_ ...
随机推荐
- ABBYY PDF Transformer+功能概述
ABBYY PDF Transformer+是一个新的.全面的巧妙解决PDF文档的工具,它将泰比的光学字符识别(OCR)技术和Adobe®PDF技术完美结合,以确保实现便捷地处理任何类型的PDF文件, ...
- 2单一职责原则SRP
一.什么是单一职责原则 单一职责原则(Single Responsibility Principle ): 就一个类而言,应该仅有一个引起它变化的 原因. 二.多功能的山寨手机 山寨手机的功能: 拍照 ...
- ORACLE调优深入理解AWR报告(转)
AWR报告分析可从以下几点入手: (1).Oacle主机资源开销分析及负载情况 (2).oracle top信息分析 Top 10 Foreground Events by Total Wait Ti ...
- solr搜索分词优化
solr服务器配置好在搜索时经常会搜出无关内容,把不该分的词给分了,导致客户找不到自己需要的内容,那么我们就从配置词典入手解决这个问题. 首先需要知道自带的词典含义: 停止词:停止词是无功能意义的词, ...
- linux的基本操作（文本编辑工具vim）
文本编辑工具vim * 命令模式:在一般模式下,输入”:”或者”/”即可进入命令模式.在该模式下,你可以搜索某个字符或者字符串,也可以保存.替换.退出.显示行号等等. 下面笔者教你如何在一个空白文档中 ...
- IkAnalyzer2012FF_u1.jar免费下载
链接:https://pan.baidu.com/s/1P_0cdRLKJO4VIUTokvTS0g 提取码:qt3w
- Yarn Node Labels
Yarn Node Labels + Capacity-Scheduler 在yarn-site.xml中开启capacity-schedule yarn-site.xml <property& ...
- maven deploy 上传jar包到私有仓库
mvn \ deploy:deploy-file \ -DgroupId=com.weibo.datasys \ -DartifactId=data-flow \ -Dversion=2.0.0 \ ...
- mui 普通新闻文字列表 图文新闻列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- CORS jsonp
现在碰到了请求跨域的问题,结合前面讲的一些概念,我们大致可以猜到解决跨域请求的两种方式: 在服务端启用CORS.让无服务端拥有处理JSONP的能力.这两种跨域解决方案的区别是什么呢? JSONP只支持 ...