JavaScriptのプログラム 3

マウス　mouse.js

//----------------------------

３－１　main.jsのinit関数の中で　マウスの初期化関数mouse_initを呼びます


let box = document.getElementById("html_box");
let label1 = document.getElementById("html_label1");

main();

function main(){
    label1.insertAdjacentHTML("beforeend", "<p>プログラムスタート</p>");
    window.onload = init;
}

function init(){
    mouse_init();
    draw_init();
}

//----------------------------

３－２　mouse.jsファイルを作成し　mouse_init関数の中で初期値設定を行います


 // mouse.js
let mx;
let my;

function mouse_init(){
    mx = 0;
    my = 0;

    canvas1.onmousedown = mouse_ope;
}

function mouse_ope(e){
    get_pos(e);
    disp_mouse();
}

function get_pos(e) {
    mx = e.offsetX;
    my = e.offsetY;
}

function disp_mouse(){
    label1.insertAdjacentHTML("beforeend", "<p>マウスダウン</p>");
    label1.insertAdjacentHTML("beforeend", "<p>mx = " + mx + "  my = " + my + "</p>");
}

実行結果

//----------------------------

３－３　座標の変換　（ｍx,ｍy）ー＞（ｍi，ｍj）

henkan_mxmy_to_mimj();

マウスの座標から　格子の（列,行）座標（ｍi，ｍj）を得る


// mouse.js
let mx;
let my;
let mi;
let mj;

function mouse_init(){
    mx = 0;
    my = 0;

    canvas1.onmousedown = mouse_ope;
}

function mouse_ope(e){
    get_pos(e);
    disp_mouse();
    henkan_mxmy_to_mimj();
}

function get_pos(e) {
    mx = e.offsetX;
    my = e.offsetY;
}

function disp_mouse(){
    label1.insertAdjacentHTML("beforeend", "<p>マウスダウン</p>");
    label1.insertAdjacentHTML("beforeend", "<p>mx = " + mx + "  my = " + my + "</p>");
}

function henkan_mxmy_to_mimj(){
    mi = (mx-ofs_x)/box_size;
    mj = (my-ofs_y)/box_size;
    label1.insertAdjacentHTML("beforeend", "<p>mi = " + mi + "  mj = " + mj + "</p>");
}

実行結果

このままだと　列と行が小数を含み　ずれがあります //----------------------------

３－４　（ｍi，ｍj）座標の補正

henkan_mxmy_to_mimj();

正しい格子の（列,行）座標（ｍi，ｍj）を得る


// mouse.js
let mx;
let my;
let mi;
let mj;

function mouse_init(){
    mx = 0;
    my = 0;

    canvas1.onmousedown = mouse_ope;
}

function mouse_ope(e){
    get_pos(e);
    disp_mouse();
    henkan_mxmy_to_mimj();
}

function get_pos(e) {
    mx = e.offsetX;
    my = e.offsetY;
}

function disp_mouse(){
    label1.insertAdjacentHTML("beforeend", "<p>マウスダウン</p>");
    label1.insertAdjacentHTML("beforeend", "<p>mx = " + mx + "  my = " + my + "</p>");
}

function henkan_mxmy_to_mimj(){
    mi = (mx-ofs_x)/box_size;
    mj = (my-ofs_y)/box_size;
    mi = Math.floor(mi) + 1;
    mj = Math.floor(mj) + 1;
    label1.insertAdjacentHTML("beforeend", "<p>mi = " + mi + "  mj = " + mj + "</p>");
}

実行結果

正しい列と行が求まりました
//----------------------------

３－５　盤面座標（ｍi，ｍj）の表示

マウスダウンしたときの盤面座標（ｍi，ｍj）のみ表示する


// mouse.js
let mx;
let my;
let mi;
let mj;

function mouse_init(){
    mx = 0;
    my = 0;

    canvas1.onmousedown = mouse_ope;
}

function mouse_ope(e){
    get_pos(e);
    //disp_mouse();
    henkan_mxmy_to_mimj();
}

function get_pos(e) {
    mx = e.offsetX;
    my = e.offsetY;
}

function disp_mouse(){
    label1.insertAdjacentHTML("beforeend", "<p>マウスダウン</p>");
    label1.insertAdjacentHTML("beforeend", "<p>mx = " + mx + "  my = " + my + "</p>");
}

function henkan_mxmy_to_mimj(){
    mi = (mx-ofs_x)/box_size;
    mj = (my-ofs_y)/box_size;
    mi = Math.floor(mi) + 1;
    mj = Math.floor(mj) + 1;
    label1.insertAdjacentHTML("beforeend", "<p>mi = " + mi + "  mj = " + mj + "</p>");
}

実行結果

盤面座標がわかりやすくなりました
//----------------------------

次に　画面表示の　ｄｉｓｐ．ｊｓファイルを作成します

JavaScriptのプログラム 3

マウス mouse.js

マウス　mouse.js