ベースプログラム

自機の操作まで
プログラム構造

自機の操作まで

この連載で修得した自機操作までプログラミングしました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=704">

    <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>
<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var my = document.getElementById("mikata");
    
    var DRAW_INTER = 10;    //描画間隔ミリ秒
    var MY_SHRINK=6;        //自機画像縮小率
    var MY_SPEED = 3;       //自機スピード

    var my_x = 1;           //自機横位置
    var my_houkou=0;        //自機移動値
    var my_x_size=my.width/MY_SHRINK;         //自機横サイズ
    var my_y_size=my.height/MY_SHRINK;        //自機縦サイズ

    init();                         //初期処理
    setInterval(draw, DRAW_INTER);  //描画を一定間隔毎に行う

    /*
      キーが押された時
    */
    function keyDown(e){
        if(e.key == "ArrowRight") {     //右矢印
            my_houkou = MY_SPEED;
        }else if(e.key == "ArrowLeft") {//左矢印
            my_houkou = MY_SPEED * -1;
        }
    }
    /*
      キーを離した時
    */
    function keyUp(e){
        if(e.key == "ArrowRight") {     //右矢印
            my_houkou = 0;
        }else if(e.key == "ArrowLeft") {//左矢印
            my_houkou = 0;
        }
    }
    /*
      描画処理
    */
    function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        myMove();     //自機を描画
    }
    /*
      自機描画
    */
    function myMove(){
        ctx.drawImage(my,my_x,canvas.height-my_y_size-10,my_x_size,my_y_size);
        my_x = my_x + my_houkou;
        if( my_x > canvas.width - my_x_size){
          my_x = canvas.width - my_x_size
        }
        if( my_x < 1 ){
          my_x  = 1;
        }

    }
    /*
      初期処理
    */
    function init(){
        document.addEventListener("keydown", keyDown);
        document.addEventListener("keyup", keyUp);
    }

};
</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 canvas = document.getElementById("canvas");

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

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

var DRAW_INTER = 10; //描画間隔ミリ秒

var MY_SHRINK=6; //自機画像縮小率

var MY_SPEED = 3; //自機スピード

var my_x = 1; //自機横位置

var my_houkou=0; //自機移動値

var my_x_size=my.width/MY_SHRINK; //自機横サイズ

var my_y_size=my.height/MY_SHRINK; //自機縦サイズ

init(); //初期処理

setInterval(draw, DRAW_INTER); //描画を一定間隔毎に行う

キーが押された時

function keyDown(e){

if(e.key == "ArrowRight") { //右矢印

my_houkou = MY_SPEED;

}else if(e.key == "ArrowLeft") {//左矢印

my_houkou = MY_SPEED * -1;

}

キーを離した時

function keyUp(e){

if(e.key == "ArrowRight") { //右矢印

my_houkou = 0;

}else if(e.key == "ArrowLeft") {//左矢印

my_houkou = 0;

}

描画処理

function draw(){

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

myMove(); //自機を描画

}

自機描画

function myMove(){

ctx.drawImage(my,my_x,canvas.height-my_y_size-10,my_x_size,my_y_size);

my_x = my_x + my_houkou;

if( my_x > canvas.width - my_x_size){

my_x = canvas.width - my_x_size

}

if( my_x < 1 ){

my_x = 1;

}

初期処理

function init(){

document.addEventListener("keydown", keyDown);

document.addEventListener("keyup", keyUp);

}

};

</script>

</body>

</html>

今後ゲーム完成が近づくにつれ、より複雑で長いプログラムになってきます。そのためできる限り機能を関数毎に分け、定数を変数として定義しています。長くなったプログラムを別ファイルにする方法もありますが、今回は1ファイルにしシンプルを目指します。

プログラム構造

プログラム構造は次の通りです。

このコードをベースに関数の追加、変更を行っていきます。