質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

グリッド クリックした位置の情報を得て、色を変えたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 146

williamsArk

score 25

質問お願いいたします。以下のようにして、10*10のマス目を作りました。
クリックしたところの、色を変えたい(クリックしたマス目をはっきりと把握しているようにしたい)のですが、思ったように行きません。
そもそもclick(e)というのはないのでしょうかね。。。アドバイスよろしくお願いいたします。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>MineSweeper</title>
 <link rel="css/styles.css">
</head>
<body>
  <button onclick ="init();">クリアする</button>
  <br>
  <br>
  <canvas id="MyCanvas" style="padding:0;"></canvas>
  <div id="location"></div>
<script>
var canvas;
var ctx;

var canvas_magnification = 50; //表示倍率
var canvas_width = 10; //横マスの数
var canvas_height = 10; //縦マスの数

// 初期の見た目の設定
function init() {
  ctx.fillStyle = "rgb(255, 255, 255)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  drawLines();
}

function place(x, y) {
  var col = 'C' + (Math.floor(x / canvas_magnification) + 1);
  var row = 'R' + (Math.floor(y / canvas_magnification) + 1);

  document.getElementById('location').innerHTML = '上から ' + row + ' 左から ' + col;
}

// 罫線を引く
function drawLines() {
  // 色
  ctx.strokeStyle = "#FF82B2";

 // 太さ
  ctx.lineWidth = 2;

ctx.beginPath();
//縦
for (var i = 0; i < canvas_width + 1; i++){
  ctx.moveTo((i * canvas_magnification), 0);
  ctx.lineTo((i * canvas_magnification), canvas.height);
}

//横
for (var i = 0; i < canvas.height + 1; i++){
  ctx.moveTo(0, (i * canvas_magnification));
  ctx.lineTo(canvas.height, (i * canvas_magnification))
 }
 ctx.stroke();
}

//座標の位置を把握して色も変えたい(希望)
function click(e) {
  var rect = e.target.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;

  var col = Math.floor(mouseX / canvas_magnification);
  var row = Math.floor(mouseY / canvas_magnification);

  ctx.fillStyle = "rgb(150, 0, 0)";
  ctx.fillRect = (col * canvas_magnification, row * canvas_magnification,
       canvas_magnification, canvas_magnification);

  drawLines();
}

window.onload = function() {
  canvas = document.getElementById('MyCanvas');

  canvas.width = canvas_width * canvas_magnification;
  canvas.height = canvas_height * canvas_magnification;

  ctx = canvas.getContext('2d');
  init();
}

</script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

document.addEventListener("click", function(e){
  var rect = e.target.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
})

eはeventの略で、このように書かないと取得できません。

<追記>

//wrong
 ctx.fillRect = (col * canvas_magnification, row * canvas_magnification,
       canvas_magnification, canvas_magnification);

//correct
 ctx.fillRect(col * canvas_magnification, row * canvas_magnification,
       canvas_magnification, canvas_magnification);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/02 01:11

    ありがとうございます。参考になりました。
    ただ上記のようにdocument.addEventListener("click", function(e){
    に変更しましたが、色がつきませんでした。
    同時にcanvas.addEventListenerとdocumentをcanvasにしても試してみましたが、色はつきませんでした。やはり他に原因があるのでしょうかね。。。

    キャンセル

  • 2019/03/02 01:38

    こういう時は面倒でも一つ一つデバッグしていきましょう。

    col,
    row,
    canvas_magnification,
    canvas_magnification

    ともに正しく取得できていたので、ctx.fillStyle, ctx.fillRectあたりに間違いがあるんじゃないかと思って見て見たところ、やはりそうでしたので、回答に追記しておきます。

    キャンセル

  • 2019/03/02 10:57

    ありがとうございました。確かにその方が自分の為ですね。うまく行ったらまた報告させて頂きます。

    キャンセル

  • 2019/03/02 14:25

    大変お世話になりました。編集していただいた追記が大変参考になり、結果なんとか乗り越えました。ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る