Les couleurs en jeu sont aléatoires

upgrade-menu
adplantade 5 years ago
parent 1c806ffa0c
commit 282db1b4a1

@ -6,6 +6,9 @@ hideAll();
var modeSelected=null; var modeSelected=null;
var diffSelected=null; var diffSelected=null;
var btn_options=document.getElementById("btn_options");
btn_options.width=size;
modes.forEach(element => { modes.forEach(element => {
eval("var btn"+element+"= document.getElementById('btn_"+element+"')"); eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
eval("btn_"+element+".width=size"); eval("btn_"+element+".width=size");
@ -71,5 +74,5 @@ function hideAll()
function play() function play()
{ {
//window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo")); window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo"));
} }

@ -92,6 +92,7 @@
-webkit-box-shadow:inset 0px 0px 0px 5px blue; -webkit-box-shadow:inset 0px 0px 0px 5px blue;
-moz-box-shadow:inset 0px 0px 0px 5px blue; -moz-box-shadow:inset 0px 0px 0px 5px blue;
box-shadow:inset 0px 0px 0px 5px blue; box-shadow:inset 0px 0px 0px 5px blue;
} }
.stats { .stats {

@ -18,3 +18,73 @@
-moz-box-shadow:inset 0px 0px 0px 5px black; -moz-box-shadow:inset 0px 0px 0px 5px black;
box-shadow:inset 0px 0px 0px 5px black; box-shadow:inset 0px 0px 0px 5px black;
} }
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

@ -1,49 +0,0 @@
<html>
<head>
<title>On The Dot</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
Jouer la partie en : </br>
<div id="modeSelection">
<ul id="modes" class="all-container">
<img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
<img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
<img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
</ul>
<ul id="points" class="all-container">
<img id="5p" class="button" src="./ress/button_points_5.png"/>
<img id="10p" class="button" src="./ress/button_points_10.png"/>
<img id="15p" class="button" src="./ress/button_points_15.png"/>
<img id="20p" class="button" src="./ress/button_points_20.png"/>
</ul>
<ul id="temps" class="all-container">
<img id="5m" class="button" src="./ress/button_temps_5.png"/>
<img id="10m" class="button" src="./ress/button_temps_10.png"/>
</ul>
<ul id="survie" class="all-container">
<img id="surv" class="button" src="./ress/button_mode_survie.png"/>
</ul>
</div>
<ul id="diff" class="all-container">
<img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
<img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
<img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
</ul>
Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
<input type="text" id="field_pseudo" />
<button id="btn_play" onClick="play()" disabled>Jouer ?</button>
<script src="button_displayer.js"></script>
<div>
Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
Partie en temps : la partie finit quand le temps imparti est &eacute;coul&eacute;. Obtenez le plus de points possible ! </br>
Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
</div>
</body>
</html>

@ -0,0 +1,75 @@
<html>
<head>
<title>On The Dot</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<?php
$database = new SQLite3("data.db");
function displayHighscore() {
//d
}
?>
Jouer la partie en : </br>
<div id="modeSelection">
<ul id="modes" class="all-container">
<img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
<img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
<img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
</ul>
<ul id="points" class="all-container">
<img id="5p" class="button" src="./ress/button_points_5.png"/>
<img id="10p" class="button" src="./ress/button_points_10.png"/>
<img id="15p" class="button" src="./ress/button_points_15.png"/>
<img id="20p" class="button" src="./ress/button_points_20.png"/>
</ul>
<ul id="temps" class="all-container">
<img id="5m" class="button" src="./ress/button_temps_5.png"/>
<img id="10m" class="button" src="./ress/button_temps_10.png"/>
</ul>
<ul id="survie" class="all-container">
<img id="surv" class="button" src="./ress/button_mode_survie.png"/>
</ul>
</div>
<ul id="diff" class="all-container">
<img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
<img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
<img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
</ul>
Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
<input type="text" id="field_pseudo" />
<button id="btn_play" onClick="play()" disabled>Jouer ?</button>
<div>
Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
Partie en temps : la partie finit quand le temps imparti est &eacute;coul&eacute;. Obtenez le plus de points possible ! </br>
Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
</div>
<img id="btn_options" src="./ress/gear.png"/>
<!-- The Modal -->
<div id="optionsModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Options :</p>
<div class="slidecontainer">
<input type="range" min="2" max="8" value="4" class="slider" id="range_dots">
<p>Nombre de points : <span id="dotsNumber"></span></p>
</div>
</div>
</div>
<script src="button_displayer.js"></script>
<script src="options.js"></script>
</body>
</html>

@ -0,0 +1,33 @@
// Get the modal
var modal = document.getElementById("optionsModal");
// Get the button that opens the modal
var btn = document.getElementById("btn_options");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var slider = document.getElementById("range_dots");
var output = document.getElementById("dotsNumber");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1,40 +1,53 @@
var canvasT = document.getElementById('canvasTotal'); var canvasT = document.getElementById('canvasTotal');
var ctxT = canvasT.getContext('2d'); var ctxT = canvasT.getContext('2d');
var canvasO = document.getElementById('canvasObj'); var canvasO = document.getElementById('canvasObj');
var ctxO = canvasO.getContext('2d'); var ctxO = canvasO.getContext('2d');
var canvasR = document.getElementById('canvasR'); var canvasR = document.getElementById('canvasR');
//var ctxR = canvasR.getContext('2d'); //var ctxR = canvasR.getContext('2d');
tab1=[]; tab1=[];
tab2=[]; tab2=[];
tab3=[]; tab3=[];
tab4=[]; tab4=[];
tabR=[[],[],[],[],[]]; tabR=[[],[],[],[],[]];
tabR1=[]; tabR1=[];
tabR2=[]; tabR2=[];
tabR3=[]; tabR3=[];
tabR4=[]; tabR4=[];
points=0; points=0;
tabTotal=[]; tabTotal=[];
tabObjCmp=[]; tabObjCmp=[];
mousePos=[]; mousePos=[];
colorsAvailable=["red","yellow","green","purple"];
colors=["red","yellow","green","purple"];
size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50px var dotsAmount=4;
canvasT.width=size; var colors=[];
canvasO.width=size; colorsAvailable=["red","yellow","green","purple","lightblue","brown","cyan","orange"];
canvasT.height=size; for(var cpt=0;cpt<dotsAmount;cpt++)
canvasO.height=size; {
var pos = getRandomInt(colorsAvailable.length)-1;
for(var a=1;a<5;a++) var index=colorsAvailable.indexOf(colorsAvailable[pos]);
if(index>-1)
{ {
colors.push(colorsAvailable[pos]);
colorsAvailable.splice(index,1);
}
}
size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50px
canvasT.width=size;
canvasO.width=size;
canvasT.height=size;
canvasO.height=size;
for(var a=1;a<5;a++)
{
eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')"); eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
eval("var ctx"+a+" = canvas"+a+".getContext('2d')"); eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
eval("canvas"+a+".width=size"); eval("canvas"+a+".width=size");
@ -44,9 +57,9 @@ var canvasT = document.getElementById('canvasTotal');
eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')"); eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')");
eval("canvasR"+a+".width=size"); eval("canvasR"+a+".width=size");
eval("canvasR"+a+".height=size"); eval("canvasR"+a+".height=size");
} }
function faireCercle(x,y,color,lectx){ function faireCercle(x,y,color,lectx){
var cercle = new Path2D(); var cercle = new Path2D();
nx=(size/6)*(x>0 ? x+2 : x+3); nx=(size/6)*(x>0 ? x+2 : x+3);
@ -57,10 +70,10 @@ var canvasT = document.getElementById('canvasTotal');
lectx.fillStyle = color; lectx.fillStyle = color;
lectx.fill(cercle); lectx.fill(cercle);
} }
function drawImg(x,y,color,lectx) function drawImg(x,y,color,lectx)
{ {
var img= new Image(); var img= new Image();
@ -73,10 +86,10 @@ var canvasT = document.getElementById('canvasTotal');
lectx.drawImage(img,nx,ny,size/6,size/6); lectx.drawImage(img,nx,ny,size/6,size/6);
} }
} }
function tourneG(letab,lecanvas,lectx) function tourneG(letab,lecanvas,lectx)
{ {
letab.forEach(element => { letab.forEach(element => {
tmp=element[0]; tmp=element[0];
element[0]=element[1]; element[0]=element[1];
@ -84,10 +97,10 @@ var canvasT = document.getElementById('canvasTotal');
}); });
toutDessiner(letab,lecanvas,lectx); toutDessiner(letab,lecanvas,lectx);
empiler(); empiler();
} }
function tourneD(letab,lecanvas,lectx,sselem=null) function tourneD(letab,lecanvas,lectx,sselem=null)
{ {
if(sselem==null){ if(sselem==null){
letab.forEach(element => { letab.forEach(element => {
tmp=element[1]; tmp=element[1];
@ -108,10 +121,10 @@ var canvasT = document.getElementById('canvasTotal');
//console.log("post-empiler :"+tabTotal); //console.log("post-empiler :"+tabTotal);
if(sselem==null) if(sselem==null)
toutDessiner(letab,lecanvas,lectx); toutDessiner(letab,lecanvas,lectx);
} }
function toutDessiner(pts,lecanvas,lectx) function toutDessiner(pts,lecanvas,lectx)
{ {
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height); lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
if(pts[0]) if(pts[0])
{ {
@ -125,10 +138,10 @@ var canvasT = document.getElementById('canvasTotal');
} }
} }
} }
} }
function empiler(obj=false) function empiler(obj=false)
{ {
const unique = (val) => val.toString() != test.toString(); const unique = (val) => val.toString() != test.toString();
var exists=false; var exists=false;
@ -218,9 +231,9 @@ var canvasT = document.getElementById('canvasTotal');
} }
} }
} }
} }
function swap(letab, lecanvas, lectx,ladir){ function swap(letab, lecanvas, lectx,ladir){
if(ladir=="H"){ if(ladir=="H"){
letab.forEach(element=> { letab.forEach(element=> {
element[1]=-element[1]; element[1]=-element[1];
@ -237,22 +250,22 @@ var canvasT = document.getElementById('canvasTotal');
toutDessiner(letab,lecanvas,lectx); toutDessiner(letab,lecanvas,lectx);
empiler(); empiler();
} }
} }
function getRandomInt(max) { //rng entier [1;max] function getRandomInt(max) { //rng entier [1;max]
return Math.floor(Math.random() * Math.floor(max))+1; return Math.floor(Math.random() * Math.floor(max))+1;
} }
function copyMDArray(array) //permet la copie d'arrays sans copier les références function copyMDArray(array) //permet la copie d'arrays sans copier les références
{ {
var newArray = []; var newArray = [];
array.forEach(element => { array.forEach(element => {
newArray.push(Array.from(element)) newArray.push(Array.from(element))
}); });
return newArray return newArray
} }
function generate(){ function generate(){
tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)]; tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
tabObjCmp=[]; tabObjCmp=[];
var actions=getRandomInt(4)+1; var actions=getRandomInt(4)+1;
@ -306,9 +319,9 @@ var canvasT = document.getElementById('canvasTotal');
empiler(true); empiler(true);
toutDessiner(tabObjCmp,canvasO,ctxO); toutDessiner(tabObjCmp,canvasO,ctxO);
} }
function getMousePosition(lecanvas, event, lectx, letab) { function getMousePosition(lecanvas, event, lectx, letab) {
let rect = lecanvas.getBoundingClientRect(); let rect = lecanvas.getBoundingClientRect();
let x = event.clientX - rect.left; let x = event.clientX - rect.left;
let y = event.clientY - rect.top; let y = event.clientY - rect.top;
@ -318,12 +331,12 @@ var canvasT = document.getElementById('canvasTotal');
tourneG(letab,lecanvas,lectx); tourneG(letab,lecanvas,lectx);
else else
tourneD(letab,lecanvas,lectx); tourneD(letab,lecanvas,lectx);
} }
/// renvoie le point cardianl où se trouve le point /// renvoie le point cardianl où se trouve le point
function compas(x,y,lecanvas) function compas(x,y,lecanvas)
{ {
rect = lecanvas.getBoundingClientRect(); rect = lecanvas.getBoundingClientRect();
x = event.clientX - rect.left; x = event.clientX - rect.left;
y = event.clientY - rect.top; y = event.clientY - rect.top;
@ -334,11 +347,11 @@ var canvasT = document.getElementById('canvasTotal');
if(ne && !se ) return "N"; if(ne && !se ) return "N";
if(!ne && se ) return "S"; if(!ne && se ) return "S";
if(!ne && !se ) return "O"; if(!ne && !se ) return "O";
} }
function rotationManager(e) function rotationManager(e)
{ {
var mouseOnRes = mousePos[0].match(/[R]/g)!=null; var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
canvasNumber=e.currentTarget.id.substring(6); canvasNumber=e.currentTarget.id.substring(6);
document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select'); document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
@ -416,10 +429,10 @@ var canvasT = document.getElementById('canvasTotal');
} }
} }
} }
} }
function checkAllOK(){ function checkAllOK(){
//const condition = (val) => val.toString() == element.toString(); //const condition = (val) => val.toString() == element.toString();
var exists=true; var exists=true;
//exists=!tabObjCmp.every(unique); //exists=!tabObjCmp.every(unique);
@ -447,10 +460,10 @@ var canvasT = document.getElementById('canvasTotal');
handleScore(1); handleScore(1);
generate(); generate();
} }
} }
function handleScore(modif) function handleScore(modif)
{ {
points+=modif; points+=modif;
document.getElementById("stats").innerHTML = points+" points"; document.getElementById("stats").innerHTML = points+" points";
@ -465,10 +478,10 @@ var canvasT = document.getElementById('canvasTotal');
{ {
addTime(30); addTime(30);
} }
} }
function changeOrder(from, to) function changeOrder(from, to)
{ {
if(from.includes("R")) if(from.includes("R"))
fromTab=tabR[from]; fromTab=tabR[from];
else else
@ -491,10 +504,10 @@ var canvasT = document.getElementById('canvasTotal');
toutDessiner(tabTotal,canvasT,ctxT); toutDessiner(tabTotal,canvasT,ctxT);
} }
function isVisible(what) function isVisible(what)
{ {
if(what.includes("R")) if(what.includes("R"))
{ {
if(tabR[what.substring(1)]==null) if(tabR[what.substring(1)]==null)
@ -503,10 +516,10 @@ var canvasT = document.getElementById('canvasTotal');
} }
return eval("tab"+what+"[0]"); return eval("tab"+what+"[0]");
} }
function toggleVisible(where,reserve=false) function toggleVisible(where,reserve=false)
{ {
if(!reserve) if(!reserve)
{ {
eval("tab"+where+"[0]=!tab"+where+"[0];"); eval("tab"+where+"[0]=!tab"+where+"[0];");
@ -519,9 +532,9 @@ var canvasT = document.getElementById('canvasTotal');
tabR[where][0]=!tabR[where][0]; tabR[where][0]=!tabR[where][0];
toutDessiner(tabR[where],eval("canvasR"+where),eval("ctxR"+where)); toutDessiner(tabR[where],eval("canvasR"+where),eval("ctxR"+where));
} }
} }
function events() { function events() {
for(var i=1;i<5;i++) for(var i=1;i<5;i++)
{ {
eval("canvas"+i).addEventListener("mousedown",function(e){mdManager(e);}); eval("canvas"+i).addEventListener("mousedown",function(e){mdManager(e);});
@ -534,43 +547,43 @@ var canvasT = document.getElementById('canvasTotal');
eval("canvasR"+i).addEventListener("mouseenter",function(e){meManager(e);}); eval("canvasR"+i).addEventListener("mouseenter",function(e){meManager(e);});
eval("canvasR"+i).addEventListener("mouseleave",function(e){mlManager(e);}); eval("canvasR"+i).addEventListener("mouseleave",function(e){mlManager(e);});
} }
} }
function mdManager(e){ function mdManager(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)]; mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById(e.currentTarget.id).classList.add('vitrail-select'); document.getElementById(e.currentTarget.id).classList.add('vitrail-select');
} }
function muManager(e){ function muManager(e){
rotationManager(e); rotationManager(e);
mousePos=[]; mousePos=[];
} }
function meManager(e) { function meManager(e) {
document.getElementById(e.currentTarget.id).classList.add('vitrail-hover'); document.getElementById(e.currentTarget.id).classList.add('vitrail-hover');
} }
function mlManager(e) { function mlManager(e) {
document.getElementById(e.currentTarget.id).classList.remove('vitrail-hover'); document.getElementById(e.currentTarget.id).classList.remove('vitrail-hover');
} }
tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]); tab1.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]); tab2.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]); tab3.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]); tab4.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
toutDessiner(tab1,canvas1,ctx1); toutDessiner(tab1,canvas1,ctx1);
toutDessiner(tab2,canvas2,ctx2); toutDessiner(tab2,canvas2,ctx2);
toutDessiner(tab3,canvas3,ctx3); toutDessiner(tab3,canvas3,ctx3);
toutDessiner(tab4,canvas4,ctx4); toutDessiner(tab4,canvas4,ctx4);
empiler(); empiler();
toutDessiner(tabTotal,canvasT,ctxT); toutDessiner(tabTotal,canvasT,ctxT);
document.getElementById("stats").innerHTML = points+" points"; document.getElementById("stats").innerHTML = points+" points";
events(); events();
generate(); generate();
chronoStart(); chronoStart();
Loading…
Cancel
Save