react-ppi-sudoku v1.1.0
Como usar
Primeiro importe o script para o seu projeto:<script type="text/javascript" src="https://tiagocf2.github.io/PPI-Sudoku/sudoku-canvas.js"></script>
Ou baixe o arquivo JavaScript aqui.
Note que é preciso ter um elemento Canvas no HTML para executar o Sudoku.
Depois disso é só criar uma instância da classe Sudoku e passar o canvas como referência.let su = new Sudoku(canvas, tamanho);canvas - é a referência ao elemento HTML canvas, onde o Sudoku será executado.tamanho - é um atributo opcional que define o tamanho do canvas. Por padrão é 500.
Agora é possível selecionar um quadrado com o mouse ou com as setas do teclado.
Com o quadrado selecionado é possível inserir números de 1 à 9 apertando as respectivas teclas.
Para remover um número utilize a tecla Backspace.
A Classe Sudoku
A classe Sudoku é a classe principal, que é responsável pelo jogo inteiro, desde gerar o tabuleiro, até desenhar no canvas.
A seguir será mostrado alguns elementos importantes para a manipulação desta classe.
| Variáveis | Valor | Descrição |
|---|---|---|
BACKGROUND_COLOR | String com valor hexadecimal para cor. Ex: #F00, red, #11FF22 | Altera a cor de plano de fundo. |
SELECTED_COLOR | String com valor hexadecimal para cor. | Altera a cor da célula selecionada. |
FONT_COLOR | String com valor hexadecimal para cor. | Altera a cor da fonte. |
FONT_FAMILY | String com nome de uma fonte. Ex: Arial, Consolas | Altera a fonte utilizada. |
FONT_SIZE | String com um tamanho. Ex: 16px, 2.5em | Altera o tamanho da fonte. |
GRID_COLOR | String com valor hexadecimal para cor. | Altera a cor da grade. |
RIGHT_COLOR | String com valor hexadecimal para cor. | Altera a cor para números corretos. |
WRONG_COLOR | String com valor hexadecimal para cor. | Altera a cor para números incorretos. |
continuousCheck | Valor booleano. Default: False | Determina se o jogo deve checar continuamente a validade de cada número inserido. |
| Funções | Parâmetros | Retorno | Descrição |
|---|---|---|---|
criarNovoJogo | --- | --- | Inicia uma nova partida com um novo tabuleiro (dentre 3 pré-definidos). Cuidado pois apaga o progresso da partida atual. |
finishGame | --- | Um objeto {erros: X, acertos: Y} aonde X e Y são os respectivos valores. | Termina a partida atual. |
exportAsImage | --- | Uma String contendo uma imagem png em base 64 | Retorna uma imagem do estado atual do tabuleiro. Utilize isso para "tirar uma foto" do tabuleiro. |
resizeCanvas | new_size: int | --- | Use essa função para alterar o tamanho do objeto. |
generateTestBoard | --- | --- | Preenche o tabuleiro com um jogo e solução padrão. Use para testes. |
drawBoard | --- | --- | Desenha o tabuleiro. |
select | x: int y: int | --- | Seleciona um o quadrado na posição X e Y no tabuleiro. |
unselect | --- | --- | Desmarca o quadrado selecionado no tabuleiro. |
inputNumber | n: int 1 até 9 | --- | Escreve o número N no quadrado previamente selecionado. |
Exemplo de Implementação
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> Sudoku Game </title>
</head>
<body>
<h1> Sudoku! </h1>
<canvas id="sudoku"></canvas>
<button onclick="finishGame()"> Finish </button>
<button onclick="exportBoard()"> Export </button>
</body>
<script type="text/javascript" src="https://tiagocf2.github.io/PPI-Sudoku/sudoku-canvas.js" defer></script>
<script type="text/javascript">
let canvas = document.getElementById("sudoku");
let sudoku = new Sudoku(canvas);
function finishGame(){
result = sudoku.finishGame();
alert(`Game Over\nScore: ${result.acertos / sudoku.boardSize ** 2 * 100}%`);
}
function exportBoard(){
let img = sudoku.exportAsImage();
let download = document.createElement('a');
download.href = img;
download.download = "meu_sudoku.png";
download.click();
}
</script>
</html>