nothing

vendredi 14 juin 2019

mardi 11 juin 2019

mardi 4 juin 2019

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

vendredi 31 mai 2019

boxes

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

mardi 28 mai 2019

js snake

<!doctype html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>snake</title>
<style>
html,
body {
height: 100%;
margin: 0;
}

body {
font-family: sans-serif;
font-size: 12px;
overflow: hidden;
}

#svg1 {
width: 100%;
height: 100%;
}

#div1 {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>

<body>
<svg id="svg1">
<g id="g1">
</g>
</svg>
<div id="div1">
</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 x0 = ww / 2;
var y0 = wh / 2;
var x1, y1;
var i = 1;
var max = 500;
var changecolor = 0;
var color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);
var radius = 20;
var myArray = [-1.57, 0, 1.57, 3.14];
var check = [];
var angle = myArray[Math.floor(Math.random() * myArray.length)];
check.push(angle);
x1 = Math.round(x0 + Math.cos(angle) * radius);
y1 = Math.round(y0 + Math.sin(angle) * radius);
div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1;

function Dopamine() {
var path1 = document.createElementNS(svg1.namespaceURI, "path");
path1.setAttributeNS(null, "d", "m" + x0 + " " + y0 + "L" + x1 + " " + y1);
path1.setAttributeNS(null,"stroke",color1);
path1.setAttributeNS(null, "stroke-width", "10px");
path1.setAttributeNS(null, "fill", "none");
path1.setAttributeNS(null, "opacity", "0.5");
path1.setAttributeNS(null, "stroke-linecap", "round");
g1.appendChild(path1);
changecolor++;
if(changecolor==10){color1 = "#"+Math.round(0xFFFFFF * Math.random()).toString(16);changecolor=0;}
i++;
if (i == max + 1) {
g1.removeChild(g1.firstChild);
i = max;
}
x0 = x1;
y0 = y1;
if (check[0] == 0) {
myArray = [-1.57, 0, 1.57]
}
if (check[0] == 3.14) {
myArray = [-1.57, 3.14, 1.57]
}
if (check[0] == 1.57) {
myArray = [1.57, 3.14, 0]
}
if (check[0] == -1.57) {
myArray = [-1.57, 3.14, 0]
}
check.pop();
angle = myArray[Math.floor(Math.random() * myArray.length)];
check.push(angle);
x1 = Math.round(x0 + Math.cos(angle) * radius);
y1 = Math.round(y0 + Math.sin(angle) * radius);
if (x1 < 0) {
x1 = x1 + (radius * 2);
}
if (x1 > ww) {
x1 = x1 - (radius * 2);
}
if (y1 < 0) {
y1 = y1 + (radius * 2);
}
if (y1 > wh) {
y1 = y1 - (radius * 2);
}
div1.innerHTML = "paths : " + i + "/" + max + "<br>angle : " + angle + "<br>x0 : " + x0 + "<br>y0 : " + y0 + "<br>x1 : " + x1 + "<br>y1 : " + y1 + "<br>check : " + check;
}
setInterval(Dopamine, 90);
</script>
</body>

</html>

vendredi 24 mai 2019

sente

mercredi 17 avril 2019

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
<title>Turtle</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        body {
            color:#fff;
            font-family: sans-serif;
            font-size: 12px;
           // overflow: hidden;
        }

        #div1 {
            position: absolute;
            top: 0;
            left: 0;
        }
        #div2 {
        font-size:60px;
            position: absolute;
            top: 0;
            right: 0;
        }
        #div3 {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #div4 {
    font-size:100px;
            position: absolute;
top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
        }

        #svg1 {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <svg id="svg1">
    <rect width="100%" height="100%" fill="royalblue" opacity="1"/>
        <path d="" stroke="#fff" stroke-width="100px" fill="none" id="p1" stroke-linecap="round" opacity="0.125" />
    <circle cx="0" cy="0" r="50px" fill="red" id="ball"/>

        <g transform="translate(0 0)" id="turt1">
            <image xlink:href="https://art.pixilart.com/7e869bb807aa2f0.png" width="100" height="100" x="-50" y="-50" transform="rotate(0 0 0)" id="i1" preserveaspectratio="none" />
        </g>

        <animate attributename="height" begin="0s" repeatcount="indefinite" values="100;90;100" dur="1.5s" xlink:href="#i1" />
    <animate attributename="y" begin="0s" repeatcount="indefinite" values="-50;-45;-50" dur="1.5s" xlink:href="#i1" />

        <g transform="translate(0 0)" id="req1">
    <image xlink:href="http://3.bp.blogspot.com/-ssw_Nk4W0B0/WPgSr_HVRKI/AAAAAAAAHIs/qJEBHCS5OIs7Yq1gruw0HPr-ctCZnSqYQCK4B/s1600/Indie%2BGame%2BDarkness%2BRevealed%2B-%2BShark%2B2.gif" width="400px" height="400px" x="-200" y="-200" transform="rotate(0 0 0)" id="i2"/>
    </g>

    </svg>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <script>
        var ww = window.innerWidth;
        var wh = window.innerHeight;
        var ox = Math.round(ww / 2);
        var oy = Math.round(wh / 2);
        var dx = Math.round(ww / 2);
        var dy = Math.round(wh / 2);
        var ball = document.getElementById("ball"

);
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
    var div3 = document.getElementById("div3");
    var div4 = document.getElementById("div4");
        var p1 = document.getElementById("p1");
        var turt1 = document.getElementById("turt1");
        var req1 = document.getElementById("req1");
        var i1 = document.getElementById("i1");
        var ix = Math.abs(ox - dx);
        var iy = Math.abs(oy - dy);
        var stx = 1;
        var sty = 1;
        var deg = 0;
    var x1=Math.round(Math.random()*ww);
    var y1=Math.round(Math.random()*wh);
    var score=0;
    var oxe=0;
    var oye=0;
        var dxe = Math.round(Math.random()*ww);
        var dye = Math.round(Math.random()*wh);
        var ixe = Math.abs(oxe - dxe);
        var iye = Math.abs(oye - dye);
        var stxe = 1;
        var stye = 1;

    ball.setAttribute("cx",x1);ball.setAttribute("cy",y1);
        p1.setAttribute("d", "m" + ox + " " + oy + "L" + dx + " " + dy);
        turt1.setAttribute("transform", "translate(" + ox + " " + oy + ")");
        req1.setAttribute("transform", "translate(" + oxe + " " + oye + ")");

        if (ix > iy) {
            stx = 1;
            sty = 1 / (ix / iy);
        }
        if (ix < iy) {
            stx = 1 / (iy / ix);
            sty = 1;
        }

        if (ixe > iye) {
            stxe = 3;
            stye = 3 / (ixe / iye);
        }
        if (ixe < iye) {
            stxe = 3 / (iye / ixe);
            stye = 3;
        }

        function bouge() {
            if (ox <= dx) {
                ox = ox + stx;
            }
            if (ox >= dx) {
                ox = ox - stx;
            }
            if (oy <= dy) {
                oy = oy + sty;
            }
            if (oy >= dy) {
                oy = oy - sty;
            }
            ix = Math.round(Math.abs(ox - dx));
            iy = Math.round(Math.abs(oy - dy));
            turt1.setAttribute("transform", "translate(" + ox + " " + oy + ")");
            div1.innerHTML = "circle x: " + Math.round(ox) + "<br>circle y: " + Math.round(oy) + "<br>click x: " + dx + "<br>click y: " + dy + "<br>distance x: " + ix + "<br>distance y: " + iy + "<br>step x: " + Math.round(stx * 100) / 100 + "<br>step y: " + Math.round(sty * 100) / 100 + "<br>angle : " + deg;
        }

        function bougee() {
        var change=Math.floor(Math.sqrt(((oxe-dxe)*(oxe-dxe))+((oye-dye)*(oye-dye))));
            if (oxe <= dxe) {
                oxe = oxe + stxe;
            }
            if (oxe >= dxe) {
                oxe = oxe - stxe;
            }
            if (oye <= dye) {
                oye = oye + stye;
            }
            if (oye >= dye) {
                oye = oye - stye;
            }
            if (change<=3){dxe = Math.round(Math.random()*ww);dye = Math.round(Math.random()*wh);}
            ixe = Math.round(Math.abs(oxe - dxe));
            iye = Math.round(Math.abs(oye - dye));
            req1.setAttribute("transform", "translate(" + oxe + " " + oye + ")");
            div3.innerHTML = "enemy x: " + Math.round(oxe) + "<br>enemy y: " + Math.round(oye) + "<br>random x: " + dxe + "<br>random y: " + dye + "<br>distance x: " + ixe + "<br>distance y: " + iye + "<br>step x: " + Math.round(stxe * 100) / 100 + "<br>step y: " + Math.round(stye * 100) / 100 +"<br>distance: "+change;
            dege = Math.round(Math.atan2(dye - (oye), dxe - (oxe)) * 180 / Math.PI) + 180;
            i2.setAttribute("transform", "rotate(" + dege + " 0 0)");

        }

        document.body.onclick = function(event) {
            dx = event.clientX;
            dy = event.clientY;
            deg = Math.round(Math.atan2(dy - (oy), dx - (ox)) * 180 / Math.PI) + 90;
            i1.setAttribute("transform", "rotate(" + deg + " 0 0)");
            p1.setAttribute("d", "m" + ox + " " + oy + "L" + dx + " " + dy);
            ix = Math.round(Math.abs(ox - dx));
            iy = Math.round(Math.abs(oy - dy));
            if (ix > iy) {
                stx = 1;
                sty = 1 / (ix / iy);
            }
            if (ix < iy) {
                stx = 1 / (iy / ix);
                sty = 1;
            }
        };

        setInterval(bouge, 1);
        setInterval(bougee, 1);

    function ccol(){
    var colx=ox-x1;
    var coly=oy-y1;
    var distance=Math.sqrt(colx*colx+coly*coly);
    div2.innerHTML="score: "+score;
    if (distance < 75) {
    score++;
    if(score==4){div4.innerHTML="YOU WIN!";}
    if(score<4){div4.innerHTML="";}
    x1=Math.round(Math.random()*ww);
    y1=Math.round(Math.random()*wh);
    ball.setAttribute("cx",x1);ball.setAttribute("cy",y1);
    }}

    function ccole(){
    var colxe=oxe-ox;
    var colye=oye-oy;
    var distance=Math.sqrt(colxe*colxe+colye*colye);
    if (distance < 75) {
    score--;
    }}

    setInterval(ccol,1);
    setInterval(ccole,1);

    </script>
</body>

</html>