animatie game
Wat ik tot nu toe heb ik is dat als ik met de muis over mijn rondzwevende blok ga, ik een alert krijg met "1". Maar wat ik uiteindelijk wil is dat hij in een textvakje de text (een getal) per keer dat ik over het blok ga, met +1 verhoogd. Hoe kan dit?
En ipv een alert 1 optellen bij de counter in de eventhandler, en de score text updaten.
Ik ken je code niet, maar ik zou hierop uitkomen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
var counter = 0;
var scoretext = document.getElementById('textToUpdate');
document.getElementById('abc').addEventListener('mouseover', function()
{
counter++;
scoretext.innerHTML = counter.toString();
});
</script>
var counter = 0;
var scoretext = document.getElementById('textToUpdate');
document.getElementById('abc').addEventListener('mouseover', function()
{
counter++;
scoretext.innerHTML = counter.toString();
});
</script>
Gewijzigd op 09/12/2015 09:24:27 door Randy vsf
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div").mouseenter(function() {
var counter = 1;
var scoretext = document.getELementById('h2d');
document.getElementById('div').addEventListener('mouseenter', function()
{
counter++;
scoretext.innerHTML = counter.toString;
}
});</script>
</head>
<body><div class="full">
<div class="left">
<div class="div" id="div"></div>
<h2 id="h2d" class="h2d">1</h2>
</div></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#div").mouseenter(function() {
var counter = 1;
var scoretext = document.getELementById('h2d');
document.getElementById('div').addEventListener('mouseenter', function()
{
counter++;
scoretext.innerHTML = counter.toString;
}
});</script>
</head>
<body><div class="full">
<div class="left">
<div class="div" id="div"></div>
<h2 id="h2d" class="h2d">1</h2>
</div></div>
</body>
</html>
Toevoeging op 09/12/2015 09:28:30:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div").mouseenter(function() {
var counter = 1;
var scoretext = document.getELementById('h2d');
document.getElementById('div').addEventListener('mouseenter', function()
{
counter++;
scoretext.innerHTML = counter.toString;
}
});</script>
</head>
<body><div class="full">
<div class="left">
<div class="div" id="div"></div>
<h2 id="h2d" class="h2d">1</h2>
</div></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#div").mouseenter(function() {
var counter = 1;
var scoretext = document.getELementById('h2d');
document.getElementById('div').addEventListener('mouseenter', function()
{
counter++;
scoretext.innerHTML = counter.toString;
}
});</script>
</head>
<body><div class="full">
<div class="left">
<div class="div" id="div"></div>
<h2 id="h2d" class="h2d">1</h2>
</div></div>
</body>
</html>
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
<HTML>
<HEAD>
<script src="jquery-1.11.3.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var counter = 0;
var scoretext = document.getElementById('textToUpdate');
$('#abc').mouseenter(function(){
counter++;
$('#textToUpdate').html(counter);
})
</SCRIPT>
</HEAD>
<BODY>
<button id="abc">Hover me</button>
<p id="textToUpdate"></p>
</body>
</HTML>
<HEAD>
<script src="jquery-1.11.3.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var counter = 0;
var scoretext = document.getElementById('textToUpdate');
$('#abc').mouseenter(function(){
counter++;
$('#textToUpdate').html(counter);
})
</SCRIPT>
</HEAD>
<BODY>
<button id="abc">Hover me</button>
<p id="textToUpdate"></p>
</body>
</HTML>
Code (php)
1
2
3
2
3
$(document).ready(function(){
// hier je script
});
// hier je script
});
Toevoeging op 11/12/2015 10:30:47:
Ik heb nu een game gemaakt:
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
</head><style>
.div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1;
animation-name: example;
animation-duration: 20s;
}
.left {
position: absolute;
-webkit-animation-name: background; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 2;
animation-name: background;
animation-duration: 10s;
width:99%;
height:90%;
margin-top:20px;
}
.score {
height:35px;
}
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:20px;}
10% {background-color:yellow; left:110px; top:460px;}
20% {background-color:lightblue; left:220px; top:25px;}
30% {background-color:green; left:330px; top:460px;}
40% {background-color:red; left:440px; top:30px;}
50% {background-color:yellow; left:550px; top:460px;}
60% {background-color:blue; left:660px; top:35px;}
70% {background-color:green; left:770px; top:460px;}
80% {background-color:red; left:880px; top:40px;}
90% {background-color:yellow; left:990px; top:460px;}
100% {background-color:blue; left:1100px; top:45px;}
}
@-webkit-keyframes background {
0% {background-color:yellow;}
10% {background-color:blue;}
20% {background-color:red;}
30% {background-color:green;}
40% {background-color:lightgray;}
50% {background-color:black;}
60% {background-color:orange;}
70% {background-color:purple;}
80% {background-color:red;}
90% {background-color:pink;}
100% {background-color:blue;}
}
@-webkit-keyframes background2 {
0% {background-color:green;}
10% {background-color:lightgray;}
20% {background-color:pink;}
30% {background-color:black;}
40% {background-color:orange;}
50% {background-color:red;}
60% {background-color:green;}
70% {background-color:lightblack;}
80% {background-color:blue;}
90% {background-color:darkred;}
100% {background-color:lightred;}
}
body {
cursor: url("hoi2.png"), url("custom.cur"), default;
}
.h2d {
font-size:16px;
}
</style>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script language="JavaScript">
$(document).ready(function(){
var counter = 0;
var scoretext = document.getElementById('h2d');
$('#div').mouseenter(function(){
counter++;
$('#h2d').html(counter);
})
});
</script>
</head>
<body><div class="full">
<div class="score">Je score is:
<div id="h2d" class="h2d"></div>punt(en)</div>
<div class="left">
<div class="div" id="div"></div>
</div></div>
</body>
</html>
Maar wat ik nu wil is dat wanneer de cursor stil staat, en de div de cursor raakt, de score ook plus 1 gaat. (Nu gebeurt dat alleen wanneer de cursor beweegt en de div de cursor raakt).
En hoe stel je een standaard positie voor je cursor in. Bijv dat hij automatisch start in het midden o.i.d.
De positie van de div heb je al als het goed is.
Misschien is het handig om iets van een gameloop te maken. Of gebruik te maken van een bestaande gameEngine/framework. Ik gebruik zelf phaser.io, en dat kan ik wel aanraden.
Van phaser zijn meer dan genoeg tutorials te vinden voor beginners.
Wil je phaser niet gebruiken, kan het wel leuk zijn om in ieder geval een tutorial te doen om te ontdekken hoe zo'n gameloop werkt.
Gewijzigd op 11/12/2015 14:17:33 door Randy vsf
Thanks trouwens voor de tip van Phaser, ik ga de komende tijd ook eens daarnaar kijken.
En die jquery link is om te detecteren waar de cursor zich bevind. En dat ging over deze vraag van jouzelf:
Quote:
Maar wat ik nu wil is dat wanneer de cursor stil staat, en de div de cursor raakt, de score ook plus 1 gaat. (Nu gebeurt dat alleen wanneer de cursor beweegt en de div de cursor raakt).
Gewijzigd op 11/12/2015 16:31:01 door Randy vsf
binnen een element:
Code (php)
1
2
3
2
3
$('body div').bind('mousemove',function(e){
console.log(e.pageX, e.pageY);
});
console.log(e.pageX, e.pageY);
});
op het gehele scherm:
Code (php)
1
2
3
2
3
$(document).bind('mousemove',function(e){
console.log(e.pageX, e.pageY);
});
console.log(e.pageX, e.pageY);
});
sorry, ik lees met mijn neus
Het verplaatsen(!) van de bezoeker's muis, is onmogelijk. Als dat mogelijk zou zijn, dan zou je bij het bezoeken van een website iemand zijn computer automatisch een virus kunnen laten downloaden en daadwerkelijk activeren. :)
Gewijzigd op 11/12/2015 16:58:22 door Max Vaessen
Max Vaessen op 11/12/2015 16:52:56:
sorry, ik lees met mijn neus
Het verplaatsen(!) van de bezoeker's muis, is onmogelijk. Als dat mogelijk zou zijn, dan zou je bij het bezoeken van een website iemand zijn computer automatisch een virus kunnen laten downloaden en daadwerkelijk activeren. :)
Het verplaatsen(!) van de bezoeker's muis, is onmogelijk. Als dat mogelijk zou zijn, dan zou je bij het bezoeken van een website iemand zijn computer automatisch een virus kunnen laten downloaden en daadwerkelijk activeren. :)
of reclames die je cursor verplaatsen als je ze wilt wegklikken lol.
Randy vsf op 11/12/2015 17:25:42:
of reclames die je cursor verplaatsen als je ze wilt wegklikken lol.
Max Vaessen op 11/12/2015 16:52:56:
sorry, ik lees met mijn neus
Het verplaatsen(!) van de bezoeker's muis, is onmogelijk. Als dat mogelijk zou zijn, dan zou je bij het bezoeken van een website iemand zijn computer automatisch een virus kunnen laten downloaden en daadwerkelijk activeren. :)
Het verplaatsen(!) van de bezoeker's muis, is onmogelijk. Als dat mogelijk zou zijn, dan zou je bij het bezoeken van een website iemand zijn computer automatisch een virus kunnen laten downloaden en daadwerkelijk activeren. :)
of reclames die je cursor verplaatsen als je ze wilt wegklikken lol.
Ah, the horror :D
Gewijzigd op 11/12/2015 17:29:01 door Max Vaessen