difficile.html
À propos du fichier
- Type de fichier
- Fichier HTML de 5 Ko (text/html)
- Confidentialité
- Fichier public, envoyé le 27 avril 2017 à 11:27, depuis l'adresse IP 195.221.x.x (France)
- Sécurité
- Ne contient aucun Virus ou Malware connus - Dernière vérification: hier
- Statistiques
- La présente page de téléchargement a été vue 969 fois depuis l'envoi du fichier
- Page de téléchargement
-
Aperçu du fichier
<!DOCTYPE html>
<html>
<head>
<title>Difficile</title>
<meta charset="utf-8">
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url("https://previews.123rf.com/images/miguelio/miguelio1011/miguelio101100001/8202885-Pr-s-du-sol-Texture-de-la-paille--Banque-d'images.jpg") }
@font-face {
font-family: "24h";
src: url("digital-7.ttf");
}
h1{
font-family: "24h";
font-size: 100px;
position: absolute;
top: 100px;
left: 65px;
}
div{
font-family: "Times New Roman", Times, Serif;
font-size: 25px;
position: absolute;
top: 400px;
left: 10px;
}
</style>
</head>
<body onload="idtimer">
<h1 id="temps">00:10</h1>
<canvas id="foin" width="800" height="700"></canvas>
<div id="compteur">Nombre de points : 0</div>
<script type="text/javascript" charset="utf-8">
//Initialisation
var canvas = document.getElementById("foin");
var context = canvas.getContext("2d");
var imgAig = document.createElement("img");
imgAig.setAttribute('src', 'aiguille.png');
var compt = 0;
var tailleCarre = 10;
//Déclaration variables coordonées carré indice
var ax = (canvas.width-10) * Math.random();
var ay = (canvas.height-10) * Math.random();
//Déclaration variables coordonées milieu du carré indice
var bx = ax + 5;
var by = ay + 5;
//Affichage indice aléatoirement placé
// context.fillStyle = "black";
//context.fillRect (ax, ay, tailleCarre, tailleCarre);
//COMPTE A REBOUR
var tps = 10 ;
var m=0;
var s=0;
var disp="";
var idtimer =setInterval('affichetemps()',1000);
function affichetemps(){
tps-- ;
s = parseInt((tps%20)%60) ;
disp = (m<10 ? "0"+m : m) + ':' + (s<10 ? "0"+s : s) ;
document.getElementById('temps').innerHTML= disp;
if (s == 0) { // condition permettant de reinitialiser les coordonées du carré indice ainsi que du CAR dès la fin de celui-ci
tps=10;
context.clearRect(0,0,800,700);
ax = (canvas.width-10) * Math.random();
ay = (canvas.height-10) * Math.random();
bx = ax + 5;
by = ay + 5;
// context.fillStyle = "black"; //carré indice aléatoirement placé
//context.fillRect (ax, ay, tailleCarre, tailleCarre);
}
}
function getCoords(el,event) { //fonction coordonnées du clic
var ox = -el.offsetLeft,
oy = -el.offsetTop;
while(el=el.offsetParent){
ox += el.scrollLeft - el.offsetLeft;
oy += el.scrollTop - el.offsetTop;
}
return {x:event.clientX + ox , y:event.clientY + oy};
}
canvas.onclick = function(e) { //fonction clic
var coords = getCoords(this,e);
var distance = Math.sqrt(Math.pow(coords.x - bx, 2) + Math.pow(coords.y - by, 2));
//Système chaud froid
if (distance >= 17) {
compt = compt + 10;
document.getElementById("compteur").innerHTML="Nombre de points : "+compt+" !";
}
if (distance <= 17) {
context.clearRect(0,0,800,700);
context.drawImage(imgAig,ax-40,ay-50);
setInterval('win()',3000);
}
if (distance > 17 && distance < 80){
context.fillStyle = "#FF0000"; //carré bouillant rouge
context.fillRect (coords.x-(tailleCarre/2), coords.y-(tailleCarre/2), tailleCarre, tailleCarre);
}
if (distance >= 80 && distance < 200){
context.fillStyle = "#FF5E00"; //carré chaud orange
context.fillRect (coords.x-(tailleCarre/2), coords.y-(tailleCarre/2), tailleCarre, tailleCarre);
}
if (distance >= 200 && distance < 400){
context.fillStyle = "#FFDE00"; //carré tiède jaune
context.fillRect (coords.x-(tailleCarre/2), coords.y-(tailleCarre/2), tailleCarre, tailleCarre);
}
if (distance >= 400 && distance < 600){
context.fillStyle = "#53A907"; //carré froid vert
context.fillRect (coords.x-(tailleCarre/2), coords.y-(tailleCarre/2), tailleCarre, tailleCarre);
}
if (distance >= 600){
context.fillStyle = "#04CAFC"; //carré glacé bleu
context.fillRect (coords.x-(tailleCarre/2), coords.y-(tailleCarre/2), tailleCarre, tailleCarre);
}
}
function win(){
document.location.href="win.html"
}
</script>
</body>
</html>
Partager le fichier difficile.html sur le Web et les réseaux sociaux:
Télécharger le fichier difficile.html
Télécharger difficile.html
