(原)用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之Example篇
0x00 - 前言 PS : 我突然意识到ARToolKit本质可能就是一个可以实时求解相机内外参的解决方案. 拿到一个新的SDK,90%的人应该都会先跑一下Example.拿到ARToolKit的S ...
- C#给PDF文档添加文本和图片页眉
页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...
- 在 ML2 中配置 OVS flat network - 每天5分钟玩转 OpenStack(133)
前面讨论了 OVS local network,今天开始学习 flat network. flat network 是不带 tag 的网络,宿主机的物理网卡通过网桥与 flat network 连接, ...
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- Dreamweaver 扩展开发:C-level extensibility and the JavaScript interpreter
The C code in your library must interact with the Dreamweaver JavaScript interpreter at the followin ...
- clr 元数据
clr相关编译器编译生成的托管模块由四部分组成:PE32或32+头.clr头.元数据.IL代码. 元数据和IL代码完全对应,保持一致(:>)性. 元数据有很多用途: VS的智能感知,自动补全: ...
- Node.js:path、url、querystring模块
Path模块 该模块提供了对文件或目录路径处理的方法,使用require('path')引用. 1.获取文件路径最后部分basename 使用basename(path[,ext])方法来获取路径的最 ...
- Python碎碎念
1. 如何添加路径 主要有以下两种方式: 1> 临时的 import sys sys.path.append('C:\Users\Victor\Desktop') 2> 永久的 在Linu ...
- Node.js入门
开始之前,安利一本正在看的书<站在两个世界的边缘>,作者程浩,上帝丢给他太多理想,却忘了给他完成理想的时间.OK,有兴趣的可以看一看. node.js如标题一样,我也是刚开始接触,大家一起 ...
- App 审核由于 IPv6 网络问题被拒
昨天 提交App Store 的时候被拒了 We discovered one or more bugs in your app when reviewed on iPhone running iOS ...