みなさんこんにちは〜作業おばけです。
JavaScriptのCanvas要素を使ってキーボードで図形を動かす。
— 作業おばけ@プログラミング学習中 (@oocf8) January 30, 2020
↓↓↓↓↓↓https://t.co/JqO3xPuB3W
↑↑↑↑↑↑ pic.twitter.com/pXUD1Fr0SP
ソースコード
<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>*{margin:0;padding:0;text-align:center;background-color:black;color:white;}canvas{background-color:#333;}</style></head><body><h1>矢印キーで操作できます</h1><canvasid="canvas"width="320"height="320"></canvas><script>constcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');letx=150;lety=150;ctx.beginPath();ctx.arc(x,y,30,0,Math.PI*2,true);ctx.fillStyle="gold";ctx.fill();addEventListener("keydown",keydownfunc,false);functionkeydownfunc(event){ctx.clearRect(0,0,320,320)letkey_code=event.keyCode;if(key_code===37)x-=32;if(key_code===38)y-=32;if(key_code===39)x+=32;if(key_code===40)y+=32;ctx.beginPath();ctx.arc(x,y,30,0,Math.PI*2,true);ctx.fillStyle="gold";ctx.fill();}</script></body></html>キー入力を使うことができればブラウザゲーム制作の幅が広がると思います。
実際に僕はブラウザゲームを作っています。
僕の作っているブラウザゲームはこちら https://www.o--o.cf/
以上。