1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>俄罗斯方块</title>
    5.     <meta charset="utf-8">
    6.     <style type="text/css">
    7.         .container{
    8.             left: 50px;
    9.             height: 360px;
    10.             width:200px;
    11.             background-color: #000000;
    12.             position:relative;
    14.         }
    15.         .activity_model{
    16.             height: 20px;
    17.             width: 20px;
    18.             top:0px;
    19.             left:0px;
    20.             border-style:solid;
    21.             border-width: 1px;
    22.             border-color: #ffffff;
    23.             background-color: #0000FE;
    24.             position: absolute;
    25.         }
    26.         .fixed_model{
    27.             height: 20px;
    28.             width: 20px;
    29.             top:0px;
    30.             left:0px;
    31.             border-style:solid;
    32.             border-width: 1px;
    33.             border-color: #333333;
    34.             background-color: #fefefe;
    35.             position: absolute;
    36.         }
    37.         .score{
    38.             height: 100px;
    39.             width: 300px;
    40.             display: flex;
    41.             flex-direction: column;
    42.             justify-content: center;
    43.             align-items: center;
    44.         }
    45.         .score_score{
    46.             height: 50px;
    47.             width: 300px;
    48.             display: flex;
    49.             flex-direction: row;
    50.             justify-content: center;
    51.             align-items: center;
    52.         }
    53.     </style>
    54.     <script type="text/javascript" src="http://cdn.bootcss.com/lodash.js/4.16.6/lodash.min.js"></script>
    55.     <script type="text/javascript">
    56.         //分数
    57.         var GAME_SCORE = 0;
    58.         //暂停状态
    59.         var CANCEL_STATE = false;
    60.         //游戏速度
    61.         var LEVEL = 1;
    62.         //游戏默认得分
    63.         var SCORE = 100;
    64.         //常数值
    65.         const STEP = 20;
    66.         const ROW_COUNT = 18;
    67.         const COL_COUNT = 10;
    69.         //定时器
    70.         var mInterval = null;
    72.         //模型类
    73.         const MODELS = [
    74.             //L
    75.             {
    76.                 0:{
    77.                     row:2,
    78.                     col:0
    79.                 },
    80.                 1:{
    81.                     row:2,
    82.                     col:1
    83.                 },
    84.                 2:{
    85.                     row:2,
    86.                     col:2
    87.                 },
    88.                 3:{
    89.                     row:1,
    90.                     col:2
    91.                 }
    92.             },
    93.             //凸形
    94.             {
    95.                 0:{
    96.                     row:1,
    97.                     col:1
    98.                 },
    99.                 1:{
    100.                     row:0,
    101.                     col:0
    102.                 },
    103.                 2:{
    104.                     row:1,
    105.                     col:0
    106.                 },
    107.                 3:{
    108.                     row:2,
    109.                     col:0
    110.                 }
    111.             },
    112.             //田
    113.             {
    114.                 0:{
    115.                     row:1,
    116.                     col:1
    117.                 },
    118.                 1:{
    119.                     row:2,
    120.                     col:1
    121.                 },
    122.                 2:{
    123.                     row:1,
    124.                     col:2
    125.                 },
    126.                 3:{
    127.                     row:2,
    128.                     col:2
    129.                 }
    130.             },
    131.             //一 形
    132.             {
    133.                 0:{
    134.                     row:0,
    135.                     col:0
    136.                 },
    137.                 1:{
    138.                     row:0,
    139.                     col:1
    140.                 },
    141.                 2:{
    142.                     row:0,
    143.                     col:2
    144.                 },
    145.                 3:{
    146.                     row:0,
    147.                     col:3
    148.                 }
    149.             },
    150.             //Z形状
    151.             {
    152.                 0:{
    153.                     row:1,
    154.                     col:1
    155.                 },
    156.                 1:{
    157.                     row:1,
    158.                     col:2
    159.                 },
    160.                 2:{
    161.                     row:2,
    162.                     col:2
    163.                 },
    164.                 3:{
    165.                     row:2,
    166.                     col:3
    167.                 }
    168.             }
    169.         ]
    172.         //当前使用的模型
    173.         var currentModel = {}
    175.         //16宫格的位置
    176.         var currentX = 0;
    177.         var currentY = 0;
    179.         //所有块元素的位置 行_列：块元素
    180.         var fixedBlocks = {}
    183.         //初始化
    184.         function init() {
    185.             // body...
    186.             createModel();
    187.             onKeyDown();
    188.         }
    190.         //键盘事件监听
    191.         function onKeyDown(){
    192.             document.onkeydown = function (event){
    193.             //console.log(event.keyCode)
    194.                 switch(event.keyCode){
    195.                     case 37:
    196.                         console.log("左");
    197.                         move(-1,0)
    198.                         break;
    199.                     case 38:
    200.                         console.log("上");
    201.                         rotate()
    202.                         break;
    203.                     case 39:
    204.                         console.log("右");
    205.                         move(1,0)
    206.                         break;
    207.                     case 40:
    208.                         console.log("下");
    209.                         move(0,1)
    210.                         break;
    211.                 }
    212.             }
    213.         }
    216.         //创建所使用的模型
    217.         function createModel(){
    218.             //先判断游戏是否结束，结束了才能生成新的块元素进行使用
    219.             if(isGameOver()){
    220.                 GameOver();
    221.                 return ;
    222.             }
    224.             //初始化16宫格
    225.             currentX = 0;
    226.             currentY = 0;
    227.             //确定使用的模型类型
    228.             currentModel = MODELS[_.random(0,MODELS.length - 1)]
    229.             //生成对应数量的块元素
    230.             for(let key in currentModel){
    231.                 var divEle = document.createElement("div");
    232.                 divEle.className = "activity_model"
    233.                 document.getElementById("container").appendChild(divEle);
    234.             }
    235.             //将生成的块元素进行定位
    236.             localtionBlocks();
    237.             //开始下落
    238.             autoDown();
    239.         }
    241.         //根据模型来定位块元素的位置
    242.         //完成定位的功能-移动模型就是进行不断的定位
    243.         function localtionBlocks(){
    244.             //检查一下当前的模型位置是否合理
    245.             checkBound();
    246.             //拿到所有的块元素
    247.             let eles = document.getElementsByClassName("activity_model");
    248.             for (var i = 0; i < eles.length; i++) {
    249.                 //单个块元素
    250.                 let activityModelEles = eles[i];
    251.                 //每个块元素对应的数据
    253.                 let blockmodel = currentModel[i]
    254.                 //每个块元素的位置由16宫格和自己相对的位置共同确定
    255.                 activityModelEles.style.top = (blockmodel.row + currentY) * STEP + "px";
    256.                 activityModelEles.style.left = (blockmodel.col + currentX) * STEP + "px";
    257.             }
    258.             // 找到每个块元素对应的数据
    259.             // 根据数据指定位置
    261.         }
    263.         //移动
    264.         function move(x,y){
    265.             // let activity = document.getElementsByClassName("activity_model")[0]
    266.             // //需要检查一下有没有越界，再者不能进行向上的移动
    267.             // activity.style.top = parseInt(activity.style.top||0) + y*STEP + "px";
    268.             // activity.style.left = parseInt(activity.style.left||0) + x*STEP + "px";
    269.             // 进行移动的其实是整个模型-16宫格移动
    271.             //移动前检查下下一个动作是否会导致无法移动
    273.             if(isMeet(currentX + x,currentY+y,currentModel)){
    274.                 if(y!==0){
    275.                     fixedBottomModel();
    276.                 }
    277.                 return;
    278.             }
    279.             currentX+=x;
    280.             currentY+=y;
    281.             //根据16宫格位置定位块元素位置
    282.             localtionBlocks();
    283.         }
    285.         //旋转
    286.         function rotate(){
    287.             //旋转后的行=旋转前的列
    288.             //旋转后的列=3-旋转前的行
    289.             //遍历当前使用的模型
    291.             //旋转时也检查下每个元素是否会相撞
    292.             //利用外置库创建一个新的模型对象
    293.             let clonecurrentModel = _.cloneDeep(currentModel);
    297.             for(let key in clonecurrentModel){
    298.                 //获取这个模型中的每一块
    299.                 let blockmodel = clonecurrentModel[key];
    300.                 let temp = blockmodel.row;
    301.                 blockmodel.row = blockmodel.col;
    302.                 blockmodel.col = 3 - temp;
    303.             }
    305.             if(isMeet(currentX,currentY,clonecurrentModel)){
    306.                 return;
    307.             }
    309.             currentModel = clonecurrentModel;
    310.             //console.log(currentModel === clonecurrentModel);
    311.             localtionBlocks();
    312.         }
    314.         //边界检测-控制模型在容器中
    315.         function checkBound(){
    316.             //定义模型可以活动的边界
    317.             let left = 0;
    318.             let right = COL_COUNT;
    319.             let bottom = ROW_COUNT;
    320.             //如果当前的模型超过了边界，所在的16宫格对应的后退一步
    321.             for(let key in currentModel){
    322.                 let blockmodel = currentModel[key];
    323.                 //左
    324.                 if((blockmodel.col + currentX) < left){
    325.                     currentX++;
    326.                 }
    327.                 //右
    328.                 if((blockmodel.col + currentX) >= right){
    329.                     currentX--;
    330.                 }
    331.                 //底部
    332.                 if((blockmodel.row + currentY) >= bottom){
    333.                     currentY--;
    334.                     //然后模型不能动了
    335.                     fixedBottomModel();
    336.                 }
    337.             }
    338.         }
    340.         //抵达底部的模型就固定
    341.         function fixedBottomModel(){
    342.             //改变模型的样式-改颜色
    343.             //让模型无法移动-让16宫格也不动
    344.             let eles = document.getElementsByClassName("activity_model");
    345.             for (var i = eles.length - 1; i >= 0; i--) {
    346.                 //单个块元素
    347.                 let activityModelEles = eles[i];
    348.                 //每个块元素类名
    349.                 activityModelEles.className = "fixed_model";
    350.                 let blockmodel = currentModel[i];
    351.                 //将固定了的块元素进行记录
    352.                 fixedBlocks[(currentY + blockmodel.row)+"_"+(currentX + blockmodel.col)] = activityModelEles;
    353.             }
    355.             //固定模型后去判断是否有一行铺满了要进行清理
    356.             isRemove();
    357.             //创建新模型
    358.             createModel();
    359.         }
    361.         //判断模型之间受否产生了碰撞
    362.         function isMeet(x,y,model){
    363.             //同一个位置只能有一个块元素
    364.             //x,y：16宫格将要抵达的位置
    365.             //model：模型元素将要完成的变化:旋转
    366.             //查看在当前这个模型的每个位置上是否已经存在了元素
    367.             for (var key in model) {
    368.                 var blockmodel = model[key];
    369.                 if(fixedBlocks[(y+blockmodel.row)+"_"+(x+blockmodel.col)]){
    370.                     return true;
    371.                 }
    372.                 //这里写了return false自然会出问题，因为第一个没有碰到就返回没碰到本身就不对
    373.                 //
    374.             }
    375.             return false
    376.         }
    378.         function isRemove(){
    379.             //判断一行是否已经被铺满了，如果被铺满了就清楚当前行所有的元素
    380.             for(let i = 0; i < ROW_COUNT; i++){
    381.                 let flag = true
    382.                 for(let j = 0; j < COL_COUNT; j++){
    383.                     if(!fixedBlocks[i+"_"+j]){
    384.                         flag = false
    385.                         break
    386.                     }
    387.                 }
    388.                 //判断当前行是否被铺满
    389.                 if(flag == true){
    390.                     //console.log("清除")
    391.                     removeline(i)
    392.                 }
    393.             }
    394.         }
    396.         function removeline(line){
    397.             for(let i = 0; i < COL_COUNT; i++){
    398.                 //删除改行的块元素
    399.                 document.getElementById("container").removeChild(fixedBlocks[line+"_"+i]);
    400.                 fixedBlocks[line+"_"+i] = null;
    401.             }
    402.             //清除当前行后，当前后上面的块元素要落到底部
    403.             downline(line);
    404.             //然后总得分增加
    405.             score_count();
    406.         }
    407.         //清理行之上的元素下落
    408.         function downline(line){
    409.             for (let i = line - 1; i >= 0; i--) {
    410.                 for(let j = 0;j < COL_COUNT; j++){
    411.                     if(!fixedBlocks[i+"_"+j]){
    412.                         continue;
    413.                     }
    414.                     //对于每个清理行之上的元素增大top然后记录块元素的记录也要更改，改变索引名称  A->B  new C=A 则C->B 让A->null 就变成了C->B  
    415.                     //元素位置下落
    416.                     fixedBlocks[(i+1)+"_"+j] = fixedBlocks[i+"_"+j];
    417.                     //实现元素位置下落
    418.                     fixedBlocks[(i+1)+"_"+j].style.top = (i+1)*STEP + "px";
    419.                     //清除原来的块元素
    420.                     fixedBlocks[i+"_"+j] = null;
    421.                 }
    422.             }
    423.         }
    424.         //模型自动降落
    426.         function autoDown(){
    427.             if(mInterval){
    428.                 clearInterval(mInterval);
    429.             }
    430.             mInterval = setInterval(function(){
    431.                 move(0,1);
    432.             },1000/LEVEL)
    433.         }
    435.         //判断游戏结束
    436.         function isGameOver(){
    437.             //第0行存在块元素就结束了
    438.             for(let i = 0; i < COL_COUNT; i++){
    439.                 if(fixedBlocks["0_"+i]){
    440.                     return true
    441.                 }
    442.             }
    443.             return false
    444.         }
    445.         //游戏结束
    446.         function GameOver(){
    447.             if(mInterval){
    448.                 clearInterval(mInterval);
    449.             }
    450.             alert("GameOver")
    451.         }
    452.         //开始游戏
    453.         function start(){
    454.             createModel();
    455.             onKeyDown();
    456.         }
    457.         //重新开始游戏
    458.         function restart(){
    459.             //清楚所有的块元素然后继续
    460.             //暂停状态变为没有暂停
    461.             //计时器取消
    462.             //当前的16宫格位置从开始开始
    463.             window.location.reload();
    464.         }
    465.         //暂停游戏
    466.         function cancel(){
    467.             if(CANCEL_STATE){
    468.                 //如果暂停了，就继续
    469.                 autoDown();
    470.                 CANCEL_STATE = false;
    471.                 onKeyDown();
    472.             }else{
    473.                 if(mInterval){
    474.                     clearInterval(mInterval);
    475.                 }
    476.                 CANCEL_STATE = true;
    478.                 //鼠标监听事件取消
    479.                 document.onkeydown = null;
    480.             }
    481.         }
    482.         //改变游戏的速度
    483.         function levelUP(){
    484.             if(LEVEL <= 3){
    485.                 LEVEL++;
    486.                 autoDown();
    487.                 onKeyDown();
    488.             }
    489.         }
    490.         function levelDOWN(){
    491.             if(LEVEL >= 1){
    492.                 LEVEL--;
    493.                 autoDown();
    494.                 onKeyDown();
    495.             }
    496.         }
    497.         //计算分数
    498.         function score_count(){
    499.             let leastscore = parseInt(document.getElementById("score").innerText);
    500.             //console.log(leastscore);
    501.             leastscore += LEVEL * SCORE;
    502.             document.getElementById("score").innerText = leastscore;
    503.         }
    504. </script>
    505. </head>
    506. <body>
    507. <!-- 背景容器 -->
    508.     <div class="container" id="container">
    509.         <!-- 块元素 -->
    510.     </div>
    511.     <div class="score">
    512.         <div class="score_score">
    513.             <p id="score">0</p>
    514.             <p>分</p>
    515.         </div>
    516.         <div class="score_control">
    517.             <button onclick="start()">开始</button>
    518.             <button onclick="restart()">重新</button>
    519.             <button onclick="cancel()">暂停</button>
    520.             <button onclick="levelUP()">levelUP</button>
    521.             <button onclick="levelDOWN()">levelDOWN</button>
    522.         </div>
    523.     </div>
    524. </body>
    525. </html>