nothing: mars 2019

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>