65 lines
1.3 KiB
HTML
Executable File
65 lines
1.3 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jPuzzle</title>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" type="text/css" href="jPuzzle-defaultStyle.css" />
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
|
|
<script src="jquery-jPuzzle.js"></script>
|
|
<script src="jquery.ui.touch-punch.js"></script>
|
|
<script>
|
|
$(function()
|
|
{
|
|
|
|
|
|
$('.puzzle').jPuzzle({
|
|
"help" : true,
|
|
'rows': 4,
|
|
'columns': 4,
|
|
'onstart': function(game)
|
|
{
|
|
game.find('#results').remove();
|
|
},
|
|
'onend': function(game,time,formatTime)
|
|
{
|
|
$('<p></p>').text('Win ! Elapsed time : '+formatTime)
|
|
.attr('id','results').appendTo(game);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<style>
|
|
#results
|
|
{
|
|
font-size: 22px;
|
|
text-align: center;
|
|
border-top: 3px solid #000;
|
|
border-bottom: 3px solid #000;
|
|
background-color: rgba(255,255,255,0.7);
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 38%;
|
|
}
|
|
|
|
p, h2
|
|
{
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<p>
|
|
<img class="puzzle" src="bgd1.jpg" alt="Puzzle 1" />
|
|
</p>
|
|
|
|
<p>
|
|
<img class="puzzle" src="bgd2.jpg" alt="Puzzle 1" />
|
|
</p>
|
|
|
|
</body>
|
|
</html> |