<!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;
}
#svg1{
width:500px;
height:500px;
border:1px solid black;
}
#div1{
}
</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 div1=document.getElementById("div1");
var mColor=["#4524FF","#13B70F","#F2E41D","#FF9417","#FF1615"];
var x1=0;
var x2=0;
var y1=0;
var y2=0;
var mx="n/a";
var my="n/a";
var box=document.getElementById(mx+"_"+my);
var col1,i,j,chx,chy;
for(i=0;i<=9;i++){
for(j=0;j<=9;j++){
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","12px");
rect1.setAttributeNS(null,"ry","12px");
rect1.setAttributeNS(null,"width","50px");
rect1.setAttributeNS(null,"height","50px");
rect1.setAttributeNS(null,"fill",col1);
rect1.setAttributeNS(null,"stroke","#fff");
rect1.setAttributeNS(null,"stroke-width","1px");
rect1.setAttributeNS(null,"id",x1+"_"+y1);
g1.appendChild(rect1);
x1=x1+50;
}
x1=0;
y1=y1+50;
}
function mouseClick(e){
mx=Math.floor(e.clientX/50)*50;
my=Math.floor(e.clientY/50)*50;
div1.innerHTML="x: "+mx+" y: "+my;
if(box=document.getElementById(mx+"_"+my)!=null){
box=document.getElementById(mx+"_"+my);
check();
g1.removeChild(box);
}}
function fall(){
if(document.getElementById(x2+"_"+y2)!=null&&document.getElementById(x2+"_"+(y2+50))==null){
document.getElementById(x2+"_"+y2).setAttribute("y",y2+50);
document.getElementById(x2+"_"+y2).setAttribute("id",x2+"_"+(y2+50));
}}
setInterval(fall,1);
function scanX(){
x2=x2+50;
if(x2>450){x2=0;}
div1.innerHTML="click x: "+mx+" y: "+my+"<br>scan id: "+x2+"_"+y2;
}
setInterval(scanX,1);
function scanY(){
y2=y2+50;
if(y2>400){y2=0;}
}
setInterval(scanY,10);
function check(){
if(document.getElementById(mx+50+"_"+my)!=null&&document.getElementById(mx+"_"+my).getAttribute("fill")==document.getElementById(mx+50+"_"+my).getAttribute("fill")){
g1.removeChild(document.getElementById(mx+50+"_"+my));}
if(document.getElementById(mx-50+"_"+my)!=null&&document.getElementById(mx+"_"+my).getAttribute("fill")==document.getElementById(mx-50+"_"+my).getAttribute("fill")){
g1.removeChild(document.getElementById(mx-50+"_"+my));}
}
svg1.onclick=mouseClick;
</script>
</body>
</html>
