SVG Share Code - Slider Game



  • Slider Game

    <svg onmousedown='omd(evt)'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <!--
    NOTES:
    1. OBJECT is to rearrange sliders 15 to 1 top down by clicking sliders next to empty space.
    1. ON START ONLY, you can click bottom right empty space to automatically rearrange upper two rows only.
    2. THEN manually click on bottom sliders next to empty space to move a slider to an empty space.
    3. Slider jumping not allowed - ONLY when you are frustrated.
    -->
    
    <style type='text/css' ><![CDATA[
    text   { font-size:125px; font-family:georgia; font-weight:bold; fill:navy; text-anchor:middle; }
    rect#A { fill:aquamarine; }
    ]]></style>
    
    <g transform='translate(15 15)' > <!-- Needed to move puzzle right and down for border. -->
    
    <!-- Background -->
    <rect x='-5' y='-5' width='810' height='810' fill='lightgray' stroke='black' stroke-width='10' onclick='slide()'/>
    
    <!-- Top Row -->
    <g id='1' transform='translate(0 0)' onclick='go(1)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >1</text>
    </g>
    
    <g id='2' transform='translate(200 0)' onclick='go(2)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >2</text>
    </g>
    
    <g id='3' transform='translate(400 0)' onclick='go(3)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >3</text>
    </g>
    
    <g id='4' transform='translate(600 0)' onclick='go(4)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >4</text>
    </g>
    
    <!-- Second Row -->
    <g id='5' transform='translate(0 200)' onclick='go(5)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >5</text>
    </g>
    
    <g id='6' transform='translate(200 200)' onclick='go(6)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >6</text>
    </g>
    
    <g id='7' transform='translate(400 200)' onclick='go(7)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >7</text>
    </g>
    
    <g id='8' transform='translate(600 200)' onclick='go(8)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >8</text>
    </g>
    
    <!-- Third Row -->
    <g id='9' transform='translate(0 400)' onclick='go(9)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >9</text>
    </g>
    
    <g id='10' transform='translate(200 400)' onclick='go(10)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >10</text>
    </g>
    
    <g id='11' transform='translate(400 400)' onclick='go(11)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >11</text>
    </g>
    
    <g id='12' transform='translate(600 400)' onclick='go(12)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >12</text>
    </g>
    
    <!-- Bottom Row -->
    <g id='13' transform='translate(0 600)' onclick='go(13)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >13</text>
    </g>
    
    <g id='14' transform='translate(200 600)' onclick='go(14)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >14</text>
    </g>
    
    <g id='15' transform='translate(400 600)' onclick='go(15)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >15</text>
    </g>
    
    </g>
    
    <script><![CDATA[
    
    r0 = c0 = 0                   // row and column
    
    A    = new Array(4)
    A[0] = new Array(1,5, 9,13)   // column 1
    A[1] = new Array(2,6,10,14)   // column 2
    A[2] = new Array(3,7,11,15)   // column 3
    A[3] = new Array(4,8,12, 0)   // column 4
    
    // Click on slider to be moved to empty space.
    
    function omd(evt)             // Used to id slider (row/col) to be moved.
    { 
    x=evt.clientX
    y=evt.clientY
    if (x>0   && x<200) c0=0
    if (x>200 && x<400) c0=1
    if (x>400 && x<600) c0=2
    if (x>600 && x<800) c0=3
    
    if (y>0   && y<200) r0=0
    if (y>200 && y<400) r0=1
    if (y>400 && y<600) r0=2
    if (y>600 && y<800) r0=3
    }
    
    // Set up for auto-play, first two rows only. Only to be done at start. Helps speed-up game.
    
    S=new Array(12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,7,6,12,8,10,11,5,7,6,12,8,10,11,5,7,6,12,8,10,15,14,13,9,12,8,9,13,14,15,11)
    ss = S.length
    js = 0
    
    function slide()     // Search slider table.
    {
    
    for(r=0;r<4;r++)     // Find where slider is by id
    {
    for(c=0;c<4;c++)
    {
    if(A[c][r]==S[js])   // slider id to be moved
    {
    c1=c
    r1=r
    }}}
    
    // Now locate empty space
    
    for(r=0;r<4;r++)     // Find where 0 is
    {
    for(c=0;c<4;c++)
    {
    if(A[c][r]==0)       // Move slider here
    {
    c0=c
    r0=r
    }}}
    
    A[c0][r0]=S[js]      // Mark new space with slider id in A array
    
    A[c1][r1]=0          // Mark old space zero in A array
    
    u = document.getElementById(S[js].toString())
    u.setAttribute('transform','translate('+(c0*200)+' '+(r0*200)+')')
    
    // do for first two rows only. When done stop timer. Do manually from here on.
    
    js++
    tout = setTimeout('slide()',100)
    if (js==ss) clearTimeout(tout)
    }
    
    // Manually move slider to empty space
    
    function go(slider_id)
    {
    for(r=0;r<4;r++)
    {
    for(c=0;c<4;c++)
    {
    if(A[c][r]==0)
    {
    c1=c
    r1=r
    xx=c*200
    yy=r*200
    }}}
    
    u = document.getElementById(slider_id)
    u.setAttribute('transform','translate('+xx+' '+yy+')')
    A[c1][r1]=slider_id
    A[c0][r0]=0
    }
    
    ]]></script>
    </svg>
    

    0_1489260210755_SliderGame.png



  • @MoonDawg

    NOTES on how to run code:

    1. Change text file extension to .svg (Filename.svg)
    2. Open .svg file in your Vivaldi browser.


  • MOAR!!!! This is pretty cool

    I think it is slightly bugged though, some times a brick vanishes, leaving two empty cells at a time, then peaces start flying across the board instead of "sliding" to contiguous empty spaces only.

    Do you have any more of these SVG games? These are pretty cool!

    alt text



  • @duarte.framos
    That's what I meant by "Slider jumping not allowed - ONLY when you are frustrated."
    I excluded the code to prevent "Slider jumping" to make the code simpler and shorter. Here is some blocker code and changes you can incorporate in the original code, if you want to correct the problem.

    // Add blocked = 1 at top after script tag but before r0 = c0 = 0  
    
    // Add blockcode() at end of omd function but before end brace }
    
    // Add function blockcode() after function go(slider_id)
    
    // Rename old function go(slider_id) to function goX(slider_id). New one at bottom here.
    
    function blockcode()
    {
    //
    // This code looks at all 16 slider locations by row and column.
    // If there is an empty space adjacent to the selected slider it sets blocked to zero.
    // Else it sets blocked to 1.
    // 
    if(c0==0 && r0==0){
    if(A[0][1]==0 || A[1][0]==0) blocked = 0
    else blocked = 1}
    if(c0==0 && r0==1){
    if(A[0][2]==0 || A[1][1]==0 || A[0][0]==0) blocked = 0
    else blocked = 1}
    if(c0==0 && r0==2){     
    if(A[0][3]==0 || A[1][2]==0 || A[0][1]==0) blocked = 0
    else blocked = 1}
    if(c0==0 && r0==3){
    if(A[0][2]==0 || A[1][3]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==0){
    if(A[0][0]==0 || A[1][1]==0 || A[2][0]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==1){
    if(A[0][1]==0 || A[1][0]==0 || A[2][1]==0 || A[1][2]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==2){     
    if(A[0][2]==0 || A[1][1]==0 || A[2][2]==0 || A[1][3]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==3){
    if(A[0][3]==0 || A[1][2]==0 || A[2][3]==0 ) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==0){
    if(A[1][0]==0 || A[2][1]==0 || A[3][0]==0) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==1){
    if(A[1][1]==0 || A[2][0]==0 || A[3][1]==0 || A[2][2]==0) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==2){     
    if(A[1][2]==0 || A[2][1]==0 || A[3][2]==0 || A[2][3]==0) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==3){
    if(A[1][3]==0 || A[2][2]==0 || A[3][3]==0 ) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==0){
    if(A[3][1]==0 || A[2][0]==0) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==1){
    if(A[3][2]==0 || A[3][0]==0 || A[2][1]==0) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==2){     
    if(A[3][3]==0 || A[3][1]==0 || A[2][2]==0) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==3){
    if(A[3][2]==0 || A[2][3]==0) blocked = 0
    else blocked = 1}
    }
    
    function go(dogid)
    {
    if(blocked == 0)
    {
    for(r=0;r<4;r++)
    {
    for(c=0;c<4;c++)
    {
    if(A[c][r]==0)
    {
    c1=c
    r1=r
    xx=c*200
    yy=r*200
    }}}
    
    u = document.getElementById(dogid)
    u.setAttribute('transform','translate('+xx+' '+yy+')')
    A[c1][r1]=1
    A[c0][r0]=0
    blocked=1
    }
    }
    

    Sorry no other games at this time. Am working on a SVG Kaleidoscope image maker that I will share with you soon.



  • @MoonDawg said in SVG Share Code - Slider Game:

    @duarte.framos
    That's what I meant by "Slider jumping not allowed - ONLY when you are frustrated."

    Ah I see must have misunderstood that part. Where should this new code snippet go, I presume at the beginning of the Script block, no?
    You should post the whole complete upgraded version .

    Sorry no other games at this time. Am working on a SVG Kaleidoscope image maker that I will share with you soon.

    Please do I love vector graphics and SVG based interactive stuff. I am sort of an SVG artist myself, but I have no coding skills to speak of, so I 'm limited to basic static stuff I do with Inkscape.



  • @duarte.framos said in SVG Share Code - Slider Game:

    You should post the whole complete upgraded version .

    Here is the upgraded version.

    <svg onmousedown='omd(evt)'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    
    <!--
    
    NOTES on how to run code:
    
    1. Copy code to text file.
    
    2. Change text file extension to .svg (Filename.svg)
     
    3. Open .svg file in your Vivaldi browser.
    
    NOTES on game procedure:
    
    1. OBJECT is to rearrange sliders 15 to 1 top down by clicking sliders next to empty space.
    
    2. ON START ONLY, you can click bottom right empty space to automatically rearrange upper two rows only.
    
    3. NOW, manually click on any sliders next to empty space to move the slider to that empty space. Block checking is DONE.
    
    4. MIXING sliders can be done by clicking on an empty space at some point in game. Block checking is NOT DONE.
    
    -->
    
    <style type='text/css' ><![CDATA[
    text   { font-size:125px; font-family:georgia; font-weight:bold; fill:navy; text-anchor:middle; }
    rect#A { fill:aquamarine; }
    ]]></style>
    
    <g transform='translate(15 15)' > <!-- Needed to move puzzle right and down for border. -->
    
    <!-- Background -->
    <rect x='-5' y='-5' width='810' height='810' fill='lightgray' stroke='black' stroke-width='10' onclick='slide()'/>
    
    <!-- Top Row -->
    <g id='1' transform='translate(0 0)' onclick='go(1)' >
    <rect id='A' x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >1</text>
    </g>
    
    <g id='2' transform='translate(200 0)' onclick='go(2)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >2</text>
    </g>
    
    <g id='3' transform='translate(400 0)' onclick='go(3)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >3</text>
    </g>
    
    <g id='4' transform='translate(600 0)' onclick='go(4)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >4</text>
    </g>
    
    <!-- Second Row -->
    <g id='5' transform='translate(0 200)' onclick='go(5)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >5</text>
    </g>
    
    <g id='6' transform='translate(200 200)' onclick='go(6)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >6</text>
    </g>
    
    <g id='7' transform='translate(400 200)' onclick='go(7)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >7</text>
    </g>
    
    <g id='8' transform='translate(600 200)' onclick='go(8)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >8</text>
    </g>
    
    <!-- Third Row -->
    <g id='9' transform='translate(0 400)' onclick='go(9)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >9</text>
    </g>
    
    <g id='10' transform='translate(200 400)' onclick='go(10)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >10</text>
    </g>
    
    <g id='11' transform='translate(400 400)' onclick='go(11)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >11</text>
    </g>
    
    <g id='12' transform='translate(600 400)' onclick='go(12)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >12</text>
    </g>
    
    <!-- Bottom Row -->
    <g id='13' transform='translate(0 600)' onclick='go(13)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >13</text>
    </g>
    
    <g id='14' transform='translate(200 600)' onclick='go(14)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >14</text>
    </g>
    
    <g id='15' transform='translate(400 600)' onclick='go(15)' >
    <rect x='0' y='0' rx='20' ry='20' width='200' height='200' fill='aquamarine' stroke='black' stroke-width='1' />
    <rect x='5' y='5' rx='20' ry='20' width='190' height='190' fill='none' stroke='gray' stroke-width='10' stroke-opacity='.2' />
    <text x='100' y='125' >15</text>
    </g>
    
    </g>
    
    <script><![CDATA[
    
    blocked = 1
    r0 = c0 = 0                   // row and column
    
    A    = new Array(4)
    A[0] = new Array(1,5, 9,13)   // column 1
    A[1] = new Array(2,6,10,14)   // column 2
    A[2] = new Array(3,7,11,15)   // column 3
    A[3] = new Array(4,8,12, 0)   // column 4
    
    // Click on slider to be moved to empty space.
    
    function omd(evt)             // Used to id slider (row/col) to be moved.
    { 
    x=evt.clientX
    y=evt.clientY
    if (x>0   && x<200) c0=0
    if (x>200 && x<400) c0=1
    if (x>400 && x<600) c0=2
    if (x>600 && x<800) c0=3
    
    if (y>0   && y<200) r0=0
    if (y>200 && y<400) r0=1
    if (y>400 && y<600) r0=2
    if (y>600 && y<800) r0=3
    
    blockcode()
    }
    
    // ========================================================================================================================
    
    // Set up for auto-play, first two rows only. Only to be done at start. Helps speed-up game. No block checking done.
    // Using slider table below to make auto moves. Function works on a timer. When finished reading table, timer stops. 
    
    S=new Array(12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,9,13,14,15,12,8,4,3,2,1,5,7,6,12,8,10,11,5,7,6,12,8,10,11,5,7,6,12,8,10,15,14,13,9,12,8,9,13,14,15,11)
    ss = S.length
    js = 0
    
    function slide()     
    {
    // Find where slider is by id
    
    for(r=0;r<4;r++)     
    {
    for(c=0;c<4;c++)
    {
    if(A[c][r]==S[js])   // slider id to be moved
    {
    c1=c
    r1=r
    }}}
    
    // Now locate empty space
    
    for(r=0;r<4;r++)     // Find where 0 is
    {
    for(c=0;c<4;c++)
    {
    if(A[c][r]==0)       // Move slider to empty space
    {
    c0=c
    r0=r
    }}}
    
    // Take care of business
    
    A[c0][r0]=S[js]      // Mark new space with slider id in A array
    
    A[c1][r1]=0          // Mark old space zero in A array
    
    u = document.getElementById(S[js].toString())
    u.setAttribute('transform','translate('+(c0*200)+' '+(r0*200)+')')
    
    // Do for first two rows only. When done, timer stops. Do manually from here on.
    
    js++
    tout = setTimeout('slide()',100)
    if (js==ss) {js=0; clearTimeout(tout)}     // Correction - added js=0; Click background several times to mix up.
    }
    
    // ========================================================================================================================
    
    // Manually move slider to empty space
    
    function go(slider_id)
    {
    if(blocked == 0)   // new
    {                  // new
    for(r=0;r<4;r++)
    {
    for(c=0;c<4;c++)
    {
    if(A[c][r]==0)
    {
    c1=c
    r1=r
    xx=c*200
    yy=r*200
    }}}
    
    u = document.getElementById(slider_id)
    u.setAttribute('transform','translate('+xx+' '+yy+')')
    A[c1][r1]=slider_id
    A[c0][r0]=0
    blocked=1          // new
    }                  // new
    }
    
    
    // ========================================================================================================================
    
    // This code looks at all 16 slider locations by row and column.
    // If there is an empty space ajacent to the selected slider,  blocked is set to zero.
    // Else, blocked is set to one.
    
    function blockcode()
    {
    if(c0==0 && r0==0){
    if(A[0][1]==0 || A[1][0]==0) blocked = 0
    else blocked = 1}
    if(c0==0 && r0==1){
    if(A[0][2]==0 || A[1][1]==0 || A[0][0]==0) blocked = 0
    else blocked = 1}
    if(c0==0 && r0==2){     
    if(A[0][3]==0 || A[1][2]==0 || A[0][1]==0) blocked = 0
    else blocked = 1}
    if(c0==0 && r0==3){
    if(A[0][2]==0 || A[1][3]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==0){
    if(A[0][0]==0 || A[1][1]==0 || A[2][0]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==1){
    if(A[0][1]==0 || A[1][0]==0 || A[2][1]==0 || A[1][2]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==2){     
    if(A[0][2]==0 || A[1][1]==0 || A[2][2]==0 || A[1][3]==0) blocked = 0
    else blocked = 1}
    if(c0==1 && r0==3){
    if(A[0][3]==0 || A[1][2]==0 || A[2][3]==0 ) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==0){
    if(A[1][0]==0 || A[2][1]==0 || A[3][0]==0) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==1){
    if(A[1][1]==0 || A[2][0]==0 || A[3][1]==0 || A[2][2]==0) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==2){     
    if(A[1][2]==0 || A[2][1]==0 || A[3][2]==0 || A[2][3]==0) blocked = 0
    else blocked = 1}
    if(c0==2 && r0==3){
    if(A[1][3]==0 || A[2][2]==0 || A[3][3]==0 ) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==0){
    if(A[3][1]==0 || A[2][0]==0) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==1){
    if(A[3][2]==0 || A[3][0]==0 || A[2][1]==0) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==2){     
    if(A[3][3]==0 || A[3][1]==0 || A[2][2]==0) blocked = 0
    else blocked = 1}
    if(c0==3 && r0==3){
    if(A[3][2]==0 || A[2][3]==0) blocked = 0
    else blocked = 1}
    }
    
    ]]></script>
    </svg>
    


  • @MoonDawg

    This is a test.
    alt text
    NOTES on image HVMILITY:

    1. SEE https://commons.wikimedia.org/w/index.php?curid=16466345 for details.

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.