JavaScriptのプログラム ４

処理 syori.js

４－１　マウスを押したときの処置をおこなう関数 mouse_syori関数を入れるファイルsyori.jsファイルをつくり index.htmlファイル、mouse.jsファイルと関連付ける

//syori.js
//マウスが押された時の処理
function mouse_syori(){
    label1.insertAdjacentHTML("beforeend", "<p>マウス処理</p>");
}

  <script src="js/main.js"></script>
  <script src="js/mouse.js"></script>
  <script src="js/draw.js"></script>
  <script src="js/sound.js"></script>
  <script src="js/syori.js"></script>
</body>

</html>

// 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();
    //マウスが押された時の処理
    mouse_syori();
}

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>");
}

４－２　syori.jsファイル

//syori.js
//マウスが押された時の処理
function mouse_syori(){
    label1.insertAdjacentHTML("beforeend", "<p>マウス処理</p>");
    draw_waku();
    //本処理
    hon_syori();
}

//本処理
function hon_syori(){

}

function draw_waku(){
    henkan_mimj_to_mxmy();
    ctx.fillStyle = "red";
    ctx.fillRect(mx+4,my+4,box_size-4,2);
    ctx.fillRect(mx+4,my+4,2,box_size-4);
    ctx.fillRect(mx+4,my+box_size-4,box_size-4,2);
    ctx.fillRect(mx+box_size-2,my+4,2,box_size-4);
}

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

４－３　本処理hon_syoriを作る

hon_syori();

main.jsを書き変える　選択した数値suを宣言する

//main.js    
let box = document.getElementById("html_box");
let label1 = document.getElementById("html_label1");
//選択した数値suを、最初０にしておく
let su = 0;

main();

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

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

syori.jsを書き変える　選択欄から選んだ数値をsuに入れる

    
//syori.js
//マウスが押された時の処理
function mouse_syori(){
    label1.insertAdjacentHTML("beforeend", "<p>マウス処理</p>");
    draw_waku();
    //本処理
    hon_syori();
}

//本処理
function hon_syori(){
    if(mj == 11){
        if( mi >= 1 && mi <= 9){
            su = mi;
        } else {
            su = 0;
        }
        label1.insertAdjacentHTML("beforeend", "<p>su = " + su + "</p>");
    } else if( mj >= 1 && mj <= 9 && mi >= 1 && mi <= 9){
        draw_num( su, mi, mj);
    }
}

function draw_num( num, i, j){
    // 数字の表示
    ctx.fillStyle = "black";
    ctx.font = box_size + "px serif";
    ctx.fillText(""+num, (i-0.7)*box_size + ofs_x, (j-0.1)*box_size +ofs_y);
}

function draw_waku(){
    henkan_mimj_to_mxmy();
    ctx.fillStyle = "red";
    ctx.fillRect(mx+4,my+4,box_size-4,2);
    ctx.fillRect(mx+4,my+4,2,box_size-4);
    ctx.fillRect(mx+4,my+box_size-4,box_size-4,2);
    ctx.fillRect(mx+box_size-2,my+4,2,box_size-4);
}

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

次に配列hairetu.jsを作成します