<!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>
