import Canvas from 'common/canvas' ; import browser from 'common/browser' ; import { windowToCanvas } from 'common/util' ; import Game from './game' ; export default class CollideCanvas extends Canvas { game : Game ; constructor ( ) { super ( ) ; } private startMove ( { x , y } ) { let { game } = this ; if ( ! game . isBallFlying ) { game . isLaunching = true ; game . lastMouseX = x ; game . lastMouseY = y ; game . calculateInitLaunchData ( ) ; } } private moving ( { x , y } ) { let { game } = this ; if ( game . isLaunching && ! game . isBallFlying ) { let ball = game . ball ; game . lastMouseX = x ; game . lastMouseY = y ; game . calculateInitLaunchData ( ) ; } } private endMove ( { x , y } ) { let { game } = this ; if ( game . isLaunching && ! game . isBallFlying ) { game . lastMouseX = x ; game . lastMouseY = y ; game . calculateInitLaunchData ( ) ; game . launchBall ( ) ; game . isLaunching = false ; } } private togglePause ( e ) { if ( e . which === 80 ) { let { game } = this ; if ( game . isPaused ( ) ) { game . unPause ( ) ; } else { game . pause ( ) ; } } } private addEventListener ( ) { let { el } = this ; let handleEvent = ( handler ) => ( e ) => { let x ; let y ; e . preventDefault ( ) ; if ( browser . pc ) { e = e as MouseEvent ; x = e . x ; y = e . y ; } else { e = e as TouchEvent ; x = e . changedTouches [ 0 ] . pageX ; y = e . changedTouches [ 0 ] . pageY ; } handler . call ( this , windowToCanvas ( el , x , y ) ) ; } ; el . addEventListener ( browser . pc ? 'mousedown' : 'touchstart' , handleEvent ( this . startMove ) , false ) ; el . addEventListener ( browser . pc ? 'mousemove' : 'touchmove' , handleEvent ( this . moving ) , false ) ; el . addEventListener ( browser . pc ? 'mouseup' : 'touchend' , handleEvent ( this . endMove ) , false ) ; el . addEventListener ( browser . pc ? 'mouseleave' : 'touchcancel' , handleEvent ( this . endMove ) , false ) ; if ( browser . pc ) { document . addEventListener ( 'keyup' , this . togglePause . bind ( this ) , false ) ; } } public render ( container ) { super . render ( container ) ; this . addEventListener ( ) ; this . game = new Game ( 'game001' , this . getContext ( '2d' ) ) ; this . game . start ( ) ; } }