JeuWeb - Crée ton jeu par navigateur
Ball bounce résolu mais ne comprend pas... - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Ball bounce résolu mais ne comprend pas... (/showthread.php?tid=7640)

Pages : 1 2 3


RE: Ball bounce résolu mais ne comprend pas... - tatactic - 12-05-2016

Tu as raison, je suis très c..

En fait dans ces 4 conditions, il faut réactualiser la rotation et immédiatement refaire avancer la balle en sens inverse dans chacun des cas.
puis à la fin de la fonction faire avancer la balle en x et en y normalement.

J'ai eu le problème en changeant l'angle et les positions de base plusieurs fois (une tonne de fois) avant de pouvoir recréer le "bug".

Je vais faire tourner le swf quelques heures d'affilée pour vérifier ça, car parfois il faut un temps délirant avant que le cas ne se produise.
du coup on peut parfois se dire "ouf, j'y suis" alors que le bug est bien présent.

Il est donc bien question d'une sortie des limites de l'aire déterminée à la base.
J'espère que c'est bien ça.
De toute façon c'était juste un test et, il faudra tout reprendre plus proprement en séparant le côté graphique et les calculs de vitesse, rotation, position...


RE: Ball bounce résolu mais ne comprend pas... - Xenos - 12-05-2016

C'est l'avantage de faire des systèmes d'état et non de transition: au lieu de faire des "if je traverse le mur then inverser vitesse", tu pourrais faire du "if je suis hors cadre then vitesse dans le bon sens". Là, tu n'auras jamais de soucis Wink


RE: Ball bounce résolu mais ne comprend pas... - tatactic - 12-05-2016

Wouai mais bon euh...
Je vais essayer de tester si c'est jouable... Wink


RE: Ball bounce résolu mais ne comprend pas... - tatactic - 17-05-2016

Bon, j'ai transformé mes classes Ball et Main...

J'ai commenté les Appels au son si la balle touche les limites comme ça tu peux voir si ça te semble plausible en copiant les classes dans un package com et en déclarant com.Main comme classe de base...
Là je n'ai plus eu de bug.
Ca te semble possible comme approche vu que par la suite je devrai aussi faire des hitTests sur les instances de Ball, récupérer la pseudo rotation et les envoyer "baldinguer" en fonction de leurs "rotations" respectives.

De plus il est maintenant possible de redimensionner le Stage comme on veut...
Les instances vont se replacer dans les limites intérieures.

Je ne sais pas du tout si j'avance dans la bonne direction ou si je reste confus.

A première vue (mais je me goure peut être c'est déjà un peu plus propre) et il me restera à revoir comment calculer l'angle de chaque balle après un hitTest...

Ma classe Main :

Code :
package com
{
    import com.display.Ball;
    
    import flash.display.Graphics;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;

    [SWF(width = "400", height = "300", frameRate = "60", backgroundColor = "#dddddd")]
    public class Main extends MovieClip
    {
        private var b1:Ball;
        private var b2:Ball;
        private var b3:Ball;
        private var b4:Ball;
        private var b5:Ball;
        private var testClip:Sprite;
        private const ANGLE_TOP_LEFT:int=135;
        private const ANGLE_BOTTOM_LEFT:int=-135;
        private const ANGLE_TOP_RIGHT:int=45;
        private const ANGLE_BOTTOM_RIGHT:int=-45;
        
        public function Main()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            trace("stageSize = " + getStageSize() + ", fps = " + stage.frameRate);
            drawlineGuides();
            addBalls();
            stage.addEventListener(Event.RESIZE,onStageResize);
        }
        private function addBalls():void{
            b1 = new Ball(500/2,250/2,10);
            addChild(b1);
            b1.color = 0x6666cc;
            b1.rota = 135;
            b1.drawBall();
            b1.move(5);    
            
            b2 = new Ball(100,100,10);
            addChild(b2);
            b2.color = 0xff9900;
            b2.rota = -110;
            b2.drawBall();
            b2.move(4);
            
            b3 = new Ball(50,80,10);
            addChild(b3);
            b3.color = 0xff0000;
            b3.rota = 60;
            b3.drawBall();
            b3.move(3);
            
            b4 = new Ball(75,20,10);
            addChild(b4);
            b4.color = 0x00aa00;
            b4.rota = 10;
            b4.drawBall();
            b4.move(4);
            
            b5 = new Ball(125,130,10);
            addChild(b5);
            b5.color = 0x8457a2;
            b5.rota = -45;
            b5.drawBall();
            b5.move(4);
            
            stage.addEventListener(MouseEvent.MOUSE_DOWN,b1.pauseResume);
            stage.addEventListener(MouseEvent.MOUSE_DOWN,b2.pauseResume);
            stage.addEventListener(MouseEvent.MOUSE_DOWN,b3.pauseResume);
            stage.addEventListener(MouseEvent.MOUSE_DOWN,b4.pauseResume);
            stage.addEventListener(MouseEvent.MOUSE_DOWN,b5.pauseResume);
        }
        private function rotate(e:Event):void{
            testClip.rotation = b2.rotation-45;
        }
        private function getStageSize():Point{
            var p:Point= new Point(stage.stageWidth,stage.stageHeight);
            return p;
        }
        private function drawlineGuides():void{
            var g:Graphics = this.graphics;
            g.clear();
            g.lineStyle(1,0x000000,1);
            g.moveTo(0,stage.stageHeight/2);
            g.lineTo(stage.stageWidth,stage.stageHeight/2);
            g.moveTo(stage.stageWidth/2,0);
            g.lineTo(stage.stageWidth/2,stage.stageHeight);
        }
        private function onStageResize(e:Event):void{
            drawlineGuides();
        }
    }
}

Et la Classe Ball :

Code :
package com.display
{
    /* this import is optionnal
    if you want to run this class without the BongSound instance
    comment all lines where the var bSound is called
    */
    //import com.media.sound.BongSound;
    
    import flash.display.Graphics;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import flash.media.Sound;

    public class Ball extends Sprite
    {
        private var _radius:int;
        private var _rotation:Number;
        private var _color:int;
        private var _g:Graphics;
        private var _g2:Graphics;
        private var _speed:Number;
        private var speedx:Number;
        private var speedy:Number;
        public var rota:Number;
        private var smallCircle:Sprite;
        private var rendered:Boolean = false;
        public var paused:Boolean = false;
        private const ZERO:uint = 0;
        //private var bSound:BongSound;
        /**
         * Ball(posx:Number,posy:Number,radius:uint)<br/>
         * this constructor create an instance of a bouncing ball<br/>
         * the posx and posy must be included in the range of the defined stageWidth and stageHeight!<br/>
         * Otherwise, the ball will be placed in the stage range.
         */
        public function Ball(posx:Number,posy:Number,radius:uint)
        {
            //bSound = new BongSound();
            smallCircle = new Sprite();
            this.addChild(smallCircle);
            this._radius = radius;
            this.x = posx;
            this.y = posy;
            _g = this.graphics;
            _g2 = smallCircle.graphics;
        }
        private function checkStageSize():void{
            if(this.x + radius + speedx >= this.stage.stageWidth){
                this.x = this.stage.stageWidth - this.width;
            }
            if(this.y + radius + speedy >= this.stage.stageHeight){
                this.y = this.stage.stageHeight - this.height;
            }
            if(this.x - radius + speedx <= ZERO){
                this.x = this.width;
            }
            if(this.y - radius + speedy <= ZERO){
                this.y = this.height;
            }
        }
        public function get speed():Number
        {
            return _speed;
        }
        public function set speed(value:Number):void
        {
            _speed = value;
        }
        public function get color():int
        {
            return _color;
        }
        public function set color(value:int):void
        {
            _color = value;
        }
        public function get radius():int
        {
            return _radius;
        }
        public function set radius(value:int):void
        {
            _radius = value;
        }
        /**
         * drawBall()<br/>
         * this function draws the main Ball Object
         */
        public function drawBall():void
        {
            _g.clear();
            _g.lineStyle(1,0x666666,1);
            _g.beginFill(_color,1);
            _g.drawCircle(0,0,this._radius);
            _g.endFill();
            _g.lineStyle(1,0x666666,1);
            _g.beginFill(0xffffff,1);
            _g.endFill();
        }
        /**
         * drawPoint()<br/>
         * this function draws the Point Object wich is placed in the direction/rotation of the main Ball instance.
         */
        public function drawPoint():void{
            _g2.clear();
            _g2.lineStyle(1,0x666666,1);
            _g2.beginFill(0xffffff,1);
            _g2.drawCircle(ZERO, ZERO, this._radius/2);
            smallCircle.x = Math.sin(deg2rad(rota+90))*this.radius/2;
            smallCircle.y = Math.cos(deg2rad(rota+90))*this.radius/2;
            _g2.endFill();
        }
        /**
         * move(speed:Number):void<br/>
         * this function set the speed and makes the Ball move.<br/>
         * The displace function is called when an ENTER_FRAME event is triggered.
         */
        public function move(speed:Number):void{
            this.speed = speed;
            this.addEventListener(Event.ENTER_FRAME,displace);
        }
        /**
         * getRota():Number<br/>
         * this function returns the rotation of the Ball instance.<br/>
         * the rotation is returned in degrees.
         */
        public function getRota():Number{
            return rad2deg(Math.atan2(speedy,speedx));
        }
        /**
         * pauseResume(e:MouseEvent):void
         * Pause or resume movement.
         */
        public function pauseResume(e:MouseEvent):void{
            switch(paused){
                case false:
                    this.removeEventListener(Event.ENTER_FRAME,displace);
                    paused = true;
                    break;
                case true:
                    this.addEventListener(Event.ENTER_FRAME,displace);
                    paused = false;
                    break;
            }
        }
        /**
         * checkBounds():void<br/>
         * <p>
         * this function plays a Sound when the Ball instance hit the bounds.<br/>
         * the rota variable is updated (even if the rotation of the Ball instance don't change).<br/>
         * If the stage is resized, a call to checkStageSize() set the positions x & y in the bounds of the Stage.
         * </p>
         * @see checkStageSize()
         */
        private function checkBounds():void{
            if(this.x + radius + speedx >= this.stage.stageWidth){
                //bSound.play();
                rota = rad2deg(Math.atan2(-speedy,-speedx));
            }
            if(this.y + radius + speedy >= this.stage.stageHeight){
                //bSound.play();
                rota = rad2deg(Math.atan2(speedy,speedx));
            }
            if(this.x - radius + speedx <= ZERO){
                //bSound.play();
                rota = rad2deg(Math.atan2(-speedy,-speedx));
            }
            if(this.y - radius + speedy <= ZERO){
                //bSound.play();
                rota = rad2deg(Math.atan2(speedy,speedx));
            }
            checkStageSize();
        }
        /**
         * <p>
         * displace(e:Event):void
         * displace the ball and calls drawPoint to place the sub-Sprite depending of the "rotation" of the Ball instance.</p>
         * @see #drawPoint()
         * @see #checkBounds()
         */
        private function displace(e:Event):void{
            checkBounds();
            speedx = Math.sin(deg2rad(rota+90))*speed;
            speedy = Math.cos(deg2rad(rota+90))*speed;
            this.x += speedx;
            this.y += speedy;
            drawPoint();
        }
        public function deg2rad(value:Number):Number{
            return value/180*Math.PI;
        }
        public function rad2deg(value:Number):Number{
            return value*180/Math.PI;
        }

    }
}



RE: Ball bounce résolu mais ne comprend pas... - Murthy - 17-05-2016

Si je peux me permettre...
Quand j'ai vu "flash.display.Graphics" et que je suis remonté dans les messages puis ai vu "swf" alors j'ai réalisé que tu étais occupé a développer en flash.
Du coups, je ne connais pas le but final de ton application et je ne sais pas si tu est déjà mis au courant mais flash va disparaitre totalement (ou presque) des navigateurs web principaux.

Firefox : Bloquer par défaut. (installation manuelle encore possible ? )
Chrome : Bloquer par défaut. (Remplacer totalement par HTML5 d'ici fin 2016 ? )
Edge : Contenu mis en pause par défaut. (Remplacer par HTML5 prochainement ? )

Tout ça pour dire que si tu développes dans ce langage pour une mise en production ça me semble un peu compromis.

NB : Je n'ai pas parole d'évangile et je peux tout à fait me tromper sur les informations concernant les navigateurs.


RE: Ball bounce résolu mais ne comprend pas... - tatactic - 17-05-2016

Tu peux arrêter d'avoir raison deux minutes? Wink
Je me doute bien que flash va mourir hélas Sad

On va passer sur des langages qui tournent chez le client et éjecter un langage compilé qui commence à prendre forme.
AS2 était de la m.... (un faux "class based").
Pas mal de gens ont été fatigués de passer d'AS1 à AS2 pour se rendre compte qu'AS3.

Je me fout un peu du langage, mais toutes ces daubes qui tournent en "protoype based", ça me gave!
Avec AS1 on tournait en "prototype based" mais les codeurs optimisaient ça en général pour que ça roule sur de vieilles machines.

Là je ris jaune en me disant qu'il faut un quad ou un octo-core sur un smartphone pour faire tourner des jeux assez basiques avec une RAM pas possible...

C'est dingue ça! C'est un argument de vente point barre!
Sous prétexte de "sécurité"?

Des failles, ont peut en trouver partout et les exploiter (ce n'est pas à toi que je dois le dire).

On ne parle pas de "script kiddies" mais de gens qui veulent pénétrer dans du code.

De plus, si on va un peu plus loin (remontons à Flash 5), il existait des développeurs qui codaient proprement en pensant à l'utilisateur lambda.

Flash est-il un danger potentiel?
Et Windows et ses mises à jours de vulnérabilités...
OK, je suis hors sujet, j'en conviens.

Bon, je peux faire idem en Java (qui va être bloqué sans doute également)???

On va tous être obligés de passer sur une lib JSON???

Et tous les jeux flash vont-ils disparaître?
Je suis désolé, je me répends mais vers quelle solution se tourner?
Je ne vois pas d'avenir réel pour HTML5...

On va vers quoi alors???
Swift?
https://swiftlang.ng.bluemix.net/?cm_mmc=developerWorks-_-dWdevcenter-_-swift-_-lp&cm_mc_uid=11516722774814492407333&cm_mc_sid_50200000=1449240733#/repl
Un retour à Python qui n'est pas mal foutu, mais bonne chance pour créer une interface graphique et qui plus est ne fonctionne pas sur le web mais en appli uniquement si Python est installé?
Bref.
Des questions...

Tu as des pistes?
Tu crois à HTML5 dans les années qui viennent?

De toute façon, flash permet de revoir mes points faibles en Maths, c'est le principal...
Pour la suite on verra bien...
La syntaxe changera mais le code reste le code...

Bien à toi.
Nicolas

PS : Quand je vois les "addicts" à des jeux en flash, je le vois mal disparaître même si je m'en fout personnellement...
Exemple parfait : Ma nana Smile


RE: Ball bounce résolu mais ne comprend pas... - Xenos - 17-05-2016

Flash est un langage proprio, javascript/html sont "publics" (W3C/ECMA). Pour moi, cela suffit à faire son choix.

Et oui, HTML5 (et JS coté client, même si je suis contre ^^) ont surement plus d'avenir que Flash, surtout quand les géants du web (genre Google) ont lâché Flash (il me semble que Youtube & autres googleitudes n'ont plus de Flash mais du HTML5?) et que les navigateurs font de même (faut pas croire que les utilisateurs vont aller chercher à installer Flash d'eux-même). D'ailleurs, Flash, sur mobile/tablette/autre support genre voiture+synté vocal, cela donne quoi? Smile

Bref, Flash pour ton proto, pourquoi pas, mais pour créer un jeu (un jeu qui sera joué), c'est un investissement risqué... Surtout que les plateformes de jeu flash me semblent plus squattées par une ou deux grosses boites de dessin (parce que c'est là où la charge de travail Flash passe) que par des codeurs indés.

Mais bon, à toi de voir Wink


RE: Ball bounce résolu mais ne comprend pas... - tatactic - 17-05-2016

Tu me fatigues à force d'avoir raison Smile
Mes "ex-Bosses" me dit la même chose sans compter mon ex prof avec qui nous sommes tous restés potes...
Bon, je vais considérer flash comme un outil sans plus, et me mettre à HTML5 (qui n'est jamais validé correctement sur le validateur W3C)...
Si ça te plaît joues avec l'outil...
Tant que rien ne sera validé par le W3C je ne vois pas pourquoi perdre mon temps...

validator.w3.org pour le site d'Apple

Comme on dit chez nous : "amuseer je goed" ou "Ga geluuf da'" Smile

De toute façon, je pense que le web, je vais oublier...
Pour mon site en Xhtml 1.0 Strict toutes les pages sont validées:
mon vieux site est validé!


RE: Ball bounce résolu mais ne comprend pas... - Xenos - 17-05-2016

Ben, le validateur a raison me semble-t-il: ce n'est pas parce les dev d'Apple bricolent un peu au delà de la spec que le validateur du W3C est en tort :heu:
Après, ils se basent sur la spec HTML5, pas sur la spec "temps réel" (je ne sais plus le qualificatif exact) du WHATWG.


RE: Ball bounce résolu mais ne comprend pas... - Murthy - 17-05-2016

La sur le coup, je ne saisis pas bien... Ce n'est pas parce qu'Apple a un site qui ne respecte pas les normes W3C qu'il faut croire que les normes ne sont pas fonctionnelles.

De plus, en ce qui te concerne, tu pratiques l'AS (1, 2 ou 3) donc la conversion vers le JS ne devrait vraiment pas poser de problème surtout qu'ils sont censé avoir plus ou moins la même base : ECMAScript.

Maintenant, pour répondre à ta question, oui je pense que le couple HTML5 / JS a de l'avenir. Comme l'avait le flash quand il est sorti... Dans plusieurs années ont changera très certainement de techno. Mais l'avenir proche c'est bien ce couple qui est vainqueur. (En langage client, quoique nodeJS peut être considéré comme langage serveur...)