New Topic/Question
Reply
<!DOCTYPE html>
<html>
<head>
<!-- This is a comment tag -->
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="generic.css" type="text/css" media="screen,projection" />
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
function startPuzzle(){
document.body.innerHTML = '<img src="'+imgToUse+'"/>';}
var picture = new Image();
var gameGrid = [[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0] ];
var segWidth, segHeight;
var theTime;
var timerID;
var moves;
function startPicturePuzzle(picturePath)
{
// Set picturePuzzle division to relative
$('#picturePuzzle').css('position', 'relative');
// Load the picture
$(picture)
.load(function() {
getPicturePuzzleDifficulty();
})
// if there is a loading error
.error(function () {
// notify the user
$('#picturePuzzle')
.html("<h1>Picture Puzzle:<br />Unable to load image</h1>")
.find("h1").each(function() {
$(this).css('position', 'absolute');
$(this).css('left', Math.floor(($('#picturePuzzle').width() - $(this).width())/2) + "px");
$(this).css('top', Math.floor(($('#picturePuzzle').height() - $(this).height())/2) + "px");
});
})
// Set the src attribute to load the image
.attr('src', picturePath);
}
function getPicturePuzzleDifficulty()
{
$('#picturePuzzle')
.css('background-image', 'url("' + $(picture).attr('src') + '")')
.css('background-position', 'center center')
.css('background-repeat', 'no-repeat')
.css('background-size', 'contain')
.html("<h2>Picture Puzzle</h2><div id='dialog'>" +
"<p>Difficulty</p><h2>Please choose a difficulty</h2>" +
"<button id='difficult'>Difficult</button>" +
"<button id='medium'>Medium</button>" +
"<button id='easy'>Easy</button></div>" +
"<h2><span id='time'>Time: </span><span id='moves'>Moves: </span></h2>");
$('#picturePuzzle > h2')
.css('padding', '2px 5px')
.css('background-color', 'lightgrey');
$('#picturePuzzle h2:nth-child(3)')
.css('position', 'relative')
.css('top', ($('#picturePuzzle').height() - ($('#picturePuzzle h2:nth-child(3)').height() * 2) - 8) + "px")
.find('span:nth-child(2)')
.css('padding-left', '80px');
$('#dialog p')
.css('background-color', 'black')
.css('color', 'white')
.css('padding', '2px 5px');
$('#dialog h2')
.css('padding', '5px');
$('#dialog button')
.css('padding', '2px 5px')
.css('float', 'right')
.css('color', 'white')
.css('background-color', 'IndianRed');
$('#dialog')
.css('background-color', 'white')
.css('opacity', '0.8')
.css('position', 'absolute')
.css('top', Math.floor(($('#picturePuzzle').height() - $('#dialog').height())/2) + "px")
.css('left', Math.floor(($('#picturePuzzle').width() - $('#dialog').width())/2) + "px");
$('#difficult').on('click', function() {
$('#dialog').remove();
$('#picturePuzzle').css('background-image', 'none');
setupPicturePuzzle(5);
});
$('#medium').on('click', function() {
$('#dialog').remove();
$('#picturePuzzle').css('background-image', 'none');
setupPicturePuzzle(4);
});
$('#easy').on('click', function() {
$('#dialog').remove();
$('#picturePuzzle').css('background-image', 'none');
setupPicturePuzzle(3);
});
}
function setupPicturePuzzle(difficulty)
{
var gridY, gridX, gridID = 1;
var picWidth, picHeight, ratio;
// create picture grid element
$('#picturePuzzle > h2:nth-child(1)')
.after("<div id='grid'></div>");
// Work out the renderable width and height of the picture
if (picture.naturalWidth > picture.naturalHeight)
{
picWidth = $('#picturePuzzle').innerWidth();
ratio = picture.naturalWidth / picWidth;
picHeight = Math.floor(picture.naturalHeight / ratio) - 8;
$('#grid')
.css('position', 'relative')
.css('top', ((($('#picturePuzzle').height() - picHeight) /2) - $('#picturePuzzle > h2:nth-child(1)').height()));
}
else
{
picHeight = ($('#picturePuzzle').height() - ($('#picturePuzzle > h2:nth-child(1)').height() * 2)) - 8;
ratio = picture.naturalHeight / picHeight;
picWidth = Math.floor(picture.naturalWidth / ratio);
$('#grid')
.css('position', 'relative')
.css('left', ($('#picturePuzzle').width() - picWidth) + "px");
}
// Work out the tile (segment) width and height
segWidth = (Math.floor(picWidth / difficulty) - 2);
segHeight = (Math.floor(picHeight / difficulty) - 2);
for (gridY=0; gridY<difficulty; gridY++)
{
for (gridX=0; gridX<difficulty; gridX++)
{
if (!((gridY == (difficulty - 1)) && (gridX == (difficulty - 1))))
{
// Setup grid value
gameGrid[gridY][gridX] = gridID;
// Add grid element and style its background
$('#grid').append("<a href='#' id='grid" + gridID + "'><div></div></a>");
$('#grid' + gridID + ' > div')
.css('width', segWidth + "px")
.css('height', segHeight + "px")
.css('background-image', 'url("' + $(picture).attr('src') +'")')
.css('background-size', picWidth + 'px ' + picHeight + 'px')
.css('background-position', '-' + (gridX * segWidth) + 'px -' + (gridY * segHeight) + 'px');
$('#grid' + gridID)
.css('border', '1px solid green')
.css('position', 'absolute')
.css('top', (gridY * (segHeight + 2)) + "px")
.css('left', (gridX * (segWidth + 2)) + "px");
gridID++;
}
else
{
alert("here:" + gridY + ":"+ gridX);
gameGrid[gridY][gridX] = 0;
}
}
}
$('#picturePuzzle').append("<button id='start'>Click here to start</button>");
// Set button size
$('#start')
.css('padding', '5px');
// Position button
$('#start')
.css('position', 'absolute')
.css('top', (($('#picturePuzzle').height() - $('#start').height()) / 2) + 'px')
.css('left', (($('#picturePuzzle').width() - $('#start').width()) / 2) + 'px')
// Setup Listener
.on('click', function() {
$('#start').remove();
startGame(difficulty);
});
}
function startGame(difficulty)
{
var i, posX1, posY1, posX2, posY2, tmp, tmpPosX, tmpPosY;
// randomise the tiles
for(i=1; i <= (difficulty * difficulty); i++)
{
posX1 = Math.floor(Math.random() * difficulty);
posY1 = Math.floor(Math.random() * difficulty);
posX2 = Math.floor(Math.random() * difficulty);
posY2 = Math.floor(Math.random() * difficulty);
if (((posY1 == posY2) && (posX1 == posX2)) || ((posY1 == (difficulty - 1)) && (posX1 == (difficulty - 1))) || ((posY2 == (difficulty-1)) && (posX2 == (difficulty - 1))))
{
// Ignore when the same or the last element
i--;
}
else
{
// Swap them on the page
tmpPosY = $('#grid' + gameGrid[posY1][posX1]).css('top');
tmpPosX = $('#grid' + gameGrid[posY1][posX1]).css('left');
$('#grid' + gameGrid[posY1][posX1]).css('top', $('#grid' + gameGrid[posY2][posX2]).css('top'));
$('#grid' + gameGrid[posY1][posX1]).css('left',$('#grid' + gameGrid[posY2][posX2]).css('left'));
$('#grid' + gameGrid[posY2][posX2]).css('top', tmpPosY);
$('#grid' + gameGrid[posY2][posX2]).css('left', tmpPosX);
// swap them in the array
tmp = gameGrid[posY1][posX1];
gameGrid[posY1][posX1] = gameGrid[posY2][posX2];
gameGrid[posY2][posX2] = tmp;
}
}
// Setup Listeners
for (i = 1; i < (difficulty * difficulty); i++)
{
$('#grid' + i).on('click', function(e) {
e.preventDefault();
gridMove($(this).attr("id"), difficulty);
});
}
// Start the clock
theTime = 0;
$('#time').html('Time: ' + theTime + ' secs');
timerID = setInterval(timedEvent, 1000);
// Set the moves to zero
moves = 0;
$('#moves').html("Moves: " + moves);
}
function timedEvent()
{
theTime++;
$('#time').html('Time: ' + theTime + ' secs');
}
function gridMove(theID, difficulty)
{
var gY, gX, eY, eX, gridY, gridX, tmp, moveMade = 0;
// First find the element in the array from the 'id'
var idNum = parseInt(theID.substring(4), 10);
for (gridY = 0; gridY < difficulty; gridY++)
{
for (gridX = 0; gridX < difficulty; gridX++)
{
if (gameGrid[gridY][gridX] == idNum)
{
gY = gridY;
gX = gridX;
}
// and find the empty element
if (gameGrid[gridY][gridX] == 0)
{
eY = gridY;
eX = gridX;
}
}
}
if ((gY == (eY - 1)) && (gX == eX))
{
// Moving Down
$('#grid' + idNum).animate({ top: "+=" + (segHeight + 2) }, 500, "swing", function(){});
moveMade = 1;
}
else if ((gY == (eY + 1)) && (gX == eX))
{
// Moving Up
$('#grid' + idNum).animate({ top: "-=" + (segHeight + 2) }, 500, "swing", function(){});
moveMade = 1;
}
else if ((gY == eY) && (gX == (eX - 1)))
{
// Moving right
$('#grid' + idNum).animate({ left: "+=" + (segWidth + 2) }, 500, "swing", function(){});
moveMade = 1;
}
else if ((gY == eY) && (gX == (eX + 1)))
{
// Moving left
$('#grid' + idNum).animate({ left: "-=" + (segWidth + 2) }, 500, "swing", function(){});
moveMade = 1;
}
// Swap in the array
if (moveMade == 1)
{
tmp = gameGrid[gY][gX];
gameGrid[gY][gX] = gameGrid[eY][eX];
gameGrid[eY][eX] = tmp;
}
// What ever happens, increase the moves
moves++;
$('#moves').html("Moves: " + moves);
// check for end game
moveMade = 0;
gX = 1
for (gridY = 0; gridY < difficulty; gridY++)
{
for (gridX = 0; gridX < difficulty; gridX++)
{
if ((gameGrid[gridY][gridX] != gX) && ((gridY != 2) && (gridY != 2)))
{
moveMade = 1;
}
gX++
}
}
if (moveMade == 0)
{
// end game - you could add the 'time' and 'moves' to a results table too!
// stop the timer
clearInterval(timerID);
$('#picturePuzzle').append("<div id='seeThrough'></div><div id='dialog'>" +
"<p>End Game</p><h2>YOU HAVE WON!!!!!</h2>" +
"<button id='restart'>Restart</button></div>");
$('#seeThrough')
.css('position', 'absolute')
.css('background-color', 'white')
.css('opacity', '0.7')
.css('top', '0px')
.css('height', $('#picturePuzzle').height() + 'px')
.css('width', $('#picturePuzzle').width() + 'px');
$('#dialog p')
.css('background-color', 'black')
.css('color', 'white')
.css('padding', '2px 5px');
$('#dialog h2')
.css('padding', '5px');
$('#dialog button')
.css('padding', '2px 5px')
.css('float', 'right')
.css('color', 'white')
.css('background-color', 'IndianRed');
$('#dialog')
.css('background-color', 'white')
.css('position', 'absolute')
.css('width', Math.floor($('#picturePuzzle').width() * 0.9) + 'px');
$('#dialog')
.css('top', Math.floor(($('#picturePuzzle').height() - $('#dialog').height())/2) + "px")
.css('left', Math.floor(($('#picturePuzzle').width() - $('#dialog').width())/2) + "px");
// Setup Listener on button
$('#restart').on('click', function(){
$('#picturePuzzle').empty();
var picturePath = $(picture).attr('src');
picture = new Image();
startPicturePuzzle(picturePath);
});
}
}
$( document ).ready(function() {
startPicturePuzzle("Birkenhead Park.jpg");
});
</script>
</head>
<body>
<input type='file' id='userfile' />
<div id="picturePuzzle"></div>
</body>
</html>
/* This is a CSS comment */
* {
padding:0;
margin:0;
}
body {
font-family: Arial, Verdana, sans-serif;
font-style: normal;
font-size: 100%;
}
#picturePuzzle {
width: 400px;
height: 400px;
margin: 40px;
border: 1px solid black;
}
$('#userFile').change(function(e) {
MultiQuote
| 