小学生でもわかるJavaScript 「画像表示」と「入力イベント」から「画像移動」をする(beta)
命令文1 画像表示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像表示</title>
//CSSが書かれたstyleシートの読み込みを行う
<style>
#amira{
position: absolute;
top: 32px;
left: 32px;
}
</style>
</head>
<body>
//scriptシートの読み込みを行う
<script>
//アミラ様の画像にidのタグを付けてdocument.writeでブラウザ上で表示する
document.write( '<img id="1" src="amira.png">' );
</script>
</body>
</html>命令文2 入力イベント
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力イベント</title>
</head>
<body>
<script>
//何らかのキーが押されたときにkeydownfuncという関数を呼び出す
addEventListener( "keydown", keydownfunc );
//キーが押されたときに呼び出される関数
function keydownfunc( event ) { //アラートを表示する
alert( 'このサイトは執政官アミラ様のものだ！' );
}
</script>
</body>
</html>命令文3 画像移動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像移動</title>
<style>
#amira {
position: absolute;
top: 32px;
left: 32px;
}
</style>
</head>
<body>
<script>
//画面に画像を表示する
document.write( '<img id="amira" src="amira.png">' );
//キャラクターの位置
let y = 32;
let x = 32;
//何らかのキーが押されたときに関数keydownfuncを呼び出す
addEventListener( "keydown", keydownfunc );
//キーが押されたときに呼び出される関数
function keydownfunc( event ) {
//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
let key_code = event.keyCode;
if( key_code === 37 ) x -= 32; //「左の矢印キー」が押されたら、xの値から32を引く
if( key_code === 38 ) y -= 32; //「上の矢印キー」が押されたら、yの値から32を引く
if( key_code === 39 ) x += 32; //「右の矢印キー」が押されたら、xの値に32を足す
if( key_code === 40 ) y += 32; //「下の矢印キー」が押されたら、yの値に32を足す
if( key_code === 90 ) alert( 'Iボタン(スーファミのAボタン)は未実装だよ！' ); //「zキー」が押されたら、警告する
if( key_code === 88 ) alert( 'IIボタン(スーファミのBボタン)は未実装だよ！' ); //「xキー」が押されたら、警告する
if( key_code === 65 ) alert( 'IIIボタン(スーファミのXボタン)は未実装だよ！' ); //「aキー」が押されたら、警告する
if( key_code === 83 ) alert( 'IVボタン(スーファミのYボタン)は未実装だよ！' ); // 「sキー」が押されたら、警告する
if( key_code === 32 ) alert( 'Startボタン(スーファミのスタートボタン)は未実装だよ！' ); // 「スペースキー」が押されたら、警告する
if( key_code === 16 ) alert( 'Selectボタン(スーファミのセレクトボタン)ほ未実装だよ！' ); // 「シフトキー」が押されたら、警告する
//styleシートからamiraの要素を取得してアミラ様の画像の位置を反映させる
document.getElementById( 'amira' ).style.top = y + "px";
document.getElementById( 'amira' ).style.left = x + "px";
}
</script>
</body>
</html>命令文4 オブジェクト指向とボタン
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>オブジェクト思考とボタン</title>
<style>
</style>
</head>
<body>
<script>
let person = new Object();
//name（本名）
person.name = '小川晃弘';
//prefecture（都道府県）
person.prefecture = '茨城県';
//birthday（生年月日）
person.birthday = '2002年3月3日(魚座)';
//height（身長）
person.height = '167cm';
//bloodType（血液型）
person.bloodType = 'B型';
//ボタンが押されたときの反応
function name_click(){
alert(person.name);
}
function prefecture_click(){
alert(person.prefecture);
}
function birthday_click(){
alert(person.birthday);
}
function height_click(){
alert(person.height);
}
function bloodType_click(){
alert(person.bloodType);
}
</script>
<p>
私について<br>
<input type="button" value="本名" onclick="name_click()">
<input type="button" value="都道府県" onclick="prefecture_click()">
<input type="button" value="生年月日" onclick="birthday_click()">
<input type="button" value="身長" onclick="height_click()">
<input type="button" value="血液型" onclick="bloodType_click()">
</p>
</body>
</html>命令文5(誤)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像移動05</title>
<style>
#amira {
position: absolute;
top: 32px;
left: 32px;
}
</style>
</head>
<body>
<script>
//画面に画像を表示する
document.write( '<img id="amira" src="amira.png">' );
//キャラクターのオブジェクトを作る
let person = new Object();
let y = 32;
let x = 32;
//何らかのキーが押されたときに関数keydownfuncを呼び出す
addEventListener( "keydown", keydownfunc );
//キーが押されたときに呼び出される関数
function keydownfunc( event ) {
//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
let key_code = event.keyCode;
if( key_code === 37 ) x -= 32; //「左の矢印キー」が押されたら、xの値から32を引く
if( key_code === 38 ) y -= 32; //「上の矢印キー」が押されたら、yの値から32を引く
if( key_code === 39 ) x += 32; //「右の矢印キー」が押されたら、xの値に32を足す
if( key_code === 40 ) y += 32; //「下の矢印キー」が押されたら、yの値に32を足す
if( key_code === 90 ) alert( 'Iボタン(スーファミのAボタン)は未実装だよ！' ); //「zキー」が押されたら、警告する
if( key_code === 88 ) alert( 'IIボタン(スーファミのBボタン)は未実装だよ！' ); //「xキー」が押されたら、警告する
if( key_code === 65 ) alert( 'IIIボタン(スーファミのXボタン)は未実装だよ！' ); //「aキー」が押されたら、警告する
if( key_code === 83 ) alert( 'IVボタン(スーファミのYボタン)は未実装だよ！' ); // 「sキー」が押されたら、警告する
if( key_code === 32 ) alert( 'Startボタン(スーファミのスタートボタン)は未実装だよ！' ); // 「スペースキー」が押されたら、警告する
if( key_code === 16 ) alert( 'Selectボタン(スーファミのセレクトボタン)ほ未実装だよ！' ); // 「シフトキー」が押されたら、警告する
//アミラ様の画像の位置を反映させる
document.getElementById( 'amira' ).style.top = person.y + "px";
document.getElementById( 'amira' ).style.left = person.x + "px";
}
</script>
</body>
</html>命令文5(正)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像移動05 </title>
<style>
#amira {
position: absolute;
top: 32px;
left: 32px;
}
</style>
</head>
<body>
<script>
//画面に画像を表示する
document.write( '<img id="amira" src="amira.png">' );
//アミラ様のオブジェクトを作成
let amira = new Object();
amira.x = 0;
amira.y = 0;
//なにかキーが押されたとき、keydownfuncという関数を呼び出す
addEventListener( "keydown", keydownfunc );
//キーが押されたときに呼び出される関数
function keydownfunc( event ) {
//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
let key_code = event.keyCode;
if( key_code === 37 ) amira.x -= 32; //「左ボタン」が押されたとき、amira.xの値から32を引く
if( key_code === 38 ) amira.y -= 32; //「上ボタン」が押されたとき、amira.yの値から32を引く
if( key_code === 39 ) amira.x += 32; //「右ボタン」が押されたとき、amira.xの値に32を足す
if( key_code === 40 ) amira.y += 32; //「下ボタン」が押されたとき、amira.yの値に32を足す
if( key_code === 90 ) alert( 'Iボタン(スーファミのAボタン)は未実装だよ！' ); //「zキー」が押されたら、警告する
if( key_code === 88 ) alert( 'IIボタン(スーファミのBボタン)は未実装だよ！' ); //「xキー」が押されたら、警告する
if( key_code === 65 ) alert( 'IIIボタン(スーファミのXボタン)は未実装だよ！' ); //「aキー」が押されたら、警告する
if( key_code === 83 ) alert( 'IVボタン(スーファミのYボタン)は未実装だよ！' ); // 「sキー」が押されたら、警告する
if( key_code === 32 ) alert( 'Startボタン(スーファミのスタートボタン)は未実装だよ！' ); // 「スペースキー」が押されたら、警告する
if( key_code === 16 ) alert( 'Selectボタン(スーファミのセレクトボタン)ほ未実装だよ！' ); // 「シフトキー」が押されたら、警告する
//りこちゃんの画像の位置（いち）を反映（はんえい）させる
document.getElementById( 'amira' ).style.top = amira.y + "px";
document.getElementById( 'amira' ).style.left = amira.x + "px";
}
</script>
</body>
</html>参考サイト 命令文1
https://original-game.com/introduction-to-javascript-display-img/
参考サイト 命令文2
https://original-game.com/introduction-to-javascript-move-a-character-by-input/
参考サイト 命令文3
https://original-game.com/introduction-to-javascript-move-a-character-by-input/