先实现完成阶段二的前两个需求，生成一个L型的模型，将容器分割成18行10列的代码。

    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.         .actvity_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.     </style>
    24. </head>
    25. <body onload="init();">
    26.     <!-- 背景容器 -->
    27.     <div id="container" class="container">
    28.         <!-- 块元素 -->
    30.     </div>
    32.     <script>
    33.         //创建一个常量控制步长
    34.         const STEP = 20;
    35.         //定义常量分割容器
    36.         const ROW_COUNT = 18,COL_COUNT = 10;
    37.         //创建每个模型的数据源(L型)
    38.         const MODELS = [
    39.             {
    40.                 0:{
    41.                     row:2,
    42.                     col:0
    43.                 },
    44.                 1:{
    45.                     row:2,
    46.                     col:1
    47.                 },
    48.                 2:{
    49.                     row:2,
    50.                     col:2
    51.                 },
    52.                 3:{
    53.                     row:1,
    54.                     col:2
    55.                 }
    56.             }
    57.         ];
    59.         //创建变量，存放当前使用的模型
    60.         var currentModel = {};
    61.         //入口方法
    62.         function init(){
    63.             createModel();
    64.             onKeyDown();
    65.         }
    67.         //根据模型的数据创建对应的块元素
    68.         function createModel(){
    69.             //确定当前使用哪一个模型
    70.             currentModel = MODELS[0];
    71.             //生成对应数量的块元素
    72.             for (var key in currentModel){
    73.                 var divEle = document.createElement("div");
    74.                 divEle.className = "actvity_model";
    75.                 document.querySelector("#container").appendChild(divEle);
    76.             }
    77.             //定位块元素的位置
    78.             locationBlock();
    79.         }
    81.         //根据数据源定位块元素的位置
    82.         function locationBlock(){
    83.             //1.拿到所有的块元素
    84.             var eles = document.querySelectorAll(".actvity_model");
    85.             for (var i = 0;i<eles.length;i++){
    86.                 //单个块元素
    87.                 var actvityModelEle = eles[i];
    88.                 //2.找到每个块元素对应的数据
    89.                 var blockModel = currentModel[i];
    90.                 //3.根据每个块元素对应的数据来指定块元素的位置
    91.                 actvityModelEle.style.left = blockModel.col * STEP + "px";
    92.                 actvityModelEle.style.top = blockModel.row * STEP + "px";
    93.             }
    94.         }
    96.         //监听用户键盘事件
    97.         function onKeyDown(){
    98.             document.onkeydown = function(evnet){
    99.                 switch(event.keyCode){
    100.                     case 38:
    101.                         console.log("上");
    102.                         move(0,-1);
    103.                         break;
    104.                     case 39:
    105.                         console.log("右");
    106.                         move(1,0);
    107.                         break;
    108.                     case 40:
    109.                         console.log("下");
    110.                         move(0,1);
    111.                         break;
    112.                     case 37:
    113.                         console.log("左");
    114.                         move(-1,0);
    115.                         break;
    116.                 }
    117.             }
    118.         }
    120.         //控制块元素移动
    121.         function move(x,y){
    122.             var actvityModelEle = document.querySelector(".actvity_model");
    123.             actvityModelEle.style.top = parseInt(actvityModelEle.style.top || 0) + y * STEP + "px";
    124.             actvityModelEle.style.left = parseInt(actvityModelEle.style.left || 0) + x * STEP + "px";
    125.         }
    126.     </script>
    127. </body>
    128. </html>

    下面代码完成模型的移动

    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.         .actvity_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.     </style>
    24. </head>
    25. <body onload="init();">
    26.     <!-- 背景容器 -->
    27.     <div id="container" class="container">
    28.         <!-- 块元素 -->
    30.     </div>
    32.     <script>
    33.         //创建一个常量控制步长
    34.         const STEP = 20;
    35.         //定义常量分割容器
    36.         const ROW_COUNT = 18,COL_COUNT = 10;
    37.         //创建每个模型的数据源(L型)
    38.         const MODELS = [
    39.             {
    40.                 0:{
    41.                     row:2,
    42.                     col:0
    43.                 },
    44.                 1:{
    45.                     row:2,
    46.                     col:1
    47.                 },
    48.                 2:{
    49.                     row:2,
    50.                     col:2
    51.                 },
    52.                 3:{
    53.                     row:1,
    54.                     col:2
    55.                 }
    56.             }
    57.         ];
    59.         //创建变量，存放当前使用的模型
    60.         var currentModel = {};
    62.         //创建变量标记16宫格的位置
    63.         var currentX = 0,currentY = 0;
    64.         //入口方法
    65.         function init(){
    66.             createModel();
    67.             onKeyDown();
    68.         }
    70.         //根据模型的数据创建对应的块元素
    71.         function createModel(){
    72.             //确定当前使用哪一个模型
    73.             currentModel = MODELS[0];
    74.             //生成对应数量的块元素
    75.             for (var key in currentModel){
    76.                 var divEle = document.createElement("div");
    77.                 divEle.className = "actvity_model";
    78.                 document.querySelector("#container").appendChild(divEle);
    79.             }
    80.             //定位块元素的位置
    81.             locationBlock();
    82.         }
    84.         //根据数据源定位块元素的位置
    85.         function locationBlock(){
    86.             //1.拿到所有的块元素
    87.             var eles = document.querySelectorAll(".actvity_model");
    88.             for (var i = 0;i<eles.length;i++){
    89.                 //单个块元素
    90.                 var actvityModelEle = eles[i];
    91.                 //2.找到每个块元素对应的数据
    92.                 var blockModel = currentModel[i];
    93.                 //3.根据每个块元素对应的数据来指定块元素的位置
    94.                 //每个块元素的位置由两个条件决定：1、16宫格所在的位置。 2、块元素在16宫格中的位置
    95.                 actvityModelEle.style.left = (currentX + blockModel.col) * STEP + "px";
    96.                 actvityModelEle.style.top = (currentY + blockModel.row) * STEP + "px";
    97.             }
    98.         }
    100.         //监听用户键盘事件
    101.         function onKeyDown(){
    102.             document.onkeydown = function(evnet){
    103.                 switch(event.keyCode){
    104.                     case 38:
    105.                         console.log("上");
    106.                         move(0,-1);
    107.                         break;
    108.                     case 39:
    109.                         console.log("右");
    110.                         move(1,0);
    111.                         break;
    112.                     case 40:
    113.                         console.log("下");
    114.                         move(0,1);
    115.                         break;
    116.                     case 37:
    117.                         console.log("左");
    118.                         move(-1,0);
    119.                         break;
    120.                 }
    121.             }
    122.         }
    124.         //控制块元素移动
    125.         function move(x,y){
    126.             //16宫格在动
    127.             currentX += x;
    128.             currentY += y;
    129.             //根据16宫格来重新定位块元素
    130.             locationBlock();
    131.         }
    132.     </script>
    133. </body>
    134. </html>

    最后，我们来实现模型的旋转，这旋转的实现基于两条算法规则。
    image.png
    image.png
    然后，我们把此算法运用到代码中，见rotate()函数

    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.         .actvity_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.     </style>
    24. </head>
    25. <body onload="init();">
    26.     <!-- 背景容器 -->
    27.     <div id="container" class="container">
    28.         <!-- 块元素 -->
    30.     </div>
    32.     <script>
    33.         //创建一个常量控制步长
    34.         const STEP = 20;
    35.         //定义常量分割容器
    36.         const ROW_COUNT = 18,COL_COUNT = 10;
    37.         //创建每个模型的数据源(L型)
    38.         const MODELS = [
    39.             {
    40.                 0:{
    41.                     row:2,
    42.                     col:0
    43.                 },
    44.                 1:{
    45.                     row:2,
    46.                     col:1
    47.                 },
    48.                 2:{
    49.                     row:2,
    50.                     col:2
    51.                 },
    52.                 3:{
    53.                     row:1,
    54.                     col:2
    55.                 }
    56.             }
    57.         ];
    59.         //创建变量，存放当前使用的模型
    60.         var currentModel = {};
    62.         //创建变量标记16宫格的位置
    63.         var currentX = 0,currentY = 0;
    64.         //入口方法
    65.         function init(){
    66.             createModel();
    67.             onKeyDown();
    68.         }
    70.         //根据模型的数据创建对应的块元素
    71.         function createModel(){
    72.             //确定当前使用哪一个模型
    73.             currentModel = MODELS[0];
    74.             //生成对应数量的块元素
    75.             for (var key in currentModel){
    76.                 var divEle = document.createElement("div");
    77.                 divEle.className = "actvity_model";
    78.                 document.querySelector("#container").appendChild(divEle);
    79.             }
    80.             //定位块元素的位置
    81.             locationBlock();
    82.         }
    84.         //根据数据源定位块元素的位置
    85.         function locationBlock(){
    86.             //1.拿到所有的块元素
    87.             var eles = document.querySelectorAll(".actvity_model");
    88.             for (var i = 0;i<eles.length;i++){
    89.                 //单个块元素
    90.                 var actvityModelEle = eles[i];
    91.                 //2.找到每个块元素对应的数据
    92.                 var blockModel = currentModel[i];
    93.                 //3.根据每个块元素对应的数据来指定块元素的位置
    94.                 //每个块元素的位置由两个条件决定：1、16宫格所在的位置。 2、块元素在16宫格中的位置
    95.                 actvityModelEle.style.left = (currentX + blockModel.col) * STEP + "px";
    96.                 actvityModelEle.style.top = (currentY + blockModel.row) * STEP + "px";
    97.             }
    98.         }
    100.         //监听用户键盘事件
    101.         function onKeyDown(){
    102.             document.onkeydown = function(evnet){
    103.                 switch(event.keyCode){
    104.                     case 38:
    105.                         console.log("上");
    106.                         rotate();
    107.                         break;
    108.                     case 39:
    109.                         console.log("右");
    110.                         move(1,0);
    111.                         break;
    112.                     case 40:
    113.                         console.log("下");
    114.                         move(0,1);
    115.                         break;
    116.                     case 37:
    117.                         console.log("左");
    118.                         move(-1,0);
    119.                         break;
    120.                 }
    121.             }
    122.         }
    124.         //控制块元素移动
    125.         function move(x,y){
    126.             //16宫格在动
    127.             currentX += x;
    128.             currentY += y;
    129.             //根据16宫格来重新定位块元素
    130.             locationBlock();
    131.         }
    133.         //控制模型的旋转
    134.         function rotate(){
    135.             //算法
    136.             //旋转后的行 == 旋转前的列
    137.             //旋转后的列 == 3-旋转前的行
    139.             //遍历我们当前的 模型数据源
    140.             for (var key in currentModel){
    141.                 //块元素数据源
    142.                 var blockModel = currentModel[key];
    143.                 //实现算法
    144.                 var temp = blockModel.row;
    145.                 blockModel.row = blockModel.col;
    146.                 blockModel.col = 3-temp;
    147.                 locationBlock();
    148.             }
    149.         }
    150.     </script>
    151. </body>
    152. </html>