<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.
</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.
</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("
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()*
var y1=Math.round(Math.random()*
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);
p1.setAttribute("d", "m" + ox + " " + oy + "L" + dx + " " + dy);
turt1.setAttribute("transform"
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"
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(((
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);
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+
div2.innerHTML="score: "+score;
if (distance < 75) {
score++;
if(score==4){div4.innerHTML="
if(score<4){div4.innerHTML="";
x1=Math.round(Math.random()*
y1=Math.round(Math.random()*
ball.setAttribute("cx",x1);
}}
function ccole(){
var colxe=oxe-ox;
var colye=oye-oy;
var distance=Math.sqrt(colxe*
if (distance < 75) {
score--;
}}
setInterval(ccol,1);
setInterval(ccole,1);
</script>
</body>
</html>
