(原)用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 实现 方块阵点击后原地自转效果的更多相关文章
- 让hammer完美支持Pixi.js - 2D webG库
由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了 改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事 ...
- 利用pixi.js制作精灵动画
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...
- pixi.js教程中文版--基础篇
前言 Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库.提供无缝 C ...
- HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析
前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...
- pixi.js
添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...
- 三星a9上测试egret与pixi.js的渲染性能
for (let i = 0; i < 500; i++) { let shape = new egret.Shape(); shape.graphics.beginFill(0xff0000) ...
- pixi.js v5 快速了解
pixi.js 追求简单, 性能,高价值. pixi.js v5将是一交比较大的升级,代码更加精简,性能更加强悍,功能更加丰富,扩展更加高效 pixi.js一步一脚印,版本持续稳定的更新, 深入学习 ...
- pixi.js + three.js
three.js 最好的webgl 3d渲染库之一, pixi.js 最好的webgl 2d渲染库之一,也许可以把之一去掉 两个库都很精简,如果把两个库结合起来,一定很爽很爽,你说是吧! ...
- 如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?
如何在PIXI.js里面使用json文件来管理瓦片集(tileset)? PIXI建议我们将素材图片汇总成一个瓦片集(tileset),然后用纹理地图集(texture atlas,通常是一个json ...
随机推荐
- 【AR实验室】ARToolKit之概述篇
0x00 - 前言 我从去年就开始对AR(Augmented Reality)技术比较关注,但是去年AR行业一直处于偶尔发声的状态,丝毫没有其"异姓同名"的兄弟VR(Virtual ...
- C语言 · 判定数字
编写函数,判断某个给定字符是否为数字. 样例输入 9 样例输出 yes #include<stdio.h> int main(){ char c; scanf("%c" ...
- 创建 OVS Local Network - 每天5分钟玩转 OpenStack(129)
上一节我们完成了 OVS 的准备工作,本节从最基础的 local network 开始学习.local network 不会与宿主机的任何物理网卡连接,流量只被限制在宿主机内,同时也不关联任何的 VL ...
- XML技术之DOM4J解析器
由于DOM技术的解析,存在很多缺陷,比如内存溢出,解析速度慢等问题,所以就出现了DOM4J解析技术,DOM4J技术的出现大大改进了DOM解析技术的缺陷. 使用DOM4J技术解析XML文件的步骤? pu ...
- InstallShield 脚本语言学习笔记
InstallShield脚本语言是类似C语言,利用InstallShield的向导或模板都可以生成基本的脚本程序框架,可以在此基础上按自己的意愿进行修改和添加. 一.基本语法规则 ...
- MCDownloadManager ios文件下载管理器
我们用AFNetworking小试牛刀,写一个简单的下载器来演示功能. 前言 为什么AFNetworking能够成为顶级框架?我们究竟该如何领悟它的精髓所在?这都是很难的问题.安全,高效,流畅,这3个 ...
- Linux之搭建自己的根文件系统
Hi!大家好,我是CrazyCatJack.又和大家见面了.今天给大家带来的是构建Linux下的根文件系统.希望大家看过之后都能构建出符合自己需求的根文件系统^_^ 1.内容概述 1.构造过程 今天给 ...
- Tomcat常见问题及常用命令
很长时间不用tomcat好多命令都忘记了,所以准备自己记录下来,以便参考.刚好也希望可以开始养成记博客的好习惯. 1.查看java的版本号 进入java的安装目录后,使用命令:java -versio ...
- 新技术≠颠覆:CIO 要有战略耐心
新技术≠颠覆:CIO 要有战略耐心 大数据,云时代,互联网思维, 物联网--最近一两年,这些字眼一次次地出现在各种大大小小的CIO会议上和他们的私下交流圈子里,作为对新技术最敏感的人群,一方面他们迫切 ...
- excel常用技巧
复制表格时,如果要加上行标和列标.页面布局->工作表选项:标题,勾上打印->复制下拉框->复制为图片加上打印样式 一行长拆成几行短或几行短变成一行长的文本拆分,可以通过:填充-> ...