SmashTetris/index.html at develop · bigmark641/SmashTetris · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
    <!-- This file is an embarassing mess. I intend to refactor it eventually... -->
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
    <iframe name="SmashTetrisFrame" style="border-style: none;" width="902" height="602" src="SmashTetris.html"></iframe><br />
    <div style="position: fixed; bottom: 0; background-color: #CCCCCC;">
        Click on game to activate mouse controls: Use WASD to walk.  "Shoot" a piece with left/right click to pull/push it, control-click to rotate, and space to drop.<br />
        Press escape to activate keyboard controls: Use WASD to walk.  Q and E sidestep.  "Shoot" a piece with the left and right arrows to move it, up to rotate, and down to drop.<br />
        <br />
        Click <a onclick="$('form').toggle();" style="text-decoration: underline">here</a> for config/debugging overrides.
        <form action="#" style="display: none">
            VIEWPORT_WIDTH_PIXELS: <input id="VIEWPORT_WIDTH_PIXELS" value="900" />How many pixels wide the viewport is<br/>
            VIEWPORT_HEIGHT_PIXELS: <input id="VIEWPORT_HEIGHT_PIXELS" value="600" />How many pixels tall the viewport is<br/>
            VIEWPORT_WIDTH_DEGREES: <input id="VIEWPORT_WIDTH_DEGREES" value="75" />How wide the player can see (between 1 and 179 degrees)<br/>
            COLUMN_WIDTH_PIXELS: <input id="COLUMN_WIDTH_PIXELS" value="1" />How wide each "drawn" line is (1 is highest resolution)<br/>
            MAX_FRAMERATE: <input id="MAX_FRAMERATE" value="45" />The framerate the graphics engine will target<br/>
            WALL_HEIGHT: <input id="WALL_HEIGHT" value="1" />How tall each wall should be (1 is a cube)<br/>
            SKY_COLOR: <input id="SKY_COLOR" value="#99d9ea" />Hex color of the sky<br/>
            GROUND_COLOR: <input id="GROUND_COLOR" value="#22b14c" />Hex color of the ground<br/>
            WALL_SHADING_PERCENT: <input id="WALL_SHADING_PERCENT" value="-15" />Color difference of perpendicular walls<br/>
            WALL_DISTANCE_SHADE: <input id="WALL_DISTANCE_SHADE" value="-.85" />How much darker far away objects should appear<br/>
            KEYBOARD_TURNING_SPEED: <input id="KEYBOARD_TURNING_SPEED" value=".002" />How fast the player turns with the keyboard<br/>
            MOUSE_SENSITIVITY: <input id="MOUSE_SENSITIVITY" value=".001" />How fast the mouse turns<br/>
            PLAYER_WALKING_SPEED: <input id="PLAYER_WALKING_SPEED" value=".01" />How fast the player walks<br/>
            PLAYER_ACCELERATION: <input id="PLAYER_ACCELERATION" value=".0015" />How fast the player accelerates<br/>
            PLAYER_STARTING_X: <input id="PLAYER_STARTING_X" value="8" />Player's starting X location<br/>
            PLAYER_STARTING_Y: <input id="PLAYER_STARTING_Y" value="2" />Player's starting Y location<br/>
            PLAYER_STARTING_ANGLE_DEGREES: <input id="PLAYER_STARTING_ANGLE_DEGREES" value="90" />Direction player is looking at start<br/>
            VIEWPORT_CROSSHAIR_SIZE_PIXELS: <input id="VIEWPORT_CROSSHAIR_SIZE_PIXELS" value="10" />The height and width of the crosshairs<br/>
            VIEWPORT_CROSSHAIR_COLOR: <input id="VIEWPORT_CROSSHAIR_COLOR" value="#000000" />The color of the crosshairs<br/>
            TETRIS_STARTING_TICK_SPEED_MILLISECONDS: <input id="TETRIS_STARTING_TICK_SPEED_MILLISECONDS" value="2000" />The initial speed of the tetris engine<br/>
            TETRIS_STARTING_LEVEL: <input id="TETRIS_STARTING_LEVEL" value="0" />The initial level of the tetris engine<br/>
            TETRIS_SPEED_PER_LEVEL_MILLISECONDS: <input id="TETRIS_SPEED_PER_LEVEL_MILLISECONDS" value="100" />How much the tetris tick speed decreases each level<br/>
            TETRIS_DROP_TICK_SPEED_MILLISECONDS: <input id="TETRIS_DROP_TICK_SPEED_MILLISECONDS" value="10" />The tetris tick speed when pieces are dropping<br/>
            <button type="button">Apply and restart</button>
        </form>
    </div>
    <script>
        setFocusToGame();

        //Button refreshes iframe
        $("button").click(function () {
            $("iframe").attr("width", Number($('#VIEWPORT_WIDTH_PIXELS').val()) + 2);
            $("iframe").attr("height", Number($('#VIEWPORT_HEIGHT_PIXELS').val()) + 2);
            $("iframe").attr("src", $("iframe").attr("src"));
            $('form').hide();
            setFocusToGame();
        });

        //Send config values when iframe is ready
        window.addEventListener('message', function(event) {
            if (event.data === "ready")

                //Build message with all input values
                var message = {};
                $("input").each(function () {
                    if ($.isNumeric($(this).val()))
                        message[$(this).attr("id")] = Number($(this).val());
                    else
                        message[$(this).attr("id")] = $(this).val();
                });

                //Send message
                frames[0].postMessage(message, "*");
        });

        function setFocusToGame() {
            setTimeout(function () {$("iframe")[0].contentWindow.focus();}, 0);
        }
    </script>
</body>
</html>