pravidla

Demo

Aplikace Triangly je vytvořena za použití javascriptu, html 5, php a bootstrap frameworku. Pro vykreslení herní plochy je použito html 5 canvas a jeho metody. Pokud vás zajímá programování her pomocí webových technologií jako je javascript a html canvas, inspirujte se zde.

example:

matches with:

<!DOCTYPE html>
<html>
<head>

<style>

td {background-color: white;
}

td:hover {
cursor: pointer;

}
</style>

</head>
<body>
<p id="demo"></p>
<p>example:</p>

<p>
<canvas id="myCanvasX" width="150" height="150"
style="border:1px solid #000000;">
</canvas>
<p>

<p>matches with:</p>
<table>

<tr>

<td id = "td_myCanvas1" onClick="checkSolution('myCanvas1','td_myCanvas1')">
<canvas id="myCanvas1" width="150" height="150"
style="border:1px solid #000000;">
</canvas>
</td>

<td id = "td_myCanvas2" onClick="checkSolution('myCanvas2','td_myCanvas2')">
<canvas id="myCanvas2" width="150" height="150"
style="border:1px solid #000000;">
</canvas>
</td>

<td id = "td_myCanvas3" onClick="checkSolution('myCanvas3','td_myCanvas3')">
<canvas id="myCanvas3" width="150" height="150"
style="border:1px solid #000000;">
</canvas>
</td>

</tr> </table>

<script>

clearGame();
ClearCounters();
var rightcanvas = "";
var level = 1;
viewSolution(level);

sessionStorage.setItem('user', "Lenka");

function checkSolution(canvas,td){

var str1 = canvas;
var str2 = rightcanvas;
var n = str1.localeCompare(str2);

if (n==0){
document.getElementById(td).style.backgroundColor = "green";
var counterright = sessionStorage.getItem('counterright');
if (counterright === null) {counterright = 0;}
counterright++;
sessionStorage.setItem('counterright', counterright);

alert('Right!');

clearGame();
viewSolution(level);
}
else{
document.getElementById(td).style.backgroundColor = "red";
var counterfailed = sessionStorage.getItem('counterfailed');
if (counterfailed === null) {counterfailed = 0;}
counterfailed++;
sessionStorage.setItem('counterfailed', counterfailed);

alert('Failed!');
clearGame();
viewSolution(level);
}}

function onClickColour(elem) {
elem.style.background = 'red';
}

function win(canvas_name, level) {
this.canvas = document.getElementById(canvas_name);
this.level= level;

this.getPocet = function (){
//1. gener. pole hodnot dle levelu

var values = new Array(6);
var level=this.level;

if (level==1){

values[0] = 1;
values[1] = 2;
values[2] = 3;
values[3] = 15;
values[4] = 16;
values[5] = 17;
}

if (level==2){

values[0] = 4;
values[1] = 5;
values[2] = 6;
values[3] = 12;
values[4] = 13;
values[5] = 14;
}

if (level==3){

values[0] = 7;
values[1] = 8;
values[2] = 9;
values[3] = 10;
values[4] = 11;
values[5] = 12;
}

var pocet = values[Math.floor(Math.random() * values.length)];
return pocet;

}

this.draw = function(pocet) {
var c = document.getElementById(canvas_name);
var ctx = c.getContext("2d");

//var pocet = this.getPocet();
var pocet = pocet;
var arr = [];
while(arr.length < pocet){
var randomnumber=Math.ceil(Math.random()*18)
var found=false;
for(var i=0;i<arr.length;i++){
if(arr[i]==randomnumber){found=true;break}
}
if(!found)
arr[arr.length]=randomnumber;}
//2. vykresli trojuhelniky dle arr

for(var i=0;i<arr.length;i++){
switch(arr[i]) {
case 1:
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(50,0);
ctx.lineTo(0,50);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;


case 2:
ctx.beginPath();
ctx.moveTo(50,0);
ctx.lineTo(50,50);
ctx.lineTo(0,50);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 3:
ctx.beginPath();
ctx.moveTo(50,0);
ctx.lineTo(100,0);
ctx.lineTo(50,50);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 4:
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(50,50);
ctx.lineTo(100,50);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 5:
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(150,0);
ctx.lineTo(100,50);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 6:
ctx.beginPath();
ctx.moveTo(150,0);
ctx.lineTo(100,50);
ctx.lineTo(150,50);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 7:
ctx.moveTo(0,50);
ctx.lineTo(50,50);
ctx.lineTo(0,100);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 8:
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(0,100);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 9:
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,50);
ctx.lineTo(50,100);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 10:
ctx.beginPath();
ctx.moveTo(100,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 11:
ctx.beginPath();
ctx.moveTo(100,50);
ctx.lineTo(150,50);
ctx.lineTo(100,100);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 12:
ctx.beginPath();
ctx.moveTo(150,50);
ctx.lineTo(100,100);
ctx.lineTo(150,100);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 13:
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(50,100);
ctx.lineTo(0,150);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 14:
ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(50,150);
ctx.lineTo(0,150);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 15:
ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(100,100);
ctx.lineTo(50,150);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 16:
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(50,150);
ctx.lineTo(100,150);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 17:
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(150,100);
ctx.lineTo(100,150);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
case 18:
ctx.beginPath();
ctx.moveTo(150,100);
ctx.lineTo(100,150);
ctx.lineTo(150,150);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;

default:
ctx.beginPath();
ctx.moveTo(150,100);
ctx.lineTo(100,150);
ctx.lineTo(150,150);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#242424';
ctx.stroke();
ctx.fillStyle = "#242424";
ctx.fill();
break;
}

}

}

};

function example(level) {

var arr = [];
while(arr.length < 3){
var randomnumber=Math.ceil(Math.random()*3)
var found=false;
for(var i=0;i<arr.length;i++){
if(arr[i]==randomnumber){found=true;break}
}
if(!found)arr[arr.length]=randomnumber;}


var win1 = new win("myCanvasX", level);
var pocet = win1.getPocet();

win1.draw(pocet);

rightcanvas="myCanvas"+arr[0];

var win2 = new win(rightcanvas, level);
var pocet2 = win2.getPocet();
win2.draw(pocet);


var win3 = new win("myCanvas"+arr[1], level);
var pocet3 = win3.getPocet();
win3.draw(pocet+1);

var win4 = new win("myCanvas"+arr[2], level);
var pocet4 = win4.getPocet();
win4.draw(pocet-1);



}

function viewSolution(level){
example(level);
}



function clearGame() {

var c = document.getElementById("myCanvasX");
var ctx = c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
c.width = c.width;

var d = document.getElementById("myCanvas1");
var ctx = d.getContext("2d");
ctx.clearRect(0,0,d.width,d.height);
d.width = d.width;
document.getElementById("td_myCanvas1").style.backgroundColor = "white";

var e = document.getElementById("myCanvas2");
var ctx = e.getContext("2d");
ctx.clearRect(0,0,e.width,e.height);
e.width = e.width;
document.getElementById("td_myCanvas2").style.backgroundColor = "white";

var f = document.getElementById("myCanvas3");
var ctx = f.getContext("2d");
ctx.clearRect(0,0,f.width,f.height);
f.width = f.width;
document.getElementById("td_myCanvas3").style.backgroundColor = "white";

}

function ClearCounters(){
sessionStorage.setItem('counterfailed',0);
sessionStorage.setItem('counterright',0);
}

</script>

</body>
</html>