Picture Puzzle Game Using HTML, CSS, and JavaScript (Free Source Code)
The Picture Puzzle Game Using HTML, CSS and JavaScript is very interesting and a good way to teach players to use their brain in order to solve problems.
It is easier to practice and is a fun way to expand your understanding of coding. As for the game you wanna see its source code – I am going to give you the source code for free, but I’ll write it well commenting for the best readability and using the best programming practices which means that the code will be reusable.
GitHub Source: Picture Puzzle Game
Features
- Responsive Design: As seen, it is a game that will shift soon after in variety of screens size.
- Image Upload: The users themselves can upload images of their own to use when creating the puzzles.
- Timer and Moves Counter: Records the total time taken by the user and the number of times he or she has made a move.
- Easy Reset Option: I think that users can resume the game at any time they want.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Recommended for You
- Node.js for Mobile App Development
- Candy Crush Game
- Python Developer Job Description
- Best Python Course on Udemy
- Social Media Icons in Circular Alignment with Hover Effect
Video Tutorial
Process to Build Picture Puzzle Game
To construct the Picture Puzzle Game, the only thing that the reader has to do is to just copy the HTML, CSS, and JavaScript code given above and paste it in their respective files of the project. This also confirms that when the game has been set up it is ready for a run to go.
Once this is done you can open the HTML file in your web browser and begin playing the game at once.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!--
====================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
====================================================
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Picture Puzzle Game</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/image-puzzle.css" rel="stylesheet" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/image-puzzle.js"></script>
</head>
<body>
<div id="collage">
<h2>Picture Puzzle Game (JV Codes)</h2>
<hr />
<div id="playPanel" style="padding:5px;display:none;">
<h3 id="imgTitle"></h3> <hr />
<div style="display:inline-block; margin:auto; width:95%; vertical-align:top;">
<ul id="sortable" class="sortable"></ul>
<div id="actualImageBox">
<div id="stepBox">
<div>Count:</div><div class="stepCount">0</div>
</div>
<div id="timeBox">
Time: <span id="timerPanel"></span> seconds
</div>
<img id="actualImage" />
<div>See the picture and solve the puzzle.</div>
<p id="levelPanel">
<input type="radio" name="level" id="easy" checked="checked" value="3" /> <label for="easy">Easy</label>
<input type="radio" name="level" id="medium" value="4" /> <label for="medium">Medium</label>
<input type="radio" name="level" id="hard" value="5" /> <label for="hard">Hard</label>
<input type="radio" name="level" id="veryhard" value="6" /> <label for="veryhard">Very Hard</label>
</p>
<div>
<button id="btnRule" type="button" class="btn" onclick="rules();">Rules</button>
<button id="newPhoto" type="button" class="btn">Next Picture</button>
</div>
</div>
</div>
</div>
<div id="gameOver" style="display:none;">
<div style="background-color: #fff; padding: 5px 10px 20px 10px; text-align: center; ">
<h2 style="text-align:center">Game over !!</h2>
Congratulations!! <br /> You got the picture ready.
<br />
Time: <span class="stepCount">0</span> gear.
<br />
Time spent: <span class="timeCount">0</span> seconds<br />
<div>
<button type="button" onclick="window.location.reload(true);">Play more</button>
</div>
</div>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the Picture Puzzle Game:
#collage hr{
border:none;
border-top:2px solid #f5f2f2;
height:1px;
}
#collage #playPanel {
background-color:#fda533;
padding:10px 0px;
margin: 10px auto;
max-width:800px;
width:95%;
}
#collage #actualImageBox {
display: inline-block;
font-size:0.8em;
margin: 10px 10px;
vertical-align: top;
width:280px;
}
#collage #stepBox, #collage #timeBox {
display:inline-block;
width:48%;
}
#collage #stepBox div {
background-color:#c2defc;
display:inline-block;
padding:1px 4px;
margin: 0px auto;
max-width:800px;
}
#collage img#actualImage{
border:2px solid rgb(253, 253, 253);
height:280px;
width:280px;
}
#collage #sortable {
border:2px solid #fff;
list-style-type: none;
display: inline-block;
margin: 10px;
padding: 0;
width: 400px;
}
#collage #sortable li {
background-size: 400% 400%;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 100px;
}
#collage button {
background-color:#f5f2f2;
border:1px solid #cce;
display: inline;
font-size: 14px;
height: auto;
width: auto;
padding: 3px 8px;
}
JavaScript
Here is the complete code for script.js file to function the Picture Puzzle Game:
var images = [
{ src: 'img/image1.jpg', title: 'Image 1' },
{ src: 'img/image2.jpg', title: 'Image 2' },
{ src: 'img/image3.jpg', title: 'Image 3' },
{ src: 'img/image4.jpg', title: 'Image 4' },
{ src: 'img/image5.jpg', title: 'Image 5' }
];
$(function () {
var gridSize = $('#levelPanel :radio:checked').val();
imagePuzzle.startGame(images, gridSize);
$('#newPhoto').click(function () {
var gridSize = $('#levelPanel :radio:checked').val();
imagePuzzle.startGame(images, gridSize);
});
$('#levelPanel :radio').change(function (e) {
var gridSize = $(this).val();
imagePuzzle.startGame(images, gridSize);
});
});
function rules() {
alert('Rearrange the pieces so that you get a sample image. \nThe steps taken are counted');
}
Download Source Code
Here is the full source code for this Picture Puzzle Game Using HTML, CSS and JavaScript you can download from the buttons below. It is free to use and no one owns the copyright and therefore you can use in any of your projects.
Conclusion
Here is a simple picture puzzle game made in HTML, CSS and JavaScript to add that little fun factor to your websites. Would also like to remind the users to properly cite the JV Source Codes by linking back to the site.
If you have any issues or you want to ask something, the best thing to do is to leave a comment. I’ll be happy to assist you. Additionally, come and follow the channel for more stunning projects and ideas.
