用Google的Dart语言制作的数独游戏

Question

这是我的第一个真正的网络项目，我从来没有接触过JavaScript (几乎没有接触到CSS)，所以我跳过了它，去省道寻找乐趣。这是一个现场演示

省道文件的代码如下所示。如果你能以任何方式帮助我改进代码，那就太好了。

Sudoku.dart

import 'dart:html';


TableElement board;
var tbody;
var tableCell;
var currentRow = 0;
var currentCell = 0;
String puzzle = "200000060000075030048090100000300000300010009000008000001020570080730000090000004";
int counter = 0;


void main() {
   board = new TableElement();
   board..setAttribute("border", "1");
   tbody = board.createTBody();
  makeSudokuBoard();
  ChangeCurrentCell();
  window.onKeyDown.listen(mykeyDown);
  window.onKeyUp.listen(callCheckBoard);
  window.onClick.listen(clickDown);

}

void clickDown(Event e){
  CheckCurrentCell();  
  ChangeCurrentCell();
  CheckBoard();
}

void mykeyDown(Event e){
  if(e is KeyboardEvent){ 
    KeyboardEvent kevent = e;

    switch(e.keyCode){

      case 38:
        currentRow--;
        while(!CheckNextCell())currentRow--;

        ChangeCurrentCell();
        CheckBoard();
        break;
      case 40:
        currentRow++;
        while(!CheckNextCell())currentRow++;

        ChangeCurrentCell();
        CheckBoard();
        break;
      case 37:
        currentCell--;
        while(!CheckNextCell())currentCell--;
        ChangeCurrentCell();
        CheckBoard();
        break;
      case 39:
        currentCell++;
        while(!CheckNextCell())currentCell++;

        ChangeCurrentCell();
        CheckBoard();
        break;

      default:
        CheckCurrentCell();
        ChangeCurrentCell();
        CheckBoard();
        break;

    }
  }
}

void callCheckBoard(Event e){
  CheckBoard();
}

void CheckBoard(){
  var check = 0;
  TableRowElement r = board.rows[currentRow];
  bool worked = true;
  List<TableCellElement> c = r.cells;
  var current = tableCell.text;
  try{
    var foo = int.parse(current);
  }catch(e){
    worked = false;
  }

  if(current == ""){}
  else if(!(worked)){ChangeColor(); return;}
  else{

  for(var i = 0; i < c.length; i++){
    if(currentCell == i){}
    else if(current == c[i].text){
     ChangeColor();
     return;
    }

    for(var i = 0; i < board.rows.length; i++){

      if(i == currentRow){}
      else if(board.rows[i].cells[currentCell].text == current){

        ChangeColor();
        return;
      }
    }


        int boxRowOffset = (currentRow ~/ 3)*3;
        int boxColOffset = (currentCell ~/ 3)*3;
        for (int k = 0; k < 3; ++k) // box
            for (int m = 0; m < 3; ++m)
                if (currentCell == boxColOffset+m && currentRow == boxRowOffset+k){}
                else if(board.rows[boxRowOffset+k].cells[boxColOffset+m].text == current){
                  ChangeColor();
                  return;
                }



  }



  }
  for(var i = 0; i < board.rows.length; i++)
          {for(var j = 0; j < board.rows[i].cells.length; j++){

            if(board.rows[i].cells[j].text != "") check++;

          }
  tableCell.style.background = "";
  if(check == 81)
    document.querySelector("#pageTitle").text = "winner";
}}


void CheckCurrentCell(){
  List<TableRowElement> r = board.rows;
  for(var i = 0; i < r.length; i++){
   List<TableCellElement> c = r[i].cells;
     for(var j = 0; j < c.length; j++){
      if(c[j] == querySelector(":focus")){
        currentRow = i;
        currentCell = j;
      }
     }
  }

}

bool CheckNextCell(){

  if(currentRow == -1) currentRow = 8;
  else if(currentRow == 9) currentRow = 0;
  else if(currentCell == -1) currentCell = 8;
  else if(currentCell == 9) currentCell = 0;
  var tableRow = board.rows[currentRow];
  tableCell = tableRow.cells[currentCell];
  return tableCell.isContentEditable;

}

void ChangeCurrentCell() {
    if(currentRow == -1) currentRow = 8;
    if(currentRow == 9) currentRow = 0;
    if(currentCell == -1) currentCell = 8;
    if(currentCell == 9) currentCell = 0;
    var tableRow = board.rows[currentRow];
    tableCell = tableRow.cells[currentCell];
    tableCell.focus();

}

void ChangeColor(){

  //tableCell.style.color = "red";
  tableCell.style.background = "#f44";
}

void makeSudokuBoard(){


    for(var i = 0; i < 9; i++){

      TableRowElement rows = tbody.addRow();

      for(var j = 0; j < 9; j++){

        String puzzleplace = puzzle.substring(counter, counter+1);
        if(puzzleplace == "0"){ 

          rows.insertCell(j).text = "";
                rows.cells[j].setAttribute("contenteditable","true");


        }else{
        rows.insertCell(j).text = puzzleplace;
        rows.cells[j].setAttribute("contenteditable","false");
        rows.cells[j].classes.add("default");

        }
        rows.cells[j].setAttribute("onkeypress", "return (this.innerText.length <= 0)");
        counter++;
      }

    }

  document.querySelector('#container').append(board);


}

Answer 1

首先，尝试通过Dart格式化程序运行代码。

第二，尝试将所有游戏逻辑放入一个或多个类中。大多数CS教授--和发展专业人士--都不愿看到顶级的、易变的状态。

最后，总是读比你写的代码更多的代码是很好的。你会学到很多。对于这样的游戏，您可能想看看爸，爸爸，赢！。这是将游戏状态从游戏可视化中分离出来的一个很好的例子。

如果使用的是“省道编辑器”，则可以单击欢迎页上的链接打开示例。

继续黑客攻击！

Answer 2

在Safari 7.0.4中，一旦a用数字填充一个单元格，就永远不能将单元格更改为任何其他数字。我相信这个bug是由于某种与

• contenteditable单元格隐式地将<br>附加到输入的任何文本中。
• return (this.innerText.length <= 0)处理程序用于onkeypress。

如果我使用DOM检查器来删除<br>或onkeypress处理程序，那么我可以再次编辑该单元格。