animatie game

Door bart de kinkelaar op 09-12-2015 09:02

2.852 views

Ik ben aan het kijken of ik een minigame kan maken met html animaties en jquery.

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?

Randy vsf

09-12-2015 09:20 gewijzigd op 09-12-2015 09:24

Een var aanmaken die de count bijhoud.
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.


<script>
var counter = 0;
var scoretext = document.getElementById('textToUpdate');

document.getElementById('abc').addEventListener('mouseover', function()
{
    counter++;
    scoretext.innerHTML = counter.toString();
});

</script>

bart de kinkelaar

09-12-2015 09:28


<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>

[size=xsmall]Toevoeging op 09/12/2015 09:28:30:[/size]


<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>

Randy vsf

09-12-2015 10:36

Hier een voorbeeldje dan met jquery.

Fiddle

bart de kinkelaar

11-12-2015 08:42

Op de fiddle pagina werkt het, maar als ik het test op localhost dan niet:


<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>

Ariën

11-12-2015 08:53

Je vergeet jQuery klaar te zetten voor gebruik.


$(document).ready(function(){
    // hier je script
});

bart de kinkelaar

11-12-2015 08:56

Thanx, nu werkt het:)

[size=xsmall]Toevoeging op 11/12/2015 10:30:47:[/size]

Ik heb nu een game gemaakt:

 
<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.

Randy vsf

11-12-2015 13:08 gewijzigd op 11-12-2015 14:17

Jquery oplossing om de positie van de muis te bepalen.
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.

bart de kinkelaar

11-12-2015 15:25

De Jquery die je gaf gaat over het weergeven van de coordinaten. Wat ik zou willen is dat de mouse-position automatisch in het midden van de linkerkant van het scherm is. Hoe zou ik dat het beste kunnen maken?

Thanks trouwens voor de tip van Phaser, ik ga de komende tijd ook eens daarnaar kijken.

Randy vsf

11-12-2015 16:29 gewijzigd op 11-12-2015 16:31

Je kan de positie van de cursor niet bepalen (zover ik weet) dmv javascript.

En die jquery link is om te detecteren waar de cursor zich bevind. En dat ging over deze vraag van jouzelf:

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).

Max Vaessen

11-12-2015 16:52 gewijzigd op 11-12-2015 16:58

Je kunt de locatie wel bepalen met jQuery.

binnen een element:

$('body div').bind('mousemove',function(e){ console.log(e.pageX, e.pageY); });

op het gehele scherm:

$(document).bind('mousemove',function(e){ 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. :)

Reageren

Inloggen om te reageren