Bonjour à tous,

Je suis en train d'apprendre en autodidacte la programmation web. Je suis en ce moment sur du javascript. Et rien de mieux pour progresser que de faire de coder n'est ce pas ? C'est pour ça que je me suis attaqué à ce projet : http://www.fil.univ-lille1.fr/~routier/enseignement/licence/tw1/tdtp/mini-projet/js-2015/mini-projet-javascript.html

Cependant je sèches complètement à la question n°6 Je ne comprends pas comment réaliser la fonction tirReussi à partir de la fonction collision. La fonction tirReussi ne devrait prendre comme paramètre que le tir t, or on nous demande de retourner l'ID de la soucoupe volante touchée (si j'ai bien compris) et je ne comprends pas comment on peut faire ça, sans déclarer les soucoupes volantes comme paramètre de la fonction.

Peut être en utilisant la fonction comme étant une méthode de l'objet soucoupeVolante ?

Aussi, pour retourner l'ID de la soucoupe volante touchée, on est bien d'accord qu'il faut utiliser indexOf() ?

Voici le code que j'ai réalisé jusqu'à présent :

/***********************************************/
/**                                            */
/**              MINI-PROJET JS 2015           */
/**                                            */
/***********************************************/

window.onload = function ()
{
	var canvas = document.getElementById("stars")
		context = canvas.getContext("2d"),
		canvasHeight = canvas.height,
		canvasWidth = canvas.width,
		startX = 40,
		startY = canvasHeight/2 - 20,
		delay = 10,
		toggled = false,
		myVar = null;
		
	var petitBallon = new PetitBallon(startX, startY);
	var nouvelleSoucoupe = document.getElementById("nouvelleSoucoupe");
	var flotteSoucoupes = document.getElementById("flotteSoucoupes");
	var score = 0;
	var tir =[];
	var tirer = false;
	var soucoupeVolante = [];
	var newY = Math.round(Math.random() * canvasHeight);
	refreshCanvas(); 
	nouvelleSoucoupe.addEventListener("click", createSoucoupe);
	flotteSoucoupes.addEventListener("click", createFlotte);
	
function refreshCanvas()
{
	context.clearRect(0,0, canvasWidth, canvasHeight); 
	petitBallon.draw();
	for (var t = 0; t < tir.length; t++)
	{
		tir[t].draw();
		tir[t].erase(t);

	}
	for (var s = 0; s < soucoupeVolante.length; s++)
	{
		soucoupeVolante[s].draw();
		soucoupeVolante[s].erase(s);
	}
	for (var t = 0; t < tir.length; t++)
	{
		tirReussi(tir[t]);
		
	}
	document.getElementById("score").textContent = score; 
	window.setTimeout(refreshCanvas, delay);
}

function PetitBallon(xBallon, yBallon)
{
	var petitBallonImg = new Image();
	petitBallonImg.src = "images/vaisseau-ballon-petit.png";
	this.y = yBallon;
	var direction;
	
	this.draw = function()
	{
		context.drawImage(petitBallonImg, xBallon, this.y);
	}
	
	this.moveBallon = function (direction)
	{
		switch(direction)
		{
			case "up" : this.y -= 8;
				break;
			case "down" : this.y += 8;
				break;
			default:
				return;
		}
		if(this.y > canvasHeight-40)
		{
			this.y -=8;
		}
		else if (this.y <0)
		{
			this.y+=8;
		}
		
	}


}

function Tir(x, y, vitesse_x)
{
	
	var tirImg = new Image();
	tirImg.src = "images/tir.png";
	this.x = x;
	this.y = y;
	this.largeur = 40;
	this.longueur = 10;
	this.vitesse_x = vitesse_x;
	this.draw = function()
	{
		context.drawImage(tirImg, this.x, this.y+20);
		this.x += this.vitesse_x;
	}
	this.erase = function (numero_tir)
	{
		if (this.x > canvasWidth)
			tir.splice(numero_tir, 1);
		
	}
	
}

function createTir(){
	tir.push (new Tir(100, petitBallon.y, 8));
}

function SoucoupeVolante (x,y, vitesse_x)
{
	var SoucoupeVolanteImg = new Image();
	SoucoupeVolanteImg.src = "images/flyingSaucer-petit.png";
	var newY = Math.round(Math.random() * canvasHeight);
	this.x = x;
	this.y = y;
	this.largeur = 40;
	this.longueur = 40;
	this.vitesse_x = vitesse_x;
	
	this.draw = function()
	{
		context.drawImage(SoucoupeVolanteImg, this.x, this.y+20);
		this.x -= vitesse_x;
		this.y = newY;
	}
	this.erase = function (numero_soucoupe)
	{
		if (this.x < 0)
		{
			soucoupeVolante.splice(numero_soucoupe, 1);
			score -= 1000;
		
		}
			
	}
	
}

function createSoucoupe()
{
	soucoupeVolante.push (new SoucoupeVolante(canvasWidth, newY, 1));
	console.log ("je créé plein de soucoupe");
	this.blur();      // fait perdre le focus à l'élément "this"
}

function createFlotte()
{
	
	if(!toggled)
	{
		myVar = setInterval(createSoucoupe, 1000);    
		this.blur();
		console.log("je suis cliqué");
		toggled = true;
	}
	else if(toggled)
	{
		console.log("je ne suis plus cliqué");
		clearInterval(this.myVar);
		toggled = false;
		return false;
	}
}

function collision(soucoupeVolante, tir)
{
	if(tir.x + tir.largeur > soucoupeVolante.x && tir.y + tir.longueur > soucoupeVolante.y && tir.x < soucoupeVolante.x + soucoupeVolante.largeur && tir.y < soucoupeVolante.y + soucoupeVolante.longueur)
	{
		return true;
	}
	else
	{
		return false;
	}
}

function tirReussi(t)
{
	for (var s = 0; s < soucoupeVolante.length; s++)
	{		
		if(collision(soucoupeVolante[s],t))
		{
			soucoupeVolante.splice(s,1);
			tir.splice(t,1);
			score += 200;
		}
	}
	
}


document.onkeydown = function handleKeyDown(e)
{
	var key = e.keyCode;
	var newDirection;
	switch(key)
	{
		case 38: newDirection = "up";
			break;
		case 40: newDirection = "down";
			break;
		case 32: createTir();
			break;
			return;
	}	
	petitBallon.moveBallon(newDirection);
}


}

Merci d'avoir pris le temps de me lire, si jamais je ne suis pas clair dans mon questionnement ça vous montre à quel point je suis paumé haha. N'hésitez pas à me demander des éclaircissements

Edit : j'ai édité le code pour montrer une version plus avancée

-
Edité par dattebayor 29 mars 2017 à 17:28:54

Le lien que tu as fourni est cassé

Merci, je viens de le réparer

Oushh . rien dit

 ---

Peut etre que la liste des soucoupe est un paramétré global donc pas besoin de l'avoir en paramétré ?

function createSoucoupe()
{
    soucoupeVolante.push (new SoucoupeVolante(canvasWidth, newY, 1));
     
    this.blur();      // fait perdre le focus à l'élément "this"
}

-
Edité par GannoN 26 mars 2017 à 17:34:49

GannoN a écrit:

Oushh . rien dit

 ---

Peut etre que la liste des soucoupe est un paramétré global donc pas besoin de l'avoir en paramétré ?

function createSoucoupe()
{
    soucoupeVolante.push (new SoucoupeVolante(canvasWidth, newY, 1));
     
    this.blur();      // fait perdre le focus à l'élément "this"
}

-
Edité par GannoN il y a environ 21 heures

J'avoue ne pas très bien comprendre ce que tu veux dire. La fonction que tu as montré permet de créer des instances de l'objet soucoupeVolante, mais si on veut pouvoir utiliser ces instances dans une fonction, il faut bien les mettre en paramètre non ? Ou j'ai pas compris un truc :/

Regarde, tu bien ajoute une soucoupe a une liste sans la passé en paramètre.

Tu peut faire la meme chose pour la fonction tirReussi, sa doit donne un truc de ce genre

function tirReussi (tir) {
  for (sv of soucoupeVolante) {
    if (collision(sv, tir) {
      return sv
    }
  }
  return undefined
}

-
Edité par GannoN 27 mars 2017 à 23:20:52

GannoN a écrit:

Regarde, tu bien ajoute une soucoupe a une liste sans la passé en paramètre.

Tu peut faire la meme chose pour la fonction tirReussi, sa doit donne un truc de ce genre

function tirReussi (tir) {
  for (sv of soucoupeVolante) {
    if (collision(sv, tir) {
      return sv
    }
  }
  return undefined
}

-
Edité par GannoN il y a environ 11 heures

Merci pour ta réponse. Donc j'ai trouvé cette solution après avoir galéré toute la journée hier ^^. J'ai capté ce que tu voulais dire au final.

Et en effet, ça marche :). Maintenant je fais fasse à un nouveau problème, c'est à dire que la fonction me renvoi uniquement sv quand il y a collision avec la soucoupe volante 0 malgré la boucle for.

-
Edité par dattebayor 28 mars 2017 à 11:19:12

Le, 

Tu aurai pas mis ton retour undefined dans la boucle for après le if plutôt que après la boucle ?

GannoN a écrit:

Le, 

Tu aurai pas mis ton retour undefined dans la boucle for après le if plutôt que après la boucle ?

Merci pour ta réponse, c'était ça en effet, du coup j'ai avancé jusqu'à la question 9, j'en vois le bout enfin :).

Je suis maintenant en train de chercher comment créer un toggle sur un bouton, afin de lancer un événement à partir d'un clic, et d'arrêter cet événement par un second clic sur ce bouton et vice versa.

J'ai édité mon code dans ma publication pour montrer où j'en suis

-
Edité par dattebayor 29 mars 2017 à 15:25:04

Tien, j'ai essaye de faire cette exercice rapidement voila je que j'ai

/***********************************************/
/**                                            */
/**              MINI-PROJET JS 2015           */
/**                                            */
/***********************************************/

(function () {
    // Attente que le DOM sois completement charger
    document.addEventListener('DOMContentLoaded', event => {

        // CONSTANTE
        const srcImg = {
            vaisseau: 'images/vaisseau-ballon-petit.png',
            soucoupeVolante: 'images/flyingSaucer-petit.png',
            tir: 'images/tir.png'
        }
        const VAISSEAU_OFFETSETX = 40
        const VAISSEAU_MOVE_PAS = 8
        const SPEED_TIR = 8
        const SPEED_SOUCOUPE = 3
        const KEY_CODE_MOVE_UP = 90 // Z
        const KEY_CODE_MOVE_DOWN = 83 // S
        const KEY_CODE_TIR = 32 // Space

        const SCORE_TIR_REUSSI = 200
        const SCORE_SOUCOUPE_PASSE = -1000
        const TIME_SPANW_SOUCOUPE = 75

        // Serra remplie par la fuction loadImage
        let img = {}

        // Recuperation des elements du DOM
        let canvasStarts = document.getElementById('stars')
        let butNouvelleSoucoupe = document.getElementById('nouvelleSoucoupe')
        let butFlotteSoucoupes = document.getElementById('flotteSoucoupes')
        let elemScore = document.getElementById('score')

        let context = canvasStarts.getContext('2d')

        // Global Var
        let vaisseauPos = {x: 40, y: 50, sx:0, sy:0}
        let tirs = []
        let soucoupeVolantes = []

        // Defini si une touche est pressé ou pas
        let keyMoveUp = false
        let keyMoveDown = false
        let keyTir = false
        let score = 0
        let chanceScoupe = 0.5
        let blockAutoSpanwSoucoupe = false
        let uuid = undefined


        // Desine les elements sur le canvas
        const updateFrame = function () {

            // Efface le contenu du canvas
            context.clearRect(0,0, canvasStarts.width, canvasStarts.height);

            // draw vaiseau
            context.drawImage(img.vaisseau, vaisseauPos.x, vaisseauPos.y)

            // draw tirs
            tirs.forEach( tir =>{
                context.drawImage(img.tir, tir.x, tir.y)
            })

            // Draw soucoupe
            soucoupeVolantes.forEach( tir =>{
                context.drawImage(img.soucoupeVolante, tir.x, tir.y)
            })
        }

        // deplace la position d'un element de moveX / moveY
        const moveElement = function (elem, moveX, moveY) {
            elem.x = Math.min(Math.max(elem.x + moveX, 0), canvasStarts.width)
            elem.y = Math.min(Math.max(elem.y + moveY, 0), canvasStarts.height - elem.h)
        }

        const collision = function (elem1, elem2) {
            return elem1.x < elem2.x + elem2.w &&
                elem1.x + elem1.w > elem2.x &&
                elem1.y < elem2.y + elem2.h &&
                elem1.h + elem1.y > elem2.y
        }

        const generateSoucoupe = function () {
            let soucoupe = {
                x: canvasStarts.width,
                y: Math.floor((Math.random() * (canvasStarts.height - img.soucoupeVolante.height))), // Nombre entre 0 et canvasheigth
                w: img.soucoupeVolante.width,
                h: img.soucoupeVolante.height
            }
            soucoupeVolantes.push(soucoupe)
        }

        const generateAutoSoucoupe = function() {
            console.log('generateAutoSoucoupe')
            if (blockAutoSpanwSoucoupe) {
                return
            }
            if( Math.random() <= chanceScoupe){
                generateSoucoupe()
            }
        }

        const tir = function () {
            let newTir = {
                x: vaisseauPos.x + vaisseauPos.w + 1,
                y: vaisseauPos.y + vaisseauPos.h / 2 - 6, // -4 :: Pos de tir non center, on triche un peu
                w: img.tir.width,
                h: img.tir.height
            }
            tirs.push(newTir)
        }

        // Initialise le jeux
        const initGame = function () {
            // set position vaiseau et sa taille
            let w = img.vaisseau.width
            let h = img.vaisseau.height
            vaisseauPos = {
                x : VAISSEAU_OFFETSETX,
                y : canvasStarts.height / 2 - h / 2,
                w,h
            }

            tirs = []
            soucoupeVolantes = []
            score = 0
            chanceScoupe = 0.05
            blockAutoSpanwSoucoupe = false
            if (uuid !== undefined){
                clearInterval(uuid)
            }
            setInterval(generateAutoSoucoupe, TIME_SPANW_SOUCOUPE)
            startGame()
        }

        const tirReussi = function (t) {
            for( sv of soucoupeVolantes) {
                if(collision(t,sv)) {
                    return sv
                }
            }
            return undefined
        }

        // Lance le jeux
        const startGame = function () {
            // Gestion des events
            setTimeout(startGame, 1000/60)
            actionEvent()
            updateFrame()
            updateStatus()
        }

        const actionEvent = function () {
            if (keyMoveUp) {
                moveElement(vaisseauPos, 0, -VAISSEAU_MOVE_PAS)
            }

            if (keyMoveDown) {
                moveElement(vaisseauPos, 0, VAISSEAU_MOVE_PAS)
            }

            if (keyTir) {
                tir()
            }
        }

        const updateTir = function () {
            let newTirs = []
            tirs.forEach(tir => {
                tir.x += SPEED_TIR
                // Si le tir est encore valide
                let sv = tirReussi(tir)
                if (sv !== undefined){
                    score += SCORE_TIR_REUSSI
                    let index = soucoupeVolantes.indexOf(sv)
                    soucoupeVolantes.splice(index, 1)
                }else if (tir.x < canvasStarts.width) {
                    newTirs.push(tir)
                }
            })
            tirs = newTirs
        }

        const updateSoucoupe = function () {
            let newSoucoupeVolantes = []
            soucoupeVolantes.forEach(sv => {
                sv.x -= SPEED_SOUCOUPE
                if (sv.x >= 0) { // Si la soucoupe est encore valide
                    newSoucoupeVolantes.push(sv)
                }else {
                    score = Math.max(0, score + SCORE_SOUCOUPE_PASSE)
                }
            })
            soucoupeVolantes = newSoucoupeVolantes
        }

        const updateStatus = function () {
            updateTir()
            updateSoucoupe()
            elemScore.innerText = score
            chanceScoupe = 0.05 + (score/1000)*0.01
        }

        // Gestion des touches du jeux
        const registerEvent = function () {
            document.addEventListener('keydown', e => {
                switch (e.keyCode){
                    case KEY_CODE_MOVE_UP: 
                        keyMoveUp = true
                        break
                    case KEY_CODE_MOVE_DOWN: 
                        keyMoveDown = true
                        break
                    case KEY_CODE_TIR: 
                        keyTir = true
                        break
                }
            })
            document.addEventListener('keyup', e => {
                switch (e.keyCode){
                    case KEY_CODE_MOVE_UP: 
                        keyMoveUp = false
                        break
                    case KEY_CODE_MOVE_DOWN: 
                        keyMoveDown = false
                        break
                    case KEY_CODE_TIR: 
                        keyTir = false
                        break
                }
            })
            butNouvelleSoucoupe.addEventListener('click', e => {
                generateSoucoupe()
                this.blur()
            })
            butFlotteSoucoupes.addEventListener('click', e => {
                blockAutoSpanwSoucoupe = !blockAutoSpanwSoucoupe
            })
        }

        // retourne un Promise, resolve serra appeler une fois tout les images du jeux chargé
        const loadImg = function () {
            return new Promise((resolve, reject) => {
                let nbLoad = 0
                const keys = Object.keys(srcImg)
                for (let key of keys){
                    img[key] = new Image()
                    img[key].src = srcImg[key]
                    img[key].addEventListener('load', e => {
                        nbLoad += 1
                        if (nbLoad === keys.length) {
                            resolve()
                        }
                    })
                }
            })
        }

        //Start app
        loadImg().then(() =>{
            registerEvent()
            initGame()
        })
    })
})()

Sa tir vite ! voir trop vite xD

-
Edité par GannoN 29 mars 2017 à 17:36:24

Je viens de lancer ton code, et chez moi il bug de partout, que ce soit sur Chrome ou sur Firefox ^^.

Les soucoupes se lancent dès le chargement, sans appuie sur les touches; Le vaisseau ne bouge pas ; et les tirs sont très rapide comme tu le dis ^^.

Il va me falloir du temps pour comprendre ton code, je dois avouer que c'est du chinois pour moi à cet instant, et il est très différent du mien. Mais c'est intéressant, j'apprends de nouvelles manières de déclarer les variables. Merci de ton partage

A bon O_o, Chez moi il fonctionne bien ( Sur Chrome, FireFox et edge )

Le soucoupes se lance tout seul oui, mais on peut l’arrête en cliquant sur le buttons. ( le this.blurs, n'a pas l'air de fonctionne du coups quant on tire avec espace, sa change la valeur )

Apres touche pour déplacer le vaisseau c'est Z et S, pas les flèches directionnels dans mon cas.