Résolu Mon projet Street Fighter en JavaScript !

  • Auteur de la discussion Auteur de la discussion xLiNK
  • Créé le Créé le
Statut
N'est pas ouverte pour d'autres réponses.

xLiNK

:]
Premium
Inscription
23 Octobre 2011
Messages
461
Réactions
245
Points
4 118
RGCoins
25
Yo les gens,
Je suis actuellement en Terminale S, spécialité ISN et je dois rendre un projet de fin d'année. On a décidé de créer un Street Fighter. Je voulais avoir quelques retours sur ce que j'avais fait jusque là, pour avoir vos avis, et savoir ce que je devrais améliorer :)
Voilà merci à ceux qui prendront le temps de regarder et de s'amuser !

Pour les commandes :
Joueur 1 (Ken):
Se déplacer: Q,S,D.
Donner des coups: U(coup de poing), I(coup de pied), O(parer)
Joueur 2 (Ryu):
Se déplacer: Flèches du clavier
Donner des coups: 1 pavé numérique(coup de poing), 2 pav. num (coup de pied), 3 pav num (parer)

Pour télécharger le projet, rendez-vous à cette page:

Allez à droite de la page, cliquez sur "Download ZIP" et une fois que c'est fait lancez index.html. (Il faudra recharger la page si les personnages n'apparaissent pas).

Merci :bye:
 
Même avec un refresh plusieurs fois, et avoir relancé l'index.html, aucun personnage n'est apparent =/
 
Même avec un refresh plusieurs fois, et avoir relancé l'index.html, aucun personnage n'est apparent =/
Sous Chrome effectivement je comprend pas pourquoi ça ne marche pas :/.. Il faut absolument que je me penche la dessus, en tout cas sur Firefox 37.0.2 ça marche au bout d'un refresh
 
Salut,

C'est pas mal du tout, donc ce que je te conseil c'est tout d'abord que les touches de combat soit active seulement quand on presse la touche une unique fois, car ton système continue à lancer le coup de poing sans animation et donc il suffit de rester appuyer sur "U" et attendre que le joueur adversaire arrive et la vie de l'adversaire diminue très rapidement, voici le problème illustré :
ff9bd38a246029ddfcea0ff97f5160ef.gif


Puis seulement les touches gauche et droite marchent, le jump (haut) et slide (bas) ne fonctionnent pas. ;)

EDIT : je vois que @Lyrix aussi bug avec les personnages, j'ai refresh au moins 20 fois pour réussir à faire apparaitre les personnages, sous Chrome aussi :p
 
Salut,

C'est pas mal du tout, donc ce que je te conseil c'est tout d'abord que les touches de combat soit active seulement quand on presse la touche une unique fois, car ton système continue à lancer le coup de poing sans animation et donc il suffit de rester appuyer sur "U" et attendre que le joueur adversaire arrive et la vie de l'adversaire diminue très rapidement, voici le problème illustré :
ff9bd38a246029ddfcea0ff97f5160ef.gif


Puis seulement les touches gauche et droite marchent, le jump (haut) et slide (bas) ne fonctionnent pas. ;)

EDIT : je vois que @Lyrix aussi bug avec les personnages, j'ai refresh au moins 20 fois pour réussir à faire apparaitre les personnages, sous Chrome aussi :p
Salut !
Merci à toi de t'être intéressé à mon projet !
Pour la vie qui descend trop vite, je n'ai pas réussit à trouver une solution, je me suis penché 3 semaines non-stop dessus et j'ai pas trouvé :/ Du coup, j'ai contourné le problème, c'est pour ça que lorsqu'un joueur perd de la vie, il est "propulsé" en arrière, comme ça il ne prend plus l'aggro du coup et peut parer ou reculer encore.
J'ai ajouté une touche pour se baisser que je n'avais pas rajouté, qui permet de se baisser. Je vais essayer de rajouter un saut :)
Aussi je suis en train d'ajouter un "Hadoken": une boule d'énergie qui enlève de la vie :)

Faut aussi que je regarde pourquoi ça bug autant sur Chrome :S !
Merci :)
 
Salut
Je ne suis pas spécialiste ni rien du tout mais sa m’intéresse fortement de pouvoir réaliser ce genre de travail je sais qu'il va falloir des mois d'apprentissage bref j'ai une question tu a réussi a réaliser ton projet à l'aide de seulement le language java ?
 
Salut
Je ne suis pas spécialiste ni rien du tout mais sa m’intéresse fortement de pouvoir réaliser ce genre de travail je sais qu'il va falloir des mois d'apprentissage bref j'ai une question tu a réussi a réaliser ton projet à l'aide de seulement le language java ?
C'est du javascript, tous language peux faire des jeux, faut selement métrisée le language ^^
 
chez moi j'ai pas l'adversaire et si je frappe dans le vide collé au bord droit au bout d'un moment la barre de vie de l'adversaire glitche et s'inverse.
j'utilise la derniere version de firefox.
sinon c'est du bon boulot pour l'instant je trouve :p
 
Salut
Je ne suis pas spécialiste ni rien du tout mais sa m’intéresse fortement de pouvoir réaliser ce genre de travail je sais qu'il va falloir des mois d'apprentissage bref j'ai une question tu a réussi a réaliser ton projet à l'aide de seulement le language java ?

Salut !
J'ai appris à programmer en JavaScript avec ma spé, mes profs nous ont donné des documents pour apprendre le JavaScript, mais il existe des sites comme OpenClassrooms qui formes très bien.
Pour ta question oui, tout est codé en JavaScript (pas en Java, ça se ressemble mais c'est pas le même langage ^^). J'ai aussi utilisé la librairie "EaselJS" qui est très utile pour faire des jeux en JavaScript.
chez moi j'ai pas l'adversaire et si je frappe dans le vide collé au bord droit au bout d'un moment la barre de vie de l'adversaire glitche et s'inverse.
j'utilise la derniere version de firefox.
sinon c'est du bon boulot pour l'instant je trouve :p
Etrange chez moi en 38.0.1 ça marche niquel ^^ J'ai rajouté une fonction de Hadoken, si le joueur 1 appuie sur la touche P ou le joueur 2 sur la touche 4 du pav. num., ça lance une boule d'energie (contrable seulement en se baissant).
Sinon je suis activement en train de régler les bugs de compatibilité ! :)
Merci
 
Très bon je joue au jeux et la je suis accro mais le must sera de mettre le jeu en ligne sur un hébergeur et comme ça avoir un mode multi

sinon GG
 
Très bon je joue au jeux et la je suis accro mais le must sera de mettre le jeu en ligne sur un hébergeur et comme ça avoir un mode multi

sinon GG
Merci à toi, ça fait plaisir :)
Le problème c'est que dès que je met mon site en ligne ya un bug qui fait disparaitre les persos je suis en train de chercher comment le résoudre même si je coule un peu la x)
 
Merci à toi, ça fait plaisir :)
Le problème c'est que dès que je met mon site en ligne ya un bug qui fait disparaitre les persos je suis en train de chercher comment le résoudre même si je coule un peu la x)
Les requête ne sont pas structurée, javascript essaye de chargée un truc avant de continuée le programme ^^'
 
Je me permet de postée ma version modifiée de ton street fighter ^^'
Code:
// Code source modifiée par TheJailPad
/*jslint eqeq: true, sloppy: true*/
/*global createjs, keyPress, keyRelease,creationPerso1,creationPerso2,tick,gestionVie,ko,shapes,themeSong,handleFileLoad,creationHadoken1,creationHadoken2*/

var stage;
var imgPerso1 = new Image();
var perso1;
var imgPerso2 = new Image();
var perso2;
var imgHadoken = new Image();
var hadoken1;
var hadoken2;
var clavier1 = {
        haut: 0,
        gauche: 0,
        droite: 0,
        bas: 0,
        O: 0,
        P: 0
    };
var bg;
var bmpViePerso1;
var bmpViePerso2;
var shape1;
var shape2;
var isThereHadoken1 = 0;
var isThereHadoken2 = 0;
var bmpKenWins;
var bmpRyuWins;
var Player1PunchLock = 0, Player1PunchKeyUnlock = 0, Player1KickLock = 0, Player1KickKeyUnlock = 0, Player1Jump = 0, Player1JumpLock = 0, Player1AirSpeed = 0, Player1DownLock = 0;
var Player2Defend = 0, Player2PunchLock = 0, Player2KickLock = 0, Player2PunchClick = 0, Player2KickClick = 0, Player2ReculeRequire = 0, Player2DefenceRequire = 0;

window.onkeydown = keyPress;
window.onkeyup = keyRelease;

function keyPress(e) {

    // PERSO 1
    if (e.keyCode == 81) {
        clavier1.gauche = 1;
        perso1.gotoAndPlay("walkPerso1");
    }
    if (e.keyCode == 83) {
        if (Player1JumpLock == 0)
        {
            clavier1.bas = 1;
            perso1.gotoAndPlay("downPerso1");
        }
    }
    if (e.keyCode == 68) {
        clavier1.droite = 1;
        perso1.gotoAndPlay("walkPerso1");
    }
    if (e.keyCode == 85) {
        if (Player1PunchLock == 0 && Player1PunchKeyUnlock == 0)
        {
            Player1PunchLock = 1;
            Player1PunchKeyUnlock = 1;
            perso1.gotoAndPlay("punch1Perso1");
            setTimeout(P1Punch,200);
        }
    }
    if (e.keyCode == 73) {
        if (Player1KickLock == 0 && Player1KickKeyUnlock == 0)
        {
            Player1KickLock = 1;
            Player1KickKeyUnlock = 1;
            perso1.gotoAndPlay("kick1Perso1");
            setTimeout(P1Kick, 300);
        }
    }
    if (e.keyCode == 79) {
        clavier1.O = 1;
        perso1.gotoAndPlay("blockPerso1");
    }
    if (e.keyCode == 80) {
        if (isThereHadoken1 === 0) {
            hadoken1.x = perso1.x + 25;
            hadoken1.y = perso1.y - 45;
            hadoken1.scaleX = 1.3;
            hadoken1.scaleY = 1.3;
            stage.addChild(hadoken1);
            isThereHadoken1 = 1;
            hadoken1.gotoAndPlay("standHadoken1");
        }
    }
    if (e.keyCode == 90)
    {
        if (Player1Jump == 0 && Player1JumpLock == 0)
        {
            P1Jump();
        }
    }

    /* Ont va en faire un bot
    // PERSO 2
    if (e.keyCode == 37) {
        clavier2.gauche = 1;
        perso2.gotoAndPlay("walkPerso2");
    }
    if (e.keyCode == 40) {
        clavier2.bas = 1;
        perso2.gotoAndPlay("downPerso2");
    }
    if (e.keyCode == 39) {
        clavier2.droite = 1;
        perso2.gotoAndPlay("walkPerso2");
    }
    if (e.keyCode == 97) {
        clavier2.numPad1 = 1;
        perso2.gotoAndPlay("punch1Perso2");
    }
    if (e.keyCode == 98) {
        clavier2.numPad2 = 1;
        perso2.gotoAndPlay("kick1Perso2");
    }
    if (e.keyCode == 99) {
        clavier2.numPad3 = 1;
       
    }
    if (e.keyCode == 100) {
        if (isThereHadoken2 === 0) {
            hadoken2.x = perso2.x - 25;
            hadoken2.y = perso2.y - 45;
            hadoken2.scaleX = -1.3;
            hadoken2.scaleY = 1.3;
            stage.addChild(hadoken2);
            isThereHadoken2 = 1;
            hadoken2.gotoAndPlay("standHadoken2");
        }
    }
    */
}

function P1Punch()
{
    perso1.gotoAndPlay("standPerso1");
    Player1PunchLock = 0;
}

function P1Kick()
{
    perso1.gotoAndPlay("standPerso1");
    Player1KickLock = 0;
}

function P1Jump()
{
    Player1Jump = 1;
    Player1JumpLock = 1;
    Player1AirSpeed = 1;
    Player1DownLock = 1;
}

function keyRelease(e) {
    // PERSO 1
    if (e.keyCode == 81) {
        clavier1.gauche = 0;
        perso1.gotoAndPlay("standPerso1");
    }
    if (e.keyCode == 68) {
        clavier1.droite = 0;
        perso1.gotoAndPlay("standPerso1");
    }
    if (e.keyCode == 85){
        Player1PunchKeyUnlock = 0;
    }
    if (e.keyCode == 83) {
        clavier1.bas = 0;
        perso1.gotoAndPlay("standPerso1");
        perso1.y = stage.canvas.height - 110;
    }
    if (e.keyCode == 73) {
        Player1KickKeyUnlock = 0;
    }
    if (e.keyCode == 79) {
        clavier1.O = 0;
        perso1.gotoAndPlay("standPerso1");
    }
}

function creationPerso1() {
    imgPerso1.src = "img/ken.png";
    var ss = new createjs.SpriteSheet({
        images: [imgPerso1],
        frames: {
            width: 100,
            height: 100,
            regX: 50,
            regY: 50
        },
        animations: {
            standPerso1: [0, 3, true, 0.1],
            walkPerso1: [4, 8, true, 0.1],
            punch1Perso1: [10, 12, false, 0.15],
            kick1Perso1: [13, 15, false, 0.1],
            blockPerso1: [16, 16, false, 0.05],
            hitPerso1: [20, 23, false, 0.2],
            koPerso1: [25, 27, false, 0.05],
            downPerso1: [27, 27, false, 0.05]
        }
    });

    perso1 = new createjs.Sprite(ss, "standPerso1");
    perso1.scaleX = 1.9;
    perso1.scaleY = 1.9;
    perso1.x = stage.canvas.width / 2 - 200;
    perso1.y = stage.canvas.height - 110;

    stage.addChild(perso1);
    stage.update();
}

function creationPerso2() {
    imgPerso2.src = "img/ryu.png";
    var ss = new createjs.SpriteSheet({
        images: [imgPerso2],
        frames: {
            width: 100,
            height: 100,
            regX: 50,
            regY: 50
        },
        animations: {
            standPerso2: [0, 3, true, 0.1],
            walkPerso2: [4, 8, true, 0.1],
            punch1Perso2: [10, 12, false, 0.15],
            kick1Perso2: [13, 15, false, 0.1],
            blockPerso2: [16, 16, false, 0.05],
            hitPerso2: [20, 23, false, 0.1],
            koPerso2: [25, 27, false, 0.05],
            downPerso2: [27, 27, false, 0.05]
        }
    });

    perso2 = new createjs.Sprite(ss, "standPerso2");
    perso2.x = stage.canvas.width / 2 + 200;
    perso2.y = stage.canvas.height / 2 + 90;
    perso2.scaleX = -1.9;
    perso2.scaleY = 1.9;

    perso2.gotoAndPlay("standPerso2");
    stage.addChild(perso2);
    stage.update();
}

function init() {
    stage = new createjs.Stage('canvas');

    // Nous lançons la musique du jeu
    //themeSong();

    // Creation de l'arène
    bg = new createjs.Bitmap("img/arena.png");
    bg.regX = 328.5;
    bg.regY = 112;
    bg.scaleX = 1.8;
    bg.scaleY = 1.8;
    bg.x = stage.canvas.width / 2;
    bg.y = stage.canvas.height / 2;
    stage.addChild(bg);

    // On crée le personnage 1 et 2
    creationPerso1();
    creationPerso2();

    // HADOKEN
    imgHadoken.src = "img/hadoken.png";
    imgHadoken.onload = creationHadoken1();
    imgHadoken.onload = creationHadoken2();

    // Fonction génératrice de la barre de vie
    shapes();

    // Fond de la barre de vie (en rouge)
    bmpViePerso1 = new createjs.Bitmap("img/VIE.png");
    bmpViePerso1.regX = 256;
    bmpViePerso1.regY = 16;
    bmpViePerso1.x = stage.canvas.width / 2 - 50;
    bmpViePerso1.y = 50;
    bmpViePerso1.scaleX = 1.01;
    bmpViePerso1.scaleY = 0.85;


    bmpViePerso2 = new createjs.Bitmap("img/VIE.png");
    bmpViePerso2.regX = 256;
    bmpViePerso2.regY = 16;
    bmpViePerso2.scaleX = -1.01;
    bmpViePerso2.scaleY = 0.85;
    bmpViePerso2.x = bmpViePerso1.x + 100;
    bmpViePerso2.y = 50;

    stage.addChild(bmpViePerso1);
    stage.addChild(bmpViePerso2);

    // Images du message du vainqueur
    bmpKenWins = new createjs.Bitmap("img/KENwins.png");
    bmpKenWins.regX = 150;
    bmpKenWins.regX = 100;
    bmpKenWins.x = stage.canvas.width / 2 - 50;
    bmpKenWins.y = stage.canvas.height / 2 - 100;
    bmpKenWins.scaleX = 1.2;
    bmpKenWins.scaleY = 1.2;
    bmpKenWins.alpha = 0;

    bmpRyuWins = new createjs.Bitmap("img/RYUwins.png");
    bmpRyuWins.regX = 150;
    bmpRyuWins.regX = 100;
    bmpRyuWins.x = stage.canvas.width / 2 - 50;
    bmpRyuWins.y = stage.canvas.height / 2 - 100;
    bmpRyuWins.scaleX = 1.2;
    bmpRyuWins.scaleY = 1.2;
    bmpRyuWins.alpha = 0;

    stage.update();

    // Ticker
    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", tick);
}

function creationHadoken1() {
    var ss = new createjs.SpriteSheet({
        images: [imgHadoken],
        frames: {
            width: 32,
            height: 28,
            regX: 16,
            regY: 14
        },
        animations: {
            standHadoken1: [0, 1, true, 0.3],
            burstHadoken1: [2, 5, false, 0.15]
        }
    });

    hadoken1 = new createjs.Sprite(ss, "standHadoken1");
    stage.update();
}

function creationHadoken2() {
    var ss = new createjs.SpriteSheet({
        images: [imgHadoken],
        frames: {
            width: 32,
            height: 28,
            regX: 16,
            regY: 14
        },
        animations: {
            standHadoken2: [0, 1, true, 0.3],
            burstHadoken2: [2, 5, false, 0.15]
        }
    });

    hadoken2 = new createjs.Sprite(ss, "standHadoken2");
    stage.update();
}

function shapes() {

    // Barre de vie jaune des deux personnages

    shape1 = new createjs.Shape();
    shape1.graphics.beginFill("#FFCC00").drawRect(0, 0, 238, 16);
    shape1.x = stage.canvas.width / 2 - 52;
    shape1.scaleY = 1.2;
    shape1.scaleX = 1;
    shape1.y = 59;
    shape1.regX = 238;
    shape1.regY = 16;

    shape2 = new createjs.Shape();
    shape2.graphics.beginFill("#FFCC00").drawRect(0, 0, 238, 16);
    shape2.x = stage.canvas.width / 2 + 52;
    shape2.scaleX = -1;
    shape2.scaleY = 1.2;
    shape2.y = 59;
    shape2.regX = 238;
    shape2.regY = 16;


    stage.addChild(shape1);
    stage.addChild(shape2);

    stage.update();
}

function deplacement() {

    // Déplacement des personnages
    if (clavier1.gauche == 1) {
        if (Player1AirSpeed == 1)
        {
            perso1.x = perso1.x - 7;
        }
        else
        {
            perso1.x = perso1.x - 6;
        }
    }
    if (clavier1.droite == 1) {
        if (Player1AirSpeed == 1)
        {
            perso1.x = perso1.x + 6;
        }
        else
        {
            perso1.x = perso1.x + 4;
        }
    }

    // Gestion de collision au bord de la map
    if (perso1.x <= 30) {
        perso1.x = 30;
    }
    if (perso2.x >= 766) {
        perso2.x = 766;
    }

    //Se baisser
    if (clavier1.bas == 1) {
        perso1.y = stage.canvas.height - 40;
        clavier1.droite = 0;
        clavier1.gauche = 0;
        perso1.gotoAndPlay("downPerso1");
    }

    /*
    if (clavier2.bas == 1) {
        perso2.y = stage.canvas.height - 40;
        clavier2.gauche = 0;
        clavier2.droite = 0;
        perso2.gotoAndPlay("downPerso2");
    }
    if (clavier2.bas === 0) {
        perso2.y = stage.canvas.height - 110;
    }
    */


    // Déplacement des Hadoken

    //Hadoken 1
    if (hadoken1.x - perso2.x < 30) {
        hadoken1.x = hadoken1.x + 8;
    }
    if (hadoken1.x - perso2.x > 30) {
        hadoken1.x = hadoken1.x + 8;
    }
    if (hadoken1.x > 800) {
        stage.removeChild(hadoken1);
        isThereHadoken1 = 0;
        stage.update();
    }
    //Hadoken 2
    if (hadoken2.x - perso1 > 30) {
        hadoken2.x = hadoken2.x - 8;
    }
    if (hadoken2.x - perso2.x < 30) {
        hadoken2.x = hadoken2.x - 8;
    }
    if (hadoken2.x < 0) {
        stage.removeChild(hadoken2);
        isThereHadoken2 = 0;
        stage.update();
    }
}

function tick() {

    // Les fonctions incluses dans le Ticker
    deplacement();
    gestionVie();
    gravity();
    ai();

    // Quand un personnage n'a plus de vie, on arrête le jeu
    if (shape1.scaleX <= 0) {
        stage.removeChild(shape1);
        ko();
        perso1.gotoAndPlay("koPerso1");
        stage.addChild(bmpRyuWins);
        bmpRyuWins.alpha = bmpRyuWins.alpha + 0.05;
    }
    if (shape2.scaleX >= 0) {
        stage.removeChild(shape2);
        ko();
        perso2.gotoAndPlay("koPerso2");
        stage.addChild(bmpKenWins);
        bmpKenWins.alpha = bmpKenWins.alpha + 0.05;
    }
    stage.update();
}

function gravity()
{
    if (Player1Jump == 1)
    {
        perso1.y -= 13;
    }

    if(perso1.y < 180)
    {
        Player1Jump = 0
    }

    if (Player1Jump == 0 && perso1.y < 290)
    {
        perso1.y += 17;
    }

    if(perso1.y >= 270)
    {
        Player1DownLock = 0;
    }

    if(perso1.y >= 290 && clavier1.bas == 0)
    {
        perso1.y = 290;
        Player1JumpLock = 0;
        Player1AirSpeed = 0;
    }
}

function gestionVie() {

    // Attaques du perso 1 (coup de poing et pied)
    if (Player1PunchLock == 1 && Math.abs(perso2.x - perso1.x) < 80 && Player2DefenceRequire === 0 && Math.abs(perso1.y - perso2.y) < 15) {
        shape2.scaleX = shape2.scaleX + 0.010;
        perso2.x = perso2.x + 20;
        perso2.gotoAndPlay("hitPerso2");
        stage.update();

        if (randomInt(1, 10) == 4)
        {
            Player2DefenceRequire = 1;
            setTimeout(AIDefenceDone, 600);
        }
    }
    if (Player1KickLock == 1 && Math.abs(perso2.x - perso1.x) < 95 && Player2DefenceRequire === 0 && Math.abs(perso1.y - perso2.y) < 15) {
        shape2.scaleX = shape2.scaleX + 0.015;
        perso2.x = perso2.x + 50;
        perso2.gotoAndPlay("hitPerso2");
        stage.update();

        if (randomInt(1, 5) == 1)
        {
            Player2DefenceRequire = 1;
            setTimeout(AIDefenceDone, 700);
        }
    }

    // Attaques du perso 2 (coup de poing et pied)
    if (Player2PunchClick == 1 && Math.abs(perso2.x - perso1.x) < 80 && clavier1.O === 0 && Math.abs(perso1.y - perso2.y) < 15) {
        shape1.scaleX = shape1.scaleX - 0.020;
        perso1.x = perso1.x - 20;
        perso1.gotoAndPlay("hitPerso1");
        stage.update();
        Player2PunchClick = 0;
    }
    if (Player2KickClick == 1 && Math.abs(perso2.x - perso1.x) < 95 && clavier1.O === 0 && Math.abs(perso1.y - perso2.y) === 0 && clavier1.bas == 0) {
        shape1.scaleX = shape1.scaleX - 0.030;
        perso1.x = perso1.x - 50;
        perso1.gotoAndPlay("hitPerso1");
        stage.update();
        Player2KickClick = 0;
    }

    // HADOKEN
    if (Math.abs(hadoken1.x - perso2.x) < 30 && Math.abs(hadoken1.y - perso2.y) == 45) {
        shape2.scaleX = shape2.scaleX + 0.1;
        perso2.gotoAndPlay("hitPerso2");
        hadoken1.x = 8000;
        stage.update();
    }
    if (Math.abs(hadoken2.x - perso1.x) < 30 && Math.abs(hadoken2.y - perso1.y) == 45) {
        shape1.scaleX = shape1.scaleX - 0.1;
        perso1.gotoAndPlay("hitPerso1");
        hadoken2.x = -8000;
        stage.update();
    }
}

function randomInt(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

// Inteligence artificiel du joueur 2
function ai()
{
    if (Player1Jump == 1)
    {
        Player2ReculeRequire = 1;
        setTimeout(AIReculeStop,1000);
    }

    if (Player2ReculeRequire == 1)
    {
        perso2.gotoAndPlay("walkPerso2");
        perso2.x = perso2.x + 4;
    }
    else if (Player2DefenceRequire == 1)
    {
        perso2.gotoAndPlay("blockPerso2");
        perso2.x = perso2.x + 4;
    }
    else
    {
        if(Math.abs(perso2.x - perso1.x) > 80)
        {
            perso2.x = perso2.x - 4;
        }
        else
        {
            if (randomInt(1, 3) == 1 || randomInt(1, 3) == 1)
            {
                if (clavier1.O === 0 && Math.abs(perso1.y - perso2.y) < 15 && Player2KickLock == 0)
                {
                    Player2KickLock = 1;
                    Player2KickClick = 1;
                    perso2.gotoAndPlay("kick1Perso2");
                    setTimeout(AIKick, 300);
                }
            }
            else
            {
                if (clavier1.O === 0 && Math.abs(perso1.y - perso2.y) < 15 && Player2PunchLock == 0)
                {
                    Player2PunchLock = 1;
                    Player2PunchClick = 1;
                    perso2.gotoAndPlay("punch1Perso2");
                    setTimeout(AIPunch, 200);
                }
            }
        }
    }
}

function AIDefenceDone()
{
    Player2DefenceRequire = 0;
}

function AIReculeStop()
{
    Player2ReculeRequire = 0;
}

function AIPunch()
{
    Player2PunchLock = 0;
    perso2.gotoAndPlay("standPerso2");
}

function AIKick()
{
    Player2KickLock = 0;
    perso2.gotoAndPlay("standPerso2");
}

function ko() {
    // Si la partie s'arrête, on empêche aux joueurs de bouger
    clavier1.gauche = 0;
    clavier1.droite = 0;

    window.onkeydown = null;
    window.onkeyup = null;
}

function themeSong() {
    createjs.Sound.alternateExtensions = ["mp3"];
    createjs.Sound.addEventListener("fileload", handleFileLoad);
    createjs.Sound.registerSound({
        id: "themeSound",
        src: "theme.mp3"
    });

    function handleFileLoad(event) {
        createjs.Sound.play(event.src);
    }
}

window.onload = init;

Changelog:
  1. Correction du bug d'apparition des personnage
  2. Il n'y à plus de joueur secondaire, c'est un AI
  3. Ajout de la gravitée (et notament des saut)
  4. Net Amélioration des animation et des controlle (Z: sautée, S: s'accropir pour esquivée les coup de pied, Q: Gauche, D: Droite, U: Punch, I: Coup de pied, O: Défense)
Sa ma mis 4h à codée xD j'espére que cette vous plaira :)
 
Je me permet de postée ma version modifiée de ton street fighter ^^'
Code:
// Code source modifiée par TheJailPad
/*jslint eqeq: true, sloppy: true*/
/*global createjs, keyPress, keyRelease,creationPerso1,creationPerso2,tick,gestionVie,ko,shapes,themeSong,handleFileLoad,creationHadoken1,creationHadoken2*/

var stage;
var imgPerso1 = new Image();
var perso1;
var imgPerso2 = new Image();
var perso2;
var imgHadoken = new Image();
var hadoken1;
var hadoken2;
var clavier1 = {
        haut: 0,
        gauche: 0,
        droite: 0,
        bas: 0,
        O: 0,
        P: 0
    };
var bg;
var bmpViePerso1;
var bmpViePerso2;
var shape1;
var shape2;
var isThereHadoken1 = 0;
var isThereHadoken2 = 0;
var bmpKenWins;
var bmpRyuWins;
var Player1PunchLock = 0, Player1PunchKeyUnlock = 0, Player1KickLock = 0, Player1KickKeyUnlock = 0, Player1Jump = 0, Player1JumpLock = 0, Player1AirSpeed = 0, Player1DownLock = 0;
var Player2Defend = 0, Player2PunchLock = 0, Player2KickLock = 0, Player2PunchClick = 0, Player2KickClick = 0, Player2ReculeRequire = 0, Player2DefenceRequire = 0;

window.onkeydown = keyPress;
window.onkeyup = keyRelease;

function keyPress(e) {

    // PERSO 1
    if (e.keyCode == 81) {
        clavier1.gauche = 1;
        perso1.gotoAndPlay("walkPerso1");
    }
    if (e.keyCode == 83) {
        if (Player1JumpLock == 0)
        {
            clavier1.bas = 1;
            perso1.gotoAndPlay("downPerso1");
        }
    }
    if (e.keyCode == 68) {
        clavier1.droite = 1;
        perso1.gotoAndPlay("walkPerso1");
    }
    if (e.keyCode == 85) {
        if (Player1PunchLock == 0 && Player1PunchKeyUnlock == 0)
        {
            Player1PunchLock = 1;
            Player1PunchKeyUnlock = 1;
            perso1.gotoAndPlay("punch1Perso1");
            setTimeout(P1Punch,200);
        }
    }
    if (e.keyCode == 73) {
        if (Player1KickLock == 0 && Player1KickKeyUnlock == 0)
        {
            Player1KickLock = 1;
            Player1KickKeyUnlock = 1;
            perso1.gotoAndPlay("kick1Perso1");
            setTimeout(P1Kick, 300);
        }
    }
    if (e.keyCode == 79) {
        clavier1.O = 1;
        perso1.gotoAndPlay("blockPerso1");
    }
    if (e.keyCode == 80) {
        if (isThereHadoken1 === 0) {
            hadoken1.x = perso1.x + 25;
            hadoken1.y = perso1.y - 45;
            hadoken1.scaleX = 1.3;
            hadoken1.scaleY = 1.3;
            stage.addChild(hadoken1);
            isThereHadoken1 = 1;
            hadoken1.gotoAndPlay("standHadoken1");
        }
    }
    if (e.keyCode == 90)
    {
        if (Player1Jump == 0 && Player1JumpLock == 0)
        {
            P1Jump();
        }
    }

    /* Ont va en faire un bot
    // PERSO 2
    if (e.keyCode == 37) {
        clavier2.gauche = 1;
        perso2.gotoAndPlay("walkPerso2");
    }
    if (e.keyCode == 40) {
        clavier2.bas = 1;
        perso2.gotoAndPlay("downPerso2");
    }
    if (e.keyCode == 39) {
        clavier2.droite = 1;
        perso2.gotoAndPlay("walkPerso2");
    }
    if (e.keyCode == 97) {
        clavier2.numPad1 = 1;
        perso2.gotoAndPlay("punch1Perso2");
    }
    if (e.keyCode == 98) {
        clavier2.numPad2 = 1;
        perso2.gotoAndPlay("kick1Perso2");
    }
    if (e.keyCode == 99) {
        clavier2.numPad3 = 1;
      
    }
    if (e.keyCode == 100) {
        if (isThereHadoken2 === 0) {
            hadoken2.x = perso2.x - 25;
            hadoken2.y = perso2.y - 45;
            hadoken2.scaleX = -1.3;
            hadoken2.scaleY = 1.3;
            stage.addChild(hadoken2);
            isThereHadoken2 = 1;
            hadoken2.gotoAndPlay("standHadoken2");
        }
    }
    */
}

function P1Punch()
{
    perso1.gotoAndPlay("standPerso1");
    Player1PunchLock = 0;
}

function P1Kick()
{
    perso1.gotoAndPlay("standPerso1");
    Player1KickLock = 0;
}

function P1Jump()
{
    Player1Jump = 1;
    Player1JumpLock = 1;
    Player1AirSpeed = 1;
    Player1DownLock = 1;
}

function keyRelease(e) {
    // PERSO 1
    if (e.keyCode == 81) {
        clavier1.gauche = 0;
        perso1.gotoAndPlay("standPerso1");
    }
    if (e.keyCode == 68) {
        clavier1.droite = 0;
        perso1.gotoAndPlay("standPerso1");
    }
    if (e.keyCode == 85){
        Player1PunchKeyUnlock = 0;
    }
    if (e.keyCode == 83) {
        clavier1.bas = 0;
        perso1.gotoAndPlay("standPerso1");
        perso1.y = stage.canvas.height - 110;
    }
    if (e.keyCode == 73) {
        Player1KickKeyUnlock = 0;
    }
    if (e.keyCode == 79) {
        clavier1.O = 0;
        perso1.gotoAndPlay("standPerso1");
    }
}

function creationPerso1() {
    imgPerso1.src = "img/ken.png";
    var ss = new createjs.SpriteSheet({
        images: [imgPerso1],
        frames: {
            width: 100,
            height: 100,
            regX: 50,
            regY: 50
        },
        animations: {
            standPerso1: [0, 3, true, 0.1],
            walkPerso1: [4, 8, true, 0.1],
            punch1Perso1: [10, 12, false, 0.15],
            kick1Perso1: [13, 15, false, 0.1],
            blockPerso1: [16, 16, false, 0.05],
            hitPerso1: [20, 23, false, 0.2],
            koPerso1: [25, 27, false, 0.05],
            downPerso1: [27, 27, false, 0.05]
        }
    });

    perso1 = new createjs.Sprite(ss, "standPerso1");
    perso1.scaleX = 1.9;
    perso1.scaleY = 1.9;
    perso1.x = stage.canvas.width / 2 - 200;
    perso1.y = stage.canvas.height - 110;

    stage.addChild(perso1);
    stage.update();
}

function creationPerso2() {
    imgPerso2.src = "img/ryu.png";
    var ss = new createjs.SpriteSheet({
        images: [imgPerso2],
        frames: {
            width: 100,
            height: 100,
            regX: 50,
            regY: 50
        },
        animations: {
            standPerso2: [0, 3, true, 0.1],
            walkPerso2: [4, 8, true, 0.1],
            punch1Perso2: [10, 12, false, 0.15],
            kick1Perso2: [13, 15, false, 0.1],
            blockPerso2: [16, 16, false, 0.05],
            hitPerso2: [20, 23, false, 0.1],
            koPerso2: [25, 27, false, 0.05],
            downPerso2: [27, 27, false, 0.05]
        }
    });

    perso2 = new createjs.Sprite(ss, "standPerso2");
    perso2.x = stage.canvas.width / 2 + 200;
    perso2.y = stage.canvas.height / 2 + 90;
    perso2.scaleX = -1.9;
    perso2.scaleY = 1.9;

    perso2.gotoAndPlay("standPerso2");
    stage.addChild(perso2);
    stage.update();
}

function init() {
    stage = new createjs.Stage('canvas');

    // Nous lançons la musique du jeu
    //themeSong();

    // Creation de l'arène
    bg = new createjs.Bitmap("img/arena.png");
    bg.regX = 328.5;
    bg.regY = 112;
    bg.scaleX = 1.8;
    bg.scaleY = 1.8;
    bg.x = stage.canvas.width / 2;
    bg.y = stage.canvas.height / 2;
    stage.addChild(bg);

    // On crée le personnage 1 et 2
    creationPerso1();
    creationPerso2();

    // HADOKEN
    imgHadoken.src = "img/hadoken.png";
    imgHadoken.onload = creationHadoken1();
    imgHadoken.onload = creationHadoken2();

    // Fonction génératrice de la barre de vie
    shapes();

    // Fond de la barre de vie (en rouge)
    bmpViePerso1 = new createjs.Bitmap("img/VIE.png");
    bmpViePerso1.regX = 256;
    bmpViePerso1.regY = 16;
    bmpViePerso1.x = stage.canvas.width / 2 - 50;
    bmpViePerso1.y = 50;
    bmpViePerso1.scaleX = 1.01;
    bmpViePerso1.scaleY = 0.85;


    bmpViePerso2 = new createjs.Bitmap("img/VIE.png");
    bmpViePerso2.regX = 256;
    bmpViePerso2.regY = 16;
    bmpViePerso2.scaleX = -1.01;
    bmpViePerso2.scaleY = 0.85;
    bmpViePerso2.x = bmpViePerso1.x + 100;
    bmpViePerso2.y = 50;

    stage.addChild(bmpViePerso1);
    stage.addChild(bmpViePerso2);

    // Images du message du vainqueur
    bmpKenWins = new createjs.Bitmap("img/KENwins.png");
    bmpKenWins.regX = 150;
    bmpKenWins.regX = 100;
    bmpKenWins.x = stage.canvas.width / 2 - 50;
    bmpKenWins.y = stage.canvas.height / 2 - 100;
    bmpKenWins.scaleX = 1.2;
    bmpKenWins.scaleY = 1.2;
    bmpKenWins.alpha = 0;

    bmpRyuWins = new createjs.Bitmap("img/RYUwins.png");
    bmpRyuWins.regX = 150;
    bmpRyuWins.regX = 100;
    bmpRyuWins.x = stage.canvas.width / 2 - 50;
    bmpRyuWins.y = stage.canvas.height / 2 - 100;
    bmpRyuWins.scaleX = 1.2;
    bmpRyuWins.scaleY = 1.2;
    bmpRyuWins.alpha = 0;

    stage.update();

    // Ticker
    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", tick);
}

function creationHadoken1() {
    var ss = new createjs.SpriteSheet({
        images: [imgHadoken],
        frames: {
            width: 32,
            height: 28,
            regX: 16,
            regY: 14
        },
        animations: {
            standHadoken1: [0, 1, true, 0.3],
            burstHadoken1: [2, 5, false, 0.15]
        }
    });

    hadoken1 = new createjs.Sprite(ss, "standHadoken1");
    stage.update();
}

function creationHadoken2() {
    var ss = new createjs.SpriteSheet({
        images: [imgHadoken],
        frames: {
            width: 32,
            height: 28,
            regX: 16,
            regY: 14
        },
        animations: {
            standHadoken2: [0, 1, true, 0.3],
            burstHadoken2: [2, 5, false, 0.15]
        }
    });

    hadoken2 = new createjs.Sprite(ss, "standHadoken2");
    stage.update();
}

function shapes() {

    // Barre de vie jaune des deux personnages

    shape1 = new createjs.Shape();
    shape1.graphics.beginFill("#FFCC00").drawRect(0, 0, 238, 16);
    shape1.x = stage.canvas.width / 2 - 52;
    shape1.scaleY = 1.2;
    shape1.scaleX = 1;
    shape1.y = 59;
    shape1.regX = 238;
    shape1.regY = 16;

    shape2 = new createjs.Shape();
    shape2.graphics.beginFill("#FFCC00").drawRect(0, 0, 238, 16);
    shape2.x = stage.canvas.width / 2 + 52;
    shape2.scaleX = -1;
    shape2.scaleY = 1.2;
    shape2.y = 59;
    shape2.regX = 238;
    shape2.regY = 16;


    stage.addChild(shape1);
    stage.addChild(shape2);

    stage.update();
}

function deplacement() {

    // Déplacement des personnages
    if (clavier1.gauche == 1) {
        if (Player1AirSpeed == 1)
        {
            perso1.x = perso1.x - 7;
        }
        else
        {
            perso1.x = perso1.x - 6;
        }
    }
    if (clavier1.droite == 1) {
        if (Player1AirSpeed == 1)
        {
            perso1.x = perso1.x + 6;
        }
        else
        {
            perso1.x = perso1.x + 4;
        }
    }

    // Gestion de collision au bord de la map
    if (perso1.x <= 30) {
        perso1.x = 30;
    }
    if (perso2.x >= 766) {
        perso2.x = 766;
    }

    //Se baisser
    if (clavier1.bas == 1) {
        perso1.y = stage.canvas.height - 40;
        clavier1.droite = 0;
        clavier1.gauche = 0;
        perso1.gotoAndPlay("downPerso1");
    }

    /*
    if (clavier2.bas == 1) {
        perso2.y = stage.canvas.height - 40;
        clavier2.gauche = 0;
        clavier2.droite = 0;
        perso2.gotoAndPlay("downPerso2");
    }
    if (clavier2.bas === 0) {
        perso2.y = stage.canvas.height - 110;
    }
    */


    // Déplacement des Hadoken

    //Hadoken 1
    if (hadoken1.x - perso2.x < 30) {
        hadoken1.x = hadoken1.x + 8;
    }
    if (hadoken1.x - perso2.x > 30) {
        hadoken1.x = hadoken1.x + 8;
    }
    if (hadoken1.x > 800) {
        stage.removeChild(hadoken1);
        isThereHadoken1 = 0;
        stage.update();
    }
    //Hadoken 2
    if (hadoken2.x - perso1 > 30) {
        hadoken2.x = hadoken2.x - 8;
    }
    if (hadoken2.x - perso2.x < 30) {
        hadoken2.x = hadoken2.x - 8;
    }
    if (hadoken2.x < 0) {
        stage.removeChild(hadoken2);
        isThereHadoken2 = 0;
        stage.update();
    }
}

function tick() {

    // Les fonctions incluses dans le Ticker
    deplacement();
    gestionVie();
    gravity();
    ai();

    // Quand un personnage n'a plus de vie, on arrête le jeu
    if (shape1.scaleX <= 0) {
        stage.removeChild(shape1);
        ko();
        perso1.gotoAndPlay("koPerso1");
        stage.addChild(bmpRyuWins);
        bmpRyuWins.alpha = bmpRyuWins.alpha + 0.05;
    }
    if (shape2.scaleX >= 0) {
        stage.removeChild(shape2);
        ko();
        perso2.gotoAndPlay("koPerso2");
        stage.addChild(bmpKenWins);
        bmpKenWins.alpha = bmpKenWins.alpha + 0.05;
    }
    stage.update();
}

function gravity()
{
    if (Player1Jump == 1)
    {
        perso1.y -= 13;
    }

    if(perso1.y < 180)
    {
        Player1Jump = 0
    }

    if (Player1Jump == 0 && perso1.y < 290)
    {
        perso1.y += 17;
    }

    if(perso1.y >= 270)
    {
        Player1DownLock = 0;
    }

    if(perso1.y >= 290 && clavier1.bas == 0)
    {
        perso1.y = 290;
        Player1JumpLock = 0;
        Player1AirSpeed = 0;
    }
}

function gestionVie() {

    // Attaques du perso 1 (coup de poing et pied)
    if (Player1PunchLock == 1 && Math.abs(perso2.x - perso1.x) < 80 && Player2DefenceRequire === 0 && Math.abs(perso1.y - perso2.y) < 15) {
        shape2.scaleX = shape2.scaleX + 0.010;
        perso2.x = perso2.x + 20;
        perso2.gotoAndPlay("hitPerso2");
        stage.update();

        if (randomInt(1, 10) == 4)
        {
            Player2DefenceRequire = 1;
            setTimeout(AIDefenceDone, 600);
        }
    }
    if (Player1KickLock == 1 && Math.abs(perso2.x - perso1.x) < 95 && Player2DefenceRequire === 0 && Math.abs(perso1.y - perso2.y) < 15) {
        shape2.scaleX = shape2.scaleX + 0.015;
        perso2.x = perso2.x + 50;
        perso2.gotoAndPlay("hitPerso2");
        stage.update();

        if (randomInt(1, 5) == 1)
        {
            Player2DefenceRequire = 1;
            setTimeout(AIDefenceDone, 700);
        }
    }

    // Attaques du perso 2 (coup de poing et pied)
    if (Player2PunchClick == 1 && Math.abs(perso2.x - perso1.x) < 80 && clavier1.O === 0 && Math.abs(perso1.y - perso2.y) < 15) {
        shape1.scaleX = shape1.scaleX - 0.020;
        perso1.x = perso1.x - 20;
        perso1.gotoAndPlay("hitPerso1");
        stage.update();
        Player2PunchClick = 0;
    }
    if (Player2KickClick == 1 && Math.abs(perso2.x - perso1.x) < 95 && clavier1.O === 0 && Math.abs(perso1.y - perso2.y) === 0 && clavier1.bas == 0) {
        shape1.scaleX = shape1.scaleX - 0.030;
        perso1.x = perso1.x - 50;
        perso1.gotoAndPlay("hitPerso1");
        stage.update();
        Player2KickClick = 0;
    }

    // HADOKEN
    if (Math.abs(hadoken1.x - perso2.x) < 30 && Math.abs(hadoken1.y - perso2.y) == 45) {
        shape2.scaleX = shape2.scaleX + 0.1;
        perso2.gotoAndPlay("hitPerso2");
        hadoken1.x = 8000;
        stage.update();
    }
    if (Math.abs(hadoken2.x - perso1.x) < 30 && Math.abs(hadoken2.y - perso1.y) == 45) {
        shape1.scaleX = shape1.scaleX - 0.1;
        perso1.gotoAndPlay("hitPerso1");
        hadoken2.x = -8000;
        stage.update();
    }
}

function randomInt(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

// Inteligence artificiel du joueur 2
function ai()
{
    if (Player1Jump == 1)
    {
        Player2ReculeRequire = 1;
        setTimeout(AIReculeStop,1000);
    }

    if (Player2ReculeRequire == 1)
    {
        perso2.gotoAndPlay("walkPerso2");
        perso2.x = perso2.x + 4;
    }
    else if (Player2DefenceRequire == 1)
    {
        perso2.gotoAndPlay("blockPerso2");
        perso2.x = perso2.x + 4;
    }
    else
    {
        if(Math.abs(perso2.x - perso1.x) > 80)
        {
            perso2.x = perso2.x - 4;
        }
        else
        {
            if (randomInt(1, 3) == 1 || randomInt(1, 3) == 1)
            {
                if (clavier1.O === 0 && Math.abs(perso1.y - perso2.y) < 15 && Player2KickLock == 0)
                {
                    Player2KickLock = 1;
                    Player2KickClick = 1;
                    perso2.gotoAndPlay("kick1Perso2");
                    setTimeout(AIKick, 300);
                }
            }
            else
            {
                if (clavier1.O === 0 && Math.abs(perso1.y - perso2.y) < 15 && Player2PunchLock == 0)
                {
                    Player2PunchLock = 1;
                    Player2PunchClick = 1;
                    perso2.gotoAndPlay("punch1Perso2");
                    setTimeout(AIPunch, 200);
                }
            }
        }
    }
}

function AIDefenceDone()
{
    Player2DefenceRequire = 0;
}

function AIReculeStop()
{
    Player2ReculeRequire = 0;
}

function AIPunch()
{
    Player2PunchLock = 0;
    perso2.gotoAndPlay("standPerso2");
}

function AIKick()
{
    Player2KickLock = 0;
    perso2.gotoAndPlay("standPerso2");
}

function ko() {
    // Si la partie s'arrête, on empêche aux joueurs de bouger
    clavier1.gauche = 0;
    clavier1.droite = 0;

    window.onkeydown = null;
    window.onkeyup = null;
}

function themeSong() {
    createjs.Sound.alternateExtensions = ["mp3"];
    createjs.Sound.addEventListener("fileload", handleFileLoad);
    createjs.Sound.registerSound({
        id: "themeSound",
        src: "theme.mp3"
    });

    function handleFileLoad(event) {
        createjs.Sound.play(event.src);
    }
}

window.onload = init;

Changelog:
  1. Correction du bug d'apparition des personnage
  2. Il n'y à plus de joueur secondaire, c'est un AI
  3. Ajout de la gravitée (et notament des saut)
  4. Net Amélioration des animation et des controlle (Z: sautée, S: s'accropir pour esquivée les coup de pied, Q: Gauche, D: Droite, U: Punch, I: Coup de pied, O: Défense)
Sa ma mis 4h à codée xD j'espére que cette vous plaira :)

Ouah merci tu gères vraiment ! Je te rajouterais dans la page de crédit je suis en train de la faire en parallèle ! C'est du super taf ce que t'as fait merci beaucoup :)
 
Statut
N'est pas ouverte pour d'autres réponses.
Retour
Haut