Question

(javascript/css/html) Follow these steps to implement the following browser-based puzzle game: 1. Get a photo of...

(javascript/css/html)

Follow these steps to implement the following browser-based puzzle game:
1. Get a photo of yourself and save it as an image file
2. Use a image-splitting program such as splitter.imageonline.co to break the image into 9 roughly equal parts (3 x 3). Save those files in a directory
3. Write Javascript that takes these nine images and randomly rearranges them in a 3 x 3 grid.
4. Each cell in the grid will also have a checkbox.
5. At each turn, the user will click two checkboxes, press a Swap button, and the program will swap the two images that were checked.
6. Play continues until all the sub-images are in their correct positions.
7. The program will state how many turns (swaps) it took to solve the puzzle.
8. Use CSS to make your puzzle game aesthetically (stylistically) pleasing
9. Upload your game (and the photo pieces) to your website.
10. Provide the URL of your puzzle game where it can be tested.

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

CODE :

HTML :

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Image Puzzle</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/image-puzzle.css" rel="stylesheet" />
<script src="js/image-puzzle.js"></script>
</head>

<body>
<div id="collage">
<h2>Image Puzzle</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>Steps:</div>
<div class="stepCount">0</div>
</div>
<div id="timeBox">
Time Taken: <span id="timerPanel"></span> secs
</div>
<img id="actualImage" />
<div>Re-arrange to create a picture like this.</div>
<p id="levelPanel">
<input type="radio" name="level" id="easy" checked="checked" value="3" onchange="imagePuzzle.startGame(images, this.value);"
/> <label for="easy">Easy</label>
<input type="radio" name="level" id="medium" value="4" onchange="imagePuzzle.startGame(images, this.value);" /> <label for="medium">Medium</label>
<input type="radio" name="level" id="hard" value="5" onchange="imagePuzzle.startGame(images, this.value);" /> <label for="hard">Hard</label>
</p>
<div>
<button id="btnRule" type="button" class="btn" onclick="rules();">Rules</button>
<button id="newPhoto" type="button" class="btn" onclick="restart();">Another Photo</button>
</div>
</div>
</div>
</div>
<div id="gameOver" style="display:none;">
<div style="background-color: #fc9e9e; padding: 5px 10px 20px 10px; text-align: center; ">
<h2 style="text-align:center">Game Over!!</h2>
Congratulations!! <br /> You have completed this picture.
<br /> Steps: <span class="stepCount">0</span> steps.
<br /> Time Taken: <span class="timeCount">0</span> seconds<br />
<div>
<button type="button" onclick="window.location.reload(true);">Play Again</button>
</div>
</div>
</div>

<script>
var images = [
{ src: 'images/london-bridge.jpg', title: 'London Bridge' },
{ src: 'images/lotus-temple.jpg', title: 'Lotus Temple' },
{ src: 'images/qutub-minar.jpg', title: 'Qutub Minar' },
{ src: 'images/statue-of-liberty.jpg', title: 'Statue Of Liberty' },
{ src: 'images/taj-mahal.jpg', title: 'Taj Mahal' }
];

window.onload = function () {
var gridSize = document.querySelector('#levelPanel input[type="radio"]:checked').getAttribute('value');
imagePuzzle.startGame(images, gridSize);
};
function restart() {
var gridSize = document.querySelector('#levelPanel input[type="radio"]:checked').getAttribute('value');
imagePuzzle.startGame(images, gridSize);
}
function rules() {
alert('Re arrange the image parts in a way that it correctly forms the picture. \nThe no. of steps taken will be counted.');
}
</script>
</div>
</body>
</html>

JAVASCRIPT :

image-puzzle.js

var timerFunction;

var imagePuzzle = {
stepCount: 0,
startTime: new Date().getTime(),
startGame: function (images, gridSize) {
this.setImage(images, gridSize);
helper.doc('playPanel').style.display = 'block';
helper.shuffle('sortable');
this.stepCount = 0;
this.startTime = new Date().getTime();
this.tick();
},
tick: function () {
var now = new Date().getTime();
var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);
helper.doc('timerPanel').textContent = elapsedTime;
timerFunction = setTimeout(imagePuzzle.tick, 1000);
},
setImage: function (images, gridSize = 4) {
var percentage = 100 / (gridSize - 1);
var image = images[Math.floor(Math.random() * images.length)];
helper.doc('imgTitle').innerHTML = image.title;
helper.doc('actualImage').setAttribute('src', image.src);
helper.doc('sortable').innerHTML = '';
for (var i = 0; i < gridSize * gridSize; i++) {
var xpos = (percentage * (i % gridSize)) + '%';
var ypos = (percentage * Math.floor(i / gridSize)) + '%';

let li = document.createElement('li');
li.id = i;
li.setAttribute('data-value', i);
li.style.backgroundImage = 'url(' + image.src + ')';
li.style.backgroundSize = (gridSize * 100) + '%';
li.style.backgroundPosition = xpos + ' ' + ypos;
li.style.width = 400 / gridSize + 'px';
li.style.height = 400 / gridSize + 'px';

li.setAttribute('draggable', 'true');
li.ondragstart = (event) => event.dataTransfer.setData('data', event.target.id);
li.ondragover = (event) => event.preventDefault();
li.ondrop = (event) => {
let origin = helper.doc(event.dataTransfer.getData('data'));
let dest = helper.doc(event.target.id);
let p = dest.parentNode;

if (origin && dest && p) {
let temp = dest.nextSibling;
p.insertBefore(dest, origin);
p.insertBefore(origin, temp);

let vals = Array.from(helper.doc('sortable').children).map(x => x.id);
var now = new Date().getTime();
document.querySelectorAll('.stepCount').textContent = ++imagePuzzle.stepCount;
document.querySelector('.timeCount').textContent = (parseInt((now - imagePuzzle.startTime) / 1000, 10));

if (isSorted(vals)) {
// helper.doc('actualImageBox').style.display = 'none';
// helper.doc('gameOver').style.display = 'block';
helper.doc('actualImageBox').innerHTML = helper.doc('gameOver').innerHTML;
}
}
};
li.setAttribute('dragstart', 'true');
helper.doc('sortable').appendChild(li);
}
helper.shuffle('sortable');
}
};

isSorted = (arr) => arr.every((elem, index) => { return elem == index; });

var helper = {
doc: (id) => document.getElementById(id) || document.createElement("div"),

shuffle: (id) => {
var ul = document.getElementById(id);
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}
}
}

CSS :

style.css

body {
font-family: 'Segoe UI', Calibri, Arial;
background-color:black;
margin:0;
}
h2{
font-weight:normal;
text-align:center;
   color:white;
}
h3{
font-weight:normal;
margin:3px 0px;
text-align:center;
}

image-puzzle.css

#collage hr{
border:none;
border-top:2px solid #f5f2f2;
height:1px;
}

#collage #playPanel {
background-color:#c2defc;
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 #a46;
height:280px;
width:280px;
}

#collage #sortable {
border:2px solid #a46;
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;
}

CODE SCREENSHOT :

OUTPUT :

Please provide feedback and comment down if any problem persist.

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT