samedi 15 juin 2019

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

<head>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
font-family:sans-serif;
font-size:40px;
}
#svg1{
width:100%;
height:100%;
}
#div1{
position:absolute;
top:0;
left:0;
background-color:rgba(255,255,255,0.8);
border-radius:10px;
}
</style>
<title>game</title>
</head>

<body>
<svg id="svg1">
<g id="g1"></g>
</svg>
<div id="div1"></div>
<div id="div2"></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 div2=document.getElementById("div2");
var x1=0;
var y1=0;
var side=Math.round(ww/50);
var speed=10;
var myTimer1=setInterval(addRect,speed);
var myTimer2;
var nrect=0;
var mColor=["#4524FF","#13B70F","#F2E41D","#FF9417","#FF1615"];

function addRect(){
col1=mColor[Math.floor(Math.random()*mColor.length)];
var rect1=document.createElementNS(svg1.namespaceURI,"rect");
rect1.setAttributeNS(null,"x",x1);
rect1.setAttributeNS(null,"y",y1);
rect1.setAttributeNS(null,"rx",side/3);
rect1.setAttributeNS(null,"ry",side/3);
rect1.setAttributeNS(null,"width",side);
rect1.setAttributeNS(null,"height",side);
rect1.setAttributeNS(null,"fill",col1);
rect1.setAttributeNS(null,"stroke","#fff");
rect1.setAttributeNS(null,"stroke-width",1);
rect1.setAttributeNS(null,"id",x1+"_"+y1);
nrect++;
g1.appendChild(rect1);
div1.innerHTML=nrect;
x1=x1+side;
if(x1>=ww){x1=0;y1=y1+side;};
if(y1>=wh){clearInterval(myTimer1);myTimer2=setInterval(remRect,speed)}
}

function remRect(){
nrect--;
div1.innerHTML=nrect;
g1.removeChild(g1.firstChild);
if(nrect==0){clearInterval(myTimer2);x1=0;y1=0;myTimer1=setInterval(addRect,speed);}
}

</script>

</body>
</html>
By -