ノベルゲー途中経過 - ツナドーナツ・技術メモ帳

とりあえず普通のテキストファイルを読み込んで表示できるようにしました。
追加したのは主にこの部分です。

//textファイル読み込み
$.ajax({
	type: 'GET',
	url: 'sample.txt',
	success: function(text){
		//改行コードで分割
		string = text.split(/\r\n|\r\n/);
	}
});

JQueryのAjaxを使っています。
なのでChromeだとエラーが出てしまいます(Edgeなら動く)
dataType: 'json'を追加すればJSON形式で読み込めるはずです。

Chromeで動かないのはまずいのでなんとかしたいのですが、めんどくさいので後でやることにします。

最後にソースコードの全文を載せておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ノベルゲーム</title>
<meta charset="UTF-8">
<style>
#canvas {
	margin: 2em 0;
	border: double 5px #4ec4d3;
}

#box0 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	width: 740px;
	height: 440px;
}

</style>
</head>
<body>
<div id="box0">
<canvas id="canvas" width="840" height="540"></canvas>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var textMarginX = 8;//テキストボックスのx座標
var textMarginY = height - 150;//テキストボックスのy座標
var Area_Width = width - textMarginX * 2;//テキストボックスの幅
var Area_Height = 150 - textMarginX;//テキストボックスの高さ
var count = -1;
var string = Array();

//テキストボックス表示
init();

//textファイル読み込み
$.ajax({
	type: 'GET',
	url: 'sample.txt',
	success: function(text){
		//改行コードで分割
		string = text.split(/\r\n|\r\n/);
	}
});
//テキストボックスをきれいにする
function init(){
	//テキストボックスをいったんきれいにする
	ctx.clearRect(textMarginX, textMarginY, Area_Width, Area_Height);
	//テキストボックスの色指定
	ctx.fillStyle = "rgba(0, 100, 0, 0.5)";
	//テキストボックス表示
	ctx.fillRect(textMarginX, textMarginY, Area_Width, Area_Height);
}

//テキストを表示する
function drawText(str){
	init();
	if(str != null){
		ctx.fillStyle = "rgb(0, 0, 0)";
		ctx.font = "italic 30px Arial";
		ctx.fillText(str, 16, height - 100, Area_Width-textMarginX);
	}else{
		ctx.fillStyle = "rgb(0, 0, 0)";
		ctx.font = "italic 30px Arial";
		ctx.fillText("文章がありません！", 16, height - 100, Area_Width - textMarginX);
	}
}

//クリックイベント
function onClick(e){
	count += 1;//一行進める
	drawText(string[count]);//文章を表示する
}

canvas.addEventListener('click', onClick, false);
</script>
</body>
</html>