Welcome to WebmasterWorld Guest from 54.196.217.43

Forum Moderators: open

Message Too Old, No Replies

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

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

New User

joined:June 15, 2011
posts:7
votes: 0


<!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>
5:24 pm on June 22, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


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>
5:37 pm on June 22, 2011 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:6717
votes: 230


"cool beans" ...Yes indeed :)

Thankyou susky :)

and thanks to rocknbil for one that validates ( not that that stopped me from playing :)
11:59 pm on June 22, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


Math.pow("cool beans",2)! That is awesome, thanks for sharing - will have a read through the code tomorrow. :)
7:34 am on June 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


G.x and G.y not initialized ?

Well done.
9:24 am on June 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


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?!
1:06 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


Use [code][/code] tags:

arr[i]
1:07 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


Alternatively, use the "reply to this topic" link, and then select the "Disable codes for this message" checkbox.
1:21 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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>
1:30 pm on June 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


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]
1:33 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


Note, this game doesn't seem to work in Chrome.
1:41 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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>
2:13 pm on June 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


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)"!)
2:33 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


Chrome 12 is the latest.
5:07 pm on June 23, 2011 (gmt 0)

New User

joined:June 22, 2011
posts:11
votes: 0


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 :)
5:33 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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. :)
5:45 pm on June 23, 2011 (gmt 0)

Moderator from GB 

WebmasterWorld Administrator brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 30, 2002
posts:4842
votes: 1


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.
5:49 pm on June 23, 2011 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:6717
votes: 230


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]

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

Moderator from GB 

WebmasterWorld Administrator brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 30, 2002
posts:4842
votes: 1


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
6:17 pm on June 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


...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.
6:37 pm on June 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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. :)
6:47 pm on June 23, 2011 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:6717
votes: 230


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