如何通过脚本和HTML侧边栏向Google表格添加箭头键功能

时间:2018-02-04 05:18:18

标签: javascript html google-apps-script google-sheets

我正在Google表格中制作蛇游戏。当前方向按钮是指定了脚本的图像,用于更改主脚本可以读取的脚本属性。然而,这是非常缓慢的,所以有一个延迟使游戏几乎无法播放。有没有办法使用HTML在侧边栏中添加按钮,然后从主脚本中获取输入?

1 个答案:

答案 0 :(得分:0)

使用侧边栏箭头键移动活动单元格

<强> keys.html

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {
        google.script.run.moveUDLR();//places active cell in middle of play range
      });

      function move(dir){
        google.script.run.moveUDLR(dir); //move the active cell left,right,up or down while keeping it in the play range by wrapping it around
      }

      console.log('My Code');
    </script>
  </head>
  <body>
    <input type="button" value='up' onClick="move('u');" /><br />
    <input type="button" value='left' onClick="move('l');" /><input type="button" value='right' onClick="move('r');" /><br />
    <input type="button" value='down' onClick="move('d');" /><br />
  </body>
</html>

应用脚本

function moveUDLR(dir){
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Active');
  var t=2;
  var b=12;
  var l=2;
  var r=22;
  var row=sh.getActiveCell().getRow();
  var col=sh.getActiveCell().getColumn();
  switch(dir){
    case 'u':
      if(row<=t){
        row=b;
      }else{
        row--;
      }
      var rg=sh.getRange(row,col);
      sh.setActiveRange(rg);
      break;
    case 'd':
      if(row>=b){
        row=t;
      }else{
        row++;
      }
      var rg=sh.getRange(row,col);
      sh.setActiveRange(rg);
      break; 
    case 'l':
      if(col<=l){
        col=r;
      }else{
        col--;
      }
      var rg=sh.getRange(row,col);
      sh.setActiveRange(rg);
      break;
    case 'r':
      if(col>=r){
        col=l;
      }else{
        col++;
      }
      var rg=sh.getRange(row, col);
      sh.setActiveRange(rg);
      break;
    default:
      if(row<t || col<l || row>b || col>r){
        row=Math.round(((b-t)/2)+t);
        col=Math.round(((r-l)/2)+l);
      }
      var rg=sh.getRange(row,col);
      sh.setActiveRange(rg);
      break;
  }
}

function play(){
  var ui=HtmlService.createHtmlOutputFromFile('keys');
  SpreadsheetApp.getUi().showSidebar(ui);
}