小游戏--俄罗斯方块

<!DOCTYPE HTML>
<head>
<title>js俄罗斯方块游戏</title>
<style type="text/css">
body{ background-color:#eee}
#gameArea{ background-color:#fff; width: 293px; border:#fff 2px solid; margin:0 auto; font-size:12px;}
#gameArea .mainArea{ float:left; width:216px; height:324px; border:1px solid #fff;}
#gameArea .mainArea div{ background-color:#EFEFEF; width:10px; height:10px; float:left; border:1px solid #fff; overflow:hidden;}
#gameArea .mainArea div.show{ background-color:#93D034;}
#gameArea .mainArea div.current{ background-color:#EFA53C;}
#gameArea .mainArea div.gameover{ background-color:#EFA53C;}
#gameArea .infoArea{ float:left; border-left:#fff solid 1px; width:74px; height:324px;}
#gameArea .score{ width:60px; margin: 20px auto 5px auto; color:#EFA53C; padding: 5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; text-align:center;}
#gameArea .clear{ clear:both;}
</style>
<script type="text/javascript">
var boxGame = function( target ){//初始化开始var gameArea, mainArea, infoArea, scoreArea, grids;( function(){gameArea = document.createElement( 'div' );gameArea.id = 'gameArea';gameArea.innerHTML = function(){var  line = 486,html   =  '<div class="mainArea">';while( line-- )html   +=  '<div></div>';html   +=  '<br class="clear"></div><div class="infoArea">';html   +=  '<div class="score">0</div>';html   +=  '</div><br class="clear">';return html;}();target = target || document.body;target.appendChild( gameArea );mainArea  = gameArea.firstChild;infoArea  = mainArea.nextSibling;scoreArea = infoArea.firstChild;grids = function( area ){var i = 0, x = 0, l = 28, elem, boxs = [ ];var elems = mainArea.getElementsByTagName( 'div' );while( --l ) boxs.push( [ ] );l = 0;while( elem = elems[ i ] ){if( x == 18 ){l++;x = 0;}boxs[ l ].push({elem   : elem,status : 0});i++;x++;}return boxs;}( mainArea );})();var x1, x2, x3, x4, y1, y2, y3, y4, intervalDropMove, intervalCheckSuccess,gameStatus        =   1,score               =   0,nextGridsType     =   0,className         =   [ ' ', 'show', 'current' ],switchGridsType   =   [ 1, 0, 3, 4, 5, 2, 7, 6, 9, 8, 11, 12, 13, 10, 14, 16, 17, 18, 15 ],gridsType         =   [[ [  0,  0 ], [  0,  1 ], [  0,  2 ], [  0,  3 ], -2 ],[ [  0,  2 ], [  1,  2 ], [  2,  2 ], [  3,  2 ], 2  ],[ [  0,  1 ], [  0,  2 ], [  1,  2 ], [  2,  2 ], 0  ],[ [  0,  3 ], [  1,  1 ], [  1,  2 ], [  1,  3 ], 1  ],[ [  0,  2 ], [  1,  2 ], [  2,  2 ], [  2,  3 ], 0  ],[ [  0,  1 ], [  0,  2 ], [  0,  3 ], [  1,  1 ], 1  ],[ [  0,  1 ], [  1,  1 ], [  1,  2 ], [  2,  2 ], 0  ],[ [  0,  2 ], [  0,  3 ], [  1,  1 ], [  1,  2 ], 1  ],[ [  0,  2 ], [  1,  1 ], [  1,  2 ], [  2,  1 ], 0  ],[ [  0,  1 ], [  0,  2 ], [  1,  2 ], [  1,  3 ], 1  ],[ [  0,  1 ], [  0,  2 ], [  0,  3 ], [  1,  2 ], 0  ],[ [  0,  2 ], [  1,  2 ], [  1,  3 ], [  2,  2 ], 1  ],[ [  0,  2 ], [  1,  1 ], [  1,  2 ], [  1,  3 ], 0  ],[ [  0,  2 ], [  1,  1 ], [  1,  2 ], [  2,  2 ], 1  ],[ [  0,  1 ], [  0,  2 ], [  1,  1 ], [  1,  2 ], 0  ],[ [  0,  1 ], [  0,  2 ], [  1,  1 ], [  2,  1 ], 0  ],[ [  0,  1 ], [  0,  2 ], [  0,  3 ], [  1,  3 ], 1  ],[ [  0,  3 ], [  1,  3 ], [  2,  3 ], [  2,  2 ], 0  ],[ [  0,  1 ], [  1,  1 ], [  1,  2 ], [  1,  3 ], 0  ]],gameOver          =   [[ 5, 2  ], [ 6, 1  ], [ 7, 1  ], [ 8, 1  ], [ 9, 2  ], [ 8, 3  ], [ 7, 3  ], [ 6, 3  ],[ 5, 5  ], [ 6, 5  ], [ 7, 5  ], [ 8, 5  ], [ 9, 6  ], [ 8, 7  ], [ 7, 7  ], [ 6, 7  ], [ 5, 7  ],[ 5, 9  ], [ 5, 10 ], [ 5, 11 ], [ 6, 9  ], [ 7, 9  ], [ 7, 10 ], [ 7, 11 ], [ 8, 9  ], [ 9, 9  ], [ 9, 10 ], [ 9, 11 ],[ 5, 13 ], [ 5, 14 ], [ 5, 15 ], [ 6, 13 ], [ 6, 15 ], [ 7, 13 ], [ 7, 15 ], [ 8, 13 ], [ 9, 13 ], [ 8, 14 ], [ 9, 15 ]];setGridsStatus = function( status ){var i = 0, xy = [ x1, x2, x3, x4, y1, y2, y3, y4 ];for( ;i < 4; i ++ ){grids[ xy[ i + 4 ] ][ xy[ i ] ].elem.className = className[ status ];grids[ xy[ i + 4 ] ][ xy[ i ] ].status = status;}},random = function( min, max ){return Math.floor( Math.random() * ( max - min + 1 ) + min );},createRandomGrids = function( number ){var xy, x, pos;if( number > -1 )xy = getCurrentMinXY();else{xy = false;number = random( 0, 18 );}pos               =  gridsType      [ number ];nextGridsType     =  switchGridsType[ number ];y1 = pos[ 0 ][ 0 ];y2 = pos[ 1 ][ 0 ];y3 = pos[ 2 ][ 0 ];y4 = pos[ 3 ][ 0 ];x1 = pos[ 0 ][ 1 ] + 7;x2 = pos[ 1 ][ 1 ] + 7;x3 = pos[ 2 ][ 1 ] + 7;x4 = pos[ 3 ][ 1 ] + 7;if( xy ){x  = xy.x - x1 + pos[ 4 ];y1 += xy.y;y2 += xy.y;y3 += xy.y;y4 += xy.y;x1 += x;x2 += x;x3 += x;x4 += x;while( !x1 || !x2 || !x3 || !x4 ){x1++;  x2++; x3++; x4++;}while( x1 > 17 || x2 > 17 || x3 > 17 || x4 > 17 ){x1--; x2--;   x3--;   x4--;}}},getCurrentMinXY = function(){return { y: Math.min( y1, y2, y3, y4 ), x:Math.min( x1, x2, x3, x4 ) };},clearTodefault  = function(){for( var i = 0, j = 18; i < 27; i++ ){( function( j ){while(  --j > -1 ){grids[ i ][ j ].status = 0;grids[ i ][ j ].elem.className = '';}})( j );}},showText  = function( gridsGroup, className ){for( var i = 0, grid; grid = gridsGroup[ i ]; i++ )grids[ grid[ 0 ] ][ grid[ 1 ] ].elem.className = className || 'show';},dropMove = function(){if(y1 == 26 || y2 == 26 || y3 == 26 || y4 == 26 ||grids[ y1 + 1 ][ x1 ].status == 1 ||grids[ y2 + 1 ][ x2 ].status == 1 ||grids[ y3 + 1 ][ x3 ].status == 1 ||grids[ y4 + 1 ][ x4 ].status == 1){setGridsStatus( 2 );setGridsStatus( 1 );if( !y1 || !y2 || !y3 || !y4 ){clearInterval( intervalDropMove );clearInterval( intervalCheckSuccess );clearTodefault( );gameStatus = 0;showText( gameOver, 'gameover' );return false;}createRandomGrids();return false;}setGridsStatus( 0 );y1++; y2++; y3++; y4++;setGridsStatus( 2 );},checkSuccess = function(){for( var i = 0, __score = 0; i < 27; i++ ){(function( i ){for( var j = 0; j < 18; j++ )if( grids[ i ][ j ].status != 1 ) return false;while( i > 0 ){j = 0;for( ;j < 18; j++ ){grids[ i ][ j ].status = grids[ i - 1 ][ j ].status;grids[ i ][ j ].elem.className = grids[ i - 1 ][ j ].elem.className;}i--;}__score ++;})( i );}score += __score * __score * 100;scoreArea.innerHTML = score;};createRandomGrids();setGridsStatus( 2 );intervalDropMove = setInterval( dropMove , 500 );intervalCheckSuccess = setInterval( checkSuccess, 500 );( document.documentElement || document.body ).onkeydown = function( e ){if( !gameStatus ) return;switch( ( window.event || e ).keyCode ){case 13:case 38:getCurrentMinXY();setGridsStatus( 0 );createRandomGrids( nextGridsType );                                setGridsStatus( 2 );break;case 32:case 40:dropMove();break;case 37:if(!x1 || !x2 || !x3 || !x4 ||grids[ y1 ][ x1 - 1 ].status == 1 ||grids[ y2 ][ x2 - 1 ].status == 1 ||grids[ y3 ][ x3 - 1 ].status == 1 ||grids[ y4 ][ x4 - 1 ].status == 1)return false;setGridsStatus( 0 );x1--; x2--; x3--; x4--;setGridsStatus( 2 );break;case 39:setGridsStatus( 0 );if(x1 == 17 || x2 == 17 || x3 == 17 || x4 == 17 ||grids[ y1 ][ x1 + 1 ].status == 1 ||grids[ y2 ][ x2 + 1 ].status == 1 ||grids[ y3 ][ x3 + 1 ].status == 1 ||grids[ y4 ][ x4 + 1 ].status == 1)return false;x1++; x2++; x3++; x4++;setGridsStatus( 2 );break;}};
};
window.onload = function(){boxGame( document.getElementById( "area" ) );
};
</script>
</head>
<body>
<div id="area" style="margin:auto; width:100%;"></div>
</body>
</html>

小游戏--俄罗斯方块相关推荐

鸿蒙小游戏-俄罗斯方块
作者:225王宗振前言为了更好地熟练掌握鸿蒙手机应用开发,查阅资料和算法尝试开发鸿蒙小游戏--俄罗斯方块. 概述完成鸿蒙小游戏APP在手机上的编译在项目中所使用到的软件为DevEco Studi ...
原生js小游戏——俄罗斯方块
还记得童年时期的小游戏俄罗斯方块吗?我发现用js就可以写出来页面效果如下: 具体代码如下: 首先展示css样式: .c {margin: 1px;width: 19px;height: 19px;b ...
python tkinter火柴人_用Python实现童年小游戏俄罗斯方块！别说还挺好玩！
原标题:用Python实现童年小游戏俄罗斯方块!别说还挺好玩! 前言大三上学期的程序设计实训大作业,挑了其中一个我认为最简单的的<图书管理系统>来写.用python写是因为py有自带的G ...
Java小游戏-俄罗斯方块
摘要随着时代的不断发展,个人电脑也在不断普及,一些有趣的桌面游戏已经成为人们在使用计算机进行工作或工作之余休闲娱乐的首选,从最开始的Windows系统自带的黑白棋.纸牌.扫雷等游戏开始,到现在目不 ...
python实现小游戏论文_用Python实现童年小游戏俄罗斯方块
在那个电子产品比较匮乏的年代,小游戏机还是为数不多的游戏类电子产品,对小孩子更是有着不可抗拒的魔力,在当时如果哪个小孩买了一个小游戏机,大伙一定迅速围上去... 俄罗斯方块作为其中一款小游戏,尽管规 ...
【Python教你一招】用Python实现童年小游戏俄罗斯方块
学习素材与源码在Python学习交流群:733089476 获取在那个电子产品比较匮乏的年代,小游戏机还是为数不多的游戏类电子产品,对小孩子更是有着不可抗拒的魔力,在当时如果哪个小孩买了一个小游戏机 ...
Eclipse小游戏-俄罗斯方块
个人写的Eclipse小游戏,大家代码写累了,可以拿来玩玩. 分为两个部分,一个是eclipse插件,直接将jar包放到eclipse的drops目录下,重启eclipse就可生效:另外还弄了个Ser ...
Pascal小游戏俄罗斯方块怀旧版
俄罗斯方块怀旧版(注释版) {$APPTYPE GUI} {$MODE DELPHI} program WinPiece; uses Windows; const AppName = 'WinPiec ...
python小游戏——俄罗斯方块
最近研究pygame游戏制作板块,本次对于简单的俄罗斯方块进行介绍. 1.首先引入我们需要用到的pygame库和random库(pygame库基础知识请移步首页) import pygame impo ...
C语言小游戏----俄罗斯方块
游戏介绍: 1. 按方向键的左右键可实现方块的左右移动. 2. 按方向键的下键可实现方块的加速下落. 3. 按空格键可实现方块的顺时针旋转. 4. 按Esc键可退出游戏. 5. 按S键可暂停游戏,暂停 ...

小游戏--俄罗斯方块

小游戏--俄罗斯方块相关推荐

最新文章

热门文章