World of bugs

Posté par Lecesne Yannick dans Javascript

Javascript

World of bugs

Juste pour m'amuser j'ai essayé de créer des éléments qui se déplacent aléatoirement...

Pourquoi faire ça ?

Et bien je voulais simplement découvrir un peu le monde de l'intelligence artificielle et créer une intelligence de mouche :)
Pour le moment le code permet juste de voir les mouches volées aléatoirement et si vous survolez avec votre souris elles viennent vers votre souris, l'idée par la suite c'est d'ajouter certaines fonctionnalitées.

par exemple on peut imaginer :

- Chaque mouche peut se nourrir

- Chaque mouche meurt si elle ne se nourrit pas dans un temps limité (representer par un nombre de deplacement)

- Elle doit donc trouver de la bonne nourriture, elle possédera un radar avec une portée limitée

- ...

c'est un petit entrainement mais je vous donnes tout de même mon code ça peut toujours servir à l'élaboration de petit jeux en javascript  :)

 

Pour tester c'est par ici : World of Bugs

Voici le code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>World of bugs</title>
    <style>
    body{
        text-align: center;
    }
        #contentGame {
            border: 1px solid black;
            width: 800px;
            height: 600px;
            position: relative;
            top: 5%;
            display: inline-block;
        }

        .mouche {
            width: 50px;
            height: 50px;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>World of bugs</h1>
    <div id="contentGame"></div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        startGame();

        posX = null;
        posY = null;

        $('#contentGame').mousemove(function(event){
            posX = event.pageX - this.offsetLeft;
            posY =  event.pageY - this.offsetTop;
        });
        $('#contentGame').mouseleave(function(event){
            posX = null;
            posY = null;
        });

    });


    function startGame() {
        gcW = $('#contentGame').width();
        gcH = $('#contentGame').height();
        var nbMouche = 50;

        for(var i = 0; i < nbMouche; i++){
            $('#contentGame').append('<div class="mouche mouche_'+i+'"><img width="100%" height="100%" src="./img/maRight.png"/></div>');
            posMoucheX = Math.floor(Math.random() * (gcW - $('.mouche_'+i).width()));
            posMoucheY = Math.floor(Math.random() * (gcH - $('.mouche_'+i).height()));
            $('.mouche_'+i).css({'left' : posMoucheX});
            $('.mouche_'+i).css({'top' : posMoucheY});
        }

        speedAnim = 100;
        setInterval(mouvementMouche, speedAnim);

    }


    function mouvementMouche(){

        $('.mouche').each(function(){
            // a chaque appel les mouche se deplace de 0 à (largeur / hauteur max)/2 de l'element
            // pour 50px de large = 0 - 25px vers la gauche ou la droite
            mouvLeft = Math.floor((Math.random() * ($(this).width()/2) ));
            mouvTop = Math.floor((Math.random() * ($(this).height()/2) ));


            moucheX = parseInt($(this).css('left'));
            moucheY = parseInt($(this).css('top'));



            // Mouvement aleatoire contenu dans le cadre
            if((moucheX >= 0 && moucheX <= gcW) && (moucheY >= 0 && moucheY <= gcH)){

                var directionMouvTop = '';
                var directionMouvLeft = '';

                // permet de choisir la direction du mouvement de la mouche
                var directionLeft = Math.round(Math.random());
                var directionTop = Math.round(Math.random());


                // le point x = 0 et y = 0 est est le coin en haut a gauche de la div contentGame


                // si 0 vers la droite
                if(directionLeft == 0) {
                    directionMouvLeft =  '+=';
                    if($(' img', this).attr('src') != './img/maRight.png'){
                        $(' img', this).attr({'src' : './img/maRight.png'});
                    }
                }else{
                    directionMouvLeft =  '-=';
                    if($(' img', this).attr('src') != './img/maLeft.png'){
                        $(' img', this).attr({'src' : './img/maLeft.png'});
                    }
                }

                // si 0 vers le bas
                if(directionTop == 0) {
                    directionMouvTop =  '+=';
                }else{
                    directionMouvTop =  '-=';
                }



                $(this).css({'left' : directionMouvLeft+mouvLeft, 'top' : directionMouvTop+mouvTop});
            }




            // si le curseur est present dans contentGame
            if(posX != null && posY != null){

                if (moucheX <= posX) {
                    $(this).css({'left' : '+=' + mouvLeft});
                    if($(' img', this).attr('src') != './img/maRight.png'){
                        $(' img', this).attr({'src' : './img/maRight.png'});
                    }
                }

                if (moucheY <= posY) {
                    $(this).css({'top' : '+=' + mouvTop});
                }

                if (moucheX >= posX) {
                    $(this).css({'left' : '-=' + mouvLeft });
                    if($(' img', this).attr('src') != './img/maLeft.png'){
                        $(' img', this).attr({'src' : './img/maLeft.png'});
                    }
                }

                if (moucheY >= posY) {
                    $(this).css({'top' : '-=' + mouvTop });
                }

            }

            //Empêche les mouches de sortir de contentGame
            if (moucheX <= 0) {
                $(this).css({'left' : '+=' + $(this).width()});
            }
            if(moucheY <= 0) {
                $(this).css({'top' : '+=' + $(this).height()});
            }
            if (moucheX >= (gcW-$(this).width())) {
                $(this).css({'left' : '-=' + $(this).width() });
            }
            if(moucheY >= (gcH-$(this).height())) {
                $(this).css({'top' : '-=' + $(this).height() });
            }





        });

    }


    // code pour empêcher la selection des element html (surlignage bleu)
    function ffalse()
    {
            return false;
    }
    function ftrue()
    {
            return true;
    }
    document.onselectstart = new Function ("return false");
    if(window.sidebar)
    {
            document.onmousedown = ffalse;
            document.onclick = ftrue;
    }


</script>
</html>

 et les deux images du dossier img/ :