(原)用pixi.js 实现 方块阵点击后原地自转效果
源码
各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动。而不是一直加速,有没有什么好办法?
http://files.cnblogs.com/files/kmsfan/pixi.js
<script src="~/Scripts/pixi.js"></script><div id="container"></div><script>var renderer = PIXI.autoDetectRenderer(800, 500, { backgroundColor: 0x1099bb });$("#container").append(renderer.view);var stage = new PIXI.Container();var container = new PIXI.Container();stage.addChild(container);var bunnyArray = new Array();for (var i = 0; i < 5; i++){bunnyArray[i] = new Array();}//载入图片 //for (var i = 0; i < 5; i++)//{// for (var j = 0; j < 5; j++)// {// var bunny = PIXI.Sprite.fromImage("/Content/img/bunny.png");// bunny.x = 40 * j;// bunny.y = 40 * i;// bunny.interactive = true;// //bunny.on("mousedown",onClick);// bunnyArray[i][j]=bunny;// container.addChild(bunnyArray[i][j]);// }//}for (var i = 0; i < 5; i++) {for (var j = 0; j < 5; j++) {var rect = new PIXI.Graphics();var width = 70;rect.lineStyle(1, randomColor());rect.interactive = true;rect.hitArea = new PIXI.Rectangle(width * i, width * j, width, width);rect.drawRect(width * i, width * j, width, width);bunnyArray[i][j] = rect;container.addChild(bunnyArray[i][j]);}}for (var i = 0; i < bunnyArray.length; i++){for (var j = 0; j < bunnyArray[i].length; j++){bunnyArray[i][j].on("click", onClick);}}container.x = 200;container.y = 60;renderImage();function renderImage(){requestAnimationFrame(renderImage);//renderer.render(container);renderer.render(container);//renderer.render(stage);}function animate() {requestAnimationFrame(animate);var bunny1 = thisPointer;bunny1.rotation += 0.03;cancelAnimationFrame(request);}function animateErase(){//requestAnimationFrame(animateErase);var bunny1 = thisPointer;bunny1.rotation -= 0.01;}var thisPointer;var request;function onClick(eventData){thisPointer = calcuatePos(eventData);request = requestAnimationFrame(animate);}//生成随机颜色function randomColor() {var colorStr = Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase();return "000000".substring(0, 6 - colorStr) + colorStr;}//判断是否点击了这个东西function calcuatePos(eve){var x = (eve.data.global.x);var y = (eve.data.global.y);x = x - container.x;y = y - container.y;for (var i = 0; i < bunnyArray.length; i++) {for (var j = 0; j < bunnyArray[i].length; j++) {var instance = bunnyArray[i][j];if (instance.hitArea.x <= x && instance.hitArea.x + 70 >= x && instance.hitArea.y <= y && instance.hitArea.y+70>=y) {instance.x = instance.hitArea.x+70/2;instance.y = instance.hitArea.y+70/2;instance.pivot.x = instance.hitArea.x+70/2;instance.pivot.y = instance.hitArea.y+70/2;return instance;}}}}</script>
效果
(原)用pixi.js 实现 方块阵点击后原地自转效果相关推荐
- H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动
根据 H5 2D渲染引擎-Pixi.js 渲染器.舞台和精灵的创建,创建精灵(不做其他设置)并添加到渲染器后,精灵默认的位置是在渲染器的左上角(x=0,y=0),大小为原图片大小. 定位 可以通过改变 ...
- 6.pixi.js编写的塔防游戏(类似保卫萝卜)-游戏资源打包逻辑
游戏说明 一个用pixi.js编写的h5塔防游戏,可以用electron打包为exe,支持移动端,也可以用webview控件打包为app在移动端使用 环境说明 cnpm@6.2.0 npm@6.14. ...
- 【原】聊聊js代码异常监控
[原]聊聊js代码异常监控 参考文章: (1)[原]聊聊js代码异常监控 (2)https://www.cnblogs.com/xianyulaodi/p/6201829.html (3)https: ...
- PIXI.JS兼容微信小游戏
来自:PIXI兼容微信小游戏 - 天之道利而不害 - 博客园 PIXI兼容微信小游戏 首先导入官方的weapp-adapter,然后导入pixi.min.js,微信小程序使用ES6的module引用模 ...
- 数独动态解题演示小网站 - 基于Vue/pixi.js/Flask
解数独不难,但如果能动态演示解题步骤就更好了. 参考:最难数独的快速解法 - python https://www.jianshu.com/p/1b2ee6539d4b 功能 读取公开网站的数独题目 ...
- pixi.js 制作 流星雨效果
pixi.js 制作 流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...
- pixi.js 总结
我的博客简单简洁 可能表达不清. 如有想法, 敬请留言.谢谢! 群:881784250 https://github.com/ccaleb/endless-runner/tree/master/jav ...
- pixi.js v5 快速了解
pixi.js 追求简单, 性能,高价值. pixi.js v5比v4代码减少了20%,更加模块化,更加优雅 pixi.js一步一脚印,版本持续稳定的更新, 深入学习pixi.js的话,你将收获很多 ...
- 眨个眼就学会了 Pixi.js
本文简介 带尬猴,我是德育处主任 当今的Web开发中,图形和动画已经成为了吸引用户注意力的重要手段之一.而 Pixi.js 作为一款高效.易用的2D渲染引擎,已经成为了许多开发者的首选~~(我吹的)~ ...
最新文章
- Markdown 编辑器的使用记录 (Typora)
- iOS高级面试之NSRunLoop须知
- python 多项式拟合
- [Lintcode]115. Unique Paths II/[Leetcode]63. Unique Paths II
- IO编程__字节流__输入、输出__图片移动
- 计算机组成原理双端口存储器实验,计算机组成原理双端口存储器实验报告.doc...
- wamp下更改mysql密码
- 区块链相关数据报表_区块链相关论文研读5:分布式隐私保护可审计的账本,zkLedger...
- mysql增删改查不区分大小写吗_MySQL的增删改查语句以及数据库设计的三大范式...
- win10安装ubuntu子系统,然后安装python3.6
- [转]浅谈php web安全
- 20172304 2017-2018-2 《程序设计与数据结构》第五周学习总结
- jdk1.6-64下载
- 如何关闭正在运行的端口
- 基于simulink的Active anti-islanding-AFD主动反孤岛模型仿真
- 2021-07-27 Vue修改主页
- word 的使用 —— 快捷键(分节符 分页符 分栏符)
- 【杂七杂八】《我叫MT online》反编译解析
- php夜间时间模式,Typecho夜间模式设置
- 教程篇(7.0) 09. FortiGate安全 应用控制 ❀ Fortinet 网络安全专家 NSE 4
热门文章
- php ajax json post请求参数传递,javascript - ajax post 有个请求参数要用json 但请问js怎么转json的?...
- snipaste截图软件滚动截图_截图工具的逆袭,Snipaste 还可以这么玩
- 【高性能定时器】 时间轮
- 进程控制 (二) Others
- c++常见并且必须记住的问题
- 网络层网络层服务及其 IP 地址
- mjpg-streamer框架分析
- 【计算机系统设计】重点 · 学习笔记(1)(资源消耗)
- 【聊透SpringMVC】java技术经理岗位职责
- Java高级工程师每日面试题精选,面试经历分享