(原)用pixi.js 实现 方块阵点击后原地自转效果

源码

   各位,请教一个问题,我这个还有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>

效果 

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399616.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

datatables 增、删、查、改

前提: datatable 定义 var table $(#example).DataTable({"ajax": "donor/book_donation_data.php",responsive: true,//data: data,columns: [{data: id},{data: donor},{data: book_name},{data: author},{data: publishing_time},{data: price},{data…

一位中国婆婆的自述[转]

小孙子Toby已经3岁了。在美国待了三个月&#xff0c;洋媳妇Susan教育孩子的方法&#xff0c;令我这个中国婆婆大开眼界。每天早上&#xff0c;Toby醒来后&#xff0c;Susan把早餐往餐桌上一放&#xff0c;就自顾自地忙去了。Toby会自己爬上凳子&#xff0c;喝牛奶&#xff0c;吃…

Webpack使用指南

Webpack 是当下最热门的前端资源模块化管理和打包工具。 什么是webpack Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔&#xff0c;等到实际需要的时候再异…

学习笔记找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID....

解决 找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID. private void DisplayHotBooks() { //获取所有的书分类信息 IList<Category> list CategoryManager.GetAllCategories(); int i 0; foreach (Category …

JS--数组和字典

JS--数组和字典 定义数组 var my_array new Array(); 一、JS数组 JavaScript中的数组类似于Python的列表   https://www.cnblogs.com/bigberg/p/9237856.html 1 a [11,22,33,44] 常见功能&#xff1a;  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 obj.length 数…

程序猿值得看的几个技术网站(记录)

最近发现一批很优秀的网站&#xff0c;他们有的属于个人有的属于组织&#xff0c; 但是他们网站中所记录的内容&#xff0c;可以供很多软件开发的人员学习&#xff0c;不同于国内一线的一些网站&#xff0c;这些网站所记录中的内容&#xff0c;精致&#xff0c;简洁&#xff01…

基本数据类型了解

BCD码&#xff1a; 用4位二进制数来表示1位十进制数中的0~9这10个数码&#xff0c;简称BCD码&#xff0c;即BCD代码。Binary-Coded Decima&#xff0c;简称BCD&#xff0c;称BCD码或二- 十进制代码&#xff0c;亦称二进码十进数。是一种二制的数字编码形式&#xff0c;用二进制…

wordpress去掉自带的logo或者左侧栏的菜单方法

https://www.jb51.net/cms/144566.html 去掉logo或者左侧栏的菜单&#xff0c;防止被改掉。 在使用模板下的functions.php下修改 复制代码 代码如下: function my_edit_toolbar($wp_toolbar) { $wp_toolbar->remove_node(wp-logo); //去掉Wordpress LOGO $wp_toolba…

vue-cli创建项目

vue学习资料 Vue.js官网&#xff08;https://vuejs.org.cn/&#xff09; Vue-cli (https://github.com/vuejs/vue-cli) Vue-rescource (https//github.com/vuejs/vue-rescource) Vue-router (https://github.com/vuejs/vue-router) better-scroll (https://github.com/ustbhuan…

通过webbrowser实现js与winform的相互调用

为什么80%的码农都做不了架构师&#xff1f;>>> 1客户端页面 <!DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"> <head><meta charset"utf-8" /><title></title> </head> <body>&l…

Visual Studio 2012中使用GitHub

前言 一直以来都想使用Git来管理自己平时积累的小代码&#xff0c;就是除了工作之外的代码了。有时候自己搞个小代码&#xff0c;在公司写了&#xff0c;就要通过U盘或者网盘等等 一系列工具进行Copy&#xff0c;然后回家才能继续在原来的基础上作业。Copy来Copy去的麻烦不说&a…

JS判断字符串变量是否含有某个字串的方法

https://www.cnblogs.com/mmyh/p/6065920.html var str "abc"; if(str.indexOf("bc")>-1){ alert(str中包含bc字符串); } https://blog.csdn.net/weixin_42869591/article/details/83215144 js&#xff0c;indexOf()查找字符串&#xff0c;返回指定…

NOIP2015 D1 解题报告

T1 神奇的幻方 题目描述 幻方是一种很神奇的N*N矩阵&#xff1a;它由数字1,2,3,……,N*N构成&#xff0c;且每行、每列及两条对角线上的数字之和都相同。 当N为奇数时&#xff0c;我们可以通过以下方法构建一个幻方&#xff1a; 首先将1写在第一行的中间。 之后&#xff0c;按如…

wordpress后台添加子菜单 add_submenu_page()

https://blog.csdn.net/chaishen10000/article/details/46940257 http://yangjunwei.com/868.html

spring容器扩展功能之一:spring加载ApplicationContext.xml的四种方式

容器加载Bean的常见两个类ApplicationContext和BeanFactory&#xff0c; 一、首先&#xff0c;看看spring中加载配置在xml中的Bean对象到容器 spring 中加载xml配置文件的方式,好像有4种, xml是最常见的spring 应用系统配置源。Spring中的几种容器都支持使用xml装配bean&#x…

Linux命令简单操作之lsof

lsof lsof(list open files)是一个列出当前系统打开文件的工具 lsof语法格式&#xff1a; lsof &#xff3b;options&#xff3d; filename lsof常用命令&#xff1a; lsof -p pid 列出pid进程的所有打开的文件 lsof -c filename 列出filename程序名所打开的文件 lsof -i 列出所…

Linux内核源码分析--内核启动之(4)Image内核启动(setup_arch函数)(Linux-3.0 ARMv7)【转】...

原文地址&#xff1a;Linux内核源码分析--内核启动之(4)Image内核启动(setup_arch函数)&#xff08;Linux-3.0 ARMv7&#xff09; 作者&#xff1a;tekkamanninja 转自&#xff1a;http://blog.chinaunix.net/uid-25909619-id-4938393.html 在分析start_kernel函数的时候&#…

软工随堂练 找出和值最大的子矩阵 尹亚男 赵静娜

题目&#xff1a;从m*n矩阵中找出元素和最大的子矩阵。 分析&#xff1a;此题是可看做节课求和值最大子数组的一种延伸。但如果按之前的枚举法显然太过麻烦&#xff0c;复杂度为O&#xff08;n^4&#xff09;。那么有没有更好的方法呢&#xff1f; 我们拿出上一道题做了进一步的…

wordpress进阶教程(十九):创建自定义的找回密码页面

http://www.ashuwp.com/courses/highgrade/338.html 文章参考自&#xff1a;http://www.tutorialstag.com/wordpress-custom-password-reset-page-template.html#codesyntax_2 密码重置是一个比稍微复杂的过程&#xff0c;因为这个过程需要更多的数据。 在这篇文章之前&#…

七大排序的个人总结(二) 归并排序(Merge

七大排序的个人总结&#xff08;二&#xff09; 归并排序&#xff08;Merge 归并排序&#xff08;Merge Sort&#xff09;: 归并排序是一个相当“稳定”的算法对于其它排序算法&#xff0c;比如希尔排序&#xff0c;快速排序和堆排序而言&#xff0c;这些算法有所谓的最好与最…