5/19/2014

image puzzle game Using JavaScript, HTML & CSS

image puzzle game Using JavaScript, HTML & CSS
image puzzle game Using JavaScript, HTML & CSS

 

Step 1: HTML 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Puzzle Game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Image Puzzle Game</h1>
  <div id="puzzle-container"></div>
  <button id="shuffle-button">Shuffle</button>
  <p id="message"></p>

  <script src="script.js"></script>
</body>
</html>

Step 2: CSS (style.css) 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
}

#puzzle-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 2px;
  margin: 20px auto;
  width: 306px;
  border: 2px solid #444;
}

.tile {
  width: 100px;
  height: 100px;
  background-image: url('https://via.placeholder.com/300'); /* Change to any image URL */
  background-size: 300px 300px;
  cursor: pointer;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transition: transform 0.2s;
}

.tile.correct {
  border-color: green;
}

#shuffle-button {
  padding: 10px 20px;
  font-size: 16px;
  margin-bottom: 10px;
}

#message {
  font-weight: bold;
  color: green;
}

Step 3: JavaScript (script.js) 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
const container = document.getElementById('puzzle-container');
const shuffleButton = document.getElementById('shuffle-button');
const message = document.getElementById('message');

const size = 3;
let tiles = [];

function createTiles() {
  tiles = [];

  for (let row = 0; row < size; row++) {
    for (let col = 0; col < size; col++) {
      const index = row * size + col;

      const tile = document.createElement('div');
      tile.classList.add('tile');
      tile.style.backgroundPosition = `-${col * 100}px -${row * 100}px`;
      tile.dataset.index = index;

      tile.addEventListener('click', () => selectTile(tile));
      container.appendChild(tile);
      tiles.push(tile);
    }
  }
}

let selectedTile = null;

function selectTile(tile) {
  if (!selectedTile) {
    selectedTile = tile;
    tile.style.transform = 'scale(1.1)';
  } else {
    swapTiles(selectedTile, tile);
    selectedTile.style.transform = 'scale(1)';
    selectedTile = null;
    checkWin();
  }
}

function swapTiles(tile1, tile2) {
  const temp = tile1.dataset.index;
  tile1.dataset.index = tile2.dataset.index;
  tile2.dataset.index = temp;

  updateTilePositions();
}

function updateTilePositions() {
  tiles.forEach(tile => {
    const index = tile.dataset.index;
    const row = Math.floor(index / size);
    const col = index % size;
    tile.style.backgroundPosition = `-${col * 100}px -${row * 100}px`;
  });
}

function shuffleTiles() {
  message.textContent = '';
  const indices = [...Array(tiles.length).keys()];
  indices.sort(() => Math.random() - 0.5);
  tiles.forEach((tile, i) => {
    tile.dataset.index = indices[i];
  });
  updateTilePositions();
}

function checkWin() {
  const isWin = tiles.every((tile, index) => Number(tile.dataset.index) === index);
  if (isWin) {
    message.textContent = '🎉 Puzzle Completed!';
    tiles.forEach(tile => tile.classList.add('correct'));
  } else {
    tiles.forEach(tile => tile.classList.remove('correct'));
  }
}

shuffleButton.addEventListener('click', shuffleTiles);

createTiles();
updateTilePositions();

You can change the image by replacing the URL in the CSS background-image property. To make it harder, increase the grid size (e.g., 4x4). Add a timer or move counter for more challenge.

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)