mercredi 19 décembre 2018

<!doctype html>
<html>
<head>
<style>
html,body{margin:0;height:100%;}
body{font-family:consolas,sans-serif;overflow:hidden;}
p{margin:0;}
div{position:absolute;top:0;left:0;}
svg{background:#bbb;}
</style>
</head>

<body>

<svg width="0" height="0" id="svg1">
<circle cx="0" cy="0" r="10" id="c1" fill="#444"/>
<rect x="0" y="0" width="0" height="100" id="r1" fill="#444"/>
</svg>

<div><p id="res1"</p><p id="res2"></p></div>

<script>

var w=window.innerWidth;
var h=window.innerHeight;
var cx=w/2;
var cy=h/2;
var r1h=100;
var dx=Math.round(Math.random()*w);
var dy=Math.round(Math.random()*h);

document.getElementById("svg1").setAttribute("width",w);
document.getElementById("svg1").setAttribute("height",h);
document.getElementById("c1").setAttribute("cx",cx);
document.getElementById("c1").setAttribute("cy",cy);
document.getElementById("r1").setAttribute("y",h-100);
document.getElementById("r1").setAttribute("width",w);

function gravity(){
if(cy<h-110){cy++};
document.getElementById("c1").setAttribute("cy",cy);
}
setInterval(gravity,5);

function up(){
if(cy>10){
setTimeout(document.getElementById("c1").setAttribute("cy",cy=cy-50),1);
}}
function left(){
if(cx>10){
document.getElementById("c1").setAttribute("cx",cx=cx-5);
}}
function right(){
if(cx<w-10){
document.getElementById("c1").setAttribute("cx",cx=cx+5);
}}
document.addEventListener('keydown',(event)=>{
const keyName=event.key;if(keyName=="ArrowUp"){up();}
if(keyName=="ArrowLeft"){left();}
if(keyName=="ArrowRight"){right();}
});

</script>

</body>
</html>
By -