index.html

<!doctype html>
<html ng-app="game">
  <head>
   <title>街頭創業家的一天 | 人生百味</title>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/angular.min.js"></script>
    <script src="js/lib/angular-sanitize.js"></script>
    <script src="js/lib/howler.min.js"></script>
    <script type="text/javascript" src="js/lib/intro.min.js"></script>
    <link href="css/intro.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
<!--    <script type="text/javascript" src="js/lib/angular-intro.js"></script>-->
    <script src="js/data.js"></script>
    <script src="js/person.js"></script>
    <script src="js/sceneAction.js"></script>
    <script src="js/controller.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-50648405-10', 'auto');
      ga('send', 'pageview');

    </script>
    <link rel="stylesheet" href="css/game.css">
    <meta name="title" content="街頭創業家的一天">
    <meta name="description" content="十字路旁單薄的叫賣身影，你是否已習以為常？不知經過幾個年頭，這樣的身影撐起一個家庭，或至少希望獨立賺取應得溫飽。其中人生百萬種滋味和心路故事，每天只是路過是無法了解的。透過 3 分鐘的角色扮演遊戲，希望帶著大家一起走入街頭創業家的日常，了解街頭販售的生活，打破隔閡點亮街頭。">
    <meta property="og:title" content="街頭創業家的一天"/>
    <meta property="og:image" content="http://game.doyouaflavor.tw/img/og.png"/>
    <meta property="og:description" content="十字路旁單薄的叫賣身影，你是否已習以為常？不知經過幾個年頭，這樣的身影撐起一個家庭，或至少希望獨立賺取應得溫飽。其中人生百萬種滋味和心路故事，每天只是路過是無法了解的。透過角色扮演的遊戲，希望帶著大家一起走入街頭創業家的日常，了解街頭販售的生活，打破隔閡點亮街頭。"/>
    <meta property="og:url" content="http://game.doyouaflavor.tw/"/>
    <meta property="fb:app_id" content="1020808967984987"/>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body ng-controller="MainCtrl as scene"  ONDRAGSTART="window.event.returnValue=false" ONCONTEXTMENU="window.event.returnValue=false" onSelectStart="event.returnValue=false" onload='document.getElementById("player-name").focus();'>

    <div class="scene street" ng-style='scene.streetStyle()'>
        <div class="street-info" ng-if='scene.debug' > 時間：<span>{{scene.currentTime}}</span>  分數：<span>{{scene.total_score}}</span>  單價：<span>{{scene.deal_score}}</span>{{scene.threshold}}</div>
        <div class="street-stage" ng-class="scene.streetClassName">
            <div class="street-background">
                <img src=""/>
            </div>
            <div class="street-master" ng-click="scene.doClickMaster();" ng-style="scene.masterStyle()" >
               <img src="img/game/shadow.png"/ class="master-shadow">
                <img ng-class="scene.animate" src="img/street-role-{{scene.role}}.png" class="street-master-img"/>
                <img src="img/game/arrow.png" alt="" class="street-master-arrow" ng-if="scene.arrow">
                <div ng-repeat="coin in scene.coins">
                    <div class="person-coin">$</div>
                </div>
            </div>
            <div class="street-customers">
                <div class="person" ng-class="person.name" ng-repeat="person in scene.street_people" ng-style="person.style()">
                   <img class="person-mind person-token" ng-if="person.mind=='bad'" src="img/game/bad-mood.png"/>
                   <img class="person-mind person-token" ng-if="person.mind=='good'" src="img/game/bought.png"/>
                    <img class="person-saw person-token" ng-if="person.state=='saw'" src="img/game/like.png"/>
                    <img class="person-redeye person-token" ng-if="person.state=='redeye'" src="img/game/dislike.png"/>
                    <img class="person-body" ng-class="person.animate" src="img/person.png"/>
                    <div ng-if="scene.debug">
                    {{person.name}}
                    {{person.action}}
                    {{person.state}}
                    {{person.sawInterval}}
                    </div>
                </div>
            </div>
            <div class="pause-button" ng-click="scene.showPauseMenu()" ng-if="scene.currentTime > 0"></div>    
        </div>
        <div class="street-dashboard-wrapper" ng-click="scene.doClickMaster();">
            <div class="street-dashboard">
               <div class="db-score"><span class="db-score-unit">收入</span>
                   <span class="db-score-number">{{scene.total_score}}</span>
               </div>
                <div class="db-badge">
                   <div class="db-timebar-wrapper">
                    <div class="db-timebar">
                       <div class="db-time-bar db-time-white"></div>
                       <div class="db-time-bar db-time-yellow" style="width: {{scene.lineLengthStyle()}}px;" ng-if="scene.currentTime > 0"></div>
                       <div class="db-warning" ng-if="scene.warning">
                           !
                       </div>
                       
<!--
                        <div class="db-timelayer">
                            <img src="img/time-bar.png" alt="">
                            <div class="db-time-arrow" style="right:{{scene.currentTime / scene.countdown * 322}}px;">
                                <img src="img/sun.png" alt="">
                            </div>
                        </div>
-->
                    </div>
                </div>
                    <img class="db-sunny" src="img/game/sunny@1x.png" alt=""/>
                    <div class="bg-space-wrapper">
                        <div class="bg-space" ng-repeat="(i, element) in scene.data"><img src="img/game/point@1x.png" alt="" ng-if="i==scene.selected.length && scene.warning" /></div>
                    </div>
                    <div class="badges">
                        <div class="badge" ng-repeat="select in scene.selected">
                            <img src="{{select.option.rwd_img}}" alt=""/>
                        </div>
                    </div>
                    <img class="db-moon" src="img/game/moon@1x.png" alt=""/>
                </div>


            </div>
        </div>
        <div class="pause-section">
            <div class="pause-menu" ng-if="scene.pause">
                <ul>
                    <li ng-click="scene.showPauseMenu()">繼續</li>
                    <li ng-click="scene.pauseMenu.replay()">重頭開始</li><li><a href="https://docs.google.com/forms/d/14aCYSKBP61mnE_dy07YokfY1c-IDtnSu7UfSCEkpU_Q/viewform" target="_blank">回報意見</a></li>
                </ul>
            </div>
        </div>
        <div ng-if="scene.debug" style="position: absolute;left: {{scene.region[0][0]}}px;top:{{scene.region[0][1]}}px;width: {{scene.region[1][0]-scene.region[0][0]}}px;height: {{scene.region[1][1]-scene.region[0][1]}}px;background: #000;opacity: 0.5;" class="debug-people-area"></div>
    </div>  
  
  
  <div class="scene game-start" ng-if="scene.state=='ready'">
     <div class="header" id="header">
      <span class="header-item header-logo"><a href="" target="_blank">人生百味</a></span>
      <span class="header-item header-team">街頭創業家的一天</span>
  </div>
  
      <h1>街頭創業家的一天</h1>
      <p>十字路旁單薄的叫賣身影，你是否已習以為常？<br/>
不知經過幾個年頭，這樣的身影撐起一個家庭，或至少希望獨立賺取應得溫飽。<br/>
 其中人生百萬種滋味和心路故事，每天只是路過是無法了解的。<br/>
 透過 3 分鐘的角色扮演遊戲，希望帶著大家一起走入街頭創業家的日常，了解街頭販售的生活，打破隔閡點亮街頭。</p>
 <form ng-submit="scene.doClickStart()" >
     <input type="text" placeholder="你的大名" name="" id="player-name" ng-model="scene.name" ng-click="scene.sound.click.play()">
     <input type="submit" id="submit" value="登記創業" />
     <a href="https://docs.google.com/forms/d/14aCYSKBP61mnE_dy07YokfY1c-IDtnSu7UfSCEkpU_Q/viewform" target="_blank" class="ready-btn">回報意見</a>
     </form>
  </div>
  
  <!--選項-->
  <div class="scene question"  ng-if="scene.state=='question'">
    <div class="question-set">
        <div class="question-content">
         {{ scene.question.name}}. {{ scene.question.description }}
         </div>
         <div class="triangle"></div>
         <div class="options" ng-style="optionsStyle">
             <div class="option" ng-repeat="option in scene.question.options">
                <a href="javascript:void(0);" ng-click="scene.doClickSelectioins(option)">
                   <div class="option-img">
                       <img src="{{option.img}}" class="img-sm"/>
                       <img src="{{option.rwd_img}}" class="img-lg"></img>
                   </div>
                   <div class="option-effect">{{option.effectInfo}}</div>
                    <div class="option-text">{{option.name}}.{{option.value}}</div>
                </a>
             </div>
        </div>
    </div>
  </div>
  

  <!--選擇選項後出現的說明-->
  <div class="scene answer-information"  ng-if="scene.state=='answer-information'">
    <!--要改classname-->
    <div class="answer-set">
       <div class="answer-info" ng-class="scene.answerGetClassName()">
           <div class="answer-info-header">
               <div class="answer-score">
                   <span class="answer-select">
                       {{scene.last_selected_option.value}}
                   </span>
               </div>
               <div class="answer-selection">
                   <span class="answer-point">
                      {{scene.last_selected_option.effectInfo}}
                   </span>
               </div>
           </div>
           <div class="answer-info-content" ng-style="scene.answerInfoContentStyle()">
              <div class="answer-info-img">
               <img src="{{scene.last_selected_option.img}}" />
               </div>
<!--               <div class="option-text">{{scene.last_selected_option.name}}.{{scene.last_selected_option.value}}</div>-->
           </div>
       </div>
        <div class="answer-content" >
        <div ng-bind-html="scene.getInformation()"></div>
         </div>
         
                <a class="next" href="javascript:void(0);" ng-click="scene.doClickNext()">
                  NEXT
                </a>
             </div>
        </div>
        

    <!--結局-->
    <div class="scene final" ng-if="scene.state=='ending'">
       <div class="final-layout-left">
           <img src="{{scene.selected[0].option.img}}" alt="">
       </div>
       <div class="final-layout-right">
            <h2>街頭創業家潛力值評估</h2>
            <div>賺取金額：<span class="ending-score-span">{{scene.total_score}}</span>元</div>
            <br/>
            <div>你的稱號：<span class="ending-final-title">{{scene.final_title}}</span>
            <a class="btn-result btn-blue btn-share" href="{{scene.shareHref()}}" target="_blank">在 FB 分享給好友</a>
            </div>
            <div class="select-list">
                <div ng-repeat="select in scene.selected" class="select-item">
                     <div class="select-question">{{select.questionInfo}}</div>
                     <div class="select-answer">
                          <span class="select-index">{{select.option.name}}</span>
                          <span class="select-value">{{select.option.value}}</span>
            <!--              <span class="select-am">{{select.option.addormulti}}</span>-->
            <!--              <span class="select-score">{{select.option.score}}</span>-->
                     </div>
                     <div class="select-effectInfo">
                         {{select.option.effectInfo}}
                     </div>
        <!--
                      <div class="information" ng-bind-html="select.information">
                      </div>
        -->
                </div>
            </div>
            <div class="result-menu">
            <a class="btn-result" href="javascript:void(0);" ng-click="scene.pauseMenu.replay()">
                重新遊玩
            </a>
            <a class="btn-result" href="http://doyouaflavor.blogspot.tw">
                更多關於街賣的知識
            </a><br/>
            <a class="btn-result" href="http://doyouaflavor.blogspot.tw">
                尋找街賣攻略和彩蛋(準備中)
            </a>
            <a class="btn-result btn-yellow" href="https://www.flyingv.cc/project/9420">
                FlyingV 贊助街賣計劃
            </a>
            </div>
        </div>
    </div>
  
<div class="scene final" ng-if="scene.debug">
   <div class="score">State = {{scene.state}}</div>
    <div class="score">積分 = {{scene.total_score}}</div>
    <div class="score">單次分數 = {{scene.deal_score}}</div>
    <div class="street-info"> 時間：<span>{{scene.currentTime}}</span></div>
    <div class="sate">selected：{{scene.selected}}</div>
<!--    {{scene}}-->

</div>
     
  
  </body>
</html>