<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>game</title>
<style>
html,body{
height:100%;
margin:0;
}
#svg1{
width:500px;
height:500px;
border:1px solid grey;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<svg id="svg1">
<g id="g1"></g>
</svg>
<div id="div1"></div>
<script>
var svg1=document.getElementById("svg1");
var g1=document.getElementById("g1");
var svgw=svg1.clientWidth;
var svgh=svg1.clientHeight;
var div1=document.getElementById("div1");
var mColor = ["red","blue","green","gold"];
var x0=0;
var y0=0;
var box1,color1,boxcol1;
div1.innerHTML="svg width: "+svgw+" svg height: "+svgh;
function mouseClick(event){
mx=Math.floor(event.clientX/50)*50;
my=Math.floor(event.clientY/50)*50;
box1=document.getElementById(mx+"_"+my);
boxcol1=box1.getAttribute("fill");
g1.removeChild(box1);
div1.innerHTML="svg width: "+svgw+" height: "+svgh+"<br>click x: "+mx+" y: "+my+" color:"+boxcol1;
}
for(i=0;i<=9;i++){
for(j=0;j<=9;j++){
color1=mColor[Math.floor(Math.random() * mColor.length)];
var rect1 = document.createElementNS(svg1.namespaceURI, "rect");
rect1.setAttributeNS(null, "x", x0);
rect1.setAttributeNS(null, "y", y0);
rect1.setAttributeNS(null, "width", "50px");
rect1.setAttributeNS(null, "height", "50px");
rect1.setAttributeNS(null, "fill",color1);
rect1.setAttributeNS(null, "id",x0+"_"+y0);
rect1.setAttributeNS(null, "id",x0+"_"+y0);
g1.appendChild(rect1);
x0=x0+50;
}
x0=0;
y0=y0+50;
}
svg1.onclick=mouseClick;
</script>
</body>
</html>
