DOCTYPE HTML canvas idcanvas width500 px height500 pxcanvas

  • Slides: 12
Download presentation
<!DOCTYPE HTML> <canvas id="canvas" width="500 px" height="500 px"></canvas> <script> var c = document. get.

<!DOCTYPE HTML> <canvas id="canvas" width="500 px" height="500 px"></canvas> <script> var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); document. get. Element. By. Id("canvas"). add. Event. Listener("click", do. Click); var color=['yellow', 'blue', 'red', 'Lime. Green', 'gold', 'indigo', 'darkred', 'Green. Yellow']; var a=60, b=65, N=2; var life=[]; var pattern="0123"; function initiate() { for(var i=0; i<N; i++) for(var j=0; j<N; j++) life[i+j*N]=i+j*N; Simon } function draw() { for(var i=0; i<N; i++) for(var j=0; j<N; j++) patrat(i, j, color[ life[i+j*N] ]); } function patrat(i, j, culoare) { c. fill. Style=culoare; c. fill. Rect(b*i, b*j, a, a); }

var i=0, aa=4; window. set. Timeout( function mis(){ var p=pattern[i]; var c=parse. Int(p)+aa; life[p]=c;

var i=0, aa=4; window. set. Timeout( function mis(){ var p=pattern[i]; var c=parse. Int(p)+aa; life[p]=c; draw(); if(aa==4) aa=0; else{ aa=4; i++; } if(i<pattern. length) window. set. Timeout(mis, 300); else{ alert('repeta! click pe patratele schimbate in ordinea aratata'); i=0; } }, 300);

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var xx=event. client.

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var xx=event. client. X-rect. left; var yy=event. client. Y-rect. top; var ii=Math. floor(xx/b); var jj=Math. floor(yy/b); if(pattern[i]==(ii+jj*N) ) i++; else alert('game over'); if(i==pattern. length){ alert('excelent'); i=0; } } initiate(); draw(); </script> </html>

<!DOCTYPE HTML> <canvas id="canvas" width="500 px" height="500 px"></canvas> <script> var c = document. get.

<!DOCTYPE HTML> <canvas id="canvas" width="500 px" height="500 px"></canvas> <script> var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); document. get. Element. By. Id("canvas"). add. Event. Listener("click", do. Click); var color=['yellow', 'blue', 'red']; const YELLOW=0, BLUE=1, RED=2; var a=60, b=65, N=3, counter=0; var life=[]; function initiate() { Tic-Tac-Toe for(var i=0; i<N; i++) for(var j=0; j<N; j++) life[i+j*N]=YELLOW; } function draw() { for(var i=0; i<N; i++) for(var j=0; j<N; j++) patrat(i, j, color[ life[i+j*N] ]); } function patrat(i, j, culoare) { c. fill. Style=culoare; c. fill. Rect(b*i, b*j, a, a); }

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var x=event. client.

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var x=event. client. X-rect. left; var y=event. client. Y-rect. top; var i=Math. floor(x/b); var j=Math. floor(y/b); if(counter%2==0) life[i+j*N]=BLUE; else life[i+j*N]=RED; draw(); counter++; } initiate(); draw(); </script> </html> Varianta 0 – la fiecare click coloreaza patratul in albastru sau rosu

function win(){ var h=[], v=[], d=[]; d[0]=0, d[1]=0; for(var j=0; j<N; j++){ h[j]==0; v[j]==0;

function win(){ var h=[], v=[], d=[]; d[0]=0, d[1]=0; for(var j=0; j<N; j++){ h[j]==0; v[j]==0; for(var i=0; i<N; i++){ h[j]+=life[i+j*N]; v[j]+=life[j+i*N]; } d[0]+=life[j*(N+1)]; d[1]+=life[(N-1)*(j-1)]; } for(var j=0; j<N; j++){ if(h[j]==3 || v[j]==3) return 1; if(h[j]==3*4 || v[j]==3*4) return 2; } if(d[0]==3 || d[1]==3) return 1; if(d[0]==3*4 || d[1]==3*4) return 2; return 0; } Varianta 1 Verifica cine castiga

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var x=event. client.

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var x=event. client. X-rect. left; var y=event. client. Y-rect. top; var i=Math. floor(x/b); var j=Math. floor(y/b); if(counter%2==0) life[i+j*N]=BLUE; else life[i+j*N]=RED; draw(); counter++; var rezultat=win(); if(counter>=5 && rezultat==1) alert('blue wins'); if(counter>=5 && rezultat==2) alert('red wins'); if(counter==9 && rezultat==0) alert('equality'); } initiate(); draw(); </script> </html>

<!DOCTYPE HTML> <canvas id="canvas" width="500 px" height="500 px"></canvas> <script> var c = document. get.

<!DOCTYPE HTML> <canvas id="canvas" width="500 px" height="500 px"></canvas> <script> var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); document. get. Element. By. Id("canvas"). add. Event. Listener("click", do. Click); var color=['orange', 'yellow', 'blue', 'red', 'green', 'aqua', 'violet', 'white', 'black', 'azure']; const ORANGE=0, WHITE=7, BLACK=8, AZURE=9; var a=30, b=35, N=9, nr. Culori=6, M=10, counter=0; var life=[], code=[1, 2, 3, 4]; Master. Mind function initiate() { counter=0; generate. Code(); for(var i=0; i<N; i++) for(var j=0; j<M; j++) life[i+j*N]=ORANGE; for(var i=0; i<nr. Culori; i++) life[i]=i+1; for(var i=nr. Culori; i<N; i++) life[i]=WHITE; for(var i=0; i<N; i++) life[i+(M-2)*N]=WHITE; for(var i=4; i<N; i++) life[i+(M-1)*N]=WHITE; }

function generate. Code() { for(var i=0; i<4; i++) code[i]=Math. floor(nr. Culori*Math. random())+1; } function

function generate. Code() { for(var i=0; i<4; i++) code[i]=Math. floor(nr. Culori*Math. random())+1; } function draw() { for(var i=0; i<N; i++) for(var j=0; j<M; j++) patrat(i, j, color[ life[i+j*N] ]); } function patrat(i, j, culoare) { c. fill. Style=culoare; c. fill. Rect(b*i, b*j, a, a); }

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var x=event. client.

function do. Click(event){ var rect = canvas. get. Bounding. Client. Rect(); var x=event. client. X-rect. left; var y=event. client. Y-rect. top; var i=Math. floor(x/b); var j=Math. floor(y/b); if(i<nr. Culori && j==0){ var ii=counter%4, jj=Math. floor(counter/4)+1; life[ii+jj*N]=life[i+j*N]; counter++; } if(counter>=4 && counter%4==0){ var jj=Math. floor(counter/4); var code. Guess=[]; for(var i=0; i<4; i++) code. Guess[i]=life[i+jj*N]; var result=code. Break(code, code. Guess); var four. Black=0; for(var i=0; i<4; i++){ life[i+5+jj*N]=result[i]; four. Black+=result[i]; } win(four. Black); } draw(); }

function code. Break(code, code. Guess) { var code. Temp=[]; var result=[0, 0, 0, 0],

function code. Break(code, code. Guess) { var code. Temp=[]; var result=[0, 0, 0, 0], k=0; for(var i=0; i<4; i++) code. Temp[i]=code[i]; for(var i=0; i<4; i++) if(code. Guess[i]==code. Temp[i]){ result[k++]=BLACK; code. Temp[i]=ORANGE; code. Guess[i]=WHITE; } for(var i=0; i<4; i++) for(var j=0; j<4; j++) if(code. Guess[i]==code. Temp[j]){ result[k++]=AZURE; code. Temp[j]=ORANGE; code. Guess[i]=WHITE; } return result; }

function win(four. Black){ if(four. Black==4*BLACK){ alert('you broke the code!'); final(); }else if(counter==4*(M-3)){ alert('you lost!');

function win(four. Black){ if(four. Black==4*BLACK){ alert('you broke the code!'); final(); }else if(counter==4*(M-3)){ alert('you lost!'); final(); } } function final(){ for(var i=0; i<4; i++) life[i+(M-1)*N]=code[i]; var yes=confirm('another game? '); if(yes==true) initiate(); } initiate(); draw(); </script> </html>