タイトル画面作成
東京経済大学のおみぬーです。
ここ最近体調が優れず、ブログの更新が遅くなってしまいました。
今回は前回話していたコードの詳細と画面の紹介をします。
前回記述した通り、タイトルとマップを別々のHTMLファイルに格納しました。タイトル側のHTMLファイルを一から作成、コード自体は簡潔で短いものなのでコード全文を記載します。
以下がコードになります。
<!DOCTYPE html>
<html>
<head>
<title>kenkyunote</title>
<meta charset="UTF-8">
<script>
var cv, gc;
function init() {
cv = document.getElementById("title");
gc = cv.getContext("2d");
gc.fillRect(0, 0, 800, 440);
gc.fillStyle = "Black";
gc.font = "30px serif";
gc.fillStyle = "White";
gc.fillText("タイトル", 250, 200);
buttonstart.style.display = "";
buttonstart.style.position = "absolute";
buttonstart.style.left = "500px";
buttonstart.style.top = "330px";
buttonstart.style.width = "100px";
buttonstart.style.height = "50px";
buttonstart.onclick = function(){titlepaint(); buttonstart.style.display = "none";}
}
function titlepaint(){
location.href = "kenkyunotemap.html";
}
</script>
</head>
<body onload="init()">
<canvas id="title" width="800" height="440"></canvas>
<img id="buttonstart" src="imgStart.png" style="display:none" />
</body>
init関数内で黒背景、白文字で「タイトル」、buttonstart（開始ボタン）を表示するように定義しています。buttonstart.onclick では、buttonstart（開始ボタン）をクリックすることでtitlepaint関数を呼び出し、buttonstart（開始ボタン）を非表示にしています。titlepaint関数ではlocation.href でHTMLファイル、kenkyunotemap.htmlにページ遷移するうに定義しています。
以下が画面になります。
