player hit object (object moet daarna verdwijnen)

[halper]

Beste tweakers,

Dit is mijn eerste post in dit gedeelte dus excuses als ik niet perfect aan alle eisen voldoe.

Ik ben momenteel een mini game aan het maken voor een school project (Avans, Breda). Ik krijg nu eerste lessen in Javascript en werk ook met Jquery.

Ik loop nu alleen vast en dacht misschien kunnen jullie me helpen.

Ik moet ervoor zorgen dat als de player een object raakt dat de object daarna verdwijnt. Die objecten vallen uit de lucht met een bepaalde snelheid naar beneden en de player moet die objecten op zien te vangen door middel van te raken.

Het is me al wel gelukt met een muisklik: $("body" ).click (function(evt) maar hoe doe ik dit als de player een object raakt.

Zou iemand mij dit uit kunnen leggen of een zetje in de rug willen geven om dit te realiseren?

mijn dank is groot

[RobIII]

Toverwoord: collision detection

[halper]

Ik kom er niet uit. Dit is de code die ik nu heb. Kan iemand mij helpen?

// JavaScript Document

$(document).ready(function() { //laden van de onderstaande elementen
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); // de context (de verf op de canvas)


var player = { animStep : 0,
x : 600,
y : 550,
width: 95,
height: 159,
img: new Image()
};

var object = { objectStep : 0,
x : 200, // object begint x
y : 0, // object begint y
width: 63,
height:63,
level: 0,
img: new Image()

};


var sound = new Howl({
src: ['sound/coin.mp3']
});


var achtergrond = new Array(); //ladenkast
achtergrond[0] = new Image();
achtergrond[1] = new Image();
achtergrond[2] = new Image();

var score = 0;
var welcomeText = true;
var gameOver = false;

var wisselAchtergrond = 0;

var regel = 0;


var previousStep = Date.now();

var moveRight = false;
var moveLeft = false;
var moveUp = true;
var moveObject = true;


function preload(){
player.img.src = 'img/lidia.png';
object.img.src = 'img/snoepje.png';

achtergrond[0].src = 'img/grass.png';
achtergrond[1].src = 'img/brick.png';
achtergrond[2].src = 'img/dirt.png';


update()

};


function update (){
draw();


context.font = "20px Arial";


if (welcomeText == true){
context.fillText(" Let's play! ", 10,50);
}

if (gameOver == true){
context.fillText(" Game Over ", 10,50);
}


if (Date.now() - previousStep > 1000/24) { // laatste update en nu delen door 1000/24
// verversing frame
if (moveRight == true) {
player.x += 20;
player.animStep += 1;
regel = 318; // als je recht klikt dan Lidia Xpos 6px naar rechts
}
if (moveLeft) {
player.x -= 20; // als je links klikt dan Xpos 6px naar links
player.animStep += 1;
regel = 159;
}
if (moveUp) {
player.y -= 0;
player.animStep += 1; // een stap verder in de sprite
regel = 477;
}

if (moveObject == true) {
object.y += 10;

}


if (player.x >= 1170){
player.x = 1170;

}

if (player.x <= 0){
player.x = 0;

}


previousStep = Date.now()

};

if (player.animStep > 11) {
player.animStep = 0; }


requestAnimationFrame(update); // moet altijd aan einde van update. Start update opnieuw
};


function draw() { //uitsnijden van lidia


context.clearRect(0,0, canvas.width, canvas.height); //canvas leegmaken
context.drawImage(achtergrond[wisselAchtergrond],0,0, canvas.width, canvas.height); //tekenen van achtergrond

if (wisselAchtergrond == object.level)


(context.drawImage(object.img,object.x,object.y));

context.drawImage(player.img,player.animStep*player.width,regel,player.width,player.height,player.x,player.y,player.width,player.height);//tekenen player


}


preload();

$("body").keydown( function(evt) { // als document is geladen keyklik
if (evt.which == 39){
moveRight = true; // Als je knop rechts indrukt word moveRight treu
} // evt. onthoud welke toets het is en which herkent welke toets het is
if (evt.which == 37){
moveLeft = true;
}
}); // elke knop heeft een bepaalt getal(wich)


$("body").keyup( function(evt) {
if (evt.which == 39){ //evt = gebeurtenis/data opslaan. which = knop
moveRight = false;
}
if (evt.which == 37){
moveLeft = false;
}
});


$("body" ).click (function(evt) {


if (welcomeText = true){
welcomeText = false;
}

if ( wisselAchtergrond == object.level &&
evt.pageX > object.x && // de X plek op de pagina
evt.pageY > object.y && // de Y plek op de pagina

evt.pageX < (object.x + 63) &&
evt.pageY < object.y + 63){

object.level = Math.floor((Math.random() * 0) + 0);
object.x = Math.floor((Math.random() * canvas.width) + 0);
object.y = Math.floor((Math.random()));

score += 10;
sound.play();

console.log(score);


if (score >= 50){
gameOver = true;
}


}


console.log(gameOver);


console.log( "klik" + " " + evt.pageX + " " + evt.pageY);


});


});

[RobIII]

Euh, zo werken we hier niet. Neem Kan iemand even...? en Help, mijn script werkt niet (goed) even door. Daarbij: als je code post, gebruik dan code tags a.u.b.

Open gerust een nieuw topic, maar hanteer dan even onze Quickstart; we zien graag wat je zelf hebt geprobeerd (zoals je nu doet), maar dan zien we ook graag wat 't (concrete) probleem is, wat je geprobeerd hebt om dat zelf op te lossen, wat je gezocht/gevonden hebt etc.

Maar lang verhaal kort: we zijn geen afhaalchinees voor kant-en-klare antwoorden. Debuggen mag je zelf doen (Debuggen: Hoe doe ik dat?) en als je dan (concrete!) vragen hebt ben je hier van harte welkom