1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Sliding Blocks(150 lines),welcome you to play the game

         

susky

5:10 am on Jun 22, 2011 (gmt 0)

10+ Year Member 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<style>
div {display:block;background-color:black;position:absolute;font:17px Tahoma;color:#fff;}
span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}
p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}
#main {width:375px;height:430px;display:block;background-color:gray;position:relative;}
#body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}
#score {width:80px;height:24px;left:270px;top:15px;padding:4px;}
#level {width:80px;height:24px;left:270px;top:50px;padding:4px;}
#next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;}
#ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}
#ctrl button{width:80px;height:25px;}
</style>
<script>
//By: X!ao_f QQ:120000512
var G = {
fs:[],
fn:[],
score:0,
l:['#9F0','#FF3','#F33','#C0C','#33C','#0F3','#F93'],
v:[0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0xFFFF],
d:[[0xCC00],[0x4444,0xF0],[0x8C40,0x6C00],[0x4C80,0xC600],[0x44C0,0x8E00,0xC880,0xE200],[0x88C0,0xE800,0xC440,0x2E00],[0x4E00,0x8C80,0xE400,0x4C40]],
init:function(){
var body = document.getElementById('body');
var next = document.getElementById('next');
for(var i=0;i<240;i++){
G.fs.push(body.appendChild(document.createElement("span")));
}
for(var i=0;i<16;i++){
G.fn.push(next.appendChild(document.createElement("p")));
}
G.domScore = document.getElementById('score');
G.domLevel = document.getElementById('level');
document.onkeydown=function(e){G.event(e||window.event,0)};
G.rand();
G.next();
},
timeTesk:function(){
if(G.pause)return;
if(!G.move(G.x, G.y+1, G.t)){
var s = 0;
for(var i=0;i<19;i++){
G.v[i]=G.v[i]|G.m[i];
if(G.v[i]==0xFFF){
for(var k=i;k>0;k--){
G.v[k] = G.v[k-1];
}
G.score+=++s;
}
}
G.next();
return false;
}
G.draw();
return true;
},
move:function(x,y,t){
var m = [];
for(var k=0;k<4;k++){
m[y+k] = (G.d[G.n][t]>>(3-k)*4&0xF)<<Math.max(x,0)>>-Math.min(x,0);
document.getElementById("print").innerHTML=G.x+":"+G.y+":"+k;
if(m[y+k] & G.v[y+k]){
return false;
}
}
G.x = x;
G.y = y;
G.t = t;
G.m = m;
G.draw();
return true;
},
rand:function(){
G.n = G._n;
G.t = G._t;
G.c = G._c;
G._n = parseInt(Math.random()*G.d.length);
G._t = parseInt(Math.random()*G.d[G._n].length);
G._c = parseInt(Math.random()*G.l.length);
},
next:function(){
G.rand();
if(parseInt(G.score/20)!=G.level){
G.level = parseInt(G.score/20);
clearInterval(G.handle);
G.handle = setInterval("G.timeTesk()",500/(G.level+1));
}
G.domScore.innerHTML = 'Score:'+G.score;
G.domLevel.innerHTML = 'Level:'+G.level;
var i = 0;
while(!(G.d[G.n][G.t]>>i*4&0xF))i++;
if(!G.move(3, i-3, G.t)){
alert('Game over!');
clearInterval(G.handle);
}
},
draw:function(){
for(var i=0;i<240;i++){
if((G.v[parseInt(i/12)]>>(11-i%12))&0x1){
G.fs[i].style.visibility = '';
}else if((G.m[parseInt(i/12)]>>(11-i%12))&0x1){
G.fs[i].style.visibility = '';
G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c];
}else{
G.fs[i].style.visibility ='hidden';
}
}
for(var i=0;i<16;i++){
if(G.d[G._n][G._t]>>(15-i)&0x1){
G.fn[i].style.visibility = '';
G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c];
}else{
G.fn[i].style.visibility ='hidden';
}
}
},
event:function(e,t){
switch(e.keyCode){
case 37:
G.move(G.x + 1, G.y, G.t);
break;
case 39:
G.move(G.x - 1, G.y, G.t);
break;
case 38:
G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length);
break;
case 40:
G.timeTesk();
break;
case 32:
while(G.timeTesk());
}
}
}

</script>
<body onload='G.init();'>
<div id='main'>
<div id='body'></div>
<div id='score'></div>
<div id='level'></div>
<div id='next'></div>
<div id='ctrl'>
<button onclick="javascript:location.href=location.href;">New</button>
<button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!G.pause];">Pause</button>
</div>
<div id="print"></div>
</GMain>
</body>
</html>

rocknbil

5:24 pm on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That is cool beans. :-) Liked it so much, here is a validated version [validator.w3.org] for you - it's only missing the CDATA wrapper, which for some reason breaks it . . . note my comments, had to change the i incrementor to J. This board is broken that way, won't let you post [ i ] :-/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tetris Clone</title>
<style type="text/css">
div {display:block;background-color:black;position:absolute;font:17px Tahoma;color:#fff;}
span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}
p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}
#main {width:375px;height:430px;display:block;background-color:gray;position:relative;}
#body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}
#score {width:80px;height:24px;left:270px;top:15px;padding:4px;}
#level {width:80px;height:24px;left:270px;top:50px;padding:4px;}
#next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;}
#ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}
#ctrl button{width:80px;height:25px;}
</style>
<script type="text/javascript">
//By: X!ao_f QQ:120000512
var G = {
fs:[],
fn:[],
score:0,
l:['#9F0','#FF3','#F33','#C0C','#33C','#0F3','#F93'],
v:[0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0xFFFF],
d:[[0xCC00],[0x4444,0xF0],[0x8C40,0x6C00],[0x4C80,0xC600],[0x44C0,0x8E00,0xC880,0xE200],[0x88C0,0xE800,0xC440,0x2E00],[0x4E00,0x8C80,0xE400,0x4C40]],
init:function(){
var body = document.getElementById('body');
var next = document.getElementById('next');
for(var i=0;i<240;i++){
G.fs.push(body.appendChild(document.createElement("span")));
}
for(var i=0;i<16;i++){
G.fn.push(next.appendChild(document.createElement("p")));
}
G.domScore = document.getElementById('score');
G.domLevel = document.getElementById('level');
document.onkeydown=function(e){G.event(e||window.event,0)};
G.rand();
G.next();
},
timeTesk:function(){
if(G.pause)return;
if(!G.move(G.x, G.y+1, G.t)){
var s = 0;
//had to change i to j to post
for(var j=0;j<19;j++){
G.v[j]=G.v[j]|G.m[j];
if(G.v[j]==0xFFF){
for(var k=j;k>0;k--){
G.v[k] = G.v[k-1];
}
G.score+=++s;
}
}
G.next();
return false;
}
G.draw();
return true;
},
move:function(x,y,t){
var m = [];
for(var k=0;k<4;k++){
m[y+k] = (G.d[G.n][t]>>(3-k)*4&0xF)<<Math.max(x,0)>>-Math.min(x,0);
document.getElementById("print").innerHTML=G.x+":"+G.y+":"+k;
if(m[y+k] & G.v[y+k]){
return false;
}
}
G.x = x;
G.y = y;
G.t = t;
G.m = m;
G.draw();
return true;
},
rand:function(){
G.n = G._n;
G.t = G._t;
G.c = G._c;
G._n = parseInt(Math.random()*G.d.length);
G._t = parseInt(Math.random()*G.d[G._n].length);
G._c = parseInt(Math.random()*G.l.length);
},
next:function(){
G.rand();
if(parseInt(G.score/20)!=G.level){
G.level = parseInt(G.score/20);
clearInterval(G.handle);
G.handle = setInterval("G.timeTesk()",500/(G.level+1));
}
G.domScore.innerHTML = 'Score:'+G.score;
G.domLevel.innerHTML = 'Level:'+G.level;
var i = 0;
while(!(G.d[G.n][G.t]>>i*4&0xF))i++;
if(!G.move(3, i-3, G.t)){
alert('Game over!');
clearInterval(G.handle);
}
},
draw:function(){
// Had to change j to i to post
for(var j=0;j<240;j++){
if((G.v[parseInt(j/12)]>>(11-j%12))&0x1){
G.fs[j].style.visibility = '';
}else if((G.m[parseInt(j/12)]>>(11-j%12))&0x1){
G.fs[j].style.visibility = '';
G.fs[j].style.borderColor = G.fs[j].style.background = G.l[G.c];
}else{
G.fs[j].style.visibility ='hidden';
}
}
for(var j=0;j<16;j++){
if(G.d[G._n][G._t]>>(15-j)&0x1){
G.fn[j].style.visibility = '';
G.fn[j].style.borderColor = G.fn[j].style.background = G.l[G._c];
}else{
G.fn[j].style.visibility ='hidden';
}
}
},
event:function(e,t){
switch(e.keyCode){
case 37:
G.move(G.x + 1, G.y, G.t);
break;
case 39:
G.move(G.x - 1, G.y, G.t);
break;
case 38:
G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length);
break;
case 40:
G.timeTesk();
break;
case 32:
while(G.timeTesk());
}
}
}

</script>
</head>
<body onload='G.init();'>
<div id='main'>
<div id='body'></div>
<div id='score'></div>
<div id='level'></div>
<div id='next'></div>
<div id='ctrl'>
<button onclick="javascript:location.href=location.href;">New</button>
<button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!G.pause];">Pause</button>
</div>
<div id="print"></div>
</div>
</body>
</html>

Leosghost

5:37 pm on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



"cool beans" ...Yes indeed :)

Thankyou susky :)

and thanks to rocknbil for one that validates ( not that that stopped me from playing :)

penders

11:59 pm on Jun 22, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Math.pow("cool beans",2)! That is awesome, thanks for sharing - will have a read through the code tomorrow. :)

daveVk

7:34 am on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



G.x and G.y not initialized ?

Well done.

penders

9:24 am on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



rocknbil: ...had to change the i incrementor to J. This board is broken that way, won't let you post [ i ] :-/


Although the [ i ] appears to be OK in susky's listing above?!

Fotiman

1:06 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Use [code][/code] tags: 

arr[i]

Fotiman

1:07 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Alternatively, use the "reply to this topic" link, and then select the "Disable codes for this message" checkbox.

Fotiman

1:21 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Here's another validating version, cleaned up slightly:
1. Corrected </GMain> error.
2. Replaced XHTML doctype with HTML5 (since there is nothing XHTML specific about this).
3. Moved script to the end.
4. Added missing <head> and <title> elements.
5. Formatted the JavaScript to be easier to read

If I was to clean it up further, I would probably:
1. Cleanup JavaScript to put all "var" declarations at the beginning of each function (instead of "for (var i=...")
2. Cleanup the CSS (no need to declare display block on div elements, for example) 


<!DOCTYPE html> 
<html>
<head>
<style>
div {display:block;background-color:black;position:absolute;font:17px Tahoma;color:#fff;}
span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}
p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}
#main {width:375px;height:430px;display:block;background-color:gray;position:relative;}
#body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}
#score {width:80px;height:24px;left:270px;top:15px;padding:4px;}
#level {width:80px;height:24px;left:270px;top:50px;padding:4px;}
#next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;}
#ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}
#ctrl button{width:80px;height:25px;}
</style>
<title>Tetris Clone</title>
</head>
<body onload='G.init();'>
<div id='main'>
  <div id='body'></div>
  <div id='score'></div>
  <div id='level'></div>
  <div id='next'></div>
  <div id='ctrl'>
    <button onclick="javascript:location.href=location.href;">New</button>
    <button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!G.pause];">Pause</button>
  </div>
  <div id="print"></div>
</div>
<script>
//By: X!ao_f QQ:120000512
var G = {
  fs: [],
  fn: [],
  score: 0,
  l: ['#9F0', '#FF3', '#F33', '#C0C', '#33C', '#0F3', '#F93'],
  v: [0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0xFFFF],
  d: [
    [0xCC00],
    [0x4444, 0xF0],
    [0x8C40, 0x6C00],
    [0x4C80, 0xC600],
    [0x44C0, 0x8E00, 0xC880, 0xE200],
    [0x88C0, 0xE800, 0xC440, 0x2E00],
    [0x4E00, 0x8C80, 0xE400, 0x4C40]
  ],
  init: function () {
    var body = document.getElementById('body');
    var next = document.getElementById('next');
    for (var i = 0; i < 240; i++) {
      G.fs.push(body.appendChild(document.createElement("span")));
    }
    for (var i = 0; i < 16; i++) {
      G.fn.push(next.appendChild(document.createElement("p")));
    }
    G.domScore = document.getElementById('score');
    G.domLevel = document.getElementById('level');
    document.onkeydown = function (e) {
      G.event(e || window.event, 0)
    };
    G.rand();
    G.next();
  },
  timeTesk: function () {
    if (G.pause) return;
    if (!G.move(G.x, G.y + 1, G.t)) {
      var s = 0;
      for (var i = 0; i < 19; i++) {
        G.v[i] = G.v[i] | G.m[i];
        if (G.v[i] == 0xFFF) {
          for (var k = i; k > 0; k--) {
            G.v[k] = G.v[k - 1];
          }
          G.score += ++s;
        }
      }
      G.next();
      return false;
    }
    G.draw();
    return true;
  },
  move: function (x, y, t) {
    var m = [];
    for (var k = 0; k < 4; k++) {
      m[y + k] = (G.d[G.n][t] >> (3 - k) * 4 & 0xF) << Math.max(x, 0) >> -Math.min(x, 0);
      document.getElementById("print").innerHTML = G.x + ":" + G.y + ":" + k;
      if (m[y + k] & G.v[y + k]) {
        return false;
      }
    }
    G.x = x;
    G.y = y;
    G.t = t;
    G.m = m;
    G.draw();
    return true;
  },
  rand: function () {
    G.n = G._n;
    G.t = G._t;
    G.c = G._c;
    G._n = parseInt(Math.random() * G.d.length);
    G._t = parseInt(Math.random() * G.d[G._n].length);
    G._c = parseInt(Math.random() * G.l.length);
  },
  next: function () {
    G.rand();
    if (parseInt(G.score / 20) != G.level) {
      G.level = parseInt(G.score / 20);
      clearInterval(G.handle);
      G.handle = setInterval("G.timeTesk()", 500 / (G.level + 1));
    }
    G.domScore.innerHTML = 'Score:' + G.score;
    G.domLevel.innerHTML = 'Level:' + G.level;
    var i = 0;
    while (!(G.d[G.n][G.t] >> i * 4 & 0xF)) i++;
    if (!G.move(3, i - 3, G.t)) {
      alert('Game over!');
      clearInterval(G.handle);
    }
  },
  draw: function () {
    for (var i = 0; i < 240; i++) {
      if ((G.v[parseInt(i / 12)] >> (11 - i % 12)) & 0x1) {
        G.fs[i].style.visibility = '';
      } else if ((G.m[parseInt(i / 12)] >> (11 - i % 12)) & 0x1) {
        G.fs[i].style.visibility = '';
        G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c];
      } else {
        G.fs[i].style.visibility = 'hidden';
      }
    }
    for (var i = 0; i < 16; i++) {
      if (G.d[G._n][G._t] >> (15 - i) & 0x1) {
        G.fn[i].style.visibility = '';
        G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c];
      } else {
        G.fn[i].style.visibility = 'hidden';
      }
    }
  },
  event: function (e, t) {
    switch (e.keyCode) {
    case 37:
      G.move(G.x + 1, G.y, G.t);
      break;
    case 39:
      G.move(G.x - 1, G.y, G.t);
      break;
    case 38:
      G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length);
      break;
    case 40:
      G.timeTesk();
      break;
    case 32:
      while (G.timeTesk());
    }
  }
}
</script>
</body>
</html>

penders

1:30 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Use CODE tags...


Ah, thanks for that. The option "Disable codes for this message" didn't work for me (I still got the error about an unclosed tag) and the option unchecked itself again after attempting to preview or submit the post?! 


[i]

Fotiman

1:33 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Note, this game doesn't seem to work in Chrome.

Fotiman

1:41 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Here's a version that works in Chrome as well. Fixed the setInterval method to use the function reference instead of a string (which is better anyway). Also fixed all of the "var" declarations, and cleaned up the CSS a little. 


<!DOCTYPE html> 
<html>
<head>
<style>
div {background-color:#000;position:absolute;font:17px Tahoma;color:#fff;}
span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}
p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}
#main {width:375px;height:430px;background-color:gray;position:relative;}
#body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}
#score {width:80px;height:24px;left:270px;top:15px;padding:4px;}
#level {width:80px;height:24px;left:270px;top:50px;padding:4px;}
#next {width:50px;height:50px;left:270px;top:85px;border:19px #000 solid;}
#ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}
#ctrl button{width:80px;height:25px;}
</style>
<title>Tetris Clone</title>
</head>
<body onload='G.init();'>
<div id='main'>
  <div id='body'></div>
  <div id='score'></div>
  <div id='level'></div>
  <div id='next'></div>
  <div id='ctrl'>
    <button onclick="javascript:location.href=location.href;">New</button>
    <button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!G.pause];">Pause</button>
  </div>
  <div id="print"></div>
</div>
<script>
//By: X!ao_f QQ:120000512
var G = {
  fs: [],
  fn: [],
  score: 0,
  l: ['#9F0', '#FF3', '#F33', '#C0C', '#33C', '#0F3', '#F93'],
  v: [0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0xFFFF],
  d: [
    [0xCC00],
    [0x4444, 0xF0],
    [0x8C40, 0x6C00],
    [0x4C80, 0xC600],
    [0x44C0, 0x8E00, 0xC880, 0xE200],
    [0x88C0, 0xE800, 0xC440, 0x2E00],
    [0x4E00, 0x8C80, 0xE400, 0x4C40]
  ],
  init: function () {
    var i,
      body = document.getElementById('body'),
      next = document.getElementById('next');
    for (i = 0; i < 240; i++) {
      G.fs.push(body.appendChild(document.createElement("span")));
    }
    for (i = 0; i < 16; i++) {
      G.fn.push(next.appendChild(document.createElement("p")));
    }
    G.domScore = document.getElementById('score');
    G.domLevel = document.getElementById('level');
    document.onkeydown = function (e) {
      G.event(e || window.event, 0)
    };
    G.rand();
    G.next();
  },
  timeTesk: function () {
    var i, k, s = 0;
    if (G.pause) return;
    if (!G.move(G.x, G.y + 1, G.t)) {
      for (i = 0; i < 19; i++) {
        G.v[i] = G.v[i] | G.m[i];
        if (G.v[i] == 0xFFF) {
          for (k = i; k > 0; k--) {
            G.v[k] = G.v[k - 1];
          }
          G.score += ++s;
        }
      }
      G.next();
      return false;
    }
    G.draw();
    return true;
  },
  move: function (x, y, t) {
    var k, m = [];
    for (k = 0; k < 4; k++) {
      m[y + k] = (G.d[G.n][t] >> (3 - k) * 4 & 0xF) << Math.max(x, 0) >> -Math.min(x, 0);
      document.getElementById("print").innerHTML = G.x + ":" + G.y + ":" + k;
      if (m[y + k] & G.v[y + k]) {
        return false;
      }
    }
    G.x = x;
    G.y = y;
    G.t = t;
    G.m = m;
    G.draw();
    return true;
  },
  rand: function () {
    G.n = G._n;
    G.t = G._t;
    G.c = G._c;
    G._n = parseInt(Math.random() * G.d.length);
    G._t = parseInt(Math.random() * G.d[G._n].length);
    G._c = parseInt(Math.random() * G.l.length);
  },
  next: function () {
    var i = 0;
    G.rand();
    if (parseInt(G.score / 20) != G.level) {
      G.level = parseInt(G.score / 20);
      clearInterval(G.handle);
      G.handle = setInterval(G.timeTesk, 500 / (G.level + 1));
    }
    G.domScore.innerHTML = 'Score:' + G.score;
    G.domLevel.innerHTML = 'Level:' + G.level;
    while (!(G.d[G.n][G.t] >> i * 4 & 0xF)) i++;
    if (!G.move(3, i - 3, G.t)) {
      alert('Game over!');
      clearInterval(G.handle);
    }
  },
  draw: function () {
    var i;
    for (i = 0; i < 240; i++) {
      if ((G.v[parseInt(i / 12)] >> (11 - i % 12)) & 0x1) {
        G.fs[i].style.visibility = '';
      } else if ((G.m[parseInt(i / 12)] >> (11 - i % 12)) & 0x1) {
        G.fs[i].style.visibility = '';
        G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c];
      } else {
        G.fs[i].style.visibility = 'hidden';
      }
    }
    for (i = 0; i < 16; i++) {
      if (G.d[G._n][G._t] >> (15 - i) & 0x1) {
        G.fn[i].style.visibility = '';
        G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c];
      } else {
        G.fn[i].style.visibility = 'hidden';
      }
    }
  },
  event: function (e, t) {
    switch (e.keyCode) {
    case 37:
      G.move(G.x + 1, G.y, G.t);
      break;
    case 39:
      G.move(G.x - 1, G.y, G.t);
      break;
    case 38:
      G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length);
      break;
    case 40:
      G.timeTesk();
      break;
    case 32:
      while (G.timeTesk());
    }
  }
}
</script>
</body>
</html>

penders

2:13 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Fotiman: Note, this game doesn't seem to work in Chrome.


susky's original listing, rocknbil's tweaked version and indeed your first version all worked OK for me in Chrome 10.0.648.205 (Hhhmmm, I'm wondering if I'm running the latest version of Chrome... the About box shows an error "Update server not available (error: 3)"!)

Fotiman

2:33 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Chrome 12 is the latest.

Shazam0527

5:07 pm on Jun 23, 2011 (gmt 0)

10+ Year Member



I use chrome 12.0.742.100 and it worked fine on Rocknbil's version.. Fantastic job on the game. Who'd have thought that Tetris would work on such a small amount of code :)

Fotiman

5:33 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Interesting. It seems the MeasureIt extension was causing it to fail. Disabling that extension caused the original to work for me. Guess I will keep that extension disabled (or just uninstall it, as it seems buggy).

In any case, my change was still a better way to do it. :)

brotherhood of LAN

5:45 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Nicely done susky, I was surprised to see the output as the code is relatively compact.

From the playing point of view, and I don't know if this is practical in javascript, it'd be good to continuously move a piece left/right by holding down the key.

Maybe offer a speed increase every 5 minutes too? I didn't last that long to see if there was one.

Leosghost

5:49 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



it'd be good to continuously move a piece left/right by holding down the key

It already does that in Opera 10.63 on mint..what you using ?

btw ..is the sidescroll now on this page only for me ? I'm on 1600x900 and it started sidescrolling ( looks like it wants 1800 ! ) at Fotimans first post

[edited by: Leosghost at 5:54 pm (utc) on Jun 23, 2011]

brotherhood of LAN

5:53 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



what you using


FF 3.6.8 on Ubuntu

and yes the forum posts are a little stretched by the code... no scroll on my 1280px display

penders

6:17 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



...it'd be good to continuously move a piece left/right by holding down the key.

Maybe offer a speed increase every 5 minutes too? I didn't last that long to see if there was one.


Continuously move a piece left/right works OK for me on FF 3.6.18 (WinXP), Chrome and IE8. The speed does increase the more you play and progress through the levels.

I must say, the gameplay is pretty much spot on IMO - nice one.

Fotiman

6:37 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



is the sidescroll now on this page only for me ? I'm on 1600x900 and it started sidescrolling

I'm using Chrome and I can resize my window (using the Pendule extension) to 1387px wide without horizontal scrollbar (starts scrolling at 1386). In any case, it's the price we pay for being able to include well formatted code examples. :)

Leosghost

6:47 pm on Jun 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks for the reminder ;) ( slaps forehead )..I just did "fit to width"..et voila !
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026