- <!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);
- 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>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/110320148962.html
来源: http://www.codesnippet.cn/detail/110320148962.html