lufy's legend

标题: MOUSE_UP监听图层 没有随x偏移。 [打印本页]

作者: kezhiyu    时间: 2016-12-19 13:22
标题: MOUSE_UP监听图层 没有随x偏移。
在一个 a = new LSprize()注册了一个监听事件以后,  a.x =100
a.addEventListener(LMouseEvent.MOUSE_UP, a.onClick);
此时 a的监听不在已经偏移的100 这个位置,而是还在原来的那个地方。导致了点击无效
这个 是在 chrome 模拟ipad 的情况下出现
  1. $timeout(function(){
  2. width = $(window).width();
  3. height = $(window).height();
  4. g_rem = parseFloat($('html').css('font-size').replace('px',''));
  5. ratio = g_rem/37.5
  6. if (!D.can_load){
  7. init(50 ,"legend",width,height,main_fake);
  8.   D.can_load = true
  9.   
  10. }
  11. if(LGlobal.os == OS_ANDROID){
  12.   LGlobal.preventDefault = false;
  13. }
  14. function main_fake(){}
  15. D.go_go = function(){
  16.   var imgBmpd;
  17.   /** 游戏层 */
  18.   var position = document.getElementById('legend_canvas').getBoundingClientRect()
  19.   var stageLayer, gameLayer, overLayer;
  20.   /** 拼图块列表 */
  21.   var blockList;
  22.   /** 是否游戏结束 */
  23.   var isGameOver;
  24.   /** 用时 */
  25.   var startTime, time, timeTxt;
  26.   /** 步数 */
  27.   var steps, stepsTxt;
  28.   
  29.   function main () {
  30.           /** 全屏设置 */
  31.           if (LGlobal.mobile) {
  32.                   LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
  33.           }
  34.           LGlobal.screen(LGlobal.FULL_SCREEN);
  35.   
  36.           /** 添加加载提示 */
  37.           var loadingHint = new LTextField();
  38.           loadingHint.text = "资源加载中……";
  39.           loadingHint.size = 20;
  40.           loadingHint.x = (LGlobal.width - loadingHint.getWidth()) / 2;
  41.           loadingHint.y = (LGlobal.height - loadingHint.getHeight()) / 2;
  42.           addChild(loadingHint);
  43.   
  44.           /** 加载图片 */
  45.           LLoadManage.load(
  46.                   [
  47.                           {name : "img", path : "http://s2.d2scdn.com/2016/11/12/f483a188-e959-41cc-a93c-495617c20b15/img.jpg"}
  48.                   ],
  49.                   null,
  50.                   function (result) {
  51.                           /** 移除加载提示 */
  52.                           loadingHint.remove();
  53.   
  54.                           /** 保存位图数据,方便后续使用 */
  55.                           imgBmpd = new LBitmapData(result["img"]);
  56.   
  57.                           gameInit();
  58.                   }
  59.           );
  60.   }
  61.   function Block (index, x, y) { //根据传入的 x(横轴),y(数轴)
  62.           LExtends(this, LSprite, []);
  63.   
  64.           var bmpd = imgBmpd.clone();
  65.           bmpd.setProperties(x * 130, y * 130, 130, 130);
  66.           this.bmp = new LBitmap(bmpd);
  67.           this.bmp.scaleX = 0.97*ratio;
  68.           this.bmp.scaleY = 0.97*ratio;
  69.           this.addChild(this.bmp);
  70.     // this.graphics.drawRect(2, "red", [0, 0, 130*0.97*ratio, 130*0.97*ratio]);
  71.           var border = new LShape();
  72.           border.graphics.drawRect(1, "#CCCCCC", [-position.left, 0, 130*0.97*ratio, 130*0.97*ratio]);
  73.           this.addChild(border);
  74.   
  75.           this.index = index;
  76.           this.addEventListener(LMouseEvent.MOUSE_UP, this.onClick);
  77.   }
  78.   
  79.   Block.getBlock = function (x, y) {
  80.           return blockList[y * 3 + x];
  81.   };
  82.   
  83.   Block.isGameOver = function () {
  84.           var reductionAmount = 0, l = blockList.length;
  85.   
  86.           /** 计算还原度 */
  87.           for (var i = 0; i < l; i++) {
  88.                   var b = blockList[i];
  89.   
  90.                   if (b.index == i) {
  91.                           reductionAmount++;
  92.                   }
  93.           }
  94.   
  95.           /** 计算是否完全还原 */
  96.           if (reductionAmount == l) {
  97.                   /** 游戏结束 */
  98.                   // gameOver();
  99.   
  100.                   D.score = time/1000
  101.                   D.game_end(D.score)
  102.           }       
  103.   };
  104.   
  105.   Block.exchangePosition = function (b1, b2) {
  106.           var b1x = b1.locationX, b1y = b1.locationY,
  107.                   b2x = b2.locationX, b2y = b2.locationY,
  108.                   b1Index = b1y * 3 + b1x,
  109.                   b2Index = b2y * 3 + b2x;
  110.   
  111.           /** 在地图块数组中交换两者位置 */
  112.           blockList.splice(b1Index, 1, b2);
  113.           blockList.splice(b2Index, 1, b1);
  114.   
  115.           /** 交换两者显示位置 */
  116.           b1.setLocation(b2x, b2y);
  117.           b2.setLocation(b1x, b1y);
  118.   
  119.           /** 判断游戏是否结束 */
  120.           Block.isGameOver();
  121.   };
  122.   
  123.   Block.prototype.setLocation = function (x, y) {
  124.           this.locationX = x;
  125.           this.locationY = y;
  126.   
  127.           this.x = x * 130*0.97*ratio;
  128.   //         this.bmp.x -= position.left
  129.           this.y = y * 130*0.97*ratio;
  130.   };
  131.   
  132.   Block.prototype.onClick = function (e) {
  133.           var self = e.currentTarget;
  134.   
  135.           if (isGameOver) {
  136.                   return;
  137.           }
  138.   
  139.           var checkList = new Array();
  140.     console.log (self)
  141.           /** 判断右侧是否有方块 */
  142.           if (self.locationX > 0) {
  143.                   checkList.push(Block.getBlock(self.locationX - 1, self.locationY));
  144.           }
  145.   
  146.           /** 判断左侧是否有方块 */
  147.           if (self.locationX < 2) {
  148.                   checkList.push(Block.getBlock(self.locationX + 1, self.locationY));
  149.           }
  150.   
  151.           /** 判断上方是否有方块 */
  152.           if (self.locationY > 0) {
  153.                   checkList.push(Block.getBlock(self.locationX, self.locationY - 1));
  154.           }
  155.   
  156.           /** 判断下方是否有方块 */
  157.           if (self.locationY < 2) {
  158.                   checkList.push(Block.getBlock(self.locationX, self.locationY + 1));
  159.           }
  160.   
  161.           for (var i = 0, l = checkList.length; i < l; i++) {
  162.                   var checkO = checkList[i];
  163.   
  164.                   /** 判断是否是空白拼图块 */
  165.                   if (checkO.index == 8) {
  166.                           steps++;
  167.                           updateStepsTxt();
  168.                          
  169.                           Block.exchangePosition(self, checkO);
  170.   
  171.                           break;
  172.                   }
  173.           }
  174.   };
  175.   function gameInit (e) {
  176.           /** 初始化舞台层 */
  177.           stageLayer = new LSprite();
  178.           stageLayer.graphics.drawRect(0, "", [0, 0, LGlobal.width, LGlobal.height], true, "#EFEFEF");
  179.           addChild(stageLayer);
  180.   
  181.           /** 初始化游戏层 */
  182.           gameLayer = new LSprite();
  183.           stageLayer.addChild(gameLayer);
  184.           /** 初始化最上层 */
  185.           overLayer = new LSprite();
  186.           stageLayer.addChild(overLayer);
  187.   
  188.           /** 添加开始界面 */
  189.           startGame();
  190.   }
  191.   /*
  192.   function addBeginningUI () {
  193.           var beginningLayer = new LSprite();
  194.           beginningLayer.graphics.drawRect(0, "", [0, 0, LGlobal.width, LGlobal.height], true, "#EDEDED");
  195.           stageLayer.addChild(beginningLayer);
  196.   

  197.           var title = new LTextField();
  198.           title.text = "拼图游戏";
  199.           title.size = 50;
  200.           title.weight = "bold";
  201.           title.x = (LGlobal.width - title.getWidth()) / 2;
  202.           title.y = 160;
  203.           title.color = "#FFFFFF";
  204.           title.lineWidth = 5;
  205.           title.lineColor = "#000000";
  206.           title.stroke = true;
  207.           beginningLayer.addChild(title);
  208.   

  209.           var hint = new LTextField();
  210.           hint.text = "- 点击屏幕开始游戏 -";
  211.           hint.size = 25;
  212.           hint.x = (LGlobal.width - hint.getWidth()) / 2;
  213.           hint.y = 370;
  214.           beginningLayer.addChild(hint);
  215.   

  216.           beginningLayer.addEventListener(LMouseEvent.MOUSE_UP, function () {
  217.                   beginningLayer.remove();
  218.                  
  219.                   startGame();
  220.           });
  221.   }
  222.   */
  223.   
  224.   function startGame () {
  225.           isGameOver = false;
  226.   
  227.           /** 初始化时间和步数 */
  228.           startTime = (new Date()).getTime();
  229.           time = 0;
  230.           steps = 0;
  231.           /** 初始化拼图块列表 */
  232.           initBlockList();
  233.           /** 打乱拼图 */
  234.           max_block = blockList.pop()
  235.           getRandomBlockList();
  236.           blockList.push(max_block)
  237.           /** 显示拼图 */
  238.           showBlock();
  239.           /** 显示缩略图 */
  240.           showThumbnail();
  241.           /** 显示时间 */
  242.           addTimeTxt();
  243.           /** 显示步数 */
  244.           addStepsTxt();
  245.   
  246.           stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame);
  247.   }
  248.   
  249.   function initBlockList () {
  250.           blockList = new Array();
  251.   
  252.           for (var i =0 ; i < 9; i++) {
  253.                   /** 根据序号计算拼图块图片显示位置 */
  254.                   var y = (i / 3) >>> 0, x = i % 3;
  255.   
  256.                   blockList.push(new Block(i, x, y));
  257.           }
  258.   }
  259.   
  260.   function getRandomBlockList () {
  261.           /** 随机打乱拼图 */
  262.           blockList.sort(function () {
  263.                   return 0.5 - Math.random();
  264.           });
  265.          
  266.   
  267.           /** 计算逆序和 */
  268.           var reverseAmount = 0;
  269.   
  270.           for (var i = 0, l = blockList.length, preBlock = null; i < l; i++) {               
  271.              for (var j =i+1; j<l; j++){
  272.                   if (blockList[i].index>blockList[j].index){
  273.                           reverseAmount ++
  274.                   }
  275.                   }
  276.           }
  277.           /** 检测打乱后是否可还原 */
  278.           if (reverseAmount % 2 != 0) {
  279.                   /** 不合格,重新打乱 */
  280.                   getRandomBlockList();
  281.           }
  282.   
  283.   }
  284.   
  285.   function showBlock() {
  286.           for (var i = 0, l = blockList.length; i < l; i++) {
  287.                   var b = blockList[i];
  288.   
  289.                   /** 根据序号计算拼图块位置 */
  290.                   var y = (i / 3) >>> 0, x = i % 3;
  291.   
  292.                   b.setLocation(x, y);
  293.   
  294.                   gameLayer.addChild(b);
  295.           }
  296.   }
  297.   
  298.   function showThumbnail() {
  299.           var thumbnail = new LBitmap(imgBmpd);
  300.           thumbnail.scaleX = 130 / imgBmpd.width *0.97*ratio;
  301.           thumbnail.scaleY = 130 / imgBmpd.height *0.97*ratio;
  302.           thumbnail.x = 3.4*g_rem;
  303.           thumbnail.y = 11.5*g_rem;
  304.           overLayer.addChild(thumbnail);
  305.   }
  306.   
  307.   function addTimeTxt () {
  308.           timeTxt = new LTextField();
  309.           timeTxt.stroke = true;
  310.           timeTxt.lineWidth = g_rem/11;
  311.           timeTxt.lineColor = "#54D9EF";
  312.           timeTxt.color = "#FFFFFF";
  313.           timeTxt.size = 0.4*g_rem;
  314.           timeTxt.x = 0.45*g_rem;
  315.           timeTxt.y = 12.5*g_rem;
  316.           overLayer.addChild(timeTxt);
  317.   
  318.           updateTimeTxt();
  319.   }
  320.   
  321.   function updateTimeTxt () {
  322.           timeTxt.text = "时间:" + getTimeTxt(time);
  323.   }
  324.   
  325.   function getTimeTxt () {
  326.           var d = new Date(time);
  327.   
  328.           return d.getMinutes() + " : " + d.getSeconds();
  329.   };
  330.   
  331.   function addStepsTxt () {
  332.           stepsTxt = new LTextField();
  333.           stepsTxt.stroke = true;
  334.           stepsTxt.lineWidth = g_rem/11;
  335.           stepsTxt.lineColor = "#54D9EF";
  336.           stepsTxt.color = "#FFFFFF";
  337.           stepsTxt.size = 0.45*g_rem;
  338.           stepsTxt.y = 12.5*g_rem;
  339.           overLayer.addChild(stepsTxt);
  340.   
  341.           updateStepsTxt();
  342.   }
  343.   
  344.   function updateStepsTxt () {
  345.           stepsTxt.text = "步数:" + steps;
  346.   
  347.           stepsTxt.x = LGlobal.width - stepsTxt.getWidth() - 20;
  348.   }
  349.   
  350.   function onFrame () {
  351.           if (isGameOver) {
  352.                   return;
  353.           }
  354.   
  355.           /** 获取当前时间 */
  356.           var currentTime = (new Date()).getTime();
  357.   
  358.           /** 计算使用的时间并更新时间显示 */
  359.           time = currentTime - startTime;
  360.           updateTimeTxt();
  361.   }
  362.   
  363.   main()
  364. }
  365. },10);
复制代码

作者: lufy    时间: 2016-12-19 13:35
  1. var a = new LSprite();
  2. addChild(a);
  3. a.x = 100;
  4. a.graphics.drawRect(1, "#000000", [0, 0, 200, 200], true, "#880088");
  5. a.addEventListener(LMouseEvent.MOUSE_UP, function(event){
  6.       trace("click:"+event.selfX + ","+event.selfY);
  7. });
复制代码
下面是测试链接
http://lufylegend.com/demo/test/153.html

引擎已经这么多年了,点击事件部分应该不可能有问题的,
如果你确定不了问题出在哪里,请给出可运行的链接
作者: kezhiyu    时间: 2016-12-19 13:59
lufy 发表于 2016-12-19 13:35
下面是测试链接
http://lufylegend.com/demo/test/153.html

画布跟 浏览器 用 document.getElementById('legend_canvas').getBoundingClientRect() 可以看到left 并不为0
尝试过 右偏移 Lsprite  ,左偏移 bitmap ,但是 没效果
作者: lufy    时间: 2016-12-19 14:04
kezhiyu 发表于 2016-12-19 13:59
画布跟 浏览器 用 document.getElementById('legend_canvas').getBoundingClientRect() 可以看到left 并 ...

自己修改canvas的位置的话是不行的,如果需要剧中显示则必须用引擎自己的适配方法
如果想自定义位置的话,也可以用iframe
或者试试下面帖子里的方法
http://lufylegend.com/forum/foru ... hread&tid=17859
作者: kezhiyu    时间: 2016-12-19 14:10
lufy 发表于 2016-12-19 14:04
自己修改canvas的位置的话是不行的,如果需要剧中显示则必须用引擎自己的适配方法
如果想自定义位置的话 ...

canvas 的位置并没有去动。只是限定了 html 的 font-size 不能超出41.4 所以ipad就会有留白,然后 canvas 自动往右边偏移了。
作者: kezhiyu    时间: 2016-12-19 14:13
lufy 发表于 2016-12-19 14:04
自己修改canvas的位置的话是不行的,如果需要剧中显示则必须用引擎自己的适配方法
如果想自定义位置的话 ...

但是为什么 监听事件的 那个精灵图层 都整个往右了。你看到 画面是正常的吧。但是点击事件却会停留在原来的地方
作者: lufy    时间: 2016-12-19 14:17
kezhiyu 发表于 2016-12-19 14:10
canvas 的位置并没有去动。只是限定了 html 的 font-size 不能超出41.4 所以ipad就会有留白,然后 canvas ...

能给个测试链接吗?
不方便公开的话,可以私信给我
作者: kezhiyu    时间: 2016-12-19 14:18
lufy 发表于 2016-12-19 14:17
能给个测试链接吗?
不方便公开的话,可以私信给我

原来 你没看啊。。我已经私信你好久了 以为你看了
作者: kezhiyu    时间: 2016-12-19 14:20
lufy 发表于 2016-12-19 14:17
能给个测试链接吗?
不方便公开的话,可以私信给我

有收到的话回复一下。确认一下
作者: lufy    时间: 2016-12-19 14:42
kezhiyu 发表于 2016-12-19 14:20
有收到的话回复一下。确认一下

不好意思,
收到了, 现在在公司不方便看,稍后我找找原因
作者: kezhiyu    时间: 2016-12-19 14:43
lufy 发表于 2016-12-19 14:42
不好意思,
收到了, 现在在公司不方便看,稍后我找找原因

好的。不着急。我自己也想想有没别的办法,谢谢
作者: lufy    时间: 2016-12-19 22:54
kezhiyu 发表于 2016-12-19 14:43
好的。不着急。我自己也想想有没别的办法,谢谢

我大致测了下,貌似并不是点击无效,而是每个方块的最左侧有效
如果是因为错位导致的点击无效的话,不应该是这个结果
你试一下,把下面的部分注释掉看看如何?
  1.           var border = new LShape();
  2.           border.graphics.drawRect(1, "#CCCCCC", [-position.left, 0, 130*0.97*ratio, 130*0.97*ratio]);
  3.           this.addChild(border);
复制代码
另外,有必要动态设置canvas大小吗?这样不但让原本的硬件缩放失去意义,而且还导致增加了position和ratio这些冗余的计算
作者: kezhiyu    时间: 2016-12-20 07:53
lufy 发表于 2016-12-19 22:54
我大致测了下,貌似并不是点击无效,而是每个方块的最左侧有效
如果是因为错位导致的点击无效的话,不应该 ...

本来也不想动态设置这个,以前有看到你的帖子里面说不用,但是在我的这个制作情况下会出现一些问题,所以这些后来又加上来了
作者: kezhiyu    时间: 2016-12-20 07:57
lufy 发表于 2016-12-19 22:54
我大致测了下,貌似并不是点击无效,而是每个方块的最左侧有效
如果是因为错位导致的点击无效的话,不应该 ...

把这个注释掉没有效果。
作者: kezhiyu    时间: 2016-12-20 10:03
lufy 发表于 2016-12-19 22:54
我大致测了下,貌似并不是点击无效,而是每个方块的最左侧有效
如果是因为错位导致的点击无效的话,不应该 ...

gameLayer 层一直处在最开始的样子,就算设置了 x值,点击事件的有效区域也一直保持在原来的位置,
现在我是用最底层的精灵图层 获取当前的 的位置,然后通过列表再找到对应的 图片方块,暂时只能先这么解决了。 那个不知道算不算BUG。


作者: lufy    时间: 2016-12-20 11:05
kezhiyu 发表于 2016-12-20 10:03
gameLayer 层一直处在最开始的样子,就算设置了 x值,点击事件的有效区域也一直保持在原来的位置,
现在我 ...

突然发现
  1. init(50 ,"legend",width,height,main_fake);

  2. function main_fake(){}
复制代码
你这里的代码跟你给我链接里的代码是一样的吗?
这个main_fake是个空函数啊...

从测试的现象来说,每个方块的最左侧的点击是有效的,这说明引擎对于点击的坐标判断应该是没有错的,为什么只有左侧能点击,这还需要看你的具体代码,也许是引擎问题,也许就是代码的写法问题
作者: kezhiyu    时间: 2016-12-20 11:09
本帖最后由 kezhiyu 于 2016-12-20 11:14 编辑
lufy 发表于 2016-12-20 11:05
突然发现你这里的代码跟你给我链接里的代码是一样的吗?
这个main_fake是个空函数啊... ...

对的。这里是我们上次 说过的引擎重复加载问题。所以 main_fake 是空的 主函数是写在一个全局的变量里面,通过另外一个页面的按钮 来启动真正的main函数 ,代码肯定是一样的 。
发的 那段代码,里面 D.go_go()运行一下 ,程序就可以跑了。刨除调 angualrjs 的代码 其他的在本地用引擎直接跑就可以。
作者: kezhiyu    时间: 2016-12-20 11:17
本帖最后由 kezhiyu 于 2016-12-20 17:24 编辑
lufy 发表于 2016-12-20 11:05
突然发现你这里的代码跟你给我链接里的代码是一样的吗?
这个main_fake是个空函数啊...

并不是 只有左侧能点击,应该是说 每个方块的 点击事件层整偏移,所以 比如, 有 123 三个方块并排,第二块的点击图层已经侵入了第一块,所以在第一块 1/3以后的位置 点击到的 都是 第二块


作者: lufy    时间: 2016-12-20 11:18
kezhiyu 发表于 2016-12-20 11:17
并不是 只有左侧能点击,应该是说 每个方块的 点击事件层整偏移,所以 比如, 有 123 三个方块并排,第二 ...

还有一个奇怪的问题,用ipad看的时候[拼图游戏]这个标题也不在中间,但是代码貌似没什么问题啊
你前面不是说限制了font-size吗?如果不限制会有问题吗?
作者: kezhiyu    时间: 2016-12-20 11:19
本帖最后由 kezhiyu 于 2016-12-20 11:26 编辑
lufy 发表于 2016-12-20 11:18
还有一个奇怪的问题,用ipad看的时候[拼图游戏]这个标题也不在中间,但是代码貌似没什么问题啊
你前面不 ...

这个我在早上已经全部修复了,这里的定位 用的是 font-size 的值,原本 是 单纯的数字,限制是因为 不是所有游戏都用引擎,有一些只是简单的 html+css+js,在其他情况下还好。但是在ipad情况下 会 有拉伸,遮挡的情况。
虽然引擎本身是处理了手机全屏的问题,但是不是所有情况都适用,所以我额外的自己处理一下
作者: lufy    时间: 2016-12-20 11:26
kezhiyu 发表于 2016-12-20 11:19
这个我在早上已经全部修复了,这里的定位 用的是 font-size 的值,原本 是 单纯的数字,限制是因为 不是所 ...

其实,你这个例子,类似的东西我和其他人也做过,如果是引擎原因的话,这个问题应该早就被发现的
也可能是页面结构导致的,说不准,你先按照你的方法解决吧
我抽时间把代码拷贝到本地测试一下,找到原因再回复你
作者: kezhiyu    时间: 2016-12-20 12:05
lufy 发表于 2016-12-20 11:26
其实,你这个例子,类似的东西我和其他人也做过,如果是引擎原因的话,这个问题应该早就被发现的
也可能 ...

好的 谢谢了
作者: lufy    时间: 2016-12-20 23:22
kezhiyu 发表于 2016-12-20 12:05
好的 谢谢了

我把代码放到本地,简单修改了一下,运行后没什么问题
http://lufylegend.com/demo/test/154.html
你可以测试一下上面的链接,
可能就是页面结构的问题
作者: kezhiyu    时间: 2016-12-22 09:05
lufy 发表于 2016-12-20 23:22
我把代码放到本地,简单修改了一下,运行后没什么问题
http://lufylegend.com/demo/test/154.html
你可以 ...

情况确实是这样的,跟网页结构有关,最开始搭框架的时候,限死了 width 只有10rem,然后就有现在的问题,因为已经有些东西在跑,后面再找个兼容点的方法解决一下。




欢迎光临 lufy's legend (http://lufylegend.com/forum/) Powered by Discuz! X2.5