Schuif puzzel
ten eerst mijn naam is jessica en dit is het eerste bericht wat ik op deze website plaats, dus ik hoop dat alles goed geplaatst is.
Mijn probleem:
Ik heb d.m.v PHP een schuifpuzzel gemaakt, die ook 'werkt'. Wat mijn belangrijkste vraag is, als je de puzzel heb opgelost krijg je het gehele plaatje te zien, dit is de bedoeling ervan, maar zodra je op 'start' klikt, is het zwarte vakje weg. Dat is juist nodig om te 'schuiven'.
Het klopt uiteraard dat het nog niet schuifbaar is maar klik baar, daar ben ik nog mee bezig, maar als iemand ook daar tips voor heeft of wilt helpen graag!
In iig zou ik al een stuk geholpen zijn als na de start button het zwarte vakje weer zichtbaar zou zijn.
Groetjes, Jessica
Hier de codes:
html
<!DOCTYPE html>
<html>
<head>
<title>Puzzle</title>
<link href="css/puzzle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/puzzle.js"></script>
</head>
<body>
<div class="puzzle">
<div class="piece" id="piece_1" onClick="move(this);"></div>
<div class="piece" id="piece_2" onClick="move(this);"></div>
<div class="piece" id="piece_3" onClick="move(this);"></div>
<div class="piece" id="piece_4" onClick="move(this);"></div>
<div class="piece" id="piece_5" onClick="move(this);"></div>
<div class="piece" id="piece_6" onClick="move(this);"></div>
<div class="piece" id="piece_7" onClick="move(this);"></div>
<div class="piece" id="piece_8" onClick="move(this);"></div>
<div class="piece" id="piece_9" onClick="move(this);"></div>
<div class="piece" id="piece_10" onClick="move(this);"></div>
<div class="piece" id="piece_11" onClick="move(this);"></div>
<div class="piece" id="piece_12" onClick="move(this);"></div>
<div class="piece" id="piece_13" onClick="move(this);"></div>
<div class="piece" id="piece_14" onClick="move(this);"></div>
<div class="piece" id="piece_15" onClick="move(this);"></div>
<div class="piece" id="piece_16" onClick="move(this);"></div>
</div>
<input type="button" value="Start" onClick="shuffle_pieces();" />
</body>
</html>
CSS
.puzzle {
margin: 50px;
background-color: black;
width: 320px;
height: 320px;
position: absolute;
}
.piece {
width: 80px;
height: 80px;
position: absolute;
cursor: pointer;
cursor: hand;
background-image: url('../pic/picture.jpg');
}
#piece_1 {
top: 0px;
left: 0px; background-position: 0px 0px;
}
#piece_2 {
top: 0px;
left: 80px; background-position: -80px 0px;
}
#piece_3 {
top: 0px;
left: 160px; background-position: -160px 0px;
}
#piece_4 {
top: 0px;
left: 240px; background-position: -240px 0px;
}
#piece_5 {
top: 80px;
left: 0px; background-position: 0px -80px;
}
#piece_6 {
top: 80px;
left: 80px; background-position: -80px -80px;
}
#piece_7 {
top: 80px;
left: 160px; background-position: -160px -80px;
}
#piece_8 {
top: 80px;
left: 240px; background-position: -240px -80px;
}
#piece_9 {
top: 160px;
left: 0px; background-position: -0px -160px;
}
#piece_10 {
top: 160px;
left: 80px; background-position: -80px -160px;
}
#piece_11 {
top: 160px;
left: 160px; background-position: -160px -160px;
}
#piece_12 {
top: 160px;
left: 240px; background-position: -240px -160px;
}
#piece_13 {
top: 240px;
left: 0px; background-position: -0px -240px;
}
#piece_14 {
top: 240px;
left: 80px; background-position: -80px -240px;
}
#piece_15 {
top: 240px;
left: 160px;
background-position: -160px -240px;
}
#piece_16 {
top: 240px;
left: 240px;
background-position: -240px -240px; opacity: 0.2;
filter: alpha(opacity=20);
cursor: default;
}
JAVASCRIPT
function move(clicked_piece) {
clicked_piece_top = clicked_piece.offsetTop;
clicked_piece_left = clicked_piece.offsetLeft;
empty_piece = document.getElementById('piece_16');
empty_piece_top = empty_piece.offsetTop;
empty_piece_left = empty_piece.offsetLeft;
clicked_piece.style.top = empty_piece_top+'px'; clicked_piece.style.left = empty_piece_left+'px';
empty_piece.style.top = clicked_piece_top+'px'; empty_piece.style.left = clicked_piece_left+'px';
check_finish ();
}
function shuffle_pieces () {
var shuffle = 20;
for (var counter=0;
counter<shuffle;
counter++) {
nr = Math.floor(Math.random()*15)+1;
piece_id = 'piece_'+nr;
shuffle_piece = document.getElementById(piece_id);
move(shuffle_piece);
}
}
function check_finish () {
var correct_list = Array ();
correct_list['piece_1_top'] = 0;
correct_list['piece_1_left'] = 0;
correct_list['piece_2_top'] = 0;
correct_list['piece_2_left'] = 80;
correct_list['piece_3_top'] = 0;
correct_list['piece_3_left'] = 160;
correct_list['piece_4_top'] = 0;
correct_list['piece_4_left'] = 240;
correct_list['piece_5_top'] = 80;
correct_list['piece_5_left'] = 0;
correct_list['piece_6_top'] = 80;
correct_list['piece_6_left'] = 80;
correct_list['piece_7_top'] = 80;
correct_list['piece_7_left'] = 160;
correct_list['piece_8_top'] = 80;
correct_list['piece_8_left'] = 240;
correct_list['piece_9_top'] = 160;
correct_list['piece_9_left'] = 0;
correct_list['piece_10_top'] = 160;
correct_list['piece_10_left'] = 80;
correct_list['piece_11_top'] = 160;
correct_list['piece_11_left'] = 160;
correct_list['piece_12_top'] = 160;
correct_list['piece_12_left'] = 240;
correct_list['piece_13_top'] = 240;
correct_list['piece_13_left'] = 0;
correct_list['piece_14_top'] = 240;
correct_list['piece_14_left'] = 80;
correct_list['piece_15_top'] = 240;
correct_list['piece_15_left'] = 160;
correct_list['piece_16_top'] = 240;
correct_list['piece_16_left'] = 240;
for (var counter=1; counter<16; counter++) {
piece_id = 'piece_'+counter;
check_piece = document.getElementById(piece_id);
check_piece.offsetTop
check_piece.offsetLeft
if (check_piece.offsetTop != correct_list[piece_id+'_top']) {
return false;
}
if (check_piece.offsetLeft != correct_list[piece_id+'_left']) {
return false;
}
}
alert('Gefeliciteerd! De puzzel is opgelost');
empty_piece.style.filter = 'alpha(opacity=100)';
empty_piece = document.getElementById('piece_16');
empty_piece.style.opacity = 1;
}
str_repeat(string,repeat);
Gewijzigd op 15/05/2012 10:09:47 door B a s
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function shuffle_pieces () {
var shuffle = 20;
for (var counter=0;counter<shuffle;counter++) {
nr = Math.floor(Math.random()*15)+1;
piece_id = 'piece_'+nr;
shuffle_piece = document.getElementById(piece_id);
move(shuffle_piece);
empty_piece = document.getElementById('piece_16');
}
}
var shuffle = 20;
for (var counter=0;counter<shuffle;counter++) {
nr = Math.floor(Math.random()*15)+1;
piece_id = 'piece_'+nr;
shuffle_piece = document.getElementById(piece_id);
move(shuffle_piece);
empty_piece = document.getElementById('piece_16');
}
}