マウス操作

マウスにより指示
マウスイベント
パッド
プログラム

マウスにより指示

キーボードによる操作を実現しましたが(人の指示で動かす)、マウスやタッチ操作で行いたい時があります。そこで、まずマウス操作により画像を移動させます。

マウスイベント

マウス操作を行うと特定の関数を実行できます。それがaddEventListener()命令でキーボード操作時と同様です。

パッド

マウス操作するにせよ、どこをクリックするかが問題です。そこでマウス操作を行うためのパッドを表示します。

矢印をクリックしている時にその方向に移動します。

プログラム

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScriptでゲーム</title>
    <style>
    	* { padding: 0; margin: 0; }
        #area {position: absolute;
        	top: 50%;
	        left: 50%;
	        transform: translate(-50%, -50%);}
        #canvas {background: #000000;}
        #controller {background: #c0c0c0;}
    </style>
    <div style="display:none"><img src="./images/mikataV3.png" id="mikata"></div>

</head>
<body>

<div id="area">
    <div><canvas id="canvas" width="640" height="480"></canvas></div>
    <div><canvas id="controller" width="640" height="80"></canvas></div>
</div>
<script>
window.onload = function() {
    var L_S = 120,L_E = 280,R_S = 360,R_E = 520;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var controller = document.getElementById("controller");
    var ctx2 = controller.getContext("2d");
    var img = document.getElementById("mikata");

    drawController();

    var x = 1;
    var x_houkou=0;
    var x_size=img.width/6;         //
    var y_size=img.height/6;        //

    document.addEventListener('mousedown',mouseDown);
    document.addEventListener('mouseup',mouseUp);
    setInterval(draw, 10);

    function mouseDown(e){
        var x = e.clientX - controller.getBoundingClientRect().left;
        var y = e.clientY - controller.getBoundingClientRect().top;
        if( y < 0 || y > controller.height){
            return;
        }
        if( x >= L_S && x <= L_E ){
            x_houkou = -2;
        }else if( x >= R_S && x <= R_E){
            x_houkou = 2;
        }
    }    
    function mouseUp(e){
        x_houkou =0;
    }

    function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(img,x,canvas.height-y_size-10,x_size,y_size);

        x = x + x_houkou;
        if( x > canvas.width - x_size){
          x = canvas.width - x_size
        }
        if( x < 1 ){
          x  = 1;
        }
    }
    function drawController(){
        ctx2.beginPath();
        ctx2.moveTo( L_S,controller.height/2 ) ;
        ctx2.lineTo( L_E,0 )
        ctx2.lineTo( L_E,controller.height  )
        ctx2.fillStyle = "#696969" ;
        ctx2.fill() ;
        ctx2.closePath();

        ctx2.beginPath();
        ctx2.moveTo( R_E,controller.height/2 );  //
        ctx2.lineTo( R_S,0 )
        ctx2.lineTo( R_S,controller.height  )
        ctx2.fillStyle = "#696969" ;
        ctx2.fill() ;
        ctx2.closePath();
    }

};
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScriptでゲーム</title>

<style>

* { padding: 0; margin: 0; }

#area {position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);}

#canvas {background: #000000;}

#controller {background: #c0c0c0;}

</style>

</head>

<body>

</div>

window.onload = function() {

var L_S = 120,L_E = 280,R_S = 360,R_E = 520;

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var controller = document.getElementById("controller");

var ctx2 = controller.getContext("2d");

var img = document.getElementById("mikata");

drawController();

var x = 1;

var x_houkou=0;

var x_size=img.width/6; //

var y_size=img.height/6; //

document.addEventListener('mousedown',mouseDown);

document.addEventListener('mouseup',mouseUp);

setInterval(draw, 10);

function mouseDown(e){

var x = e.clientX - controller.getBoundingClientRect().left;

var y = e.clientY - controller.getBoundingClientRect().top;

if( y < 0 || y > controller.height){

return;

}

if( x >= L_S && x <= L_E ){

x_houkou = -2;

}else if( x >= R_S && x <= R_E){

x_houkou = 2;

}

function mouseUp(e){

x_houkou =0;

}

function draw(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(img,x,canvas.height-y_size-10,x_size,y_size);

x = x + x_houkou;

if( x > canvas.width - x_size){

x = canvas.width - x_size

}

if( x < 1 ){

x = 1;

}

function drawController(){

ctx2.beginPath();

ctx2.moveTo( L_S,controller.height/2 ) ;

ctx2.lineTo( L_E,0 )

ctx2.lineTo( L_E,controller.height )

ctx2.fillStyle = "#696969" ;

ctx2.fill() ;

ctx2.closePath();

ctx2.beginPath();

ctx2.moveTo( R_E,controller.height/2 ); //

ctx2.lineTo( R_S,0 )

ctx2.lineTo( R_S,controller.height )

ctx2.fillStyle = "#696969" ;

ctx2.fill() ;

ctx2.closePath();

}

};

</script>

</body>

</html>

パッド表示は22行目のようにcanvasを別途用意し実現します。

    <div><canvas id="controller" width="640" height="80"></canvas></div>

22	<div><canvas id="controller" width="640" height="80"></canvas></div>

マウスボタンが押されている時、離した時に特定の関数を実行します。この定義が40,41行目です。

    document.addEventListener('mousedown',mouseDown);
    document.addEventListener('mouseup',mouseUp);

document.addEventListener('mousedown',mouseDown);

document.addEventListener('mouseup',mouseUp);

40行目でボタンが押された時に関数mouseDownを実行するように定義しています。41行目でボタンが離された時に関数mouseUpを実行するよう定義しています。

マウスボタンが押された時に実行される関数mouseDownは44行目～55行目に定義されています。

    function mouseDown(e){
        var x = e.clientX - controller.getBoundingClientRect().left;
        var y = e.clientY - controller.getBoundingClientRect().top;
        if( y < 0 || y > controller.height){
            return;
        }
        if( x >= L_S && x <= L_E ){
            x_houkou = -2;
        }else if( x >= R_S && x <= R_E){
            x_houkou = 2;
        }
    }

function mouseDown(e){

var x = e.clientX - controller.getBoundingClientRect().left;

var y = e.clientY - controller.getBoundingClientRect().top;

if( y < 0 || y > controller.height){

return;

}

if( x >= L_S && x <= L_E ){

x_houkou = -2;

}else if( x >= R_S && x <= R_E){

x_houkou = 2;

}

引数eに押された情報が保存されています。これを利用し押された座標を特定します。e.clientX、e.clientYに座標が格納されていますが特殊な座標のため変換が必要です。

取得される座標はcanvas内ではなく画面全体の座標になっています。

canvas内の座標を求めるために、canvas自身の左位置、上位置を減算します。

その処理が45行目、46行目です。

        var x = e.clientX - controller.getBoundingClientRect().left;
        var y = e.clientY - controller.getBoundingClientRect().top;

var x = e.clientX - controller.getBoundingClientRect().left;

var y = e.clientY - controller.getBoundingClientRect().top;

キャンバスより上、または下をクリックしている場合は処理を行いません。その判断が47行目～49行目です。

        if( y < 0 || y > controller.height){
            return;
        }

if( y < 0 || y > controller.height){

return;

}

左右矢印がクリックされているか、その判断が50行目～54行目です。

        if( x >= L_S && x <= L_E ){
            x_houkou = -2;
        }else if( x >= R_S && x <= R_E){
            x_houkou = 2;
        }

if( x >= L_S && x <= L_E ){

x_houkou = -2;

}else if( x >= R_S && x <= R_E){

x_houkou = 2;

}

利用している変数L_S、L_Eは左矢印の横座標開始、終了位置で26行目で定義しています。またR_S,R_Eは右矢印の横座標開始、終了位置です。これらの範囲内にあれば該当矢印をクリックしていることになります。

左矢印がクリックされていれば移動値を-2、右矢印がクリックされていれば2を設定し移動を行います。

マウスボタンが離された時に実行される関数mouseUpは56行目～58行目に定義されています。

    function mouseUp(e){
        x_houkou =0;
    }

function mouseUp(e){

x_houkou =0;

}

押されたボタンが離されたので移動を中止します。そのため移動値に0を設定しています。

パッドの描画は73行～89行目です。

    function drawController(){
        ctx2.beginPath();
        ctx2.moveTo( L_S,controller.height/2 ) ;
        ctx2.lineTo( L_E,0 )
        ctx2.lineTo( L_E,controller.height  )
        ctx2.fillStyle = "#696969" ;
        ctx2.fill() ;
        ctx2.closePath();
 
        ctx2.beginPath();
        ctx2.moveTo( R_E,controller.height/2 );  //
        ctx2.lineTo( R_S,0 )
        ctx2.lineTo( R_S,controller.height  )
        ctx2.fillStyle = "#696969" ;
        ctx2.fill() ;
        ctx2.closePath();
    }

function drawController(){

ctx2.beginPath();

ctx2.moveTo( L_S,controller.height/2 ) ;

ctx2.lineTo( L_E,0 )

ctx2.lineTo( L_E,controller.height )

ctx2.fillStyle = "#696969" ;

ctx2.fill() ;

ctx2.closePath();

ctx2.beginPath();

ctx2.moveTo( R_E,controller.height/2 ); //

ctx2.lineTo( R_S,0 )

ctx2.lineTo( R_S,controller.height )

ctx2.fillStyle = "#696969" ;

ctx2.fill() ;

ctx2.closePath();

}

26行目で定義された左右矢印の開始横位置、終了横位置を基に三角形を描画しています。

    var L_S = 120,L_E = 280,R_S = 360,R_E = 520;

26	var L_S = 120,L_E = 280,R_S = 360,R_E = 520;

マウス操作で移動できるようになりました。次はタッチ操作で移動します。