How to make td tags move when clicked to available cells?

user_15266912 0
Viewed 47

This is my current table:

Click here to view the table

Each cell can only move if it has a white cell next to it, and proceed to switch positions with that white cell. (I'm trying to do the Parking Lot puzzle game). I'm not sure if using a table is the right choice, is there an easier way to do this? Here is what I have so far:

<table style="width: 650px; height: 600px; border: 1px solid #000000">
    <tbody>
        <tr style="height: 23px;">
            <td style="width: 24px; height: 23px; background-color: blue"  ></td>
            <td style="width: 24px; height: 23px;"></td>
            <td style="width: 24px; height: 23px;background-color: blue" colspan="2"></td>
        </tr>
        <tr style="height: 23px;">
            <td style="width: 49px; height: 23px; background-color: green" rowspan="2"></td>
            <td style="width: 24px; height: 23px;background-color: red" rowspan="2"></td>
            <td style="width: 24px; height: 23px; background-color: yellow"></td>
            <td style="width: 24px; height: 23px;background-color: yellow"></td>
        </tr>
        <tr style="height: 23px;">
            <td style="width: 24px; height: 23px;background-color: yellow"></td>
            <td style="width: 24px; height: 23px;background-color: yellow"></td>
        </tr>
        <tr style="height: 23px;">
            <td style="width: 24px; height: 23px; background-color: blue"  ></td>
            <td style="width: 24px; height: 23px;">&nbsp;</td>
            <td style="width: 24px; height: 23px;background-color: blue" colspan="2"></td>
        </tr>
    </tbody>
</table>

css html javascript
1 Answers

With using tables, this will get messy very fast. This is because, like you illustrated, will have to make use of the colspan and rowspan properties, and these properties will have to change for multiple cells at the same time with some complex logic. Also, possibly animations of the cells switching are a bit harder too. Therefore, this method of using tables is not recommended.

Possible other solutions would be the use of div's with absolute positioning, or even better the use of a canvas.

user_123552720
Related