Difference between pages "MediaWiki:Common.js/slimscroll.js" and "Sliding Puzzle (CMS)"

From The Official Visionaire Studio: Adventure Game Engine Wiki
< MediaWiki:Common.js(Difference between pages)
 
m
 
Line 1: Line 1:
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
+
{| class="ts" style="width:100%"
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+
|-
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+
! style="text-align:left" | Name !! style="text-align:left" | Type !! style="text-align:left" | By
*
+
|-
  * Version: 1.3.0
+
| Sliding Puzzle (3x3) || Definition || AFRLme
*
+
|}
*/
+
 
(function(f){jQuery.fn.extend({slimScroll:function(h){var a=f.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:0.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},h);this.each(function(){function r(d){if(s){d=d||
+
This script is used to generate & control a randomized sliding puzzle consisting of a 3x3 grid. ''Visionaire Studio 4.1+ is required to run this script''.
window.event;var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);f(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&m(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function m(d,f,h){k=!1;var e=d,g=b.outerHeight()-c.outerHeight();f&&(e=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),e=Math.min(Math.max(e,0),g),e=0<d?Math.ceil(e):Math.floor(e),c.css({top:e+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());
+
 
e=l*(b[0].scrollHeight-b.outerHeight());h&&(e=d,d=e/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),g),c.css({top:d+"px"}));b.scrollTop(e);b.trigger("slimscrolling",~~e);v();p()}function C(){window.addEventListener?(this.addEventListener("DOMMouseScroll",r,!1),this.addEventListener("mousewheel",r,!1),this.addEventListener("MozMousePixelScroll",r,!1)):document.attachEvent("onmousewheel",r)}function w(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),D);c.css({height:u+"px"});
+
== Instructions ==
var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function v(){w();clearTimeout(A);l==~~l?(k=a.allowPageScroll,B!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;B=l;u>=b.outerHeight()?k=!0:(c.stop(!0,!0).fadeIn("fast"),a.railVisible&&g.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(A=setTimeout(function(){a.disableFadeOut&&s||(x||y)||(c.fadeOut("slow"),g.fadeOut("slow"))},1E3))}var s,x,y,A,z,u,l,B,D=30,k=!1,b=f(this);if(b.parent().hasClass(a.wrapperClass)){var n=b.scrollTop(),
+
1. Add the [[#Main_Script|main script]] to the Visionaire Studio Script Editor & set the script as a definition script.<br/>
c=b.parent().find("."+a.barClass),g=b.parent().find("."+a.railClass);w();if(f.isPlainObject(h)){if("height"in h&&"auto"==h.height){b.parent().css("height","auto");b.css("height","auto");var q=b.parent().parent().height();b.parent().css("height",q);b.css("height",q)}if("scrollTo"in h)n=parseInt(a.scrollTo);else if("scrollBy"in h)n+=parseInt(a.scrollBy);else if("destroy"in h){c.remove();g.remove();b.unwrap();return}m(n,!1,!0)}}else{a.height="auto"==a.height?b.parent().height():a.height;n=f("<div></div>").addClass(a.wrapperClass).css({position:"relative",
+
2a. First thing you should do is update the t[1] to t[9] tables with the correct x, y positions for where each tile should be placed (top left pixel).
overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",width:a.width,height:a.height});var g=f("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=f("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?
+
<syntaxhighlight>
"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,WebkitBorderRadius:a.borderRadius,zIndex:99}),q="right"==a.position?{right:a.distance}:{left:a.distance};g.css(q);c.css(q);b.wrap(n);b.parent().append(c);b.parent().append(g);a.railDraggable&&c.bind("mousedown",function(a){var b=f(document);y=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);m(0,c.position().top,!1)});
+
  t[1] = { .. x = 96, y = 77
b.bind("mouseup.slimscroll",function(a){y=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",function(a){a.stopPropagation();a.preventDefault();return!1});g.hover(function(){v()},function(){p()});c.hover(function(){x=!0},function(){x=!1});b.hover(function(){s=!0;v();p()},function(){s=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(z=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&
+
</syntaxhighlight>
(m((z-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),z=b.originalEvent.touches[0].pageY)});w();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),m(0,!0)):"top"!==a.start&&(m(f(a.start).position().top,null,!0),a.alwaysVisible||c.hide());C()}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
+
2b. Next you should define where each tile is allowed to slide to in the '''move''' section of each of the tables. See the diagram below for an explanation of how I determined which tiles can move where.<br/>
 +
{| style="width:100%;"
 +
|-
 +
| <syntaxhighlight style="height:100px;">
 +
t[1] = { .. move = {2,4}
 +
</syntaxhighlight>
 +
| style="width:100px;padding-left:5px;" | [[File:sliding_puzzle_grid.png|center|x100px]]
 +
|}
 +
3. Next you need to edit the animation names inside of the '''n''' table. ''All names should be the same but with a prefix number on the end. Any changes you make here will have to be changed inside of the '''puzzleState''' function.''
 +
<syntaxhighlight>
 +
n = { "anim_p1", "anim_p2", "anim_p3", "anim_p4", "anim_p5", "anim_p6", "anim_p7", "anim_p8" }
 +
</syntaxhighlight>
 +
4. To check if a tile slot is empty or whether tile can be moved you should create an ''execute a script action'' inside of a ''left click (immediate)'' action containing...
 +
<syntaxhighlight>
 +
canMove(i) -- replace i with the tile slot number.
 +
</syntaxhighlight>
 +
 
 +
== Main Script ==
 +
<syntaxhighlight>
 +
--[[
 +
Sliding Puzzle (3x3) [v1] (13/11/2014)
 +
Written by AFRLme [Lee Clarke]
 +
-- + --
 +
alternatingfrequencies@hotmail.com | skype @ AFRLme
 +
-- + --
 +
This script is donation optional. In game credit is non-negotiable.
 +
You are free to: ¹ use it in your game(s). ² modify the script.
 +
Do not remove - or edit - this comment block.
 +
--]]
 +
 
 +
-- * tables * --
 +
local n, t = {}, {} -- empty tables (see below)
 +
 
 +
-- * function for randomly generating tile positions * --
 +
function initPuzzle(c)
 +
-- + initialize the grid properties + --
 +
t[1] = { x = 96, y = 77, name = nil, move = {2,4} }
 +
t[2] = { x = 246, y = 77, name = nil, move = {1,3,5} }
 +
t[3] = { x = 396, y = 77, name = nil, move = {2,6} }
 +
t[4] = { x = 96, y = 187, name = nil, move = {1,5,7} }
 +
t[5] = { x = 246, y = 187, name = nil, move = {2,4,6,8} }
 +
t[6] = { x = 396, y = 187, name = nil, move = {3,5,9} }
 +
t[7] = { x = 96, y = 297, name = nil, move = {4,8} }
 +
t[8] = { x = 246, y = 297, name = nil, move = {5,7,9} }
 +
t[9] = { x = 396, y = 297, name = nil, move = {6,8} }
 +
-- + initialize the tile names (1-8) + --
 +
n = { "anim_p1", "anim_p2", "anim_p3", "anim_p4", "anim_p5", "anim_p6", "anim_p7", "anim_p8" }
 +
-- + loops which are used for randomly generating the tile order & names etc + --
 +
for i = 1, (#n * #n) do
 +
  c = n[8]; table.remove(n, 8); table.insert( n, math.random(8), c ) -- shuffle the tile names
 +
  if i == (#n * #n) then
 +
  for b = 1, 8 do t[b].name = n[b] end -- update "t" table names with shuffled "n" table names
 +
  for a = 1, 8 do startObjectTween(ActiveAnimations[ t[a].name ], VAnimationCurrentPosition, ActiveAnimations[ t[a].name ].AnimationCurrentPosition, {x = t[a].x, y = t[a].y}, 200, easeLinearOut) end
 +
  end
 +
end
 +
end
 +
 
 +
-- * function used to determine if player wins * --
 +
function puzzleState(v)
 +
for i = 1, 8 do
 +
  if t[i].name == "anim_p"..i then v = v + 1 end
 +
  if i == 8 and v == 8 then Objects["obj_solved"]:to(1000, {ObjectVisibility = 100}, easeQuintOut); Conditions["puzzle_solved"].ConditionValue = true end
 +
end
 +
end
 +
 
 +
-- * function for updating tile positions * --
 +
function canMove(v)
 +
  for i = 1, table.maxn(t[v]["move"]) do
 +
  if t[ t[v]["move"][i] ].name == nil and Conditions["puzzle_solved"].ConditionValue == false then moveTile(v, t[v]["move"][i], 200, easeLinearOut); break end
 +
  end
 +
end
 +
 
 +
-- * function that is used to move the animation from one position to another with delay & easing * --
 +
function moveTile(a, b, delay, easing)
 +
startObjectTween(ActiveAnimations[ t[a].name ], VAnimationCurrentPosition, ActiveAnimations[ t[a].name ].AnimationCurrentPosition, {x = t[b].x, y = t[b].y}, delay, easing)
 +
t[b].name = t[a].name; t[a].name = nil; puzzleState(0) -- update tile position names & check puzzle state
 +
end
 +
</syntaxhighlight>
 +
 
 +
== Resources ==
 +
{| class="ts"
 +
|-
 +
! style="text-align:left" | Name !! style="text-align:left" | Description
 +
|-
 +
| [[:Media:sliding_puzzle.zip|sliding_puzzle.zip]] || A working example of the script in action. ''Visionaire Studio 4.1+'' required to run the included .ved file.
 +
|}{{toc}}

Revision as of 21:23, 13 November 2014

Name Type By
Sliding Puzzle (3x3) Definition AFRLme

This script is used to generate & control a randomized sliding puzzle consisting of a 3x3 grid. Visionaire Studio 4.1+ is required to run this script.

Instructions

1. Add the main script to the Visionaire Studio Script Editor & set the script as a definition script.
2a. First thing you should do is update the t[1] to t[9] tables with the correct x, y positions for where each tile should be placed (top left pixel).

 t[1] = { .. x = 96, y = 77

2b. Next you should define where each tile is allowed to slide to in the move section of each of the tables. See the diagram below for an explanation of how I determined which tiles can move where.

 t[1] = { .. move = {2,4}
Sliding puzzle grid.png

3. Next you need to edit the animation names inside of the n table. All names should be the same but with a prefix number on the end. Any changes you make here will have to be changed inside of the puzzleState function.

n = { "anim_p1", "anim_p2", "anim_p3", "anim_p4", "anim_p5", "anim_p6", "anim_p7", "anim_p8" }

4. To check if a tile slot is empty or whether tile can be moved you should create an execute a script action inside of a left click (immediate) action containing...

canMove(i) -- replace i with the tile slot number.

Main Script

--[[
Sliding Puzzle (3x3) [v1] (13/11/2014)
Written by AFRLme [Lee Clarke]
-- + --
alternatingfrequencies@hotmail.com | skype @ AFRLme
-- + --
This script is donation optional. In game credit is non-negotiable.
You are free to: ¹ use it in your game(s). ² modify the script.
Do not remove - or edit - this comment block.
--]]

-- * tables * --
local n, t = {}, {} -- empty tables (see below)

-- * function for randomly generating tile positions * --
function initPuzzle(c)
 -- + initialize the grid properties + --
 t[1] = { x = 96, y = 77, name = nil, move = {2,4} }
 t[2] = { x = 246, y = 77, name = nil, move = {1,3,5} }
 t[3] = { x = 396, y = 77, name = nil, move = {2,6} }
 t[4] = { x = 96, y = 187, name = nil, move = {1,5,7} }
 t[5] = { x = 246, y = 187, name = nil, move = {2,4,6,8} }
 t[6] = { x = 396, y = 187, name = nil, move = {3,5,9} }
 t[7] = { x = 96, y = 297, name = nil, move = {4,8} }
 t[8] = { x = 246, y = 297, name = nil, move = {5,7,9} }
 t[9] = { x = 396, y = 297, name = nil, move = {6,8} }
 -- + initialize the tile names (1-8) + --
 n = { "anim_p1", "anim_p2", "anim_p3", "anim_p4", "anim_p5", "anim_p6", "anim_p7", "anim_p8" }
 -- + loops which are used for randomly generating the tile order & names etc + --
 for i = 1, (#n * #n) do
  c = n[8]; table.remove(n, 8); table.insert( n, math.random(8), c ) -- shuffle the tile names
  if i == (#n * #n) then
   for b = 1, 8 do t[b].name = n[b] end -- update "t" table names with shuffled "n" table names
   for a = 1, 8 do startObjectTween(ActiveAnimations[ t[a].name ], VAnimationCurrentPosition, ActiveAnimations[ t[a].name ].AnimationCurrentPosition, {x = t[a].x, y = t[a].y}, 200, easeLinearOut) end
  end
 end
end

-- * function used to determine if player wins * --
function puzzleState(v)
 for i = 1, 8 do
  if t[i].name == "anim_p"..i then v = v + 1 end
  if i == 8 and v == 8 then Objects["obj_solved"]:to(1000, {ObjectVisibility = 100}, easeQuintOut); Conditions["puzzle_solved"].ConditionValue = true end
 end
end

-- * function for updating tile positions * --
function canMove(v)
  for i = 1, table.maxn(t[v]["move"]) do
   if t[ t[v]["move"][i] ].name == nil and Conditions["puzzle_solved"].ConditionValue == false then moveTile(v, t[v]["move"][i], 200, easeLinearOut); break end
  end
end

-- * function that is used to move the animation from one position to another with delay & easing * --
function moveTile(a, b, delay, easing)
 startObjectTween(ActiveAnimations[ t[a].name ], VAnimationCurrentPosition, ActiveAnimations[ t[a].name ].AnimationCurrentPosition, {x = t[b].x, y = t[b].y}, delay, easing)
 t[b].name = t[a].name; t[a].name = nil; puzzleState(0) -- update tile position names & check puzzle state
end

Resources

Name Description
sliding_puzzle.zip A working example of the script in action. Visionaire Studio 4.1+ required to run the included .ved file.