nothing: juin 2019

samedi 22 juin 2019

HB

mercredi 19 juin 2019

tool

<!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>

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>

vendredi 14 juin 2019

mColor

game

mardi 11 juin 2019

7erreurs

mardi 4 juin 2019

in progress

<!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>