homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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



 
Msg#: 4329189 posted 5:10 am on Jun 22, 2011 (gmt 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>

 

rocknbil

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



 
Msg#: 4329189 posted 5:24 pm on Jun 22, 2011 (gmt 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>

Leosghost

WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4329189 posted 5:37 pm on Jun 22, 2011 (gmt 0)

"cool beans" ...Yes indeed :)

Thankyou susky :)

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

penders

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



 
Msg#: 4329189 posted 11:59 pm on Jun 22, 2011 (gmt 0)

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

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4329189 posted 7:34 am on Jun 23, 2011 (gmt 0)

G.x and G.y not initialized ?

Well done.

penders

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



 
Msg#: 4329189 posted 9:24 am on Jun 23, 2011 (gmt 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?!

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 1:06 pm on Jun 23, 2011 (gmt 0)

Use [code][/code] tags:

arr[i]

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 1:07 pm on Jun 23, 2011 (gmt 0)

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 1:21 pm on Jun 23, 2011 (gmt 0)

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

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



 
Msg#: 4329189 posted 1:30 pm on Jun 23, 2011 (gmt 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]

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 1:33 pm on Jun 23, 2011 (gmt 0)

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 1:41 pm on Jun 23, 2011 (gmt 0)

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

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



 
Msg#: 4329189 posted 2:13 pm on Jun 23, 2011 (gmt 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)"!)

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 2:33 pm on Jun 23, 2011 (gmt 0)

Chrome 12 is the latest.

Shazam0527



 
Msg#: 4329189 posted 5:07 pm on Jun 23, 2011 (gmt 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 :)

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 5:33 pm on Jun 23, 2011 (gmt 0)

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

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



 
Msg#: 4329189 posted 5:45 pm on Jun 23, 2011 (gmt 0)

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

WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4329189 posted 5:49 pm on Jun 23, 2011 (gmt 0)

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

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



 
Msg#: 4329189 posted 5:53 pm on Jun 23, 2011 (gmt 0)

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

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



 
Msg#: 4329189 posted 6:17 pm on Jun 23, 2011 (gmt 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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4329189 posted 6:37 pm on Jun 23, 2011 (gmt 0)

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

WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4329189 posted 6:47 pm on Jun 23, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved