(原)用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 ...
随机推荐
- MVVM模式和在WPF中的实现(二)数据绑定
MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- pt-table-checksum
pt-table-checksum是percona公司提供的一个用于在线比对主从数据一致性的工具. 实现原理 将一张大表分成多个chunk,每次针对一个chunk进行校验,同时将校验的结果通过REPL ...
- HTTPS简介
一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...
- 如何利用ETW(Event Tracing for Windows)记录日志
ETW是Event Tracing for Windows的简称,它是Windows提供的原生的事件跟踪日志系统.由于采用内核(Kernel)层面的缓冲和日志记录机制,所以ETW提供了一种非常高效的事 ...
- SDWebImage源码解读之SDWebImageCache(下)
第六篇 前言 我们在SDWebImageCache(上)中了解了这个缓存类大概的功能是什么?那么接下来就要看看这些功能是如何实现的? 再次强调,不管是图片的缓存还是其他各种不同形式的缓存,在原理上都极 ...
- Mysql存储引擎比较
Mysql作为一个开源的免费数据库,在平时项目当中会经常使用到,而在项目当中我们的着重点一般在设计使用数据库上而非mysql本身上,所以在提到mysql的存储引擎时,一般都不曾知道,这里经过网上相关文 ...
- bzoj3037--贪心
题目大意: applepi手里有一本书<创世纪>,里面记录了这样一个故事--上帝手中有着N 种被称作"世界元素"的东西,现在他要把它们中的一部分投放到一个新的空间中去以 ...
- 利用poi导出Excel
import java.lang.reflect.Field;import java.lang.reflect.InvocationTargetException;import java.lang.r ...
- 【搬砖】安卓入门(1)- Java开发入门
01.01_计算机基础知识(计算机概述)(了解) A:什么是计算机?计算机在生活中的应用举例 计算机(Computer)全称:电子计算机,俗称电脑.是一种能够按照程序运行,自动.高速处理海量数据的现代 ...
- ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑
闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...