1

I want to create something like "puzzle". I already inserted pictures and made possible for a user to input rows and columns.

How do I implement(using JavaScript) when a user clicks on the image and clicks to an empty square, the picture will duplicate and show up there?
Can you direct me in the right way, I don't know how to start or what to use.

enter image description here

After: enter image description here

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mario</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table,td {
            border: 1px solid grey;
            border-collapse: collapse;
            margin: 10px;
        }

        img {
            display: block;
        }

        td {
            border: 1px solid grey;
            width: 33px;
            height: 33px;
            background-color: silver;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td><img src="images/sprite1.gif" alt="sprite1.gif"></td>
            <td><img src="images/sprite2.gif" alt="sprite2.gif"></td>
            <td><img src="images/sprite3.gif" alt="sprite3.gif"></td>
            <td><img src="images/sprite4.gif" alt="sprite4.gif"></td>
            <td><img src="images/sprite5.gif" alt="sprite5.gif"></td>
            <td><img src="images/sprite6.gif" alt="sprite6.gif"></td>
            <td><img src="images/sprite7.gif" alt="sprite7.gif"></td>
            <td><img src="images/sprite8.gif" alt="sprite8.gif"></td>
            <td><img src="images/sprite9.gif" alt="sprite9.gif"></td>
            <td><img src="images/sprite10.gif" alt="sprite10.gif"></td>
            <td><img src="images/sprite11.gif" alt="sprite11.gif"></td>
            <td><img src="images/sprite12.gif" alt="sprite12.gif"></td>
            <td><img src="images/sprite13.gif" alt="sprite13.gif"></td>
            <td><img src="images/sprite14.gif" alt="sprite14.gif"></td>
            <td><img src="images/sprite15.gif" alt="sprite15.gif"></td>
            <td><img src="images/sprite16.gif" alt="sprite16.gif"></td>
        </tr>
    </table>


<script>
    function el( tagName ) {
    return document.createElement( tagName );
    }

    var r = window.prompt("Please enter rows:"); //vrstica tr
    while(r<5 || r>20){
    r = window.prompt("Wrong, enter a number between 5 and 20:"); 
    }

    var c = window.prompt("Please enter columns:"); //stoplec td
    while(c<10 || c>40){
    c = window.prompt("Wrong, enter a number between 10 and 40:");
    }

    var table = el( 'table' );

    for ( var i = 0; i < r; i++ ) {

        var tr = el( 'tr' );

        for ( var j = 0; j < c; j++ ) {

            tr.appendChild( el( 'td' ) );        
        }

    table.appendChild( tr );
    }

    document.body.appendChild( table );
</script>

</body>

  • algotithm is "when user clicks image get src and store in variable. when user click empty box check if it is empty then appen image tag src that stored in variable" i will give code for jquery if you need – jasinth premkumar Dec 02 '18 at 16:12
  • @jasinthpremkumar I understand what do you mean but don't know how exactly to do that. jqerry code would be good for my understanding if you wish to share it. –  Dec 02 '18 at 16:18

2 Answers2

0

algotithm is "when user clicks image get src and store in variable. when user click empty box check if it is empty then appen image tag src that stored in variable"

line of code in js is larger than jquery thats why i've used jquery

refer this link for java script onclick event on table td link2

as per your request in jquery:

var image="";
$(function(){

 $("table#im").find("td").click(function(){
    image=$(this).html();
   
 });
 $("table#box ").find("td").click(function(){
   
   if(image==""){
    alert("select image");
    
    }
    else{
      $(this).append(image);
    }
 });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mario</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table,td {
            border: 1px solid grey;
            border-collapse: collapse;
            margin: 10px;
        }

        img {
            display: block;
        }

        td {
            border: 1px solid grey;
            width: 33px;
            height: 33px;
            background-color: silver;
        }

    </style>

</head>
<body>
<table id="im">
        <tr>
            <td><img src="images/sprite1.gif" alt="sprite1.gif"></td>
            <td><img src="images/sprite2.gif" alt="sprite2.gif"></td>
            <td><img src="images/sprite3.gif" alt="sprite3.gif"></td>
            <td><img src="images/sprite4.gif" alt="sprite4.gif"></td>
            <td><img src="images/sprite5.gif" alt="sprite5.gif"></td>
            <td><img src="images/sprite6.gif" alt="sprite6.gif"></td>
            <td><img src="images/sprite7.gif" alt="sprite7.gif"></td>
            <td><img src="images/sprite8.gif" alt="sprite8.gif"></td>
            <td><img src="images/sprite9.gif" alt="sprite9.gif"></td>
            <td><img src="images/sprite10.gif" alt="sprite10.gif"></td>
            <td><img src="images/sprite11.gif" alt="sprite11.gif"></td>
            <td><img src="images/sprite12.gif" alt="sprite12.gif"></td>
            <td><img src="images/sprite13.gif" alt="sprite13.gif"></td>
            <td><img src="images/sprite14.gif" alt="sprite14.gif"></td>
            <td><img src="images/sprite15.gif" alt="sprite15.gif"></td>
            <td><img src="images/sprite16.gif" alt="sprite16.gif"></td>
        </tr>
    </table>

<br><br><br><br><br>
<table id=box>
        <tr>
           <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
jasinth premkumar
  • 1,430
  • 1
  • 12
  • 22
0

Since you already have a strip of images you can use the CSS sprite method.

Load in the image strip and then use classes to show the relevant parts of it.

Here's an example with the icons in the menu, and a small grid. Click on any image and then on a square in the grid to add the icon.

Note, this example isn't pixel perfect, but it'll give you an idea how to proceed.

const grid = document.querySelector('.grid');

// Listen for clicks on the grid
grid.addEventListener('click', handleClick, false);

const menu = document.querySelector('.menu');

// Listen for clicks in the menu
menu.addEventListener('click', handleMenu, false);

const html = [];
const type = [];

// Create a blank grid
for (let i = 0; i < 36; i++) {
  html.push('<div class="block"></div>');
}

// ...and add it to the grid element
grid.insertAdjacentHTML('beforeend', html.join(''));

function handleClick(e) {

  // Change the class of the grid cell to match the icon
  // by shifting the first element off the type array
  e.target.className = `image block ${type.shift()}`;
}


// When an icon is clicked, push the icon class to
// the `type` array
function handleMenu(e) {
  const { classList } = e.target;
  type.push(classList[2]);
  classList.add('highlight');
}
* {
  box-sizing: border-box;
}
 
.image {
  background-image: url('https://i.imgur.com/LrpJqJ7.png');
  background-repeat: no-repeat;
  height: 46px;
  width: 702px;
}

.block {
  border: 1px solid #dfdfdf;
  width: 42px;
  height: 42px;
  background-color: #efefef;
}

.highlight {
  border: 2px solid black;
}

.questionmark {
  background-position: -1px -1px;
}

.panel {
  background-position: -45px -1px;
}

.wall {
  background-position: -89px 0px;
}

.pyramid {
  background-position: -134px 0px;
}

.snail {
  background-position: -178px 0px;
}

.toadstool {
  background-position: -222px 0px;
}

.coin {
  background-position: -266px 0px;
}

.b-left {
  background-position: -310px 0px;
}

.b-center {
  background-position: -354px 0px;
}

.b-right {
  background-position: -398px 0px;
}

.pipe-top-left {
  background-position: -442px 0px;
}

.pipe-top-right {
  background-position: -486px 0px;
}

.pipe-left {
  background-position: -530px 0px;
}

.pipe-right {
  background-position: -574px 0px;
}

.cloud {
  background-position: -618px 0px;
}

.grid {
  display: grid;
  width: 252px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.menu .block {
  display: inline-block;
}
<div class="menu">
  <div class="image block questionmark"></div>
  <div class="image block panel"></div>
  <div class="image block wall"></div>
  <div class="image block pyramid"></div>
  <div class="image block snail"></div>
  <div class="image block toadstool"></div>
  <div class="image block coin"></div>
  <div class="image block b-left"></div>
  <div class="image block b-center"></div>
  <div class="image block b-right"></div>
  <div class="image block pipe-top-left"></div>
  <div class="image block pipe-top-right"></div>
  <div class="image block pipe-left"></div>
  <div class="image block pipe-right"></div>
  <div class="image block cloud"></div>
</div>
<div class="grid"></div>
Andy
  • 61,948
  • 13
  • 68
  • 95