<!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"><g id="g1"></g></svg>
<div id="div1"></div>
<div id="div2">
<select id="selco">
<option value="Pink">Pink</option>
<option value="LightPink">LightPink</option>
<option value="HotPink">HotPink</option>
<option value="DeepPink">DeepPink</option>
<option value="PaleVioletRed">PaleVioletRed</option>
<option value="MediumVioletRed">MediumVioletRed</option>
<option value="LightSalmon">LightSalmon</option>
<option value="Salmon">Salmon</option>
<option value="DarkSalmon">DarkSalmon</option>
<option value="LightCoral">LightCoral</option>
<option value="IndianRed">IndianRed</option>
<option value="Crimson">Crimson</option>
<option value="Firebrick">Firebrick</option>
<option value="DarkRed">DarkRed</option>
<option value="Red">Red</option>
<option value="OrangeRed">OrangeRed</option>
<option value="Tomato">Tomato</option>
<option value="Coral">Coral</option>
<option value="DarkOrange">DarkOrange</option>
<option value="Orange">Orange</option>
<option value="Yellow">Yellow</option>
<option value="LightYellow">LightYellow</option>
<option value="LemonChiffon">LemonChiffon</option>
<option value="LightGoldenrodYellow ">LightGoldenrodYellow </option>
<option value="PapayaWhip">PapayaWhip</option>
<option value="Moccasin">Moccasin</option>
<option value="PeachPuff">PeachPuff</option>
<option value="PaleGoldenrod">PaleGoldenrod</option>
<option value="Khaki">Khaki</option>
<option value="DarkKhaki">DarkKhaki</option>
<option value="Gold">Gold</option>
<option value="Cornsilk">Cornsilk</option>
<option value="BlanchedAlmond">BlanchedAlmond</option>
<option value="Bisque">Bisque</option>
<option value="NavajoWhite">NavajoWhite</option>
<option value="Wheat">Wheat</option>
<option value="Burlywood">Burlywood</option>
<option value="Tan">Tan</option>
<option value="RosyBrown">RosyBrown</option>
<option value="SandyBrown">SandyBrown</option>
<option value="Goldenrod">Goldenrod</option>
<option value="DarkGoldenrod">DarkGoldenrod</option>
<option value="Peru">Peru</option>
<option value="Chocolate">Chocolate</option>
<option value="SaddleBrown">SaddleBrown</option>
<option value="Sienna">Sienna</option>
<option value="Brown">Brown</option>
<option value="Maroon">Maroon</option>
<option value="DarkOliveGreen">DarkOliveGreen</option>
<option value="Olive">Olive</option>
<option value="OliveDrab">OliveDrab</option>
<option value="YellowGreen">YellowGreen</option>
<option value="LimeGreen">LimeGreen</option>
<option value="Lime">Lime</option>
<option value="LawnGreen">LawnGreen</option>
<option value="Chartreuse">Chartreuse</option>
<option value="GreenYellow">GreenYellow</option>
<option value="SpringGreen">SpringGreen</option>
<option value="MediumSpringGreen ">MediumSpringGreen </option>
<option value="LightGreen">LightGreen</option>
<option value="PaleGreen">PaleGreen</option>
<option value="DarkSeaGreen">DarkSeaGreen</option>
<option value="MediumAquamarine">MediumAquamarine</option>
<option value="MediumSeaGreen">MediumSeaGreen</option>
<option value="SeaGreen">SeaGreen</option>
<option value="ForestGreen">ForestGreen</option>
<option value="Green">Green</option>
<option value="DarkGreen">DarkGreen</option>
<option value="Aqua">Aqua</option>
<option value="Cyan">Cyan</option>
<option value="LightCyan">LightCyan</option>
<option value="PaleTurquoise">PaleTurquoise</option>
<option value="Aquamarine">Aquamarine</option>
<option value="Turquoise">Turquoise</option>
<option value="MediumTurquoise">MediumTurquoise</option>
<option value="DarkTurquoise">DarkTurquoise</option>
<option value="LightSeaGreen">LightSeaGreen</option>
<option value="CadetBlue">CadetBlue</option>
<option value="DarkCyan">DarkCyan</option>
<option value="Teal">Teal</option>
<option value="LightSteelBlue">LightSteelBlue</option>
<option value="PowderBlue">PowderBlue</option>
<option value="LightBlue">LightBlue</option>
<option value="SkyBlue">SkyBlue</option>
<option value="LightSkyBlue">LightSkyBlue</option>
<option value="DeepSkyBlue">DeepSkyBlue</option>
<option value="DodgerBlue">DodgerBlue</option>
<option value="CornflowerBlue">CornflowerBlue</option>
<option value="SteelBlue">SteelBlue</option>
<option value="RoyalBlue">RoyalBlue</option>
<option value="Blue">Blue</option>
<option value="MediumBlue">MediumBlue</option>
<option value="DarkBlue">DarkBlue</option>
<option value="Navy">Navy</option>
<option value="MidnightBlue">MidnightBlue</option>
<option value="Lavender">Lavender</option>
<option value="Thistle">Thistle</option>
<option value="Plum">Plum</option>
<option value="Violet">Violet</option>
<option value="Orchid">Orchid</option>
<option value="Fuchsia">Fuchsia</option>
<option value="Magenta">Magenta</option>
<option value="MediumOrchid">MediumOrchid</option>
<option value="MediumPurple">MediumPurple</option>
<option value="BlueViolet">BlueViolet</option>
<option value="DarkViolet">DarkViolet</option>
<option value="DarkOrchid">DarkOrchid</option>
<option value="DarkMagenta">DarkMagenta</option>
<option value="Purple">Purple</option>
<option value="Indigo">Indigo</option>
<option value="DarkSlateBlue">DarkSlateBlue</option>
<option value="SlateBlue">SlateBlue</option>
<option value="MediumSlateBlue ">MediumSlateBlue </option>
<option value="White">White</option>
<option value="Snow">Snow</option>
<option value="Honeydew">Honeydew</option>
<option value="MintCream">MintCream</option>
<option value="Azure">Azure</option>
<option value="AliceBlue">AliceBlue</option>
<option value="GhostWhite">GhostWhite</option>
<option value="WhiteSmoke">WhiteSmoke</option>
<option value="Seashell">Seashell</option>
<option value="Beige">Beige</option>
<option value="OldLace">OldLace</option>
<option value="FloralWhite">FloralWhite</option>
<option value="Ivory">Ivory</option>
<option value="AntiqueWhite">AntiqueWhite</option>
<option value="Linen">Linen</option>
<option value="LavenderBlush">LavenderBlush</option>
<option value="MistyRose">MistyRose</option>
<option value="Gainsboro">Gainsboro</option>
<option value="LightGray">LightGray</option>
<option value="Silver">Silver</option>
<option value="DarkGray">DarkGray</option>
<option value="Gray">Gray</option>
<option value="DimGray">DimGray</option>
<option value="LightSlateGray">LightSlateGray</option>
<option value="SlateGray">SlateGray</option>
<option value="DarkSlateGray">DarkSlateGray</option>
<option value="Black">Black</option>
</select>
</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 circ1;
var ncirc=0;
var col1="#000";
function mov(e){
mx=Math.round(e.clientX/10)*10;
my=Math.round(e.clientY/10)*10;
}
function stats(){
div1.innerHTML="x: "+mx+"<br>y: "+my+"<br>color: "+col1+"<br>total: "+ncirc;
}
function cli(e){
col1=document.getElementById("selco").value;
if(document.getElementById(mx+"_"+my)==null){
circ1=document.createElementNS(svg1.namespaceURI,"circle");
circ1.setAttributeNS(null,"cx",mx);
circ1.setAttributeNS(null,"cy",my);
circ1.setAttributeNS(null,"r",4);
circ1.setAttributeNS(null,"fill",col1);
circ1.setAttributeNS(null,"id",mx+"_"+my);
g1.appendChild(circ1);
ncirc++;}
else{
g1.removeChild(document.getElementById(mx+"_"+my));
nrect--}
}
setInterval(stats,1);
document.body.onmousemove=mov;
document.body.onmousedown=cli;
</script>
</body>
</html>
