Mastermind_FullVersion

<html>
<head>
<title>Project_Mastermind</title>
    <script>
        var kleuren = ['geel', 'groen', 'rood', 'blauw', 'oranje'];
        var arrayLengte = 5;

        var juisteCombinatieGeraden;

        function randomArrayItem(array)
        {
            var index = Math.floor(Math.random(kleuren) * array.length);
            return array[index];
        }

        function randomKleur()
        {
            return randomArrayItem(kleuren);
        }

        function randomKleurenCombinatie(aantal)
        {
            var result = [];

            for(var i = 0; i != aantal; i++)
            {
                result.push(randomKleur());
            }

            return result;
        }

        function arraySpeler()
        {
            var speler = [];

            for(var i = 0; i < arrayLengte; i++)
            {
                var invoerSpeler = prompt("Gelieve een kleur in te vullen. geel, groen, rood, blauw of oranje. Typ stop om te stoppen!","");

                if (invoerSpeler === "stop")
                {
                    canvasLeegMaken();
                    stopMasterMind();
                }
                else if (invoerSpeler === "")
                {
                    i--;
                }
                else if (invoerSpeler === null)
                {
                    i--;
                }
                else if (invoerSpeler === "geel" || invoerSpeler === "groen" || invoerSpeler === "rood" || invoerSpeler === "blauw" || invoerSpeler === "oranje")
                {
                speler[i] = invoerSpeler;

                var ingegevenKleurSpeler = invoerSpeler;
                kleurenBundelaar(ingegevenKleurSpeler);
                }
                else
                {
                    i--;
                    //canvasLeegMaken();
                    //stopMasterMind();
                }
            }

            return speler;
        }

        function vergelijking(computer, speler)
        {
            var arrayVergelijken = [];

            for(var i = 0; i < arrayLengte; i++)
            {
                if(computer[i] === speler[i])
                {
                    arrayVergelijken.push("1");
                }
                else
                {
                    arrayVergelijken.push("0");
                }
            }

            return arrayVergelijken;
        }

        function juisteAntwoorden(array)
        {
            var juisteTeller = 0;
            var fouteTeller = 0;
            var teller = 1;

            for(var i = 0; i < arrayLengte; i++)
            {
                if(array[i] === "1")
                {
                    alert("Kleur nummer " + teller + " is juist");
                    juisteTeller += 1;
                    //juistFoutTonen("juist");
                }
                else
                {
                    alert("Kleur nummer " + teller + " is niet juist");
                    fouteTeller += 1;
                    //juistFoutTonen("fout");
                }

                teller += 1;

            }

            return juisteTeller;
        }

        function startSpel()
        {
            var code = randomKleurenCombinatie(arrayLengte);
            var spelGedaan = false;
            var pogingTeller = 0;
            var maximumAantalPogingen = 10;
            var vergelijkingArray;

            while(spelGedaan !== true && pogingTeller !== maximumAantalPogingen)
            {
                var a = arraySpeler();
                vergelijkingArray = vergelijking(code, a);

                var juisteAntwoordenSpeler = juisteAntwoorden(vergelijkingArray);

                if (juisteAntwoordenSpeler !== arrayLengte) {
                    pogingTeller += 1;
                    spelGedaan = false;
                }
                else
                {
                    juisteCombinatieGeraden = "geraden";
                    spelGedaan = true;
                }
            }
        }

        function vraagNogEenKeer()
        {
            canvasLeegMaken();

            var x;
            var r = confirm("Druk op Ok als u nog een keer wilt spelen.");

            if (r === true)
            {
                x = true;
            }
            else
            {
                x = false;
            }

            return x;
        }

        function nieuwSpelStarten(antwoord)
        {
            var nieuwSpel = antwoord;

            while(nieuwSpel !== false)
            {
                startSpel();

                if (juisteCombinatieGeraden === "geraden")
                {
                    alert("U heeft de juiste kleurencombinatie geraden, proficiat!!!")
                    canvasLeegMaken();
                }
                else
                {
                    alert("U slaagde er niet in de juiste kleurenconbinatie te raden, probeer nog een keer")
                }

                nieuwSpel = vraagNogEenKeer();
            }
            alert("U stopte met spelen, tot volgende keer.");
        }

        function startMasterMind()
        {
            canvasLeegMaken();
            nieuwSpelStarten(true);
            //juistFoutTonenTeller = 0;
        }

        function stopMasterMind()
        {
            break;
        }


        //Hier begint de code van canvas;
        var yWaarde = 0;
        var xWaarde = 0;

        function tekenCirkel(x, y, kleur)
        {
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");

            ctx.beginPath();

            var huidigeKleur = kleur;

            ctx.fillStyle = huidigeKleur;
            ctx.arc(x,y,40,0,2*Math.PI);
            ctx.fill();
        }

        function kleurenCirkelTellerX()
        {
            if (xWaarde === 0 || xWaarde === 450)
            {
                xWaarde = 50;
                return xWaarde;
            }
            else
            {
                xWaarde += 100;
                return xWaarde;
            }
        }

        function kleurenCirkelTellerY()
        {
            if (yWaarde === 0)
            {
                yWaarde = 50;
                return yWaarde;
            }
            else if (yWaarde <= 950 && xWaarde === 50)
            {
                yWaarde += 100;
                return yWaarde;
            }
            else
            {
                return yWaarde;
            }
        }

        function kleurCirkel(kleurVanSpeler)
        {
            var kleur = kleurVanSpeler;

            if(kleur === "geel")
            {
                return "FFFF00";
            }
            else if(kleur === "groen")
            {
                return "#00FF00";
            }
            else if(kleur === "rood")
            {
                return "#FF0000";
            }
            else if(kleur === "blauw")
            {
                return "#0000FF";
            }
            else if(kleur === "oranje")
            {
                return "#FF6600";
            }
        }

        function kleurenBundelaar(kleurSpelerArray)
        {
            var a = kleurSpelerArray;
            var kleurCode = kleurCirkel(a);
            var x = kleurenCirkelTellerX();
            var y = kleurenCirkelTellerY();
            tekenCirkel(x, y, kleurCode);
        }

        function canvasLeegMaken()
        {
            xWaarde = 0;
            yWaarde = 0;

            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");

            ctx.clearRect(0,0,500,1000);
        }

var juistFoutTonenTeller = 0;

        function juistFoutTonen(juistFoutWaarde)
        {
            juistFoutTonenTeller += 1;

            if (juistFoutWaarde === "juist")
            {
                console.write("juist");

                if (juistFoutTonenTeller !== 5)
                {
                    console.write(",");
                }
            }
            else
            {
                console.write("fout");

                if (juistFoutTonenTeller !== 5)
                {
                    console.write(",");
                }
            }
        }
    </script>
</head>
<body>
<p>
<button onclick="startMasterMind()">start mastermind</button>
</p>
    <script>

    </script>

    <canvas id="myCanvas" width="500" height="1000">Your browser does not support the HTML5 canvas tag. Please use Chrome or Firefox.</canvas>
</body>
</html>