Verplaatsing animatie beperken via timer gaat fout
het ooit dartsspel gaan worden. Het idee er achter is dat indien de posities vooraf vast
gesteld en deze per tijdseenheid vanuit een telmechanisme over een vastgestelde afstand
in pixels verplaatst worden, vang je dit af middels een muisklik is dit sneller dan de
definieering van vlakken in een twee dimensionaal (x,y) assenstelsel want niet nodig.
Tot zover gaat het goed, zie script.
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
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
<script>
var countx = 0;
var t1;
var vis1 = document.getElementById("visor1");
function show1() {
$("#stopf1").show();
$("#stopf2").hide();
}
function movex() {
if (countx < 17) {
countx ++;
} else {
countx = 0;
}
document.getElementById("pg4f1").innerHTML = countx * 7;
}
function timex() {
t1 = setInterval(movex, 500);
}
function stopx() {
clearInterval(t1);
alert("positie x: " + countx + " waarde x: " + countx * 7);
countx = 0;
init();
}
function init() {
show1();
vis1.style.left = '7px';
timex();
}
init()
</script>
<table id="pg4"><tr><td id="pg4f"></td>X as</tr></tr><td id="pg4g">Y as</td></tr>
<tr><td id="pg4f1"></td><td id="pg4g1"></td></tr></table>
<div id="aim1"><div id="visor1"></div></div>
<div id="stopf"><div id="stopf1" onclick="stopx()"><div id="stopf2" onclick="stopy()"></div></div>
<div id="aim2"><div id="visor2"></div></div>
var countx = 0;
var t1;
var vis1 = document.getElementById("visor1");
function show1() {
$("#stopf1").show();
$("#stopf2").hide();
}
function movex() {
if (countx < 17) {
countx ++;
} else {
countx = 0;
}
document.getElementById("pg4f1").innerHTML = countx * 7;
}
function timex() {
t1 = setInterval(movex, 500);
}
function stopx() {
clearInterval(t1);
alert("positie x: " + countx + " waarde x: " + countx * 7);
countx = 0;
init();
}
function init() {
show1();
vis1.style.left = '7px';
timex();
}
init()
</script>
<table id="pg4"><tr><td id="pg4f"></td>X as</tr></tr><td id="pg4g">Y as</td></tr>
<tr><td id="pg4f1"></td><td id="pg4g1"></td></tr></table>
<div id="aim1"><div id="visor1"></div></div>
<div id="stopf"><div id="stopf1" onclick="stopx()"><div id="stopf2" onclick="stopy()"></div></div>
<div id="aim2"><div id="visor2"></div></div>
Het bovenstaande verhaal gaat mis indien uitgebreidt/vervangt met onderstaande.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function movex() {
if (countx < 17) {
countx ++;
} else {
countx = 0;
}
vis1.style.left = parseInt(vis1.style.left) + countx + 'px';
}
if (countx < 17) {
countx ++;
} else {
countx = 0;
}
vis1.style.left = parseInt(vis1.style.left) + countx + 'px';
}
Ehm? Volgens mij mist er ergens iets, bij het niet tijdig klikken om de animatie te stoppen
sjokt het visor1 vrolijk door tot in de pruimentijd. Het is toch echt de bedoeling dat het
ding weer op 7px begint als de countx=0; wordt.... Hoe los je dit probleem op?
Gewijzigd op 18/11/2018 07:45:09 door Yoop Overmaat
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function movex() {
if (countx < 17) {
countx ++;
} else {
countx = 0;
vis1.style.left = '7px';
}
vis1.style.left = parseInt(vis1.style.left) + countx + 'px';
}
if (countx < 17) {
countx ++;
} else {
countx = 0;
vis1.style.left = '7px';
}
vis1.style.left = parseInt(vis1.style.left) + countx + 'px';
}
Soms is het verhaal even laten rusten en er later opnieuw naar kijken de beste oplossing.