mardi 28 mai 2019

js snake

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>snake</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
     
        body {
            font-family: sans-serif;
            font-size: 12px;
            overflow: hidden;
        }
     
        #svg1 {
            width: 100%;
            height: 100%;
        }
     
        #div1 {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>

<body>
    <svg id="svg1">
        <g id="g1">
        </g>
    </svg>
    <div id="div1">
    </div>
    <script>
        var ww = window.innerWidth;
        var wh = window.innerHeight;
        var svg1 = document.getElementById("svg1");
        var g1 = document.getElementById("g1");
        var div1 = document.getElementById("div1");
        var x0 = ww / 2;
        var y0 = wh / 2;
        var x1, y1;
        var i = 1;
        var max = 500;
var changecolor = 0;
var color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);
        var radius = 20;
        var myArray = [-1.57, 0, 1.57, 3.14];
        var check = [];
        var angle = myArray[Math.floor(Math.random() * myArray.length)];
        check.push(angle);
        x1 = Math.round(x0 + Math.cos(angle) * radius);
        y1 = Math.round(y0 + Math.sin(angle) * radius);
        div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1;

        function Dopamine() {
            var path1 = document.createElementNS(svg1.namespaceURI, "path");
            path1.setAttributeNS(null, "d", "m" + x0 + " " + y0 + "L" + x1 + " " + y1);
            path1.setAttributeNS(null,"stroke",color1);
            path1.setAttributeNS(null, "stroke-width", "10px");
            path1.setAttributeNS(null, "fill", "none");
            path1.setAttributeNS(null, "opacity", "0.5");
            path1.setAttributeNS(null, "stroke-linecap", "round");
            g1.appendChild(path1);
            changecolor++;
if(changecolor==10){color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);changecolor=0;}
i++;
            if (i == max + 1) {
                g1.removeChild(g1.firstChild);
                i = max;
            }
            x0 = x1;
            y0 = y1;
            if (check[0] == 0) {
                myArray = [-1.57, 0, 1.57]
            }
            if (check[0] == 3.14) {
                myArray = [-1.57, 3.14, 1.57]
            }
            if (check[0] == 1.57) {
                myArray = [1.57, 3.14, 0]
            }
            if (check[0] == -1.57) {
                myArray = [-1.57, 3.14, 0]
            }
            check.pop();
            angle = myArray[Math.floor(Math.random() * myArray.length)];
            check.push(angle);
            x1 = Math.round(x0 + Math.cos(angle) * radius);
            y1 = Math.round(y0 + Math.sin(angle) * radius);
            if (x1 < 0) {
                x1 = x1 + (radius * 2);
            }
            if (x1 > ww) {
                x1 = x1 - (radius * 2);
            }
            if (y1 < 0) {
                y1 = y1 + (radius * 2);
            }
            if (y1 > wh) {
                y1 = y1 - (radius * 2);
            }
            div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1 + "<br>check : " + check;
        }
        setInterval(Dopamine, 90);
    </script>
</body>

</html>