げぇむのページ

Lesson4でキーボード入力で操作できるようにした。今回は円で敵弾を表示する。

今日の流れ
1.Lesson4をフォルダごとコピー後名前の変更をしてLesson5とする。
2.canvas.jsを変更する。
3.index.htmlを開く

1.いつもどおりコピー

2.canvas.jsを変更する。
内容

var context;
var width = 300;//画面幅
var height = 300;//画面高
var keys = new Array();//キーの状態
var char_posx;//自キャラのx座標
var char_posy;//自キャラのy座標
var char_x;//自キャラの幅
var char_y;//自キャラの高

var enemy_shot_posx;//敵弾位置
var enemy_shot_posy;//敵弾位置

window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得

    canvas1.height = 300;//画面の高さ
    canvas1.width = 300;//画面の幅
   
    context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,height,width);//枠を描画

    char_x = 30;
    char_y = 30;

    char_posx = 135;//自キャラの初期位置
    char_posy = 270;

    enemy_shot_posx = 135;//敵弾の初期位置
    enemy_shot_posy = -10;

    draw();
}

function draw()
{
    if(keys[0] == true)
    {
        char_posx -= 5;
    }
   
    if(keys[1] == true)
    {
        char_posy -= 5;
    }

    if(keys[2] == true)
    {
        char_posx += 5;
    }
   
    if(keys[3] == true)
    {
        char_posy += 5;
    }


    //画面からキャラを出さない
    if(char_posx < 0)
    {
        char_posx = 0;
    }
    else if(char_posx > width - char_y)
    {
        char_posx = width - char_y;
    }

    if(char_posy < 0)
    {
        char_posy = 0;
    }
    else if(char_posy > height - char_y)
    {
        char_posy = height - char_y;
    }


    context.fillStyle = "rgb(255, 255, 255)";//色指定
    context.fillRect(0,0,300,300);//古い表示を消去するために上書きする:

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,300,300);//枠を描画

    context.fillStyle = "rgb(0, 0, 0)";

    enemy_shot_posy += 5;//敵弾を動かす

    if(enemy_shot_posy > height + 10)//敵弾が画面を超えたら初期位置に戻す
    {
        enemy_shot_posy = -10;
    }

     context.beginPath();//描画準備
     context.arc(enemy_shot_posx, enemy_shot_posy, 10, 0, 360 * Math.PI / 180, true);//円を描画
      context.fill();

    context.fillRect(char_posx,char_posy,char_x,char_y);//四角を描画:
   
    setTimeout(draw, 20);//指定時間毎に呼び出す
}

document.onkeypress = function(e)
{
    e.preventDefault();
}

document.onkeydown = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = true;   
            break;

            case 38:
            keys[1] = true;       
            break;
       
            case 39:
            keys[2] = true;
            break;

            case 40:
            keys[3] = true;       
            break;

        }
}


document.onkeyup = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = false;
            break;

            case 38:
            keys[1] = false;
            break;
       
            case 39:
            keys[2] = false;
            break;

            case 40:
            keys[3] = false;
            break;
        }

}



3.index.htmlを開く

成功していればこのようになっているはず。
画面からキャラが出ると都合が悪いので、画面端に行ったらそれ以上は動かないように調整した。
敵弾を追加。
まだ当たり判定などはない。
四角を描画するときは必要はなかったが、円を描く時などは
beginPath()というのが必要になるので注意。

[0回]