### # # 対局時計 on Web, Ver. 0.1, by yubais, 2013/03/22 # ### # todo: 数字以外を入力したときの例外処理 game = # ユーザーエージェントが iPhone/iPad/Android なら、イベントを touchstart に # それ以外なら click に touch = ( navigator.userAgent.indexOf('iPhone') > 0 ) or ( navigator.userAgent.indexOf('iPad') > 0 ) or ( navigator.userAgent.indexOf('Android') > 0 ) if touch eventmode = 'touchstart' else eventmode = 'click' class Game # ページ読込後、待機状態へ constructor: () -> # 状態を管理するプロパティ。standby, end, 0(先手), 1(後手) this.state = 'standby' self = this # 先にタップした方を後手にして対局開始 $("#upper").on(eventmode, ()-> self.start([$("#under"),$("#upper")]) if self.state == 'standby' ) $("#under").on(eventmode, ()-> self.start([$("#upper"),$("#under")]) if self.state == 'standby' ) # 対局開始 start: (domlist) -> # 持ち時間を設定 this.havetime = Number($("#havetime").val()) * 60 # 秒読みを設定 this.countdown = Number($("#countdown").val()) # 手数を設定 this.moves = 0 $("#toolbar").text(this.moves + "手") # stateを0 (先手) にする this.state = 0 # Playerのインスタンス作成 this.player = [ new Player(0, domlist[0]) new Player(1, domlist[1]) ] # ツールバーを縮小して対局状態へ $("#toolbar").animate({ "height": "20%" }) $(".switch").animate({ "height": "40%" }) # 先手の時計を動かす this.player[0].start() # 手番の切替 change: () -> # 手数を1進める this.moves++ $("#toolbar").text(this.moves + "手") # 手番の先後を交換 (将来的に4人プレイなどに対応しやすい仕様) this.state++ if this.state == this.player.length this.state = 0 console.log "minmin" # 全プレイヤーの時計を停止 for player in this.player player.stop() # 次のプレイヤーの時計を動かす this.player[this.state].start() class Player constructor: (teban, dom) -> self = this # 0 (先手) または 1(後手) this.teban = teban this.dom = dom # 持ち時間を入力 this.havetime = game.havetime # 持ち時間があればそれを画面に表示 if game.havetime > 0 this.dom.text(time_convert(game.havetime)) # なければ秒読み時間を表示 else this.dom.text(time_convert(game.countdown)) # デフォルトでは数字を半透明に this.dom.css('color','rgba(0,0,0,0.5)') # 自分の出番でタッチされれば、手番交代 this.dom.on(eventmode, ()-> if game.state == self.teban game.change() ) # 時間を1秒進める count: () -> # 持ち時間があればそれが減る if this.havetime > 0 this.havetime-- this.dom.text(time_convert(this.havetime)) # なければ秒読みが減る else if this.countdown > 0 this.countdown-- this.dom.text(this.countdown) # どちらも無ければ負け else this.dom.text("時間切れ") game.state = 'end' clearInterval(this.timer) # 手番が回ってくる start: () -> self = this # 秒読みをリセット this.countdown = game.countdown # 持ち時間があればそれを表示 if this.havetime > 0 this.dom.text(time_convert(this.havetime)) # なければ秒読みを表示 else this.dom.text(this.countdown) # 表示を不透明に this.dom.css("color","#000") # 1秒ごとにcount()を実行 this.timer = setInterval( () -> self.count() , 1000) # 手番が終わる stop: () -> # タイマーを解除 if this.timer? clearInterval(this.timer) # 色を半透明に this.dom.css("color","rgba(0,0,0,0.5)") # ページロード後にGameインスタンスを作成、待機状態に $(document).ready -> game = new Game() # 持ち時間の表示スタイル(秒読みは秒数のみの数値表示) time_convert = (second) -> if second > 60 minute = Math.floor(second / 60) second = second % 60 if minute > 60 hour = Math.floor(minute / 60) minute = minute % 60 return hour + ":" + rjust(minute) + ":" + rjust(second) else return minute + ":" + rjust(second) else return "0:" + rjust(second) # 数字の0詰め右寄せ rjust = (number) -> ("00" + number)[-2..]