| ホームページ | Pirikaで化学 | ブログ | 業務案内 | お問い合わせ |
| 情報化学+教育トップ | 情報化学 | MAGICIAN | MOOC | プログラミング |
2022.3.9
Pirika.comでプログラミング
山本博志
No2-5で作成したキャラクターなどを読み込んでキャンバスに描いてみましょう。
まだ絵がなければ、ネットなどからダウンロードした絵でも良いので準備しておきましょう。
No2-3でキャンバス上のピクセル（光っている1つのドット）に色を指定して絵を描くと、できることは限られてしまいます。と書いています。
そうしたペイント系の絵でも、塊としては色々使えます。
このキャラクターもキーボードの矢印キーで動かす事ができます。
でも、タブレットは困るので、キーボードの代わりのボタンをつけました。これでPC/Macでもタブレットでも動くと思います。
まず、キャラクターなどを描くキャンバスを用意します。（ソフトによってはペインと呼ぶこともあります）
次のようにやると、横幅500ピクセル、縦幅350ピクセルのキャンバスが作成されます。
<canvas id="canvas" width="500" height="350" style="border:1px solid #CCC;"></canvas>そこに自分の使いたい画像を読み込みます。
var img = new Image();
img.src = './images/Daimaou.png';完成形のプログラムをコピペしてHogeHoge.htmlとしてセーブした場合には、そのセーブしたところにimagesというフォルダーを作って、その中に自分で描いたキャラクターを入れておきます。
そのファイル名を、Daimaou.pngの代わりに入れると自分の描いたキャラクターが表示されるようになります。
このような事ができると、どのようなアイデアが生まれますか？ 自分のオリジナルのゲームも簡単に作れるようになります。 走れ、走れ！を試してみてください。
完成形プログラム（▶︎をクリックして開く）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="500" height="350" style="border:1px solid #CCC;"></canvas>
<table >
<td ></td>
<td ><input type="button" id="rB" value="→" onclick="GoRight()"></td>
<td><input type="button" id="lB" value="←" onclick="GoLeft()"></td>
<td><input type="button" id="uB" value="↑" onclick="GoUp()"></td>
<td><input type="button" id="dB" value="↓" onclick="GoDown()"></td>
</table>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Image オブジェクトを生成
var img = new Image();
img.src = './images/Daimaou.png';
var imageSizeX;
var imageSizeY;
var MyScaleX=0.3;
var MyScaleY=0.3;
//キャラクターの位置
var Imagey = 10;
var Imagex = 10;
// 画像読み込み終了してから描画
img.onload = function(){
imageSizeX=img.naturalWidth;
imageSizeY=img.naturalHeight;
ctx.drawImage(img, Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
}
function GoRight(){
ctx.clearRect(Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
Imagex += 32;
ctx.drawImage(img, Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
}
function GoLeft(){
ctx.clearRect(Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
Imagex -= 32;
ctx.drawImage(img, Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
}
function GoUp(){
ctx.clearRect(Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
Imagey -= 32;
ctx.drawImage(img, Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
}
function GoDown(){
ctx.clearRect(Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
Imagey += 32;
ctx.drawImage(img, Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
}
//なにかキーが押されたとき、keydownfuncという関数を呼び出す
addEventListener( "keydown", keydownfunc );
//キーが押されたときに呼び出される関数
function keydownfunc( event ) {
event.preventDefault();
//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
var key_code = event.keyCode;
//画像の位置（いち）を反映（はんえい）させる
ctx.clearRect(Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
if( key_code === 37 ) Imagex -= 32; //「左ボタン」が押されたとき、xの値から32を引き算する
if( key_code === 38 ) Imagey -= 32; //「上ボタン」が押されたとき、yの値から32を引き算する
if( key_code === 39 ) Imagex += 32; //「右ボタン」が押されたとき、xの値に32を足し算する
if( key_code === 40 ) Imagey += 32; //「下ボタン」が押されたとき、yの値に32を足し算する
ctx.drawImage(img, Imagex, Imagey,imageSizeX*MyScaleX,imageSizeY*MyScaleY);
}
</script>
</body>
</html>Copyright pirika.com since 1999-
Mail: yamahiroXpirika.com (Xを@に置き換えてください) メールの件名は[pirika]で始めてください。