1+ const gc = document . querySelector ( '#game_console' )
2+ const ss = document . querySelector ( '#start_screen' )
3+ const ball = document . querySelector ( '#ball' )
4+ const batter = document . querySelector ( '#batter' )
5+ const pitcher = document . querySelector ( '#pitcher' )
6+ const bp = document . querySelector ( '#ballpark' )
7+ const homers = document . querySelector ( '#homeruns' )
8+ const outss = document . querySelector ( '#outs' )
9+ const sb = document . querySelector ( '#scoreboard' )
10+ const backingTrack = document . querySelector ( '#back_sound' )
11+ const hitBall = document . querySelector ( '#bat_hit' )
12+ const clapping = document . querySelector ( '#clapping' )
13+
14+ var thrown = false ;
15+ const hr = [ 6 , 7 , 8 , 14 , 15 , 16 , 22 , 23 , 24 ]
16+ var homeruns = 0
17+ var outs = 0
18+
19+ var b_loc = ball . getBoundingClientRect ( )
20+ var x = b_loc . x
21+ const start_x = b_loc . x
22+ var y = b_loc . y
23+ const start_y = b_loc . y
24+
25+
26+ function throwPitch ( ) {
27+ if ( thrown ) {
28+ bp . removeEventListener ( 'click' , throwPitch )
29+ batter . classList . add ( 'swing' )
30+ var bp_loc = bp . getBoundingClientRect ( )
31+ var b_loc = ball . getBoundingClientRect ( )
32+ var dist = Math . round ( Math . hypot ( 0 , ( bp_loc . y + bp_loc . height ) - ( b_loc . y + ( b_loc . height * .5 ) ) ) )
33+ // console.log(dist)
34+
35+ if ( dist <= 30 ) {
36+ hitBall . play ( )
37+ ball . style . transition = '2s'
38+ ball . classList . add ( 'hit_ball' )
39+ bp . classList . add ( 'alt_bp' )
40+
41+ if ( hr . includes ( dist ) ) {
42+ clapping . play ( )
43+ homeruns ++
44+ homers . innerHTML = homeruns
45+ sb . innerHTML = 'HOME<br>RUN'
46+ gc . classList . add ( 'hr_sparkle' )
47+ if ( [ 22 , 23 , 24 ] . includes ( dist ) ) {
48+ ball . style . left = ( 30 - dist ) / 4 * 100 + '%'
49+ ball . style . top = '-600px'
50+ }
51+ if ( [ 14 , 15 , 16 ] . includes ( dist ) ) {
52+ ball . style . left = '800px'
53+ ball . style . top = '-400px'
54+ }
55+ if ( [ 6 , 7 , 8 ] . includes ( dist ) ) {
56+ ball . style . left = '1000px'
57+ ball . style . top = 100 - ( dist / 4 * 100 ) + '%'
58+ }
59+ } else {
60+ if ( dist >= 17 ) {
61+ ball . style . left = ( ( 30 - dist ) * 11.11 ) + 1 + '%'
62+ ball . style . top = Math . random ( ) < .5 ? - Math . random ( ) * 100 + '%' : - Math . random ( ) * 100 + '%' ;
63+ }
64+ if ( dist <= 13 ) {
65+ ball . style . left = Math . random ( ) * 150 + 50 + '%'
66+ ball . style . top = 99 - ( dist * 11.11 ) + '%'
67+ }
68+ }
69+ if ( ! hr . includes ( dist ) ) {
70+ outs ++
71+ outss . innerHTML = outs
72+ sb . innerHTML = 'OUT'
73+ }
74+ }
75+
76+ setTimeout ( function ( ) {
77+ if ( outs == 3 ) {
78+ ss . style . display = 'block'
79+ bp . classList . remove ( 'alt_bp' )
80+ ball . classList . remove ( 'hit_ball' )
81+ ball . style . transition = ''
82+ ball . style . left = '43%'
83+ ball . style . top = '58.5%'
84+ batter . classList . remove ( 'swing' )
85+ gc . classList . remove ( 'hr_sparkle' )
86+ } else {
87+ thrown = false
88+ bp . addEventListener ( 'click' , throwPitch )
89+ bp . classList . remove ( 'alt_bp' )
90+ ball . classList . remove ( 'hit_ball' )
91+ ball . style . transition = ''
92+ ball . style . left = '43%'
93+ ball . style . top = '58.5%'
94+ batter . classList . remove ( 'swing' )
95+ gc . classList . remove ( 'hr_sparkle' )
96+ }
97+ } , 2500 )
98+ }
99+
100+ if ( ! thrown ) {
101+ thrown = true
102+ var speed = Math . random ( ) + 1.25
103+ ball . style . transition = speed + 's'
104+ ball . style . left = '-58px'
105+ ball . style . top = 'calc(100% + 50px)'
106+ clapping . pause ( )
107+ clapping . currentTime = 0
108+ }
109+ // console.log(speed)
110+ }
111+
112+ ss . addEventListener ( 'click' , function ( ) {
113+ ss . style . display = 'none'
114+ bp . addEventListener ( 'click' , throwPitch )
115+ homeruns = 0
116+ outs = 0
117+ outss . innerHTML = outs
118+ homers . innerHTML = homeruns
119+ thrown = false
120+ back_sound . volume = .025
121+ back_sound . play ( )
122+ } )
123+
124+ function updateBall ( ) {
125+ if ( thrown ) {
126+ x --
127+ y ++
128+ ball . style . left = x + 'px'
129+ ball . style . top = y + 'px'
130+ }
131+
132+ setTimeout ( updateBall , 1000 / 10 )
133+ }
0 commit comments