キーボード操作によって図形の背景色を変える機能を実装してみた。

こんにちは、雑記ラビリンスです。

今回、押すキーによって図形の背景色を変える身にプログラムを作りましたので
紹介します。

実装は、JavaScriptで行っており、keydownメソッドを利用して、取得した
キーコードによって背景色を変えるものです。


ソースコードは以下の通りです。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
	<style>
		#key{
			height: 100px;
			width:  100px;
			background-color: green;
			border:solid black 3px;
		}
	</style>
<div id="key"></div>
<script type="text/javascript">
		$(function(){
			$('html').keydown(function(e){
				var number = e.which;
				switch(number) {
					case 65:
						$('#key').css('background-color','yellow');
						break;
					case 83:
						$('#key').css('background-color','blue');
						break;
					case 68:
						$('#key').css('background-color','orange');
						break;
					case 70:
						$('#key').css('background-color','red');
						break;
					case 71:
						$('#key').css('background-color','purple');
						break;
					case 72:
						$('#key').css('background-color','skyblue');
						break;
					case 74:
						$('#key').css('background-color','green');
						break;
					case 75:
						$('#key').css('background-color','black');
						break;
					default:
						$('#key').css('background-color','white');
						break;
				}
			});

		});
	</script>

作りとしてはシンプルで押されたキーのキーコードに対してswitch構文で
処理を分岐させているだけです。

押されたキーによって処理を変えられるため、
あるキーが押されたら画像が表示されるとか、あるキーはなぜか使用させないとか
いろいろと応用が利くかと思います。


おしまい