<! 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 ++ ){ // 因为方块形状建模是4X4点阵.所以循环4次 m[y + k] = (G.d[G.n][t] >> ( 3 - k) * 4 & 0xF ) << Math.max(x, 0 ) >>- Math.min(x, 0 ); // G.d[G.n]为现在使用的方块点阵模型,[t]为第t种旋转模型点阵 // G.d[G.n][t]>>(3-k)*4&0xF为获取单行位移后的点阵 // <<Math.max(x,0)>>-Math.min(x,0)为判断x为左移还是右移 // m[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){ / / 分数与等级互换的概念...20分一级哦... 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 ++ ; // 将i移动到点阵模型有显示的第一行 if ( ! G.move( 3 , i - 3 , G.t)){ // 如果在点阵模型3行内不能进行向上位移(即点阵到游戏区顶部) alert( ' Game over! ' ); // 则Game over并提示 clearInterval(G.handle); // 良好习惯,清除计时器 } }, draw: function (){ for ( var i = 0 ;i < 240 ;i ++ ){ // 遍历游戏区全点阵,每i为全点阵中的1点 if ((G.v[parseInt(i / 12)]>>(11-i%12))&0x1){ // 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 > <!-- 这里运用了一个很好的技巧:!!的用法,可以将为空的数据转成false,避免出现空指针异常 --> </ div > </ div > </ body > </ html >
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
