源码

  各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动。而不是一直加速,有没有什么好办法?

PS:问题已经解决,谢谢评论的大神@Antineutrino !
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 实现 方块阵点击后原地自转效果相关推荐

  1. H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动

    根据 H5 2D渲染引擎-Pixi.js 渲染器.舞台和精灵的创建,创建精灵(不做其他设置)并添加到渲染器后,精灵默认的位置是在渲染器的左上角(x=0,y=0),大小为原图片大小. 定位 可以通过改变 ...

  2. 6.pixi.js编写的塔防游戏(类似保卫萝卜)-游戏资源打包逻辑

    游戏说明 一个用pixi.js编写的h5塔防游戏,可以用electron打包为exe,支持移动端,也可以用webview控件打包为app在移动端使用 环境说明 cnpm@6.2.0 npm@6.14. ...

  3. 【原】聊聊js代码异常监控

    [原]聊聊js代码异常监控 参考文章: (1)[原]聊聊js代码异常监控 (2)https://www.cnblogs.com/xianyulaodi/p/6201829.html (3)https: ...

  4. PIXI.JS兼容微信小游戏

    来自:PIXI兼容微信小游戏 - 天之道利而不害 - 博客园 PIXI兼容微信小游戏 首先导入官方的weapp-adapter,然后导入pixi.min.js,微信小程序使用ES6的module引用模 ...

  5. 数独动态解题演示小网站 - 基于Vue/pixi.js/Flask

    解数独不难,但如果能动态演示解题步骤就更好了. 参考:最难数独的快速解法 - python https://www.jianshu.com/p/1b2ee6539d4b 功能 读取公开网站的数独题目 ...

  6. pixi.js 制作 流星雨效果

    pixi.js 制作 流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...

  7. pixi.js 总结

    我的博客简单简洁 可能表达不清. 如有想法, 敬请留言.谢谢! 群:881784250 https://github.com/ccaleb/endless-runner/tree/master/jav ...

  8. pixi.js v5 快速了解

    pixi.js 追求简单,  性能,高价值. pixi.js v5比v4代码减少了20%,更加模块化,更加优雅 pixi.js一步一脚印,版本持续稳定的更新, 深入学习pixi.js的话,你将收获很多 ...

  9. 眨个眼就学会了 Pixi.js

    本文简介 带尬猴,我是德育处主任 当今的Web开发中,图形和动画已经成为了吸引用户注意力的重要手段之一.而 Pixi.js 作为一款高效.易用的2D渲染引擎,已经成为了许多开发者的首选~~(我吹的)~ ...

最新文章

  1. Markdown 编辑器的使用记录 (Typora)
  2. iOS高级面试之NSRunLoop须知
  3. python 多项式拟合
  4. [Lintcode]115. Unique Paths II/[Leetcode]63. Unique Paths II
  5. IO编程__字节流__输入、输出__图片移动
  6. 计算机组成原理双端口存储器实验,计算机组成原理双端口存储器实验报告.doc...
  7. wamp下更改mysql密码
  8. 区块链相关数据报表_区块链相关论文研读5:分布式隐私保护可审计的账本,zkLedger...
  9. mysql增删改查不区分大小写吗_MySQL的增删改查语句以及数据库设计的三大范式...
  10. win10安装ubuntu子系统,然后安装python3.6
  11. [转]浅谈php web安全
  12. 20172304 2017-2018-2 《程序设计与数据结构》第五周学习总结
  13. jdk1.6-64下载
  14. 如何关闭正在运行的端口
  15. 基于simulink的Active anti-islanding-AFD主动反孤岛模型仿真
  16. 2021-07-27 Vue修改主页
  17. word 的使用 —— 快捷键(分节符 分页符 分栏符)
  18. 【杂七杂八】《我叫MT online》反编译解析
  19. php夜间时间模式,Typecho夜间模式设置
  20. 教程篇(7.0) 09. FortiGate安全 应用控制 ❀ Fortinet 网络安全专家 NSE 4

热门文章

  1. php ajax json post请求参数传递,javascript - ajax post 有个请求参数要用json 但请问js怎么转json的?...
  2. snipaste截图软件滚动截图_截图工具的逆袭,Snipaste 还可以这么玩
  3. 【高性能定时器】 时间轮
  4. 进程控制 (二) Others
  5. c++常见并且必须记住的问题
  6. 网络层网络层服务及其 IP 地址
  7. mjpg-streamer框架分析
  8. 【计算机系统设计】重点 · 学习笔记(1)(资源消耗)
  9. 【聊透SpringMVC】java技术经理岗位职责
  10. Java高级工程师每日面试题精选,面试经历分享