解説/入門編のバックアップ(No.3)

※このページは書きかけです。

theater.js入門

theater.js入門 †

↑

前提条件 †

現在、最新バージョンにシナリオ編集ツールは付属していません。このため、テキストエディタ等でシナリオを直接記述していただくことになります。(シナリオ編集ツールは現在作成中です。)

このため、ある程度のPCの知識が必要となります。以降の説明はそれを前提とします。

さらに、HTML、CSS、JavaScript等の知識があればより理解しやすいですが、この入門編ではそれらの知識がなくてもシナリオが書けるような説明をしたいと思います。

↑

動作確認 †

ダウンロードページから最新バージョンのファイル(tjs???.lzh)をダウンロードしてください。
ファイルを解凍し、theaterフォルダ下のindex.htmをブラウザ(推奨:WinXp+IE6)で開いてください。
表示された画面(画像か文章の要素)をクリックすることでシナリオが進行していきます。

↑

準備 †

テスト用ファイル&ref(): File not found: "test.lzh" at page "解説/入門編";をダウンロードしてください。
ファイルを解凍し、test.htmをtheaterフォルダに配置してください。

↑

最初の例 †

test.htmをエディタで開いてください。
以下のようなコードが表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title>TheaterJS</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="imagetoolbar" content="no"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="staff/theaterconstructor.js"
 type="text/javascript" charset="Shift_JIS"></script>
<script>
<!--
var img = [

];
var scenario = [
  function(){
  
  }
];
new Theater({
  img: img,
  scenario: scenario
});
//-->
</script>
</head>
<body>
<div id="play">
<div id="frame"></div>
<div id="msg">クリックしてスタートしてください。</div>
<button id='reset'>はじめから</button>
</div>
</body>
</html>