salut, j'ai un petit soucis d'algo, je suis entrain de crée un petit jeux Space Inveders, le problème c'est le déplacement des vaisseaux, je n'arrive pas a trouver le bon algo pour faire le déplacement a droite ou a gauche j'ai pensé a un truc comme ça

var moveShips = setInterval(()=>{

   if(ship.x < widthCanvas - ship.widthShip){

           ship.x++

   }

   else{ship.x--}

},200)

mais avec se code quand ship arrive a la fin de ma canvas ils exécute ça ship.x++ puits il exécute ça ship.x-- a l'infini 

donc a toi qui regarde ça help please 

-
Edité par AmineHadef1 15 novembre 2018 à 21:40:30

Salut

En l'état, ton code ne devrait pas faire ship.x-- à l'infini après avoir atteint la butée droite du canvas, il y a forcément du code que tu n'as pas montré qui a un effet de bord sur ce comportement.

En passant, pour les animations dans un canvas il est fortement recommandé d'utiliser window.requestAnimationFrame plutôt que window.setInterval.

Ton code devrait respecter cette logique :

- Ajouter deux listeners, un pour l'event 'keydown' et un pour 'keyup', afin de détecter si les boutons du clavier qui contrôlent les mouvements à gauche et à droite de ton ship sont pressés (on stocke l'info dans un objet par exemple).

- Dans la boucle de rendu, modifier la position du ship en fonction des boutons pressés (et du deltaT entre 2 frames pour gérer les frame rate instables), puis faire le rendu.

-
Edité par SpaceIn 16 novembre 2018 à 11:12:08

salut spaceIn tout d'abord merci pour ta réponse, mais le problème c'est que ship a un déplacement automatique j'ai cree le canon que nous pouvons le déplacer avec les touches directionnel j'ai utiliser requestAnimationFram sur le canon je connais déjà cette méthode voici mon code tout entier 

window.onload = init
function init(){
    //variable pour la canvas
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext('2d')
    var widthCanvas = canvas.width
    var heightCanvas = canvas.height
    //variable pour les vaisseau
    var xShip = 10
    var yShip = 5
    var widthShip = 20
    var heightShip = 20
    var tabShips = []
    //variable pour le canon
    var widthCanon = 20
    var heightCanon = 20
    var xCanon = 10
    var yCanon = heightCanvas - heightCanon
    //variable pour le deplacement du canon
    var speedCanon = 5
    var key = []
    //variable pour les tires
    var widthShoot = 5
    var heightShoot = 5
    var speedShoot = 10
    //fonction pour cree et effacer un vaisseau
    function creatShip(x, y, name){
        ctx.fillStyle = 'white'
        ctx.fillRect(x, y, widthShip, heightShip)
        return {
            xShip : x,
            yShip : y,
            live : 4,
        }
    }
    function addShips(){
        for(var i = 0;i <= 8; i++ ){
            tabShips.push(creatShip(xShip + (i * 30),yShip))
        }
    }
    addShips()
    var lenTabShip = tabShips.length
    // deplacement des vaisseux
    function move() {
        var intervalSHips = setInterval(()=>{
            for(var i = 0; i< lenTabShip; i++){
                deleteShip(tabShips[i].xShip, tabShips[i].yShip)

                if (tabShips[i].xShip == widthCanvas - 20) {
                    tabShips[i].xShip--
                }
                else{
                    tabShips[i].xShip++
                }
                
                tabShips[i] = creatShip(tabShips[i].xShip,yShip)
            }
        },50)
    }
    move()
    function deleteShip(x = xShip, y = yShip){
        ctx.clearRect(x, y, widthShip, heightShip)
    }
    //fonction pour cree et effacer le canon
    function createCanon(x = xCanon, y = yCanon){
        ctx.fillStyle = 'green'
        ctx.fillRect(x, y, widthCanon, heightCanon)
    }

    function deleteCanon(x = xCanon, y = yCanon){
        ctx.clearRect(x, y, widthCanon, heightCanon)
    }
    //fonction pour cree et effacer un tire    
    function createShoot(x,y){
        ctx.fillStyle = 'black'
        ctx.fillRect(x, y, widthShoot, heightShoot)
    }
        
    function deleteShoot(x,y){
        ctx.clearRect(x, y, widthShoot, heightShoot)
    }
    //evenement pour le deplacement du canon
    function keyPress(){
        document.body.addEventListener("keydown", function(ev){
            key[ev.keyCode] = true
        })
        
        document.body.addEventListener("keyup", function(ev){
            key[ev.keyCode] = false
        })
        window.requestAnimationFrame(keyPress)
        if (key[37]) {
            if (xCanon < 5) {}
            else{
                deleteCanon()
                xCanon -= speedCanon
                createCanon()   
            }
        }
        else if(key[39]){
            if (xCanon > widthCanvas - widthShip - 5) {}
            else{
                deleteCanon()
                xCanon += speedCanon
                createCanon()
            }
        }
    }
    document.addEventListener("keyup",(ev)=>{
        if(ev.keyCode == 38){
            var xShoot = xCanon + 6
            var yShoot = yCanon - 5
            var intervalShoot = setInterval(()=>{
                if (yShoot < -5) {
                    clearInterval(intervalShoot)
                }
                deleteShoot(xShoot, yShoot)
                yShoot--
                createShoot(xShoot, yShoot)

                for(var i = 0; i < lenTabShip; i++){
                    xShip = tabShips[i].xShip
                    yShip = tabShips[i].yShip

                    if (xShoot > xShip - 5 && xShoot < xShip + 20) {
                        if (yShoot - heightShip -1 == yShip) {
                            tabShips[i].live--
                            console.log('collision detecter avec le vaisseau n°' + i + ' reste vie ' + tabShips[i].live);
                            clearInterval(intervalShoot)
                            deleteShoot(xShoot, yShoot)
                        }
                    }
                }
            },speedShoot)
        }
    })
    keyPress()
    createCanon()
}

pour le tester tu cree juste une canvas avec id canvas moi c'est juste l'algo pour dire quand ship.x arrive a la fin tu n’incrémente plus mais tu décrémente regarde dans la fonction move ligne 44 donc je ne trouve pas le bon algo pour

-
Edité par AmineHadef1 16 novembre 2018 à 19:49:10

Essaie de t'exprimer plus clairement si tu veux être compris et aidé.

AmineHadef1 a écrit:

mais avec se code quand ship arrive a la fin de ma canvas ils exécute ça ship.x++ puits il exécute ça ship.x-- a l'infini

Une solution est d'ajouter une propriété à tes vaisseaux, le vecteur direction. Lorsque tu atteins un côté de ton canvas, tu inverses cette direction.

A part ça le code est confus, essaie de mieux séparer la logique. Le requestAnimationFrame pour keyPress avec des addEventListener fait à chaque appel, c'est pas top.

salut spaceIn sais vrais que mon code n'ai pas le plus optimiser mais pour l’instant je ne cherche pas l'optimisation et sais vrais aussi que je ne sais pas trop expliquee se que je veux.

au final j'ai reussi avec se code la

function moveLeft() {
        var intervalSHips1 = setInterval(()=>{
            for(var i = 0; i < lenTabShip; i++){
                deleteShip(tabShips[i].xShip, tabShips[i].yShip)
                if (tabShips[i].xShip == 0) {
                    tabShips[i].xShip--
                    for(var y = 0; y < lenTabShip; y++){
                        deleteShip(tabShips[y].xShip, tabShips[y].yShip)
                        tabShips[y].yShip++
                        tabShips[y] = creatShip(tabShips[y].xShip,tabShips[y].yShip)
                    }
                    moveRigth()
                    clearInterval(intervalSHips1)
                }else{
                    tabShips[i].xShip--
                }
                tabShips[i] = creatShip(tabShips[i].xShip,tabShips[i].yShip)
            }
        },speedMoveShips)
    }
    function moveRigth() {
        var intervalSHips2 = setInterval(()=>{
            for(var i = 0; i < lenTabShip; i++){
                deleteShip(tabShips[i].xShip, tabShips[i].yShip)
                if (tabShips[i].xShip == widthCanvas - 20) {
                    tabShips[i].xShip++
                    for(var y = 0; y < lenTabShip; y++){
                        deleteShip(tabShips[y].xShip, tabShips[y].yShip)
                        tabShips[y].yShip++
                        tabShips[y] = creatShip(tabShips[y].xShip,tabShips[y].yShip)
                    }
                    moveLeft()
                    clearInterval(intervalSHips2)
                }
                else{
                    tabShips[i].xShip++
                }
                tabShips[i] = creatShip(tabShips[i].xShip,tabShips[i].yShip)
            }
        },speedMoveShips)
    }
    moveRigth()