*初級編応用 [#p756f0b0]
-[[解説/初級編]]までの内容を応用して、簡単なクイズゲームを作成してみます。

-ダウンロード:&ref(sample1_20070906.lzh);
-ファイル内容はsample1.htmのみです。現最新のtheaterフォルダ直下に配置してください。

 <!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 src="staff/theaterconstructor.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 <!--
 new Theater({
   img: [
     "img/sample2.gif",
     "img/sample3.gif",
     "img/sample4.gif",
     "img/sample6.gif",
     "img/sample7.gif",
     "img/sample16.gif"
   ],
   scenario:[
     function(){
       this.act({
         img: "img/sample2.gif",
         msg: "クイズゲーム!"
       });
     },
     function(){
       this.act({
         img: "img/sample3.gif",
         msg: "まず、お名前を入力してください。",
         filter: 14
       });
     },
     function(){
       this.prompt("お名前を入力してください。", "名無し");
     },
     function(result){
       this.work.name = result;
       this.speak("ようこそ" + this.work.name + "さん");
     },
     function(){
       this.work.count = 0;
       this.act({
         img: "img/sample4.gif",
         msg: "第一問:「檄を飛ばす」とは、「叱咤激励する」という意味である?",
         filter: 107
       });
     },
     function(){
       this.confirm("どっち?");
     },
     function(result){
       if(result == true){
         this.push(scenarioWrong);
       }else{
         this.push(scenarioRight);
       }
       this.keep();
     },
     function(result){
       this.speak("本来は「自分の考えを広く知らしめる」という意味。");
     },
     function(){
       this.act({
         img: "img/sample3.gif",
         msg: "第二問:能力と比べて、その人の役割・地位が過大に重要であるとき"
            + "「役」がつく言葉でなんと言う?",
         filter: 104
       });
     },
     function(){
       this.prompt("役???", "役");
     },
     function(result){
       if(result == "役者が足りない" || result == "役者がたりない"){
         this.push(scenarioRight);
       }else{
         this.push(scenarioWrong);
       }
       this.keep();
     },
     function(result){
       this.speak("「役者が足りない」が正解。「役不足」は逆の意味。");
     },
     function(){
       this.act({
         img: "img/sample3.gif",
         msg: "第三問:次の「すべからく」を使用した表現で、正しいものは?",
         filter: 113
       });
     },
     function(){
       this.choice(["その本をすべからく読んだ",
                    "その本の一部でもすべからく読むべし",
                    "その本の一部をすべからく読んだ"]);
     },
     function(result){
       if(result == "その本の一部でもすべからく読むべし"){
         this.push(scenarioRight);
       }else{
         this.push(scenarioWrong);
       }
       this.keep();
     },
     function(result){
       this.speak("「すべからく」は「ぜひとも」の意味で「すべからく・・・べし」という形で用いる。"
                + "「すべて」という意味ではない。");
     },
     function(){
       this.act({
         img: "img/sample3.gif",
         msg: "クイズ終了!",
         filter: 116
       });
     },
     function(){
       this.speak(this.work.name + "さんの結果:" + this.work.count + "問正解");
     },
     function(){
       if(this.work.count == 3){
         this.act({
           img: "img/sample7.gif",
           msg: "全問正解!! おめでとうございます^^",
           filter: 114
         });
       }else{
         this.keep();
       }
     },
     function(){
       this.act({
         img: "img/sample2.gif",
         msg: "お疲れ様でした^^",
         filter: 5
       });
     }
   ]
 });
 
 var scenarioRight = [
   function(){
     this.work.count++;
     this.act({
       img: "img/sample16.gif",
       msg: "正解!",
       filter: "",
       outEffect: "Puff",
       inEffect: "Grow"
     });
   },
   function(){
     this.speak("^^");
   }
 ];
 
 var scenarioWrong = [
   function(){
     this.act({
       img: "img/sample6.gif",
       msg: "残念!",
       filter: "",
       outEffect: "DropOut",
       inEffect: "Appear"
     });
   },
   function(){
     this.speak("><;");
   }
 ];
 //-->
 </script>
 </head>
 <body>
 <div id="play">
 <div id="frame"></div>
 <div id="msg">クリックしてスタートしてください。</div>
 <button id='reset'>はじめから</button>
 </div>
 </body>
 </html>

-・・・演出が下手ですみません><;

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS