nothing

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>

jeudi 14 mars 2019

fight (in progress)

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Fight</title>
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/153/crossed-swords_2694.png"/>
<style>
html,body{
height:100%;
margin:0;
}
body{
-moz-user-select:none;
user-select:none;
background:#555;
background-repeat:repeat;
font-family:'Bungee',cursive;
// overflow:hidden;
}
#svg1{
width:100%;
height:100%;
}
#d1{
position:absolute;
width:50%;
height:100%;
top:0;
left:0;
text-align:center;
}
#d2{
position:absolute;
width:50%;
height:100%;
top:0;
right:0;
text-align:center;
}
table{
width:80%;
border-collapse:collapse;
}
table,th,td{
font-size:10px;
text-align:center;
border:1px solid black;
background:#aaa;
}
td{
width:20%;
margin:0;
}
input{
text-align:center;
width:100%;
border:none;
outline:none;
background:none;
}
input:focus{
border:none;
}
</style>
</head>
<body>
<svg id="svg1">
<rect x="0" y="90%" fill="#ea4335" height="10%" width="50%" id="lifebar1"/>
<text x="2%" y="95%" font-size="sans-serif" text-anchor="middle" alignment-baseline="central" font-size="120">100</text>
<rect x="50%" y="90%" fill="#ea4335" height="10%" width="50%" id="lifebar2"/>
<text x="98%" y="95%" font-size="sans-serif" text-anchor="middle" alignment-baseline="central" font-size="120">100</text>
<g transform="translate(0 0)" id="g1a">
<g transform="scale(-1 1)" id="g1b">
<image xlink:href="https://i.pinimg.com/originals/a2/85/73/a2857398516c9bf584674fb68bee1619.gif" width="122" height="190" x="-61" y="-95"/>
</g>
</g>
<g transform="translate(0 0)" id="g2a">
<g transform="scale(1 1)" id="g2b">
<image xlink:href="https://i.pinimg.com/originals/a2/85/73/a2857398516c9bf584674fb68bee1619.gif" width="122" height="190" x="-61" y="-95"/>
</g>
</g>
<circle cx="50%" cy="50%" r="5%" fill="#ea4335"/>
<text x="50%" y="50%" font-size="sans-serif" text-anchor="middle" alignment-baseline="central" font-size="120">START</text>
</svg>
<div id="d1">PLAYER 1
<br>
<center>
<table>
<tr><td>STRENGTH</td><td>CONSTITUTION</td><td>DEFENSE</td><td>DEXTERITY</td><td>LUCK</td></tr>
<tr><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td></tr>
</table>
</center>
</div>
<div id="d2">PLAYER 2
<br>
<center>
<table>
<tr><td>STRENGTH</td><td>CONSTITUTION</td><td>DEFENSE</td><td>DEXTERITY</td><td>LUCK</td></tr>
<tr><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td></tr>
</table>
</center>
</div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var g1a=document.getElementById("g1a");
var g2a=document.getElementById("g2a");
var attack1;attack2;

function resize(){
ww=window.innerWidth;
wh=window.innerHeight;
g1a.setAttribute("transform","translate("+ww/4+" "+wh/2+")");
g2a.setAttribute("transform","translate("+3*(ww/4)+" "+wh/2+")");
}
resize();
window.onresize=resize;

function battle(){

}

</script>
</body>
</html>

mardi 12 mars 2019

Duel

<!doctype html>
<head lang="fr">
<meta charset="utf-8">
<style>
html,body{
height:100%;
margin:0;
}
#svg1{
width:100%;
height:100%;
}
body{
user-select: none;
overflow:hidden;
}
#txt1{
text-align:left;
font-family:sans-serif;
font-size:500px;
position:absolute;
width:100%;
top:0;
left:0;
}
#txt2{
text-align:right;
font-family:sans-serif;
font-size:500px;
position:absolute;
width:100%;
top:0;
left:0;
}
</style>
<body>
<svg id="svg1">

</svg>
<div id="txt1"></div>
<div id="txt2"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var c1=document.getElementById("c1");
var txt1=document.getElementById("txt1");
var txt2=document.getElementById("txt2");
var dice1,dice2;

function launchDice(){
dice1=Math.round(Math.random()*19)+1;
dice2=Math.round(Math.random()*19)+1;
txt1.innerHTML=dice1;
txt2.innerHTML=dice2;
}

document.body.addEventListener("click", launchDice)
</script>
</body>
</head>

mercredi 6 mars 2019

Darkest

<!doctype html>
<html lang="fr">
<head>
<title>Demo</title>
<meta charset="utf-8">
<style>
html,body{
height:100%;
margin:0px;
}
body{
background:#000;
overflow:hidden;
}
#svg1{
width:200%;
height:100%;
transform:translateX(-940px) perspective(400px) rotateX(45deg);
}
#txt{
position:absolute;
top:0px;
left:0px;
font-family:sans-serif;
font-size:10px;
-moz-user-select:none;
user-select:none;
}
</style>
</head>
<body>
<div id="txt"></div>
<svg id="svg1">
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="25%" stop-color="#000" stop-opacity="1"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</linearGradient>
<pattern id="p1" x="0" y="0" width="100px" height="100px" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="100px" height="100px" xlink:href="https://opengameart.org/sites/default/files/styles/thumbnail/public/stone2.jpg" id="i1"/>
</pattern>
</defs>
<rect x="0" y="0" width="0" height="0" fill="url(#p1)" id="r1"/>
<animateMotion begin="0s" dur="1s" repeatCount="indefinite" values="0 0;0 100" xlink:href="#r1"/>
<rect x="0" y="0" width="0" height="0" fill="url(#g1)" id="r2"/>
</svg>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var txt=document.getElementById("txt");
var svg1=document.getElementById("svg1");
var r1=document.getElementById("r1");
var r2=document.getElementById("r2");
r1.setAttribute("width",2*ww);
r1.setAttribute("height",wh*2);
r1.setAttribute("y",-wh);
r2.setAttribute("width",ww*2);
r2.setAttribute("height",wh);
txt.innerHTML="window width: "+ww+"<br>window height: "+wh;
</script>
</body>
</html>

mercredi 27 février 2019

rotate

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf_8">
<title>Game</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
background:royalblue;
}
svg{
width:100%;
height:100%;
}
#display{
font-family:sans-serif;
font-size:10px;
color:#fff;
position:absolute;
top:0;
left:0;
z-index:-1;
}
</style>
<body>
<svg>
<image x="0" y="0" width="100" height="100" transform="rotate(0 0 0)" xlink:href="" id="i1"/>
</svg>
<div id="display"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var display=document.getElementById("display");
var mx,my;
document.body.onmousemove=function(e){
mx=e.clientX;
my=e.clientY;
var adeg=Math.round(Math.atan2(my-(wh/2),mx-(wh/2))*180/Math.PI);
display.innerHTML="mouse x: "+mx+"<br>mouse y: "+my+"<br>angle: "+adeg;
}
</script>
</body>
</head>

jeudi 14 février 2019

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Paths</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
background:royalblue;
}
</style>
</head>
<body>
<svg width="0" height="0" id="mysvg">
<path d="m0 0L0 0" stroke="white" stroke-width="1" fill="none" id="path1"/>
<path d="m0 0L0 0" stroke="white" stroke-width="1" fill="none" id="path2"/>
</svg>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var mysvg=document.getElementById("mysvg");
var path1=document.getElementById("path1");

function fresize(){
ww=window.innerWidth;
wh=window.innerHeight;
mysvg.setAttribute("width",ww);
mysvg.setAttribute("height",wh);
path1.setAttribute("d","m0 0L"+ww+" "+wh+"");
path2.setAttribute("d","m"+ww+" 0L0 "+wh+"");
}

function fpath(){
ww=window.innerWidth;
wh=window.innerHeight;
for(var i=0;i<=360;i=i+0.5){
var path=document.createElementNS(mysvg.namespaceURI,"path");
path.setAttributeNS(null,"stroke","#"+Math.round(0xFFFFFF * Math.random()).toString(16));
path.setAttributeNS(null,"stroke-width","4");
path.setAttributeNS(null,"fill","none");
path.setAttributeNS(null,"d","m0 "+wh/2+"L"+ww+" "+wh/2+"");
path.setAttributeNS(null,"transform","rotate("+i+" "+ww/2+" "+wh/2+")");
mysvg.appendChild(path);
}}

fresize();
fpath();
window.onresize=fresize;
</script>
</body>
</html>