オブジェクト指向を使ったJavaScriptで画像を動かすプログラミングの命名について
解決したいこと
JavaScriptで画像を動かすプログラミングをつくっています。
img idとObjectの変数の名前を個別にしたいです。
img idとObjectの変数の名前を個別するためにエラー(?)が発生しました。
解決方法を教えて下さい。
画像移動 誤の命令文(html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像移動 誤</title>
<style>
#general {
position: absolute;
top: 32px;
left: 32px;
}
</style>
</head>
<body>
<script>
//画面に画像を表示する
document.write( '<img id="general" 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( 'general' ).style.top = amira.y + "px";
document.getElementById( 'general' ).style.left = amira.x + "px";
}
</script>
</body>
</html>
画像移動 正の命令文(html)
<!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 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>
自分で試したこと
・style内の#amiraを#generalに変更しました。
・script内のimg id、getElementByIdの文字列をamiraからgeneralに変更しました。
0
