Krijg functie niet werkend
ik maak een deck met kaarten voor een memory spel en wil het daarna delen, 9 kaarten dan clonen en de 18 kaarten schudden.
Dit is de code om te testen wat al niet werkt, wat doe ik fout.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready(function(){
kaarten = deck();
kaarten = delen(kaarten);
});
function deck() {
//var kaarten = [];
$.getJSON('scripts/deck.php', function(data) {
var kaarten = [];
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
//$('#game-content').append(kaarten);
});
//return kaarten;
//$('#game-content').append(kaarten);
}
function delen(kaarten) {
for (var i = 0; i < 9; i++) {
$('#game-content').append(kaarten[i]);
}
}
kaarten = deck();
kaarten = delen(kaarten);
});
function deck() {
//var kaarten = [];
$.getJSON('scripts/deck.php', function(data) {
var kaarten = [];
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
//$('#game-content').append(kaarten);
});
//return kaarten;
//$('#game-content').append(kaarten);
}
function delen(kaarten) {
for (var i = 0; i < 9; i++) {
$('#game-content').append(kaarten[i]);
}
}
Hele code waarmee ik aan het prutsen ben.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(document).ready(function(){
kaarten = deck();
kaarten = delen(kaarten);
});
function deck() {
//var kaarten = [];
$.getJSON('scripts/deck.php', function(data) {
var kaarten = [];
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
//$('#game-content').append(kaarten);
});
//return kaarten;
//$('#game-content').append(kaarten);
}
function delen(kaarten) {
kaarten = schudden(kaarten);
var negenkaarten = '';
// 9 kaarten ophalen en clonen
for (var i = 0; i < 9; i++) {
negenkaarten = kaarten[i];
}
var clone = negenkaarten.slice(0);
achttienkaarten = $.merge( $.merge( [], negenkaarten), clone);
kaarten = schudden(achttienkaarten);
//return kaarten;
$('#game-content').append(kaarten);
}
function schudden(kaarten){
for(var j, x, i = kaarten.length; i; j = Math.floor(Math.random() * i), x = kaarten[--i], kaarten[i] = kaarten[j], kaarten[j] = x);
return kaarten;
}
kaarten = deck();
kaarten = delen(kaarten);
});
function deck() {
//var kaarten = [];
$.getJSON('scripts/deck.php', function(data) {
var kaarten = [];
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
//$('#game-content').append(kaarten);
});
//return kaarten;
//$('#game-content').append(kaarten);
}
function delen(kaarten) {
kaarten = schudden(kaarten);
var negenkaarten = '';
// 9 kaarten ophalen en clonen
for (var i = 0; i < 9; i++) {
negenkaarten = kaarten[i];
}
var clone = negenkaarten.slice(0);
achttienkaarten = $.merge( $.merge( [], negenkaarten), clone);
kaarten = schudden(achttienkaarten);
//return kaarten;
$('#game-content').append(kaarten);
}
function schudden(kaarten){
for(var j, x, i = kaarten.length; i; j = Math.floor(Math.random() * i), x = kaarten[--i], kaarten[i] = kaarten[j], kaarten[j] = x);
return kaarten;
}
Het clonen gaat niet zo lekker bij je.
Hier een verkorte versie van je delen functie:
Code (php)
1
2
3
4
5
2
3
4
5
function delen(kaarten) {
kaarten = kaarten.concat(kaarten.slice());
kaarten = schudden(kaarten);
return kaarten;
}
kaarten = kaarten.concat(kaarten.slice());
kaarten = schudden(kaarten);
return kaarten;
}
Gewijzigd op 18/05/2016 15:16:30 door Randy vsf
Wat ik zou doen is een object Memory maken, waar functies (methoden) aanhangen die relevant zijn voor het spel:
- het starten van een nieuw(e) spel(ronde)
- het instellen van het aantal deelnemers
- het afhandelen van "beurten" (specifiek, het omdraaien van twee kaarten)
- beëindiging van het spel en bepalen van winnaar
- tekenen van het spelbord en eventuele animaties voor het omdraaien van kaarten
Het schudden van de kaarten is iets wat aan de serverzijde gedaan kan worden, je hoeft dan enkel het geschudde deck op te halen als je een nieuw spel start (EDIT: of zelfs enkel de "afbeelding" van de omgedraaide kaart, hiermee houd je alle kaart-informatie aan de serverzijde).
Misschien is het een goede oefening om eerst eens abstract te modelleren wat dit functioneel zou moeten doen? Ik denk dat dan de technische uitwerking hier soepeler uit voortvloeit.
Het feit dat je undefined meldingen krijgt komt waarschijnlijk omdat je binnen een scope (geldigheidsdomein van een variabele) waar "kaarten" niet bestaat deze probeert op te vragen. Met het plaatsen van "var" voor een variabele veranker je de variabele in die scope. Vervolgens is die variabele in die, en alle onderliggende scopes, toegankelijk.
Gewijzigd op 18/05/2016 15:49:01 door Thomas van den Heuvel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<p id="demo"></p>
<script>
autonaam = myFunction();
document.getElementById("demo").innerHTML ="The type of carName is " + autonaam;
function myFunction() {
var carName = "Volvo";
return carName;
}
</script>
<script>
autonaam = myFunction();
document.getElementById("demo").innerHTML ="The type of carName is " + autonaam;
function myFunction() {
var carName = "Volvo";
return carName;
}
</script>
Dan zou dit toch ook moeten werken?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
kaarten = deck();
$('#game-content').append(kaarten);
});
function deck() {
$.getJSON('scripts/deck.php', function(data) {
var kaarten = [];
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
});
}
kaarten = deck();
$('#game-content').append(kaarten);
});
function deck() {
$.getJSON('scripts/deck.php', function(data) {
var kaarten = [];
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
});
}
Oudere versie van jquery?
Gewijzigd op 18/05/2016 20:30:41 door Randy vsf
ik weet nu waar het aan ligt, ik kom niet uit de functie getJSON()
Dit werkt niet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
deck();
});
function deck() {
var kaarten = [];
$.getJSON('scripts/deck.php?spel=memory', function(data) {
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
});
$('#game-content').append(kaarten);
}
deck();
});
function deck() {
var kaarten = [];
$.getJSON('scripts/deck.php?spel=memory', function(data) {
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
});
$('#game-content').append(kaarten);
}
Dit werkt wel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
deck();
});
function deck() {
var kaarten = [];
$.getJSON('scripts/deck.php?spel=memory', function(data) {
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
$('#game-content').append(kaarten);
});
}
deck();
});
function deck() {
var kaarten = [];
$.getJSON('scripts/deck.php?spel=memory', function(data) {
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
$('#game-content').append(kaarten);
});
}
En zodra ik met return wil werken werk het weer niet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
kaarten = deck();
$('#game-content').append(kaarten);
});
function deck() {
var kaarten = [];
$.getJSON('scripts/deck.php?spel=memory', function(data) {
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
});
}
kaarten = deck();
$('#game-content').append(kaarten);
});
function deck() {
var kaarten = [];
$.getJSON('scripts/deck.php?spel=memory', function(data) {
$.each(data, function(key, val) {
kaarten.push('<div class="kaart" top="2%" left="2%" id="kaart-'+key+'" data-val="'+val['face']+'" data-suit="'+val['suit']+'" data-flip="down"><span class="itop">'+val['face']+'&'+val['suit']+';</span><span class="ibottom">'+val['face']+'&'+val['suit']+';</span></div>');
});
return kaarten;
});
}
Gewijzigd op 18/05/2016 21:34:19 door Ferdi R
In het tweede stuk vul je die pas als de getjson klaar is, en dat is wat je moet hebben.
Je kan gebruik maken van jquery ajaxStop. En in die functie pas append(kaarten) zetten. AjaxStop wordt pas getriggerd als alle Ajax events op de page klaar zijn.