{"id":10629,"date":"2026-05-07T14:24:48","date_gmt":"2026-05-07T12:24:48","guid":{"rendered":"https:\/\/lukasbarda.cz\/?page_id=10629"},"modified":"2026-05-07T15:54:51","modified_gmt":"2026-05-07T13:54:51","slug":"tetris","status":"publish","type":"page","link":"https:\/\/lukasbarda.cz\/english\/tetris\/","title":{"rendered":"Tetris"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10629\" class=\"elementor elementor-10629\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5451463 e-con-full e-flex e-con e-parent\" data-id=\"5451463\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16dc212 elementor-widget elementor-widget-html\" data-id=\"16dc212\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n#tetris-container * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }\r\n#tetris-container {\r\n  background:#0a0a0f; display:flex; flex-direction:column;\r\n  align-items:center; justify-content:center;\r\n  padding:16px; font-family:monospace; width:100%;\r\n}\r\n#tetris-container .tt-title {\r\n  color:#00ffff; font-weight:bold; letter-spacing:8px; margin-bottom:12px;\r\n  text-shadow:0 0 12px #00ffff, 0 0 30px #00ffff; font-size:22px;\r\n}\r\n#tetris-container .tt-row { display:flex; gap:10px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }\r\n#tetris-container .tt-side { display:flex; flex-direction:column; gap:10px; width:88px; }\r\n#tetris-container .tt-box { background:#0f0f1a; border:2px solid #1a1a3a; padding:8px; }\r\n#tetris-container .tt-label { font-size:8px; color:#00ffff; text-shadow:0 0 6px #00ffff; letter-spacing:2px; margin-bottom:4px; text-transform:uppercase; }\r\n#tetris-container .tt-val { font-size:13px; color:#e0e0ff; }\r\n#tetris-container .tt-wrap { position:relative; }\r\n#tetris-container #tt-canvas { display:block; border:2px solid #1a1a3a; box-shadow:0 0 20px rgba(0,255,255,0.12); }\r\n#tetris-container #tt-next { display:block; }\r\n#tetris-container #tt-overlay {\r\n  position:absolute; inset:0; background:rgba(0,0,0,0.9);\r\n  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;\r\n}\r\n#tetris-container #tt-overlay.hidden { display:none; }\r\n#tetris-container .tt-ov-title {\r\n  color:#ff00ff; font-weight:bold; font-size:16px; letter-spacing:4px;\r\n  text-align:center; white-space:pre-line; line-height:1.8; text-shadow:0 0 15px #ff00ff;\r\n}\r\n#tetris-container #tt-resume {\r\n  background:#0f0f1a; border:2px solid #00ffff; color:#00ffff;\r\n  font-family:monospace; font-size:13px; padding:10px 28px; cursor:pointer;\r\n  text-shadow:0 0 8px #00ffff; letter-spacing:3px;\r\n  -webkit-appearance:none; display:none;\r\n}\r\n#tetris-container .tt-blink { color:#00ffff; font-size:9px; letter-spacing:2px; text-shadow:0 0 8px #00ffff; }\r\n#tetris-container .tt-hint { color:#3a3a7a; font-size:7px; line-height:2.2; text-align:center; }\r\n#tetris-container .tt-hint span { color:#ffff00; }\r\n#tetris-container .tt-controls { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:8px; }\r\n#tetris-container .tt-btnrow { display:flex; gap:6px; }\r\n#tetris-container .tt-btn {\r\n  background:#0f0f1a; border:2px solid #1a1a3a; color:#00ffff;\r\n  font-family:monospace; font-size:20px; cursor:pointer;\r\n  display:flex; align-items:center; justify-content:center;\r\n  user-select:none; -webkit-user-select:none; touch-action:manipulation;\r\n  text-shadow:0 0 8px #00ffff; -webkit-appearance:none;\r\n  width:54px; height:54px; border-radius:0;\r\n}\r\n#tetris-container .tt-btn:active { background:#1a1a3a; }\r\n#tetris-container .tt-wide { width:114px; font-size:11px; letter-spacing:2px; }\r\n#tetris-container .tt-start { color:#ff00ff !important; text-shadow:0 0 8px #ff00ff !important; font-size:10px; letter-spacing:2px; }\r\n#tetris-container .tt-pause { color:#ffff00 !important; text-shadow:0 0 8px #ffff00 !important; font-size:10px; letter-spacing:2px; }\r\n@keyframes tt-blink{0%,100%{opacity:1}50%{opacity:0}}\r\n#tetris-container .tt-blink { animation:tt-blink 1.2s step-end infinite; }\r\n<\/style>\r\n\r\n<div id=\"tetris-container\">\r\n  <div class=\"tt-title\">T E T R I S<\/div>\r\n  <div class=\"tt-row\">\r\n\r\n    <div class=\"tt-side\">\r\n      <div class=\"tt-box\"><div class=\"tt-label\">Skore<\/div><div class=\"tt-val\" id=\"tt-score\">0<\/div><\/div>\r\n      <div class=\"tt-box\"><div class=\"tt-label\">Uroven<\/div><div class=\"tt-val\" id=\"tt-level\">1<\/div><\/div>\r\n      <div class=\"tt-box\"><div class=\"tt-label\">Radky<\/div><div class=\"tt-val\" id=\"tt-lines\">0<\/div><\/div>\r\n      <div class=\"tt-box\"><div class=\"tt-label\">Nej<\/div><div class=\"tt-val\" id=\"tt-hi\">0<\/div><\/div>\r\n    <\/div>\r\n\r\n    <div>\r\n      <div class=\"tt-wrap\">\r\n        <canvas id=\"tt-canvas\"><\/canvas>\r\n        <div id=\"tt-overlay\">\r\n          <div class=\"tt-ov-title\" id=\"tt-ov-title\">TETRIS<\/div>\r\n          <button id=\"tt-resume\">&#9654; RESUME<\/button>\r\n          <div class=\"tt-blink\" id=\"tt-blink\">STISKNI START<\/div>\r\n          <div class=\"tt-hint\">\r\n            <span>&#8592; &#8594;<\/span> pohyb &nbsp; <span>&#8593;<\/span> rotace<br>\r\n            <span>&#8595;<\/span> rychle &nbsp; <span>SPACE<\/span> pad &nbsp; <span>P<\/span> pauza\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"tt-controls\">\r\n        <div class=\"tt-btnrow\">\r\n          <button class=\"tt-btn\" id=\"tt-b-rot\">&#8593;<\/button>\r\n        <\/div>\r\n        <div class=\"tt-btnrow\">\r\n          <button class=\"tt-btn\" id=\"tt-b-left\">&#8592;<\/button>\r\n          <button class=\"tt-btn\" id=\"tt-b-down\">&#8595;<\/button>\r\n          <button class=\"tt-btn\" id=\"tt-b-right\">&#8594;<\/button>\r\n        <\/div>\r\n        <div class=\"tt-btnrow\">\r\n          <button class=\"tt-btn tt-wide\" id=\"tt-b-drop\">DROP<\/button>\r\n          <button class=\"tt-btn tt-start\" id=\"tt-b-start\">START<\/button>\r\n          <button class=\"tt-btn tt-pause\" id=\"tt-b-pause\">PAUSE<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tt-side\">\r\n      <div class=\"tt-box\">\r\n        <div class=\"tt-label\">Dalsi<\/div>\r\n        <canvas id=\"tt-next\" width=\"88\" height=\"88\"><\/canvas>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var COLS=10,ROWS=20,BLOCK=26;\r\n  var COLORS={I:'#00ffff',O:'#ffff00',T:'#cc44ff',S:'#00ff66',Z:'#ff3355',J:'#4488ff',L:'#ff8800'};\r\n  var PIECES={\r\n    I:[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],\r\n    O:[[1,1],[1,1]],\r\n    T:[[0,1,0],[1,1,1],[0,0,0]],\r\n    S:[[0,1,1],[1,1,0],[0,0,0]],\r\n    Z:[[1,1,0],[0,1,1],[0,0,0]],\r\n    J:[[1,0,0],[1,1,1],[0,0,0]],\r\n    L:[[0,0,1],[1,1,1],[0,0,0]]\r\n  };\r\n  var TYPES=['I','O','T','S','Z','J','L'];\r\n\r\n  var canvas=document.getElementById('tt-canvas');\r\n  canvas.width=COLS*BLOCK; canvas.height=ROWS*BLOCK;\r\n  var ctx=canvas.getContext('2d');\r\n  var nc=document.getElementById('tt-next');\r\n  var nctx=nc.getContext('2d');\r\n\r\n  var board,piece,px,py,ptype,nextType;\r\n  var score=0,level=1,lines=0,hi=0;\r\n  var state='idle';\r\n  var dropMs=800,lastDrop=0,rafId=null;\r\n\r\n  function rnd(){return TYPES[Math.floor(Math.random()*TYPES.length)];}\r\n  function makeBoard(){var b=[];for(var i=0;i<ROWS;i++){var r=[];for(var j=0;j<COLS;j++)r.push(null);b.push(r);}return b;}\r\n  function rot(m){var r=[];for(var i=0;i<m[0].length;i++){var row=[];for(var j=m.length-1;j>=0;j--)row.push(m[j][i]);r.push(row);}return r;}\r\n\r\n  function ok(p,x,y){\r\n    for(var r=0;r<p.length;r++)\r\n      for(var c=0;c<p[r].length;c++)\r\n        if(p[r][c]){var nx=x+c,ny=y+r;if(nx<0||nx>=COLS||ny>=ROWS)return false;if(ny>=0&&board[ny][nx])return false;}\r\n    return true;\r\n  }\r\n\r\n  function ghostY(){var g=py;while(ok(piece,px,g+1))g++;return g;}\r\n\r\n  function lock(){\r\n    for(var r=0;r<piece.length;r++)\r\n      for(var c=0;c<piece[r].length;c++)\r\n        if(piece[r][c]&&py+r>=0)board[py+r][px+c]=ptype;\r\n    sweep(); spawn();\r\n  }\r\n\r\n  function sweep(){\r\n    var n=0;\r\n    for(var r=ROWS-1;r>=0;r--){\r\n      var full=true;for(var c=0;c<COLS;c++)if(!board[r][c]){full=false;break;}\r\n      if(full){board.splice(r,1);var nr=[];for(var c=0;c<COLS;c++)nr.push(null);board.unshift(nr);n++;r++;}\r\n    }\r\n    if(n){var pts=[0,100,300,500,800];score+=(pts[n]||800)*level;lines+=n;level=Math.floor(lines\/10)+1;dropMs=Math.max(80,800-(level-1)*70);if(score>hi)hi=score;ui();}\r\n  }\r\n\r\n  function spawn(){\r\n    ptype=nextType||rnd(); nextType=rnd();\r\n    piece=PIECES[ptype].map(function(r){return r.slice();});\r\n    px=Math.floor((COLS-piece[0].length)\/2); py=0;\r\n    if(!ok(piece,px,py)){over();return;}\r\n    drawNext();\r\n  }\r\n\r\n  function ui(){\r\n    document.getElementById('tt-score').textContent=score;\r\n    document.getElementById('tt-level').textContent=level;\r\n    document.getElementById('tt-lines').textContent=lines;\r\n    document.getElementById('tt-hi').textContent=hi;\r\n  }\r\n\r\n  function loop(ts){\r\n    if(state!=='playing'){rafId=null;return;}\r\n    if(ts-lastDrop>dropMs){\r\n      lastDrop=ts;\r\n      if(ok(piece,px,py+1))py++;else lock();\r\n    }\r\n    draw(); rafId=requestAnimationFrame(loop);\r\n  }\r\n\r\n  function startLoop(){\r\n    if(rafId)cancelAnimationFrame(rafId);\r\n    lastDrop=performance.now();\r\n    rafId=requestAnimationFrame(loop);\r\n  }\r\n\r\n  function blk(c,x,y,t,a){\r\n    if(a===undefined)a=1;\r\n    var col=COLORS[t];\r\n    c.save();c.globalAlpha=a;c.fillStyle=col;\r\n    if(a>0.4){c.shadowColor=col;c.shadowBlur=10;}\r\n    c.fillRect(x*BLOCK+1,y*BLOCK+1,BLOCK-2,BLOCK-2);\r\n    c.shadowBlur=0;c.fillStyle='rgba(255,255,255,0.2)';\r\n    c.fillRect(x*BLOCK+2,y*BLOCK+2,BLOCK-4,3);\r\n    c.fillRect(x*BLOCK+2,y*BLOCK+2,3,BLOCK-4);\r\n    c.restore();\r\n  }\r\n\r\n  function draw(){\r\n    ctx.fillStyle='#0a0a0f';ctx.fillRect(0,0,canvas.width,canvas.height);\r\n    ctx.strokeStyle='rgba(255,255,255,0.05)';ctx.lineWidth=1;\r\n    for(var r=0;r<=ROWS;r++){ctx.beginPath();ctx.moveTo(0,r*BLOCK);ctx.lineTo(COLS*BLOCK,r*BLOCK);ctx.stroke();}\r\n    for(var c=0;c<=COLS;c++){ctx.beginPath();ctx.moveTo(c*BLOCK,0);ctx.lineTo(c*BLOCK,ROWS*BLOCK);ctx.stroke();}\r\n    for(var row=0;row<ROWS;row++)for(var col=0;col<COLS;col++)if(board&&board[row][col])blk(ctx,col,row,board[row][col]);\r\n    if(piece){\r\n      var gy=ghostY();\r\n      for(var r=0;r<piece.length;r++)for(var c=0;c<piece[r].length;c++)if(piece[r][c])blk(ctx,px+c,gy+r,ptype,0.18);\r\n      for(var r=0;r<piece.length;r++)for(var c=0;c<piece[r].length;c++)if(piece[r][c])blk(ctx,px+c,py+r,ptype);\r\n    }\r\n  }\r\n\r\n  function drawNext(){\r\n    nctx.fillStyle='#0f0f1a';nctx.fillRect(0,0,nc.width,nc.height);\r\n    if(!nextType)return;\r\n    var p=PIECES[nextType],s=20;\r\n    var ox=Math.floor((nc.width-p[0].length*s)\/2),oy=Math.floor((nc.height-p.length*s)\/2);\r\n    for(var r=0;r<p.length;r++)for(var c=0;c<p[r].length;c++)if(p[r][c]){\r\n      nctx.save();nctx.fillStyle=COLORS[nextType];nctx.shadowColor=COLORS[nextType];nctx.shadowBlur=8;\r\n      nctx.fillRect(ox+c*s+1,oy+r*s+1,s-2,s-2);\r\n      nctx.fillStyle='rgba(255,255,255,0.2)';nctx.fillRect(ox+c*s+2,oy+r*s+2,s-4,3);nctx.restore();\r\n    }\r\n  }\r\n\r\n  function showOv(title,resume){\r\n    document.getElementById('tt-ov-title').textContent=title;\r\n    document.getElementById('tt-resume').style.display=resume?'block':'none';\r\n    document.getElementById('tt-blink').style.display=resume?'none':'block';\r\n    document.getElementById('tt-overlay').classList.remove('hidden');\r\n  }\r\n  function hideOv(){document.getElementById('tt-overlay').classList.add('hidden');}\r\n\r\n  function startGame(){\r\n    board=makeBoard();score=0;level=1;lines=0;dropMs=800;ui();\r\n    nextType=rnd();state='playing';spawn();hideOv();startLoop();\r\n  }\r\n  function resumeGame(){if(state!=='paused')return;state='playing';hideOv();startLoop();}\r\n  function pauseGame(){if(state!=='playing')return;state='paused';if(rafId){cancelAnimationFrame(rafId);rafId=null;}draw();showOv('PAUZA',true);}\r\n  function togglePause(){if(state==='playing')pauseGame();else if(state==='paused')resumeGame();}\r\n  function over(){state='gameover';if(rafId){cancelAnimationFrame(rafId);rafId=null;}draw();document.getElementById('tt-blink').textContent='STISKNI START';showOv('KONEC!\\nSKORE: '+score,false);}\r\n\r\n  \/\/ Keyboard\r\n  document.addEventListener('keydown',function(e){\r\n    if(e.key==='Enter'){if(state==='idle'||state==='gameover'){startGame();e.preventDefault();}return;}\r\n    if(e.key==='p'||e.key==='P'){togglePause();return;}\r\n    if(state!=='playing')return;\r\n    if(e.key==='ArrowLeft'){if(ok(piece,px-1,py)){px--;draw();}e.preventDefault();}\r\n    else if(e.key==='ArrowRight'){if(ok(piece,px+1,py)){px++;draw();}e.preventDefault();}\r\n    else if(e.key==='ArrowDown'){if(ok(piece,px,py+1)){py++;draw();}e.preventDefault();}\r\n    else if(e.key==='ArrowUp'){var r=rot(piece);if(ok(r,px,py)){piece=r;draw();}e.preventDefault();}\r\n    else if(e.key===' '){while(ok(piece,px,py+1))py++;lock();draw();e.preventDefault();}\r\n  });\r\n\r\n  \/\/ Buttons\r\n  function btn(id,fn){\r\n    var el=document.getElementById(id);if(!el)return;\r\n    el.addEventListener('touchstart',function(e){e.preventDefault();fn();},{passive:false});\r\n    el.addEventListener('mousedown',function(e){e.preventDefault();fn();});\r\n  }\r\n  btn('tt-b-start',function(){if(state==='idle'||state==='gameover')startGame();});\r\n  btn('tt-b-pause',togglePause);\r\n  btn('tt-resume',resumeGame);\r\n  btn('tt-b-left',function(){if(state==='playing'&&ok(piece,px-1,py)){px--;draw();}});\r\n  btn('tt-b-right',function(){if(state==='playing'&&ok(piece,px+1,py)){px++;draw();}});\r\n  btn('tt-b-down',function(){if(state==='playing'&&ok(piece,px,py+1)){py++;draw();}});\r\n  btn('tt-b-rot',function(){if(state==='playing'){var r=rot(piece);if(ok(r,px,py)){piece=r;draw();}}});\r\n  btn('tt-b-drop',function(){if(state==='playing'){while(ok(piece,px,py+1))py++;lock();draw();}});\r\n\r\n  \/\/ Prevent page scroll when playing on touch\r\n  document.getElementById('tetris-container').addEventListener('touchmove',function(e){e.preventDefault();},{passive:false});\r\n\r\n  draw();drawNext();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>TETRIS Score0 Level1 Rows0 Best0 TETRIS \u25b6 RESUME PRESS START \u2190 \u2192 move \u2191 rotate \u2193 fast SPACE pad P pause \u2191 \u2190 \u2193 \u2192 DROP START PAUSE Next<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10629","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/pages\/10629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/comments?post=10629"}],"version-history":[{"count":10,"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/pages\/10629\/revisions"}],"predecessor-version":[{"id":10652,"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/pages\/10629\/revisions\/10652"}],"wp:attachment":[{"href":"https:\/\/lukasbarda.cz\/english\/wp-json\/wp\/v2\/media?parent=10629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}