<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>game</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
font-family:sans-serif;
overflow:hidden;
}
#div1{
position:absolute;
bottom:0;
left:0;
-moz-user-select:none;
user-select:none;
}
#div2{
position:absolute;
top:0;
right:0;
}
#svg1{
width:100%;
height:100%;
}
</style>
</head>
<body>
<svg id="svg1">
<path d="m0 0L0 0" id="pat1" stroke="#000"/>
<path d="m0 0L0 0" id="pat2" stroke="#000"/>
<path d="m0 0L0 0" id="pat3" stroke="#000"/>
<path d="m0 0L0 0" id="pat4" stroke="#000"/>
<g id="g1"></g></svg>
<div id="div1"></div>
<div id="div2"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerWidth;
var div1=document.getElementById("div1");
var div1=document.getElementById("div1");
var svg1=document.getElementById("svg1");
var mx=0;
var my=0;
var path1;
var pat1=document.getElementById("pat1");
var pat2=document.getElementById("pat2");
var pat3=document.getElementById("pat3");
var pat4=document.getElementById("pat4");
var ncirc=0;
var col1="#000";
function mov(e){
mx=Math.round(e.clientX/10)*10;
my=Math.round(e.clientY/10)*10;
pat1.setAttribute("d","m0 0L"+mx+" "+my);
pat2.setAttribute("d","m"+ww+" 0L"+mx+" "+my);
pat3.setAttribute("d","m0 "+wh+"L"+mx+" "+my);
pat4.setAttribute("d","m"+ww+" "+wh+"L"+mx+" "+my);
}
function stats(){
div1.innerHTML="x: "+mx+"<br>y: "+my+"<br>color: "+col1+"<br>total: "+ncirc;
}
function cli(e){
col1="royalblue";
if(document.getElementById(mx+"_"+my)==null){
path1=document.createElementNS(svg1.namespaceURI,"path");
path1.setAttributeNS(null,"d","m0 0L"+mx+" "+my+"L"+mx+" "+my+" "+ww+" 0L"+ww+" 0 "+ww+" "+wh+"L"+mx+" "+my+"L0 "+wh);
path1.setAttributeNS(null,"stroke",col1);
path1.setAttributeNS(null,"fill","none");
path1.setAttributeNS(null,"id",mx+"_"+my);
g1.appendChild(path1);
ncirc++;}
else{
g1.removeChild(document.getElementById(mx+"_"+my));
nrect--}
}
setInterval(stats,1);
document.body.onmousemove=mov;
document.body.onmousedown=cli;
</script>
</body>
</html>
