「HTML5」カテゴリーアーカイブ

HTML5, JavaScript, プログラミングお作法

HTML5入門その9-当たり判定をつける

当たり判定というか描画範囲を指定して，指定範囲以外に出ないようにしましょう．

サンプル

<!DOCTYPE html>
<html>
<head>
<title>Key2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var migi = false;
var myX = 0;
var myY = 0;
var sokudo = 5;
var aBool = false;
var bBool = false;
var cBool = false;
var dBool = false;

function kyesage(myEvt) {

if (myEvt.keyCode == 39){
aBool = true;

}
if (myEvt.keyCode == 40){
bBool = true;
}

if (myEvt.keyCode == 38){
cBool = true;
}

if (myEvt.keyCode == 37){
dBool = true;
}

}

function kyeageta(myEvt) {
if (myEvt.keyCode == 39){
aBool = false;
}
if (myEvt.keyCode == 40){
bBool = false;
}

if (myEvt.keyCode == 38){
cBool = false;
}

if (myEvt.keyCode == 37){
dBool = false;
}
}

document.onkeydown = kyesage;
document.onkeyup = kyeageta;

function draw() {
context.clearRect(myX, myY, 20, 20);
if(aBool == true){
if(myX < 280){
myX = myX + sokudo;
}
if(myX >= 280){
myX = 280;
}
}

if(bBool == true){
if(myY < 280){
myY = myY + sokudo;
}
if(myY >= 280){
myY = 280;
}
}

if(cBool == true){
if(myY <= 280){
myY = myY - sokudo;
}
if(myY < 0){
myY = 0;
}
}

if(dBool == true){
if(myX <= 280){
myX = myX - sokudo;
}
if(myX < 0){
myX = 0;
}
}

context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);

</script>
</body>
</html>

枠線との関係は理解できましたか？

HTML5, JavaScript, プログラミングお作法

HTML5入門その8-高速で描画させる

前出のプログラムはキーを押してから，少し間があります．

この原因は，10ミリセカンド毎に実行しているfunction draw()の外に，キー入力処理のプログラムがあるからです．

そこで，必ず10ミリセカンド毎に実行されるfunctiondraw()の中にキー関係を入れて，，みたいのですがうまく入りません．

そこで，ON/OFFができるブーリアンを使います．

これで10ミリセカンド毎に，矩形の移動をON/OFFできます．

 サンプル

<!DOCTYPE html>
<html>
<head>
<title>Key2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
var migi = false;
var myX = 0;
var myY = 0;
var sokudo = 5;
var aBool = false;
var bBool = false;
var cBool = false;
var dBool = false;
 
function kyesage(myEvt) {
 
if (myEvt.keyCode == 39){
aBool = true;
 
}
if (myEvt.keyCode == 40){
bBool = true;
}
 
if (myEvt.keyCode == 38){
cBool = true;
}
 
if (myEvt.keyCode == 37){
dBool = true;
}
 
}
 
 
function kyeageta(myEvt) {
if (myEvt.keyCode == 39){
aBool = false;
}
if (myEvt.keyCode == 40){
bBool = false;
}
 
if (myEvt.keyCode == 38){
cBool = false;
}
 
if (myEvt.keyCode == 37){
dBool = false;
}
}
 
document.onkeydown = kyesage;
document.onkeyup = kyeageta;
 
function draw() {
context.clearRect(myX, myY, 20, 20);
if(aBool == true){
myX = myX + sokudo;
}
if(bBool == true){
myY = myY + sokudo;
}
if(cBool == true){
myY = myY - sokudo;
}
 
if(dBool == true){
myX = myX - sokudo;
}
 
context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);
 
</script>
</body>
</html>

どうでしょうか？思い通りに反応しましたか？

HTML5, JavaScript, プログラミングお作法

HTML入門その7-ifの代わりにswitchをつかう

前ポストに書きましたが，ifの代わりにswitchを使うことができます．

ifは範囲で操作したいときに，例えば「10以上なら」とか「20以上なら」といった場面で使い，switchは値を決め打ちしたいとき「10なら，5なら」という場面で使い分けるのでもいいでしょう．

switchのプログラムの構造

switch(ここに変数名){ //switchはここから
case 10: //変数が10の場合の意味　<-10の後はコロンだよ！セミコロンじゃないよ！　あと−＞　○case 10　×case10　です
myX = myX + sokudo;//10の時の処理
break; //変数が10の時の処理はここまでよ
 
case 20: //変数が20の場合は，，
//20の時の処理
break; //変数が20の時の処理ここまでよ
 
default: //どれにもひっかからなかった場合は
//どれにも合致しないときの処理をここに
break; //どれにもひっかからなかったときの処理ここまで

 

という構造です．

case 10のbreakを消して，20が来ても10のときと，20のときの処理２つとも実行するなんて方法もあるみたいですね．

このswitch，ゲームで使うとすれば，，，私は使ったことがないのですが，1万点突破時に，突破した効果音と1万点の文字のフォントと色と大きさを変更し，しばらく表示をさせておく　というプログラムを実行するときなどにも使えそうですね．下線部だけで5つのプログラムが必要ですが，，，めんどくさいようですが，ゲームを盛り上げるために必要な処理です．ね．

でも1万点ごとに同じパターンを表示させたいのなら，キリ番の点数を引数にして，点数の表示プログラムに渡すだけになります．そうするとすごーく楽になりますよね〜

前ポストの上下左右キーのプログラム

<!DOCTYPE html>
<html>
<head>
<title>Key2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
var migi = false;
var myX = 0;
var myY = 0;
var sokudo = 5;
function kyesage(myEvt) {
var myCode = myEvt.keyCode;
context.clearRect(myX, myY, 20, 20);
 
switch(myCode){
case 39:
myX = myX + sokudo;
break;
 
case 40:
myY = myY + sokudo;
break;
 
case 38:
myY = myY - sokudo;
break;
 
case 37:
myX = myX - sokudo;
break;
 
default:
//どれにも合致しないときの処理
break;
}
}
 
document.onkeydown = kyesage;
 
function draw() {
 
context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);
 
</script>
</body>
</html>

上下左右入力をswitchでおこなった場合です

はい．行数は多いですが，文字数は少なくてすっきりしてますね〜

HTML5, JavaScript, プログラミングお作法

HTML5入門その6-キー入力その３

宿題のようになっていたキー入力について，以下は1つの解答例です．

<!DOCTYPE html>
<html>
<head>
<title>Key2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var migi = false;
var myX = 0;
var myY = 0;
var sokudo = 5;
function kyesage(myEvt) {
context.clearRect(myX, myY, 20, 20);

if (myEvt.keyCode == 39){
myX = myX + sokudo;
}
if (myEvt.keyCode == 40){
myY = myY + sokudo;
}

if (myEvt.keyCode == 38){
myY = myY - sokudo;
}

if (myEvt.keyCode == 37){
myX = myX - sokudo;
}

//console.log(myEvt.keyCode);
}

document.onkeydown = kyesage;

function draw() {

context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);

</script>
</body>
</html>

 

補足

if文の使用方法について補足します．

［例1］

キャラのライフをカウントするときなどに，，
hensuという名前の変数が０かそれ以外かを調べ，０ならgameoverという命令を，そうでないならcharaSakuseiという命令を実行する

if(hensu == 0){//ifの条件に合致した時に中括弧で囲まれた処理をしてね
gameover();//ここにhense==0の時の命令いれる
}else{
charaSakusei();
}

 

［例2］

aか，bか，cかというときはifを重ねて使います．なおswitchという条件分岐も使えます．

「条件分岐」ってあれです．みかんの大きさをXL，L，M，S　仕分ける機械（自動選果機という）みたいなのです．

（自動選果機の例＝中村選果機（株）のWEBサイトより）

if(namae == a){
//ここにaの時の処理
}
if(namae == c){
//ここにbの時の処理
}
if(namae == c){
//ここにcの時の処理
}
//この処理，実際にできるのかな，，，

 

ちなみにelseをつけると，どれにもあてはまらない不適格品も出す事ができます．

まとめ

if（条件式）{

処理内容

}

中括弧で囲ったものを条件が合致したときに実行します．

HTML5, JavaScript, プログラミングお作法

HTML5入門その5-キー入力その２

次のHTMLを全てコピペして　key2.html　という名前などで保存してください．

<!DOCTYPE html>
<html>
<head>
<title>Key2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var migi = false;
var myX = 0;
var myY = 0;
function kyesage(myEvt) {
	if (myEvt.keyCode == 39)
		//migi = true;
//context.clearRect(myX, myY, 20, 20);
myX = myX + 1;
myY = myY + 1;
console.log(migi);
}
document.onkeydown = kyesage;

function draw() {

context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);

</script>
</body>
</html>

 

ブラウザで読み込み，右キーを押してみましょう

図形が動きましたか？

key1

このプログラムは図形の開始位置(myX, myY）を最初に変数宣言して（0, 0）を代入しています．そして，キーを押し下げる(onkeydown)と，keysageを実行しますが，そのときにmyX,myYの値に１を足します．（なんか1足すのをインクリメントって言うらしい）それで移動したように見えます．

え？移動じゃない？

そうですね．移動後に書き足して，移動前の四角形は消していません．

ここで問題です

次の命令で描いた矩形を消すことができます．

context.clearRect(myX, myY, 20, 20);

では何行目に入れれば下図のように，綺麗に移動したように見えるでしょうか？

key2

描画している順序を見て考えてみてください．

余談ですが，この「消す」という命令．ゲームでは

弾が当たる＞キャラクタを消す＞爆発のパーティクルを発生させる

という流れで利用したりします．（destroy, disableなどです）

余裕のある方は，

（１）移動速度を代えるにはどうすればよいか

（２）（１）が分かった方は何カ所も変更するのが面倒だと気づいたかと思います．では移動速度の変数を１つ用意して，その1カ所書き換えるだけで，全部変更するにはどうすればよいか考えてみてください

HTML5, JavaScript, プログラミングお作法

HTML5入門その4-キー入力その１

それではキー入力を使ったCanvasを実行してみましょう．

このキー入力ができると自分のキャラクタを移動させること等ができます．そういうのはUnityに任せますが，HTML5で作成するWebアプリのための予備知識がいくつかをここで実習してみます．

ちなみにUnityでは3Dモードと2Dモードがあり移動はベクトルです．そのあたり復習しておいてください〜

次のHTMLを全てコピペして，key.html という名前などで保存してください．

<!DOCTYPE html>
<html>
<head>
<title>KEY</title>
<meta charset="UTF-8">
</head>
<body>
<h1>test</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var migi = false;//migiというブーリアンを用意
//ブーリアンはYesかNoか，はい　か　いいえ　だけを収納できる特殊な入れ物．はい＝True，いいえ＝Falseです．
//ブーリアンあ優柔不断な奴には向かない
//実際中に入っているのは，０か１ なので数字で指定するときもある．1がTrue,0がFalse

function keyageta(myEvt) {//これはkeywo_agetayoという名前の処理で，受信した信号（今回はキーコード）をmyEvtに代入
	if (myEvt.keyCode == 39)//もしmyEvtが39だったら
		migi = true;//migi変数に trueを入れなさい
console.log(migi);//変数migiの中身をコンソールに表示してね
}//キーがあがったときの処理はここまでです
document.onkeyup = keyageta;//このページでキーがあがったらkeywo_agetayoを処理するonkeupはキーの番号を送る

function draw() {//drawっていう命令の塊ね
context.fillStyle = "#FF0000";//赤だよー
context.fillRect(100, 100, 20, 20);//ここに書いてね
}//drawって命令の固まりはここまでよ
setInterval(draw, 10);//drawって命令の塊を10msecごとに実行ね（1秒は1000msecですよ）
</script>
</body>
</html>

 

ざっくりとした流れ
interval

（微妙に関数が違いますが気にしないで）これdraw()以下はあまり意味が無いですが，後で使います．

19行目のmyEvtはkeyagetaの設定値を受信するところです．24行目のonkeyupはキーの番号をつけて命令の塊(keyageta）を実行します．こうしたオプション項目を一緒に送る数値のことを引数（ひきすう）といいます．

ゲームでは，敵ごとに強さが違う状況で敵から攻撃を受けた時「敵の強さ」を引数として「ダメージ計算プログラム」に送る（渡すという表現もされる）などという使い方をします．

さて，このkey.htmlを開いき，コンソールを表示させます．

次に右矢印キーを押してみてください

コンソールには

console-true

と表示されます．

コンソールのクリア（消去）ボタンを押して一旦コンソールの表示を消し，右矢印をゆっくり押して離してみてください．

キーを上げた瞬間に　true　と表示されます．

では23行目の

document.onkeyup = keywo_agetayo;

を

document.onkeydown = keywo_agetayo;

に変更して保存し，再読込してコンソールを確認してみましょう．

今度はキーが押された瞬間に反応しましたね！

onkeyupとonkeydownの２つはキーの入力でよく使われます．

ゲームではこんな応用をします

onkeydown　＝　機銃，撃ち方始め！（機銃を撃ち続けるプログラムを実行）

onkeyup　＝　機銃，撃ち方止め！（機銃を撃ち続けるプログラムから抜ける

です．

onkeyupの設定がないと機銃打ちっ放しになっちゃいますね．

次に実際に図形を移動させてみましょう！

（つづく）

HTML5, JavaScript, プログラミングお作法

HTML5入門その3-コンソールを使ったデバッグ

この項，実質Javascript入門です

つづきです

次のHTMLを　debug.html　という名前で保存してブラウザで開いてみてください．

<!DOCTYPE html>
<html>
<head>
<title>コンソールを使ったデバッグ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>コンソールを使ったデバッグ</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var mycolor = "#ff0000";
context.fillStyle = mycolor;//変数mycolorがここに代入
oontext.fillRect(100, 100, 20, 20);//四角形を描画する
</script>
</body>
</html>

 

四角形が描画されるはずですが，描画されません！

どこかにバグ（プログラム上の問題）があります．

このバグを探し，誤りを修正することを「デバッグ」と言います．

この方法を２つやってみましょう．

（１）コンソールに出たエラー表示を手がかりにする

console-error1

この場合，debug.html:15　の表記から15行目にエラーがあることがわかります．

今回はこれで修正すればいいのですが，エラーの場所が本当はそこではなかったり，このエラー表示が出ないこともあります．また，思ったように表示されていない場合にも次の方法で確認することができます．

（２）コンソールログを使う
次のdebug.htmlのHTMLを全て次の物に入れ替えてください．

<!DOCTYPE html>
<html>
<head>
<title>コンソールを使ったデバッグ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>コンソールを使ったデバッグ</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var mycolor = "#ff0000";
console.log("テスター１");//新しく追加
context.fillStyle = mycolor;//変数mycolorがここに代入
console.log("テスター２");//新しく追加
oontext.fillRect(100, 100, 20, 20);
console.log("テスター３");//新しく追加
</script>
</body>
</html>

 

14行目，16行目，18行目にコンソールに表示させるプログラムを追加しています．

ですので，コンソールにはエラーの他にこのように表示されます．

console-error2

18行目の　console.log(“テスター３”);　でコンソールには”テスター３”と表示されるはずなのに表示されていません．つまりこのプログラムはこの直前で停止していることがわかります．

目を皿にして探してみてください．

17行目が

<span style="text-decoration: underline;"><strong>o</strong></span>ontext.fillRect(100, 100, 20, 20);

になっています．正しくは

<span style="text-decoration: underline;"><strong>c</strong></span>ontext.fillRect(100, 100, 20, 20);

ですね．

修正して保存し，再読込してみましょう．今度は”テスター3”までコンソールに表示されたと思います．

 

まとめ

変数の中身を見たいときは，見たいタイミングの行で

console.log(変数名);

実行のタイミングや，どこまで実行されているかだけ確認したい場合は

console.log(“好きな名前”);

と書いて実行してみましょう．

HTML5, JavaScript, Unity, プログラミングお作法

HTML5入門その２ーコンソールの使い方

この項，実質Javascript入門です

［準備］

プログラムの動きを見るためにコンソールという機能を使用します．この機能はプログラム内の変数や実行した場所がちゃんと実行されているか検知することができます．私はテスター代わりに使用しています．

このテスターになるコマンドは
console.log(hoge);
です．

（余談）ちなみにUnityでは
Debug.Log (hoge);//C#,JSとも

このコンソールをFirefoxでは
ツール＞Web開発＞Webコンソール
で表示できます

console1

［使い方］

実行を検知したいだけであれば，検知したい場所（行）に
console.log(“固有名詞”);
と入力します
その行が実行されれば，コンソールに”固有名詞”と表示されます．

変数たとえばhogeという名前の変数の中身をチェックしたければその検知したい場所（行）に
console.log(hoge);
と入力します
その行が実行されれば，コンソールに 変数の中身＝例えば3　とか　4.3　とか false　などと表示されます

cosole-view（コンソールにtrueと表示された例）

 

まずは，このテスターを作ってみましょう．

<!DOCTYPE html>
<html>
<head>
<title>コンソールのテスト</title>
<meta charset="UTF-8">
</head>
<body>
<h1>コンソールの表示テスト</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var mycolor = "#ff0000";
context.fillStyle = mycolor;//変数mycolorがここに代入
context.fillRect(100, 100, 20, 20);
console.log(mycolor);
</script>
</body>
</html

 

解説

cosole-setsumei（クリックで拡大）

console-disp1

結果はこのように表示されます

１６行目の

console.log(mycolor);

を

console.log("mycolor");

に変更してみましょう．ダブルクォーテーションで囲むだけです．
結果はどうなりましたか？

console-disp2

“　”で囲むと，変数ではなく「固有名詞」となり，それ自信を表示してくれます．

これはバグの取り方にも使われます．（次へ）

 

HTML5, プログラミングお作法

パスについて

pathとpassは意味が異なりますので注意を〜

ここではpathについて

/　スラッシュは「フォルダ」（文化によってはディレクトリ）の意味と考えてください

ただの「　/　」はrootと呼び，最上位を意味します．
コンピュータの中身で言えばHDDを開いた最初の場所のこと．
ちなみに「デスクトップ」の階層はかなり下です．地下でいうと3階とか6階とかくらい．

コンピュータでは，フォルダをどんどん開いて中に入ることを「下りる」と表現したりします．
/neko/inu/kaba　はnekoフォルダの中のinuフォルダの中のkabaというファイルかフォルダという意味です

この移動の指定には絶対パスか相対パスを使います．

  • 「ビルの12階」という表現の仕方が絶対パス（絶対番地）
  • 「2階下のフロア」という表現が相対パス（相対番地）

絶対番地の書き方

絶対番地はURLを全て書けばいいわけですから省略します

 相対番地の書き方

URLの指定などで今いるフォルダの１つ上のフォルダに行くときは 「　../　」と書きます
省略できるのであまり使いませんが現在の位置は「　./　」と書きます

その他

コマンドプロンプトかteratermで表示されるコマンドラインでもこの操作が可能です

pwd ＝　print working directory　現在のフォルダの位置を表示

ls　＝　フォルダ内を全て表示

cd　＝　change directory　フォルダを変更　後に ../　や/inu　などの相対パスか絶対パスを入力

 

HTML5, JavaScript, プログラミングお作法

HTML5入門その1-canvas

HTML5で実装されているcanvasを実行してみましょう．
以下を別の名前で作成し，保存してください．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
</head>

<body>

 <canvas id="myCanvas" width="200" height="200"
style="border:1px solid #000000;"><!--キャンバスを設定，名前はmyCanvas　幅200，高さ200，境界線hは１ピクセルの1本線で黒色-->
</canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");//入れ物（変数）cはmyCanvasって名前のやつね
var ctx = c.getContext("2d");//変数ctxに入れろ＝＞変数ｃを2次元としてね

//var ctx = myCanvas.getContext("2d");//これもOK
ctx.fillStyle = "#FF0000";//色　HEX値（16進数）で指定
ctx.fillRect(0,0,10,100);//左上0,0の座標から幅10,高さ100に彩色される
line();//lineって指示のセットあるでしょ，あれをこのタイミングでやっちゃって

function line(){//lineって名前の指示の塊をはここからですよ〜
ctx.lineWidth = 5;//ctxってやつに線を用意します幅は5pxで
ctx.strokeStyle = '#00FF00';//ctxってやつに描くときの色は#00ff00ね
ctx.beginPath();//ctxの書き始めるんで一旦リセットね
ctx.moveTo(0, 0);//ctxの０，０に移動して
ctx.lineTo(200, 200);//ctxに線を引きます200，200まで
ctx.closePath();//パスはここまでね
ctx.stroke();//じゃ描いて

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

何かが描画されたかたと思います．

必ず，HTML5でcanvas対応のブラウザを使ってくださいね．