Changing the shape of the puzzle
I am trying to make a puzzle game that looks like this. What I've tried looks like this. https://jsfiddle.net/uccfb46z/
Now, if I want to change the shape of the parts, I need to change that part -
outside: function(ctx, s, cx, cy) {
ctx.lineTo(cx + s * .34, cy);
ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .4, cy + s * -.15, cx + s * .4, cy + s * -.15);
ctx.bezierCurveTo(cx + s * .3, cy + s * -.3, cx + s * .5, cy + s * -.3, cx + s * .5, cy + s * -.3);
ctx.bezierCurveTo(cx + s * .7, cy + s * -.3, cx + s * .6, cy + s * -.15, cx + s * .6, cy + s * -.15);
ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
ctx.lineTo(cx + s, cy)
},
inside: function(ctx, s, cx, cy) {
ctx.lineTo(cx + s * .35, cy);
ctx.bezierCurveTo(cx + s * .505, cy + .05, cx + s * .405, cy + s * .155, cx + s * .405, cy + s * .1505);
ctx.bezierCurveTo(cx + s * .3, cy + s * .3, cx + s * .5, cy + s * .3, cx + s * .5, cy + s * .3);
ctx.bezierCurveTo(cx + s * .7, cy + s * .29, cx + s * .6, cy + s * .15, cx + s * .6, cy + s * .15);
ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
ctx.lineTo(cx + s, cy)
},
But I am new to this BezierCurve so can anyone guide me what should be the value to make such a shape.
The form now looks like this.
I have tried the following code, but it didn’t reach the desired shape:
outside: function(ctx, s, cx, cy) {
ctx.lineTo(cx + s * .34, cy);
ctx.bezierCurveTo(cx + s * .86, cy, cx + s * .4, cy + s * -.15, cx + s * .4, cy + s * -.15);
ctx.bezierCurveTo(cx + s * .3, cy + s * -.3, cx + s * .5, cy + s * -.3, cx + s * .5, cy + s * -.3);
ctx.bezierCurveTo(cx + s * .7, cy + s * -.3, cx + s * .6, cy + s * -.15, cx + s * .6, cy + s * -.15);
ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
ctx.lineTo(cx + s, cy)
},
inside: function(ctx, s, cx, cy) {
ctx.lineTo(cx + s * .35, cy);
ctx.bezierCurveTo(cx + s * .505, cy + .05, cx + s * .405, cy + s * .155, cx + s * .405, cy + s * .1505);
ctx.bezierCurveTo(cx + s * .80, cy + s * .80, cx + s * .5, cy + s * .3, cx + s * .5, cy + s * .3);
ctx.bezierCurveTo(cx + s * .7, cy + s * .29, cx + s * .6, cy + s * .15, cx + s * .6, cy + s * .15);
ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
ctx.lineTo(cx + s, cy)
},
bezierCurveTo
creates a Bezier curve. you don't need beziers for the shape you want, just straight lines.
modifying the setting a bit, I created the following code to create your form:
outside: function (ctx, s, cx, cy) {
ctx.lineTo(cx, cy)
ctx.lineTo(cx+s*.3, cy+s*.1)
ctx.lineTo(cx+s*.5, cy+s*-.2)
ctx.lineTo(cx+s*.7, cy+s*.1)
ctx.lineTo(cx+s, cy)
},
inside: function (ctx, s, cx, cy) {
ctx.lineTo(cx, cy)
ctx.lineTo(cx+s*.3, cy+s*-.1)
ctx.lineTo(cx+s*.5, cy+s*+.2)
ctx.lineTo(cx+s*.7, cy+s*-.1)
ctx.lineTo(cx+s, cy)
},
Fixed Fiddle
EXPLANATION:
the puzzle script you are using, draws square hologram pieces on the x, y axis, where the top left corner is (cx, cy) and the shape size is represented by s
each piece has 4 sides, each drawn with one of the two codes you use:
- inside for hole parts:
- for the parts that stick out:
All you have to do is draw straight lines to create the shape you want.
for external parts:
and for the internals:
