CreateJS - 益智游戏

我想建立一个益智游戏，我可以改变游戏中动态使用的图像。我使用插画的插画插件创建各种拼图形状，这非常棒。 .p（）中的长代码包含有关矢量形状以及x和y位置的所有信息。 beginBitmapFill（）函数然后创建包含该图形中图像信息的形状。缺点是注册点是0,0，这意味着在拖动拼图时总会有偏移量。看看我的小提琴，看看我的意思。我已经将beginBitmapFill行注释掉了，但是取消注释以实现它。任何人有任何想法如何做到这一点？CreateJS - 益智游戏

g = new createjs.Graphics(); 
s = new createjs.Shape(g); 
s.graphics.beginBitmapFill(image).s().p("AAAAAYEEAAEEAAEEAAYAAAAhGDIBGA8YAyA8CChuAyAyYA8A8AAB4g8A8YgyAyiChugyA8YhGA8BGDSAAAAYAAAAjSA8g8g8Yg8g8Buh4gyg8Yg8gyh4AAg8AyYgyA8BuB4g8A8Yg8A8jSg8AAAAYAAkEAAkEAAj6"); 
s.name = key; 
container.addChild(s);

http://jsfiddle.net/non_tech_guy/1yyn4904/

来源

2015-01-09 non_tech_guy

来自形状位置的问题。形状绘制在预定义的位置，它们的大小都是310px。因此，当您将鼠标事件位置分配给目标对象时，它将远离指针。

为了使它适用于当前的实现，我创建了每个形状的位置引用。

positionReference = {}; 
SHAPE_SIZE=310; 
var yRelCount = 1; 

for(var i = 1; i< 17;i++) { 
    xRel = i % 4 || 4; 
    yRel = yRelCount; 
    if (xRel === 4) { 
     yRelCount++; 
    } 
    positionReference['p'+i] = { 
     x: xRel * SHAPE_SIZE/4, 
     y: yRel * SHAPE_SIZE/4 
    } 
}

的positionReference是具有形状为关键的name对象（例如：P1，P2，P3，...），和位置x和y作为值。

稍后在拖动事件，利用位置参考，使得形状粘在鼠标指针

function pressMove(evt){ 
    console.log('move') 
    var target = evt.target; 
    var ref = positionReference[target.name]; 
    target.x= stage.mouseX-ref.x+(SHAPE_SIZE/8); 
    target.y= stage.mouseY-ref.y+(SHAPE_SIZE/8); 
}

你可以实现我还增加了SHAPE_SIZE/8，这样做的目的是为了调节位置，从而鼠标指针出现在形状的中间。

工作示例：http://jsfiddle.net/1yyn4904/1/

来源

2015-01-09 16:07:18 ChinKang

完美地工作！这是构建益智游戏的最佳方式，还是您会提出更好的建议？为了更好地理解为什么8/8在拖动事件？ –

我试图改变形状的注册点，但它没有正确复制图像。我没想过用他们的偏移量。 –

/8实际上是/ 4/2。除以4，因为你的拼图每行有4个棋子，除以2得到棋子的中间点:)我猜总有更好的方法来构建这个，但现在我的脑海里没有任何东西:)而且，定位只是单调乏味，grrr – ChinKang

CreateJS - 益智游戏

回答

相关问题