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.




  • @MoonDawg
    Here is the SVG code for the Kaleidoscope. Give it a try. We can work through this. Like to see what you can come up with. Remember to use any picture 200px wide and 700px high on your desktop. Change the code name to match your picture name. Open the svg file in any browser you want. Comment out my picture with //. Define H= with your picture name (remove comment slashes).

    
    <svg onmousemove='show(evt)' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='background:black; ' >
    
    <!--
     
    NOTES on how to run code:
    1. Copy and save code into a text file.
    2. Change text file extension from .txt to .svg (Filename.svg) 
    3. Open .svg file in your Vivaldi browser.
    
    NOTES on how to personalize code:
    1. To use your own image, change image name in code where indicated. (See comment below!)
    2. Try to use an image 200x700 to begin with. Otherwise, reset width (w) and height (h) to your new image.
    3. Run program to get clip path angle (s). (See angle to use posted on left-lower screen!) 
    4. Reset clip path angle (s) as a multiple of 360.
    5. Adjust clip path starting point (x) if needed. (Increase value to make clip narrower.)
    
    NOTES on image HVMILITY:
    1. SEE https://commons.wikimedia.org/w/index.php?curid=16466345 for details. 
    
    -->
    
    <text x='50' y='900' id='TX' font-size='40' fill='red' > Show cursor coordinates </text>  // Show cursor coordinates
    <text x='50' y='950' id='CA' font-size='40' fill='red' > Show clip path angle </text>     // Show clip path angle
    
    <script><![CDATA[
    
    function show(evt) {document.getElementById('TX').firstChild.nodeValue = ' X = ' + evt.clientX + ' Y = ' + evt.clientY}
    
    // --------------------------------------   // Initize variables
    
    w=200                                                                  // <<== Image width
    h=700                                                                  // <<== Image height
    x=10                                                                   // <<== Clip path starting point
    f=0                                                                    // <<== Lt(-)/rt(+) of center pt, bottom Clip path
    s=30                                                                   // <<== Clip path angle adjusted to multiple of 360
    n=360/s                                                                // <<== Number of Kaleidoscope clips
    r=0                                                                    // rotation counter
    
    // This is a link to an image in my Vivaldi Story Album. Feel free to use it.
    H='https://vivaldi.net/media/com_easysocial/photos/8056/104194/h_original.png'
    // You can use your own image (200x700) on your desktop by naming it 'filename.extension' For example:
    // H='filename.jpg'
    
    // --------------------------------------   // Define image IM
    
    grp = document.createElementNS('http://www.w3.org/2000/svg','g')
    grp.setAttribute('id','IM')
    
    im = document.createElementNS('http://www.w3.org/2000/svg','image')
    im.setAttributeNS('http://www.w3.org/1999/xlink','href',H)            // Image used
    im.setAttribute('x',0)
    im.setAttribute('y',0)
    im.setAttribute('width',w)
    im.setAttribute('height',h)
    im.setAttribute('transform','scale(1 1)')
    grp.appendChild(im)
    
    im = document.createElementNS('http://www.w3.org/2000/svg','image')
    im.setAttributeNS('http://www.w3.org/1999/xlink','href',H)            // Image used
    im.setAttribute('x',-2*w)                                             // Adjustment for position of mirror image
    im.setAttribute('y',0)
    im.setAttribute('width',w)
    im.setAttribute('height',h)
    im.setAttribute('transform','scale(-1 1)')                            // Mirror the image
    grp.appendChild(im)
    
    document.documentElement.appendChild(grp)
    
    // --------------------------------------   // Define clip path CP
    
    cp = document.createElementNS('http://www.w3.org/2000/svg','clipPath')
    cp.setAttribute('id','CP')
    
    p = document.createElementNS('http://www.w3.org/2000/svg','path')
    p.setAttribute('d','M'+x+' 0, '+(w+w-x)+' 0, '+(w+f)+' '+h+', '+(w-f)+' '+h+', '+x+' 0')
    cp.appendChild(p)
    
    document.documentElement.appendChild(cp)
    
    // --------------------------------------   // Show clip path outline in red
    
    pp = document.createElementNS('http://www.w3.org/2000/svg','path')
    pp.setAttribute('d','M'+x+' 0, '+(w+w-x)+' 0, '+(w+f)+' '+h+', '+(w-f)+' '+h+', '+x+' 0')
    pp.setAttribute('fill','none')
    pp.setAttribute('stroke','red')
    pp.setAttribute('stroke-width',2)
    document.documentElement.appendChild(pp)
    
    // --------------------------------------   // Create Kaleidoscope image
    
    grp = document.createElementNS('http://www.w3.org/2000/svg','g')
    grp.setAttribute('transform','translate(900 50) scale(.65)')       // <<== Adjust to reposition Kaleidoscope image on screen
    
    for(i=0;i<n;i++)
    {
    u = document.createElementNS('http://www.w3.org/2000/svg','use')
    u.setAttribute('x',0)
    u.setAttribute('y',0)
    u.setAttributeNS('http://www.w3.org/1999/xlink','href','#IM')
    u.setAttribute('clip-path','url(#CP)')
    u.setAttribute('transform','rotate('+r+' '+w+' '+h+')')
    grp.appendChild(u)
    r+=s
    }
    
    document.documentElement.appendChild(grp)
    
    // --------------------------------------   // Show clip path angle on lower-left of screen.
    
    clipPath_Angle = Math.round(2*(Math.atan((w-x)/h)*180/Math.PI))
    
    document.getElementById('CA').firstChild.nodeValue = 'clipPath_Angle = '+clipPath_Angle
    
    // _ _    _ = clip-width
    // \|/    | = clip-height
     
    ]]></script>
    </svg>
    
    

    To test this code, I made the following changes which you should make too:

    // This is a link to an image in my Vivaldi Story Album. Feel free to use it.
    // H='https://vivaldi.net/media/com_easysocial/photos/8056/104194/h_original.png'
    // You can use your own image (200x700) on your desktop by naming it 'filename.extension' For example:
    H='filename.png'
    

    I made a snap-shot of my original 200x700 and named it "filename.png". Got something weird, but it worked.



  • Hey this is pretty cool. Trippy!

    0_1490725742867_52755942-af47-4987-9dda-c1f24298962d.png



  • @duarte.framos
    That's absolutely fantastic!!! :art: :clap_tone1: :clap_tone2: :grinning:



  • By the way, this was the image original https://goo.gl/photos/CqdpCcmmY7ST9YFo6



  • @MoonDawg

    :trumpet: Revised code for a NON-MIRROWED IMAGE! Give it a try. Enjoy! :trumpet:

    <svg onmousemove='show(evt)' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='background:gray; ' >
    
    <!--
    
    NOTE:
    1. Revised code for a NON-MIRROWED IMAGE!
    
    NOTES on how to run code:
    1. Copy and save code into a text file.
    2. Change text file extension from .txt to .svg (svgname.svg) 
    3. Open .svg file in your Vivaldi browser.
    
    NOTES on how to personalize code:
    1. To use your own image, change image name in code where indicated. (Just 1 place below!)
    2. Reset width (w) and height (h) to your new image.
    3. Run program to get clip path angle (s). (See left lower screen!) 
    4. Reset clip path angle (s) as a multiple of 360.
    5. Adjust clip path top starting point (x) if needed. (Increase value to make clip narrower at top.)
    6. Adjust clip path bottom footer (f) if needed. (Makes for a wider bottom path instead of a point.)
    
    NOTE on image HVMILITY:
    1. SEE https://commons.wikimedia.org/w/index.php?curid=16466345 for details. 
    
    -->
    
    <text x='50' y='900' id='TX' font-size='40' fill='black' > Show cursor coordinates </text>  // Show cursor coordinates
    <text x='50' y='950' id='CA' font-size='40' fill='black' > Show clip path angle </text>     // Show clip path angle
    
    <script><![CDATA[
    
    function show(evt) {document.getElementById('TX').firstChild.nodeValue = ' X = ' + evt.clientX + ' Y = ' + evt.clientY}
    
    // --------------------------------------   // Initize variables
    
    w=200                                       // Image width
    h=700                                       // Image height
    x=0                                         // Clip path top (starting point)
    f=0                                         // Clip path bottom (lt(-)/rt(+) of center pt)
    s=15                                        // Clip path angle adjusted to multiple of 360
    n=360/s                                     // Number of Kaleidoscope clips
    r=0                                         // Initial rotation counter (r+=s)
    H='H.png'                                   // Name of image used (gets redefined below; hence, no //)
    
    // This is a link to an image in my Vivaldi Story Album. Feel free to use it.
    // COMMENT OUT the next line WHEN YOU USE YOUR OWN IMAGE NAME.
    H='https://vivaldi.net/media/com_easysocial/photos/8056/104194/h_original.png'
    // s=15 makes for 24 slices.
    // You can use your own image (200x700) on your desktop by naming it 'filename.extension' For example: H='filename.png'
    
    // --------------------------------------   // Define image IM
    
    im = document.createElementNS('http://www.w3.org/2000/svg','image')
    im.setAttribute('id','IM')
    im.setAttributeNS('http://www.w3.org/1999/xlink','href',H) // Image used is refernced here.
    im.setAttribute('x',0)
    im.setAttribute('y',0)
    im.setAttribute('width',w)
    im.setAttribute('height',h)
    im.setAttribute('transform','scale(1)')                    // Adjust scale for effect. Try .1 to .9
    document.documentElement.appendChild(im)
    
    // --------------------------------------   // Define clip path CP
    
    cp = document.createElementNS('http://www.w3.org/2000/svg','clipPath')
    cp.setAttribute('id','CP')
    
    p = document.createElementNS('http://www.w3.org/2000/svg','path')
    p.setAttribute('d','M'+x+' 0, '+(w-x)+' 0, '+(w/2+f)+' '+h+', '+(w/2-f)+' '+h+', '+x+' 0')   // Adjusted for non-mirror image
    cp.appendChild(p)
    
    document.documentElement.appendChild(cp)
    
    // --------------------------------------   // Show clip path outline in red
    
    pp = document.createElementNS('http://www.w3.org/2000/svg','path')
    pp.setAttribute('d','M'+x+' 0, '+(w-x)+' 0, '+(w/2+f)+' '+h+', '+(w/2-f)+' '+h+', '+x+' 0')  // Adjusted for non-mirror image
    pp.setAttribute('fill','none')
    pp.setAttribute('stroke','red')
    pp.setAttribute('stroke-width',2)
    document.documentElement.appendChild(pp)
    
    // --------------------------------------   // Create Kaleidoscope image and reposition if needed
    
    grp = document.createElementNS('http://www.w3.org/2000/svg','g')
    grp.setAttribute('transform','translate(1000 50) scale(.75)')          // Adjust to reposition Kaleidoscope image
    
    for(i=0;i<n;i++)
    {
    u = document.createElementNS('http://www.w3.org/2000/svg','use')
    u.setAttribute('x',0)
    u.setAttribute('y',0)
    u.setAttributeNS('http://www.w3.org/1999/xlink','href','#IM')
    u.setAttribute('clip-path','url(#CP)')
    u.setAttribute('transform','rotate('+r+' '+w/2+' '+h+')')  // Adjusted for non-mirror image. (Rotate around center point)
    grp.appendChild(u)
    r+=s
    }
    
    document.documentElement.appendChild(grp)
    
    // --------------------------------------   // Show clip path angle
    
    clipPath_Angle = Math.round(2*(Math.atan((w/2-x)/h)*180/Math.PI))      // Adjusted for non-mirror image
    
    document.getElementById('CA').firstChild.nodeValue = 'clipPath_Angle = '+clipPath_Angle
    
    // --    -- = clip-width
    // \/     | = clip-height
     
    ]]></script>
    </svg>
    
    

Log in to reply
 

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