H5情景意识 --飞机

当时进入民航大培训前做过一系列的测试，一共是8个小游戏，主要测试情景意识、反应能力、场面控制之类的，有几个还记忆犹新，这个数飞机只是其中之一，今天没事用JavaScript做了一遍。

原理

逻辑比较简单，主要就是通过随机获测试方向，然后添加噪声，三秒后提问。如此循环。

1.获取测试方向

2.获取飞机位置

3.获取噪声方向

4.获取噪声位置。

5.显示飞机。

6.提问

实现

 var row=6;
   var col=6;
   var headinglist={0:"朝上",1:"朝右",2:"朝下",3:"朝左"}//上下左右
   var imglist={0:"plane.png",1:"right.png",2:"down.png",3:"left.png"}
   var trueHeading;


   //最多有五架飞机朝左边
   var Max=5;
   //实际朝左的飞机
   var realHeading;
   //朝左边飞机的位置
   var reals=[];

   //增加干扰的数量
   var noiseMax=3;
   //干扰的方向
   var noiseHeading;
   //获取干扰的位置。
   var realnoise;
   var noise=[];
   
   //创建表格
   rander();
   function rander(){
    //默认是朝上的，
    var defaultplane="plane.png";
    trueHeading=getRandom(4)
    console.log(headinglist[trueHeading])
    //如果选择的是朝上的，那么默认的就朝下。
   if(trueHeading==0) defaultplane=imglist[2];
   var targetplane=imglist[trueHeading];
    $(".title span").html(headinglist[trueHeading]);
    var $table=$("#table");
    $table.empty();
    realHeading=getRandom(Max)
    reals=[];
    getRandomPositions();
    console.log("realHeading",realHeading);
    $("#anwser").html("")

    noise=[];
    noiseHeading=getNoiseHeading(trueHeading);
    getRandom(noiseMax);
    getRandomNoisePosition();

    for(var i=0;i<row;i++){
       var $tr=$("<tr>"); 
       for(var j=0;j<col;j++){
         //装载飞机
         var  img=$("<img src='"+defaultplane+"' />")
          if(IsIn(j,i)){
         img=$("<img src='"+targetplane+"' />")  
          } 
          if(IsInNoise(j,i)){
             img=$("<img src='"+imglist[noiseHeading]+"' />")  
          }
         var $td=$("<td>").html(img);  
         $tr.append($td)
        }
      $table.append($tr);
    }

    setTimeout(function(){
        showQuestion();
     },3000)
   }
   function showQuestion(){
       $("#warp").addClass("shadow");
       $("#warp").show();
   }
   function close(){
       $("#warp").removeClass("shadow");
       $("#warp").hide();
      // alert(realHeading)
      $("#anwser").html(realHeading)
      setTimeout(rander,3000)
  }
   function IsIn(x,y){
    return !!reals.find(n=>n[0]==x&&n[1]==y);
   }
   function IsInNoise(x,y){
    return !!noise.find(n=>n[0]==x&&n[1]==y);
   }
   function getNoiseHeading(th){
       var h=getRandom(4);
       if(h!=th){
           console.log("干扰方向是",headinglist[h])
           return h;
       }
       return getNoiseHeading();
   }


   function getRandomPositions(){
       for(var i=0;i<realHeading;i++){
           getRandomPosition();
       }
   }

   //获取随机噪音的位置
   function getRandomNoisePosition(){
    var x=getRandom(col);
    var y=getRandom(row);
    //检查
    var item=reals.find(n=>n[0]==x&&n[1]==y);
    if(item) return getRandomPosition();
    noise.push([x,y]);
  };
  //获取随机的位置
  function getRandomPosition(){
    var x=getRandom(col);
    var y=getRandom(row);
    //检查
    var item=reals.find(n=>n[0]==x&&n[1]==y);
    if(item) return getRandomPosition();
    reals.push([x,y]);
  };

  //获取随机数
   function getRandom(max){
       var ran=Math.round(max*Math.random());
      return ran>=max?getRandom(max):ran;
   }

   $(".close").click(function(){
       close();
   })

实现起来很简单，可以通过增加方向数量来增加难度。实际那天测试的时候有八个方向，做得有点懵。 而且还有一道题是四秒钟计算2位数以上的加减乘除，说实话很难反应过来，很多答案都来不及选择。测试完了大家都惴惴不安，后来去问老师成绩，老师笑着说，那种题就是用来吓人的，看你们在遇到打击之后，接下来的反应如何，真是哭笑不得。

git:https://github.com/stoneniqiu/ATC