ピクロスマスの大きさは縦7×横7です's game

Click here for free DL of the app version that can save data.

No:4350

4323

←

Prev Next

→

ピクロスマスの大きさは縦7×横7です
Developer anonymous｜Date and time 70/1/1 10:11:35
Build time unknown sec｜Game capacity 4.295KB｜

Script

了解しました。以下が、ピクロスの実装例です。

この実装では、ピクロスの盤面をcanvas要素で描画しています。また、行と列のヒントを表示し、キーボードやマウスでマスを選択できるようにしています。ただし、正解判定やマスを埋める機能はありません。必要に応じて実装してください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

了解しました。以下が、ピクロスの実装例です。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ピクロス</title>
  </head>
  <body>
    <canvas id="board" width="210" height="210"></canvas>
    <script>
      const canvas = document.getElementById('board');
      const ctx = canvas.getContext('2d');
      const size = 30;
      const clueWidth = 20;
      const board = [
        [0,0,0,1,1,0,0],
        [0,0,1,0,0,1,0],
        [0,1,0,0,0,0,1],
        [1,0,0,1,0,0,0],
        [1,0,0,0,0,0,1],
        [0,1,0,0,0,0,1],
        [0,0,1,0,1,0,0]
      ];
      const rowClues = [
        [2,1],
        [1,1,1],
        [1,1,1],
        [1,1,1],
        [1,2],
        [3],
        [1,1]
      ];
      const colClues = [
        [1,1],
        [1,2],
        [2],
        [1,1],
        [3],
        [1],
        [1,1]
      ];
      
      let selectedRow = 0;
      let selectedCol = 0;
      
      function drawClues() {
        // 行のヒントを描画
        ctx.font = 'bold 16px sans-serif';
        for (let i = 0; i < rowClues.length; i++) {
          let x = clueWidth - 5;
          let y = i * size + size / 2 + 5;
          rowClues[i].forEach(clue => {
            ctx.fillText(clue, x, y);
            y += 20;
          });
        }
        
        // 列のヒントを描画
        ctx.textAlign = 'right';
        for (let i = 0; i < colClues.length; i++) {
          let x = i * size + size + clueWidth - 5;
          let y = 15;
          colClues[i].forEach(clue => {
            ctx.fillText(clue, x, y);
            y += 20;
          });
        }
        
        ctx.textAlign = 'center';
      }
      
      function drawBoard() {
        // 盤面を描画
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        for (let i = 0; i <= 7; i++) {
          ctx.beginPath();
          ctx.moveTo(clueWidth + i * size, 0);
          ctx.lineTo(clueWidth + i * size, size * 7);
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(0, i * size);
          ctx.lineTo(size * 7, i * size);
          ctx.stroke();
        }
        
        // 選択されているマスを描画
        ctx.fillStyle = 'lightgray';
        ctx.fillRect(clueWidth + selectedCol * size, selectedRow * size, size, size);
        
        // 数字を描画
        ctx.fillStyle = 'black';
        ctx.font = 'bold 20px sans-serif';
        for (let i = 0; i < board.length; i++) {
          for (let j = 0; j < board[i].length; j++) {
            if (board[i][j] === 0) continue;
            let x = clueWidth + j * size + size / 2;
            let y = i * size + size / 2 + 7;
            ctx.fillText(board[i][j], x, y);
          }
        }
      }
      
      function update() {
        drawClues();
        drawBoard();
      }
      
      function handleClick(e) {
        let row = Math.floor((e.clientY - canvas.offsetTop) / size);
        let col = Math.floor((e.clientX - canvas.offsetLeft - clueWidth) / size);
        if (row !== selectedRow || col !== selectedCol) {
          selectedRow = row;
          selectedCol = col;
          update();
        }
      }
      
      function handleKeyDown(e) {
        if (e.keyCode === 37) { // left
          selectedCol = Math.max(0, selectedCol - 1);
        } else if (e.keyCode === 38) { // up
          selectedRow = Math.max(0, selectedRow - 1);
        } else if (e.keyCode === 39) { // right
          selectedCol = Math.min(6, selectedCol + 1);
        } else if (e.keyCode === 40) { // down
          selectedRow = Math.min(6, selectedRow + 1);
        }
        update();
      }
      
      function init() {
        update(); // 初期描画
        
        // イベントリスナーの登録
        canvas.addEventListener('click', handleClick);
        window.addEventListener('keydown', handleKeyDown);
      }
      
      init(); // 初期化
    </script>
  </body>
</html>
```