début de tutoriel

master
adplantade 5 years ago
parent c96a8c26b7
commit 414be83fe5

@ -102,3 +102,10 @@
font-weight: bold; font-weight: bold;
font-family: 'Segoe print'; font-family: 'Segoe print';
} }
.txt {
padding: 10px;
font-size: large;
font-weight: bold;
font-family: 'Segoe print';
}

@ -4,6 +4,7 @@
<head> <head>
<title>On The Dot</title> <title>On The Dot</title>
<link rel="stylesheet" type="text/css" href="game.css"/> <link rel="stylesheet" type="text/css" href="game.css"/>
<script>var tutoMode=false;</script>
</head> </head>
<body> <body>
<ul id="all-container" class="all-container"> <ul id="all-container" class="all-container">
@ -44,6 +45,7 @@
</ul> </ul>
</ul> </ul>
<script src="selecteur.js"></script> <script src="selecteur.js"></script>
<script src="bakery.js"></script> <script src="bakery.js"></script>
<script src="chrono.js"></script> <script src="chrono.js"></script>

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<title>On The Dot</title>
<link rel="stylesheet" type="text/css" href="game.css"/>
</head>
<body>
<p class="txt">Faites tourner le vitrail vers la droite pour qu'il corresponde à l'objectif</p>
<ul id="all-container" class="all-container">
<ul class="stats">
<p id="temps"></p>
<span id="chronotime" class="stats">0:00:00</span>
<span id="timer" class="stats">0:00:00</span>
<p id="stats" class="stats"></p>
<h1>Objectif</h1>
<h1>R&eacute;sultat</h1>
</ul>
<ul id="obj-container" class="vitraux">
<canvas id="canvasObj" class="vitrail-plein"></canvas>
<canvas id="canvasTotal" class="vitrail-plein"></canvas>
</ul>
<ul id="vitraux" class="vitraux">
<canvas id="canvas1" class="vitrail-plein"></canvas>
<canvas id="canvas2" class="vitrail-plein"></canvas>
<canvas id="canvas3" class="vitrail-plein"></canvas>
<canvas id="canvas4" class="vitrail-plein"></canvas>
</ul>
<ul id="canvasR" class="flex-container">
<div id="reserveText">
<h1>R&eacute;serve</h1>
</div>
<canvas id="canvasR1" class="vitrail-vide"></canvas>
<canvas id="canvasR2" class="vitrail-vide"></canvas>
<canvas id="canvasR3" class="vitrail-vide"></canvas>
<canvas id="canvasR4" class="vitrail-vide"></canvas>
</ul>
</ul>
<p id="tuto1" class="txt">Pour faire tourner le vitrail vers la droite, cliquez dans le triangle bleu, puis relâchez le clic dans le triangle vert.</p>
<p id="tuto2" class="txt">Pour faire tourner le vitrail vers la gauche, cliquez dans le triangle bleu, puis relâchez le clic dans le triangle vert.</p>
<script>var tutoMode=true;</script>
<script src="selecteur.js"></script>
<script src="bakery.js"></script>
<script src="chrono.js"></script>
<script src="timer.js"></script>
<script src="vitraux.js"></script>
<script src="tutorial.js"></script>
</body>
</html>

@ -0,0 +1,55 @@
function handleTuto()
{
console.log("tuto");
points++;
if(points==0)
{
tab1=[true,[-3,-3,"brown_1"],[-3,-2,"cyan_2"]];
tab2[0]=false;
tab3[0]=false;
tab4[0]=false;
document.getElementById("canvas2").style.display="none";
document.getElementById("canvas3").style.display="none";
document.getElementById("canvas4").style.display="none";
console.log("1");
tabObj=[copyMDArray(tab1)];
empiler(true);
console.log(tabObj);
tourneD(tabObj,canvasO,ctxO,0);
empiler(true);
toutDessiner(tab1,canvas1,ctx1);
toutDessiner(tabObjCmp,canvasO,ctxO);
faireLignes(ctx1);
faireTriangle(ctx1,"H","#0000FF50");
faireTriangle(ctx1,"D","#00FF0050");
}
}
function faireLignes(ctx)
{
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(size, size);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, size);
ctx.lineTo(size, 0);
ctx.stroke();
}
function faireTriangle(ctx,dir,color)
{
var a = (dir=="H" || dir=="G" ? 0 : size);
var b = (dir=="H" || dir=="D" ? size : 0);
var c = (dir=="H" || dir=="D" ? 0 : size);
ctx.beginPath();
ctx.moveTo(a,a);
ctx.lineTo(size/2,size/2);
ctx.lineTo(b,c);
ctx.lineTo(a,a);
ctx.fillStyle = color;
ctx.fill();
}
handleTuto();

@ -126,8 +126,6 @@ function genVitraux()
tries++; tries++;
} }
if(tries==20) console.log("trop long");
mat[x][y]=1; mat[x][y]=1;
x-=2; x-=2;
y-=2; y-=2;
@ -142,15 +140,29 @@ function genVitraux()
} }
} }
function tourneG(letab,lecanvas,lectx) function tourneG(letab,lecanvas,lectx,sselem=null)
{ {
letab.forEach(element => {
tmp=element[0]; if(sselem==null){
element[0]=element[1]; letab.forEach(element => {
element[1]=-tmp; tmp=element[0];
}); element[0]=element[1];
element[1]=-tmp;
});
}
else {
letab[sselem].forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
//console.log("pre-empiler :"+tabTotal);
empiler(sselem!=null);
//console.log("post-empiler :"+tabTotal);
if(sselem==null)
toutDessiner(letab,lecanvas,lectx); toutDessiner(letab,lecanvas,lectx);
empiler();
} }
function tourneD(letab,lecanvas,lectx,sselem=null) function tourneD(letab,lecanvas,lectx,sselem=null)
@ -346,7 +358,7 @@ function generate(){
act=getRandomInt(10); act=getRandomInt(10);
else else
act=1; act=1;
console.log("act="+act+" left:"+actions); //console.log("act="+act+" left:"+actions);
if(switchTreshold<=act && actions>3) // faire un switch if(switchTreshold<=act && actions>3) // faire un switch
{ {
var from=getRandomInt(4)-1; var from=getRandomInt(4)-1;
@ -355,7 +367,7 @@ function generate(){
to=getRandomInt(4)-1; to=getRandomInt(4)-1;
[tabObj[from],tabObj[to]]=[tabObj[to],tabObj[from]]; [tabObj[from],tabObj[to]]=[tabObj[to],tabObj[from]];
console.log("switch "+from+"->"+to); //console.log("switch "+from+"->"+to);
actions-=3; actions-=3;
} }
else if(swapTreshold<=act && actions>2) else if(swapTreshold<=act && actions>2)
@ -363,7 +375,7 @@ function generate(){
var from=getRandomInt(4)-1; var from=getRandomInt(4)-1;
var dir=getRandomInt(2)==1 ? "H":"V"; var dir=getRandomInt(2)==1 ? "H":"V";
swap(tabObj[from],null,ctxO,dir); swap(tabObj[from],null,ctxO,dir);
console.log("swap"+dir+" de "+from); //console.log("swap"+dir+" de "+from);
actions-=2; actions-=2;
} }
else else
@ -433,7 +445,7 @@ function rotationManager(e)
{ {
toggleVisible(canvasNumber); toggleVisible(canvasNumber);
tabR[canvasNumber]=[]; tabR[canvasNumber]=[];
console.log("contenu du tabR[cn] : "+tabR[canvasNumber]); //console.log("contenu du tabR[cn] : "+tabR[canvasNumber]);
toggleVisible(mousePos[0].substring(1),true); toggleVisible(mousePos[0].substring(1),true);
} }
} }
@ -514,19 +526,36 @@ function checkAllOK(justChecking=false){
exists=false; exists=false;
} }
if(exists && !justChecking) if(!tutoMode)
{ {
var audio = new Audio('ress/Jewel4.mp3'); if(exists && !justChecking)
audio.play(); {
if(pause) var audio = new Audio('ress/Jewel4.mp3');
chronoStop(); audio.play();
handleScore(1); if(pause)
generate(); chronoStop();
handleScore(1);
generate();
}
else if(justChecking)
{
return exists;
}
} }
else if(justChecking) else
{ {
return exists; if(points==0)
{
points=-1;
console.log("points "+points);
}
if(exists)
{
handleTuto();
}
} }
} }
function handleScore(modif) function handleScore(modif)
@ -664,5 +693,9 @@ document.getElementById("stats").innerHTML = points+" points";
events(); events();
generate(); if(!tutoMode)
chronoStart(); {
generate();
chronoStart();
}

Loading…
Cancel
Save