<canvas width=" window_width" height=" window_height" canvas_background=" frame_count % 255" left_paddle="null" right_paddle="null" left_score="0" right_score="0" count_down="120" wait_time="120" state="'start'" winner="''" fill_color="255" ball_speed_mag="height/100" default_ball_speed_mag="height/100">

        <!-- SCORE -->

        <text fill_color="255" content="left_score" x="width * 0.3" y="height * 0.1" text_size="height/10" text_align="CENTER, TOP">

            <text x="width - x" content="right_score"></text>

        </text>

​

        <!-- GAME OBJECTS -->

        <paddle x=" width * 0.1" up=" 87" down=" 83" left_paddle=" this_element"></paddle>

        <paddle right_paddle="this_element"></paddle>

        <ball show="count_down LESS_THAN 1"></ball>

​

        <!-- STATE MANAGEMENT -->

        <_ x="width/2" y="height/2" text_align="CENTER, CENTER" text_size="height/15" animate="true">

            <text show="IF, state === 'start'" content="'Left: W for up, S for down\nRight: up/down arrows\n\nClick to start'">

                <_ show="IF, mouse_down" state="'play'"></_>

            </text>

            <text show="ELSE, state === 'pause'" content="'Paused'">

                <_ show="IF, mouse_down" state="'play'"></_>

            </text>

            <_ show="ELSE, state === 'play'" count_down="count_down - 1">

                <_ show="IF, mouse_down" state="'pause'"></_>

            </_>

            <text show="ELSE, state === 'gameover'" content="winner + ' wins!\n Click to play again!'">

                <_ show="IF, mouse_down" state="'play'" left_score="0" right_score="0"></_>

            </text>

        </_>

        <_ show="IF, window_resized" width="window_width" height="window_height"></_>

    </canvas>

    <!-- BALL -->

    <custom name="ball" s="height/50" stroke_color="NONE" fill_color="255" rect_mode="CENTER" speed="createVector()" ball="this_element">

        <!-- POSITION CHECKS -->

        <_ ball_left="x - s/2" ball_right="x + s/2" ball_top="y - s/2" ball_bottom="y + s/2" moving_left="speed.x LESS_THAN 0">

            <!-- RESET -->

            <_ show="IF, count_down === 0" random_angle="random(HALF_PI) - QUARTER_PI + random([0, PI])" ball.x="width/2" ball.y="height/2" ball.reset="false" ball_speed_mag="default_ball_speed_mag">

                <_ ball.speed="p5.Vector.fromAngle(random_angle, ball_speed_mag)"></_>

            </_>

            <!-- TOP BOTTOM BOUNCE -->

            <_ show="ELSE, ball_top LESS_THAN 0 || ball_bottom GREATER_THAN height" ball.speed.y="-ball.speed.y"></_>

            <!-- LEFT COLLISION/SCORE CHECK -->

            <_ show="ELSE, moving_left" left_hit="ball_left LESS_THAN left_paddle.x + left_paddle.w/2">

                <_ show="IF, left_hit" right_hit="ball_right GREATER_THAN left_paddle.x - left_paddle.w/2" paddle_top="left_paddle.y - left_paddle.h/2">

                    <!-- RIGHT SCORE -->

                    <_ show="IF, ball_left LESS_THAN 0">

                        <_ show="IF, count_down LESS_THAN 0" count_down="120" right_score="right_score + 1">

                            <_ show="IF, right_score === 7" state="'gameover'" winner="'Right'"></_>

                        </_>

                    </_>

                    <!-- LEFT PADDLE HIT -->

                    <_ show="ELSE, right_hit" bottom_hit="ball_bottom GREATER_THAN paddle_top" paddle_bottom="left_paddle.y + left_paddle.h/2">

                        <_ show="IF, bottom_hit" top_hit="ball_top LESS_THAN paddle_bottom">

                            <_ show="IF, top_hit">

                                <_ ball.speed.x="-ball.speed.x" ball.speed.y="(y - left_paddle.y)/20" ball_speed_mag="ball_speed_mag * 1.1"></_>

                                <_ ball.speed="ball.speed.normalize().mult(ball_speed_mag)"></_>

                            </_>

​

                        </_>

                    </_>

                </_>

            </_>

            <!--  RIGHT COLLISION/SCORE -->

            <_ show="ELSE" right_hit="ball_right GREATER_THAN right_paddle.x">

                <_ show="IF, right_hit" left_hit="ball_left LESS_THAN right_paddle.x + right_paddle.w" paddle_top="right_paddle.y - right_paddle.h/2">

                    <!-- LEFT SCORE -->

                    <_ show="IF, ball_right GREATER_THAN width">

                        <_ show="IF, count_down LESS_THAN 0" count_down="120" left_score="left_score + 1">

                            <_ show="IF, left_score === 7" state="'gameover'" winner="'Left'"></_>

                        </_>

                    </_>

                    <!-- RIGHT PADDLE HIT -->

                    <_ show="ELSE, left_hit" top_hit="ball_bottom GREATER_THAN paddle_top" paddle_bottom="right_paddle.y + right_paddle.h/2">

                        <_ show="IF, top_hit" bottom_hit="ball_top LESS_THAN paddle_bottom">

                            <_ show="IF, bottom_hit">

                                <_ ball.speed.x="-ball.speed.x" ball.speed.y=" (y - right_paddle.y)/20" ball_speed_mag="ball_speed_mag * 1.1"></_>

                                <_ ball.speed=" ball.speed.normalize().mult(ball_speed_mag)"></_>

                            </_>

                        </_>

                    </_>

                </_>

            </_>

        </_>

        <_ show="IF, state === 'play'" ball.x="ball.x + speed.x" ball.y="ball.y + speed.y" ball_left="x - w/2" ball_right="x + w/2"></_>

        <square></square>

    </custom>

    <!-- PADDLE -->

    <custom name="paddle" x=" width * 0.9" y=" height/2" w=" height/50" h=" height/5" stroke_color="NONE" fill_color="255" up=" UP_ARROW" down=" DOWN_ARROW" speed="height/75" rect_mode="CENTER" paddle=" this_element">

        <!-- MOVEMENT -->

        <_ show=" IF, key_is_down(up)" paddle.y="constrain(paddle.y - speed, h/2, height - h/2)"></_>

        <_ show=" IF, key_is_down(down)" paddle.y="constrain(paddle.y + speed, h/2, height - h/2)"></_>

        <rect></rect>

    </custom>

​

</_>