【プログラミング】Matrix風伝言板作ってみた！【MATRIX伝言板】

MATRIX伝言板！
1. どうやって使う？？
ソースコード

MATRIX伝言板！

この前、映画「Matrix」のあの緑色の文字が雨のように流れていく画面（Matrix Code Rainっていうんかな？）をHTMLのCanvasで作りました。

2Dバージョンと3Dバージョンを作りましたね。
でも、ただランダムな文字列が流れてくるだけだと、かっこいい画面なだけであって、それ以上の意味をなさない…
全然いいんですけど、プラスで”何か”つけたくなったので、
MATRIX伝言板を作りました！
入力したメッセージが次々流れてくるアプリです。

MATRIX伝言板

Matrix Code Rain風伝言板

どうやって使う？？

MATRIX伝言版と上からたくさん流れてきていますが、消してみましょう。
中央のテキスト入力フォームに「clear」と入力し、Enterを押すと、文字が流れてこなくなります。

次に何かしらメッセージを追加していきましょう。
よみあきはご飯を食べに行っています
とでも書いてみましょう

そして、Enterを押すと、「よみあきはご飯を食べに行っています」のテキストが次々に上から流れてきます。

このように、メッセージをどんどん追加することで伝言板として使えます！？
ぜひ席を外すときに使ってみてください～～

ソースコード

ソースコードは以下のようになっています。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
<!-- Bootstrap Javascript(jQuery含む) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<title>MATRIX伝言板</title>
<style>
html{
	background-color:black;
	height:100%;
	overflow:hidden;
}
body{
	background-color:black;
	margin:0;
	padding:0;
	height:100%;
}
	
#addText{
	position:absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	border:none;
	outline: none;
	background-color: transparent;
	font-size:28pt;
	color:#0F0;
	text-align: center;
}
	#addText:hover{
		background-color:rgba(0,255,0,0.2);
	}
	
	.modal{
	color:#0F0;
	}
	
	.modal-content{
		background-color: black;
		border-color: #FFF;
		text-shadow: 0 0 10px #0F0,0 0 15px #0F0;
	}
	
	.btn-close{
		color:#0F0;
		background-color: black;
		text-shadow: 0 0 10px #0F0,0 0 15px #0F0;
		border-color:#0F0;
	}
	
	.btn-:hover{
		color:rgba(0,255,0,0.5);
		background-color: black;
		text-shadow: 0 0 10px #0F0,0 0 15px #0F0;
		border-color:black;
	}
	
</style>
</head>
<body>
	<input type="text" id="addText">
	<canvas id="Matrix"></canvas>
<script>
$(window).on('load',function(){
    $('#exampleModalCenter').modal('show');
});
	
let canvas=document.getElementById("Matrix");
let context=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
	
let clear=0;
	
$(function(){
  /// DOM読み込み後に自動フォーカスイン
  $("#addText").focus();
});
$("#addText").keypress(function(e) {
  if (e.keyCode == 13) {
	//clear入力でリセット
	if($("#addText").val()=="clear"){
		clear=1;
	}
	else if($("#addText").val()==""){}
	else{
	//半角英字を全角に変換
	let fullwidthText=$("#addText").val().replace(/[A-Za-z0-9]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0) + 65248);
      });
    inputText.push(fullwidthText);
	$("#addText").val("");}
    return false;
  }
});
//出力文字の候補
let inputText=[];
inputText.push("ＭＡＴＲＩＸ伝言板");
//出力文字サイズ
const fontSize=28;
	
//行数列数決め
let colums=canvas.width/fontSize;
let lines=canvas.width/fontSize
//落ちるコードを管理する配列
let rains=[];
//落ちるコードのコンストラクタ
var Rain=function(context,i,text,rainDrops, outputText){
	this.context=context;
	this.i=i;
	this.text=[];
	this.rainDrops=rainDrops;
	this.outputText=outputText;
};
	
//落ちるコードの描写
Rain.prototype.draw=function(){
	context=this.context;
	context.fillStyle="#0F0";
	context.font=fontSize+"px monospace";
	context.shadowColor="#0F0";
	context.shadowBlur=4;
	
	//出力文字決め
	for (let k=0;k<this.outputText.length;k++){
	this.text.push(this.outputText.charAt(k));
	}
	//薄くなっていく処理
	for(let j=0;j<lines;j++){
			context.globalAlpha = Math.max(1.0-7.0*((j+1)/lines),0);
			context.fillText(this.text[0],this.i*fontSize,(this.rainDrops-j-this.outputText.length)*fontSize);
	};
	context.globalAlpha = 1.0;
	
	//文字のかたまり描画
	for (let k=0;k<this.outputText.length;k++){
	this.text.push(this.outputText.charAt(k));
	context.fillText(this.text[k],this.i*fontSize,(this.rainDrops+k-this.outputText.length)*fontSize);}
	
	//画面外に出たときの処理		
	if(this.rainDrops*fontSize>(canvas.height*2)&&Math.random()>0.975&&clear==0&&inputText.length !== 0){
			this.rainDrops=0;
			this.text=[];
			this.outputText=inputText[Math.floor(Math.random()*inputText.length)];
		}
	
	if(this.rainDrops*fontSize>(canvas.height*2)&&clear==1){
			this.outputText="";
			inputText=[];
			clear=0;
		}
	
	//下に一文字分下がる
	this.rainDrops++;
		};
	
//落ちるコードインスタンスを列の数だけ
for  (i = 0; i < colums; i++) {
		rainDrops=1;
		text=[];
		outputText=inputText[0];
		rain=new Rain(context,i,text,rainDrops,outputText);
		rains.push(rain);
	};
		
//実行関数の作成
function go(){
	//キャンバス上クリア
	context.clearRect(0, 0, canvas.width, canvas.height);
	//格納されたrainsの各要素を実行
	for(var k=0;k<colums;k++){
	rains[k].draw();
        }};
		
//ウィンドウサイズ変更した場合は再読み込み
window.addEventListener('resize', function(){
    location.reload();
  });
		
	//30フレームごとに繰り返しgoを実行
	setInterval(go,120);
	</script>
	
</body>
</html>