nothing: octobre 2019

jeudi 31 octobre 2019

samedi 26 octobre 2019

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#div1{
position:absolute;
top:0;
right:0;
}
</style>
</head>

<body>
<canvas id="can1"></canvas>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var img=new Image();
var x=240;
var y=120;
var step=0;

can1.setAttribute("width",ww);
can1.setAttribute("height",wh);

img.addEventListener("load",function(){
setInterval(run,100);
},false);
img.src="http://www.zeldagalaxy.com/wp-content/img/sprites/snes/lttp/link.png";
function run(){

//if(){
if(x>410){x=240};
if(step>ww){step=0};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x,y,20,25,step,wh/2-20,20,25);
x=x+30;
step=step+2;
// }
};
</script>
</body>
</html>
</html>

jeudi 24 octobre 2019

Run!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#div1{
position:absolute;
top:0;
right:0;
}
</style>
</head>

<body>
<canvas id="can1"></canvas>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var img=new Image();
var x=0;
var x2=0;
can1.setAttribute("width",ww);
can1.setAttribute("height",wh);
img.addEventListener("load",function(){
setInterval(run,50);
},false);
img.src="http://social.msdn.microsoft.com/Forums/getfile/167649";
function run(){
if(x>275){x=0};
if(x2>ww){x2=0};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x,0,55,76,x2,wh/2-76,110,152);
x=x+55;
x2=x2+18;
};
</script>
</body>
</html>
</html>

mercredi 9 octobre 2019

Pumpkin

<!doctype html>

<head>

<style>

html,body{

height:100%;

margin:0;

}

#svg1{

width:100%;

height:100%;

}

body{

background:grey;

}

#div1{

position:absolute;

top:0;

right:0;

font-family:sans-serif;

font-size:16px;

}

</style>

</head>

<body>

</svg>

var ww=window.innerWidth;

var wh=window.innerHeight;

var div1=document.getElementById("div1");

var svg1=document.getElementById("svg1");

var cit=document.getElementById("cit");

var mx=Math.round(ww/2);

var my=Math.round(wh/2);

var cx=Math.round(ww/2)-25;

var cy=Math.round(wh/2)-30;

cit.setAttribute("x",cx);

cit.setAttribute("y",cy);

function Mmov(e){

mx=e.clientX;

my=e.clientY;

div1.innerHTML=ww+" "+wh+"<br>"+mx+" "+my+"<br>"+cx+" "+cy;

}

document.body.onmousemove=Mmov;

function Cmov(){

if(cx+25<mx){cx++};

if(cx+25>mx){cx--};

if(cy+30<my){cy++};

if(cy+30>my){cy--};

cit.setAttribute("x",cx);

cit.setAttribute("y",cy);

}

setInterval(Cmov,10);

function Ceat(){

}

</script>

</body>

</html>

samedi 5 octobre 2019

Dark Tower

<html lang="fr">
<head>
<meta charset="utf-8">
<title>The Dark Tower</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow-x:hidden;
}
#svg1{
width:100%;
height:6000px;
}
#title{
font-family:sans-serif;
font-size:20px;
fill:white;
}
#div1{
font-family:sans-serif;
font-size:20px;
color:#fff;
position:fixed;
top:10;
right:10;
}

</style>
</head>
<body>

<svg id="svg1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="black" />
<stop offset="25%" stop-color="darkblue" />
<stop offset="75%" stop-color="royalblue" />
<stop offset="100%" stop-color="lightblue" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="green" />
<stop offset="2%" stop-color="saddlebrown" />
<stop offset="90%" stop-color="black"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
<pattern id="pat1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrI5TySUtyjBIxOuyk-yYEKtML3euVqIDQg16-0GsqPuYokT0YnktXJgVM1UF5NYyLIYM7-9zb-7_dqY-NOnX3mhBNpMTSP9yIJTp3fdi4fV0nlA7r84XjTCkNqj7-QY8TzMSoVcvg3A/s1600/stones.png" x="0" y="0" width="100" height="100"></image>
</pattern>
</defs>

<rect width="100%" height="50%" fill="url(#grad1)"/>
<rect y="50%" width="100%" height="50%" fill="url(#grad2)"/>
<text x="10" y="30" id="title">The Dark Tower</text>

<g id="gf" transform="translate(0 0)">
<rect x="0" y="2700" width="400" height="300" fill="url(#pat1)" stroke-width="2" stroke="black" rx="20" ry="20"/>
<rect x="20" y="2720" width="360" height="260" fill="black" rx="20" ry="20" opacity="0.9"/>
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4rK8cYKmZTZJLK-8r_2VPSxE6p1pkLYwQ_UKcI2wazcVleEvg5SEAvsN_UOxfdIzSV-GNOOyv3ZRz6SoMFeyDWMxHusrRiX_58UmeFy7NzwBYaQu4cUDP59tAkS1PjBan0N8jMKI_HQ/s1600/gob1.gif" width="200" height="200" x="100" y="2780" id="gob1"/>
</g>

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gf" transform="translate(0 -300)" id="1f" opacity="0"/>
</svg>

<div id="div1"></div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var mx,my;
var i=0;
var gob1=document.getElementById("gob1");
var div1=document.getElementById("div1");
var gf=document.getElementById("gf");
gf.setAttribute("transform","translate("+((ww/2)-200)+" 0)");

function mouseClick(e){
mx=e.clientX;
my=e.clientY;
div1.innerHTML=mx+" "+my;
if(i==1){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzKBzDlW1BaLA5TdNtrmqcYbALbmxjamZ-pYT0RNQGtzftAFNFEdKRIPXmUSAO5ymCaw8AxH7p7i589uSJiompyIS15zNTXOx4YSiCNEJdiMQXxQSKv_OQZQsP1ScBEeHEJJZTCZBKg/s1600/gob3.gif");i++}
if(i==0){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9mNT3P4H5z5HPLKPSNfP288qwcwMVSoLT1BbRQWal6JIrl5p_IaRrkTf5vwfo3D0qX4_cgce4RiFZTRWjnlzfjX6P9-ogDG_MUoXPLJwAKa6zfjRPHjVdZcqyCrls3fnSTEtyVS-Ng/s1600/gob2.gif");i++}
}

gob1.onclick=mouseClick;
</script>
</body>
</html>

nothing