1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style type="text/css">
    9.         .container{
    10.             width: 200px;
    11.             height: 360px;
    12.             background-color: antiquewhite;
    13.             position: relative;
    14.         }
    15.         .activity_model{
    16.             width: 20px;
    17.             height: 20px;
    18.             background-color: cornflowerblue;
    19.             border: .3px solid rgb(148, 170, 218);
    20.             box-sizing: border-box;
    21.             position: absolute;
    22.         }
    23.         .fixed_model{
    24.             width: 20px;
    25.             height: 20px;
    26.             background-color: rgb(75, 79, 92);
    27.             border: .3px solid rgb(162, 167, 177);
    28.             box-sizing: border-box;
    29.             position: absolute;
    30.         }
    31.     </style>
    32. </head>
    33. <body onload="init();">
    34.     <!-- 背景容器 -->
    35.     <div id="container" class="container">
    36.         <!-- 块元素 -->
    38.     </div>
    40.     <script>
    41.         //创建一个常量控制步长
    42.         const STEP = 20;
    43.         //定义常量分割容器
    44.         const ROW_COUNT = 18,COL_COUNT = 10;
    45.         //创建每个模型的数据源(L型)
    46.         const MODELS = [
    47.             {
    48.                 0:{
    49.                     row:2,
    50.                     col:0
    51.                 },
    52.                 1:{
    53.                     row:2,
    54.                     col:1
    55.                 },
    56.                 2:{
    57.                     row:2,
    58.                     col:2
    59.                 },
    60.                 3:{
    61.                     row:1,
    62.                     col:2
    63.                 }
    64.             }
    65.         ];
    67.         //创建变量，存放当前使用的模型
    68.         var currentModel = {};
    70.         //创建变量标记16宫格的位置
    71.         var currentX = 0,currentY = 0;
    72.         //记录所有块元素的位置
    73.         //k=行_列 : v=块元素
    74.         var fixedBlocks = {};
    76.         //入口方法
    77.         function init(){
    78.             createModel();
    79.             onKeyDown();
    80.         }
    82.         //根据模型的数据创建对应的块元素
    83.         function createModel(){
    84.             //确定当前使用哪一个模型
    85.             currentModel = MODELS[0];
    86.             //重新初始化16宫格的位置
    87.             currentX = 0;
    88.             currentY = 0;
    89.             //生成对应数量的块元素
    90.             for (var key in currentModel){
    91.                 var divEle = document.createElement("div");
    92.                 divEle.className = "activity_model";
    93.                 document.querySelector("#container").appendChild(divEle);
    94.             }
    95.             //定位块元素的位置
    96.             locationBlock();
    97.         }
    99.         //根据数据源定位块元素的位置
    100.         function locationBlock(){
    101.             //判断块元素的越界行为
    102.             checkBound();
    103.             //1.拿到所有的块元素
    104.             var eles = document.querySelectorAll(".activity_model");
    105.             for (var i = 0;i<eles.length;i++){
    106.                 //单个块元素
    107.                 var activityModelEle = eles[i];
    108.                 //2.找到每个块元素对应的数据
    109.                 var blockModel = currentModel[i];
    110.                 //3.根据每个块元素对应的数据来指定块元素的位置
    111.                 //每个块元素的位置由两个条件决定：1、16宫格所在的位置。 2、块元素在16宫格中的位置
    112.                 activityModelEle.style.left = (currentX + blockModel.col) * STEP + "px";
    113.                 activityModelEle.style.top = (currentY + blockModel.row) * STEP + "px";
    114.             }
    115.         }
    117.         //监听用户键盘事件
    118.         function onKeyDown(){
    119.             document.onkeydown = function(evnet){
    120.                 switch(event.keyCode){
    121.                     case 38:
    122.                         console.log("上");
    123.                         rotate();
    124.                         break;
    125.                     case 39:
    126.                         console.log("右");
    127.                         move(1,0);
    128.                         break;
    129.                     case 40:
    130.                         console.log("下");
    131.                         move(0,1);
    132.                         break;
    133.                     case 37:
    134.                         console.log("左");
    135.                         move(-1,0);
    136.                         break;
    137.                 }
    138.             }
    139.         }
    141.         //控制块元素移动
    142.         function move(x,y){
    143.             if (isMeet(currentX + x,currentY+y,currentModel)){
    144.                 //底部的触碰发生在移动16宫格的时候，并且这次移动是因为Y轴的变化引起的
    145.                 if (y!=0){
    146.                     //模型之间底部发生触碰
    147.                     fixedBottomModel();
    148.                 }
    149.                 return;
    150.             }
    151.             //16宫格在动
    152.             currentX += x;
    153.             currentY += y;
    154.             //根据16宫格来重新定位块元素
    155.             locationBlock();
    156.         }
    158.         //控制模型的旋转
    159.         function rotate(){
    160.             //克隆一下currentModel，这里利用JSON方法完全复制一个currentModel
    161.             var json_obj = JSON.stringify(currentModel);
    162.             var cloneCurrentModel = JSON.parse(json_obj);
    163.             //算法
    164.             //旋转后的行 == 旋转前的列
    165.             //旋转后的列 == 3-旋转前的行
    167.             //遍历我们当前的 模型数据源
    168.             for (var key in cloneCurrentModel){
    169.                 //块元素数据源
    170.                 var blockModel = cloneCurrentModel[key];
    171.                 //实现算法
    172.                 var temp = blockModel.row;
    173.                 blockModel.row = blockModel.col;
    174.                 blockModel.col = 3-temp;   
    175.             }
    176.             //如果旋转之后会发生触碰，那么就不需要进行旋转了
    177.             if (isMeet(currentX,currentY,cloneCurrentModel)){
    178.                 return;
    179.             }
    180.             //接受这次旋转
    181.             currentModel = cloneCurrentModel;
    182.             locationBlock();
    183.         }
    185.         //控制模型只能在容器中移动
    186.         function checkBound(){
    187.             //定义模型活动的边界
    188.             var leftBound = 0,rightBound = COL_COUNT,bottomBound = ROW_COUNT;
    189.             //当块元素超出边界，让16宫格向后退一步
    190.             for (var key in currentModel){
    191.                 var blockModel = currentModel[key];
    192.                 //判断左侧越界
    193.                 if (blockModel.col + currentX < leftBound) {
    194.                     currentX++;
    195.                 }
    196.                 //判断右侧越界
    197.                 if (blockModel.col + currentX >= rightBound) {
    198.                     currentX--;
    199.                 }
    200.                 //判断底部越界
    201.                 if (blockModel.row + currentY >= bottomBound){
    202.                     currentY--;
    203.                     //把模型固定在底部
    204.                     fixedBottomModel();
    205.                 }
    206.             }
    207.         }
    209.         //把模型固定在底部
    210.         function fixedBottomModel() {
    211.             //1.改变模型(中块元素)的样式
    212.             //2.让模型不可以再进行移动
    213.             var activityModelEles = document.querySelectorAll(".activity_model");
    214.             for (var i = activityModelEles.length - 1;i >= 0;i--){
    215.                 //更改每个块元素的类名
    216.                 //由于类名被更改，我们模型移动依靠的就是修改activity_model类的定位，现在不是原类名，自然就无法移动了
    217.                 activityModelEles[i].className = "fixed_model";
    218.                 //记录块元素的位置
    219.                 var blockModel = currentModel[i];
    220.                 fixedBlocks[(currentY + blockModel.row) + "_" + (currentX + blockModel.col)] = activityModelEles[i];
    221.             }
    222.             //3.创建新的模型
    223.             createModel();
    224.         }
    226.         //判断模型之间的触碰问题
    227.         //X,Y表示16宫格<将要>移动到的位置
    228.         //model 表示当前数据源<将要>完成的变化
    229.         function isMeet(x,y,model){
    230.             //所谓模型之间的触碰，在一个固定位置已经存在一个被固定的元素块时，那么活动中的模型不可以再占用该位置
    231.             //判断触碰，就是判断活动中模型<将要移动到的位置>是否已经存在被固定的模型(块元素)了
    232.             //如果存在返回true，表示将要移动到的位置会发送触碰，反之返回false
    233.             for (var k in model) {
    234.                 var blockModel = model[k];
    235.                 //该位置是否已经存在块元素？
    236.                 if (fixedBlocks[(y + blockModel.row) + "_" + (x + blockModel.col)]){
    237.                     return true;
    238.                 }
    239.             }
    240.             return false;
    241.         }
    242.     </script>
    243. </body>
    244. </html>