人の指示で動かす

キーボードにより指示

図形を左右矢印キーで移動させる方法は紹介しました(人の指示で動かす)画像も同じ方法で実現できます。

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

<canvas id="canvas" width="640" height="480"></canvas>

<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("mikata");

    var x = 1;
    var x_houkou=0;
    var x_size=img.width/6;         //
    var y_size=img.height/6;        //
    document.addEventListener("keydown", keyDown);
    document.addEventListener("keyup", keyUp);
    setInterval(draw, 10);

    function keyDown(e){
        if(e.key == "ArrowRight") {
            x_houkou = 2;
        }else if(e.key == "ArrowLeft") {
            x_houkou = -2;
        }
    }

    function keyUp(e){
        if(e.key == "ArrowRight") {
            x_houkou = 0;
        }else if(e.key == "ArrowLeft") {
            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;
        }
    }                            
};
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

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

<style>

* { padding: 0; margin: 0; }

canvas {background: #000000;

position: absolute;

top: 50%;

left: 50%;

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

</style>

</head>

<body>

window.onload = function() {

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

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

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

var x = 1;

var x_houkou=0;

var x_size=img.width/6; //

var y_size=img.height/6; //

document.addEventListener("keydown", keyDown);

document.addEventListener("keyup", keyUp);

setInterval(draw, 10);

function keyDown(e){

if(e.key == "ArrowRight") {

x_houkou = 2;

}else if(e.key == "ArrowLeft") {

x_houkou = -2;

}

function keyUp(e){

if(e.key == "ArrowRight") {

x_houkou = 0;

}else if(e.key == "ArrowLeft") {

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;

}

};

</script>

</body>

</html>

実行ボタンを押して、左右矢印キーを押してください。

図形移動との相違は、図形の代わりに画像を描画している箇所、

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

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

canvasの横幅を超えた時に、画像の横サイズを考慮している箇所です。

        if( x > canvas.width - x_size){
          x = canvas.width - x_size
        }

if( x > canvas.width - x_size){

x = canvas.width - x_size

}

キー入力の方法等は人の指示で動かすを参考にしてください

画像を自由に移動させることができました。次にマウス操作等について紹介します。