the cutting room mirror

The World's Hardest Game

This article has a talk page!
view on tcrf.net
Bugs

Unused Code#

Fullscreen#

function drawFullscreenButton()'s code is commented out due to having a bug where cancelling full-screen mode bugs out the game.

function drawFullscreenButton() {
    /*
    canvas.fillStyle = "white";
    canvas.font = cwh(30) + "px Arial";
    canvas.textAlign = "center";
    if (FSOn)
        canvas.fillText("EXIT FULLSCREEN", cwh(CANVAS_WIDTH / 2) + os.x, cwh(CANVAS_HEIGHT - BAR_HEIGHT / 2 + BAR_TEXT_FIX) + os.y);
    else
        canvas.fillText("GO FULLSCREEN",  cwh(CANVAS_WIDTH / 2) + os.x, cwh(CANVAS_HEIGHT - BAR_HEIGHT / 2 + BAR_TEXT_FIX) + os.y);
        
    // fix fullscreen cancelled bug
    if(window.innerWidth == screen.width && window.innerHeight == screen.height) {
        if (!FSOn)
            FSOn = true;
    } else {
        if (FSOn)
            FSOn = false;
    }
    */
}

Debug#

A debug function that detects the mouse's position, detecting how many deaths the player has, which level they are in, and detecting the enemies' position. Commented out only for debugging purposes.

    // debug
    //canvas.fillStyle = "blue";
    //canvas.font = "Bold " + cwh(16) + "px Arial";
    //canvas.textAlign = "left";
    //canvas.fillText("DEBUG: " + mouseX + ", " + mouseY + " / " +
    //  Math.floor(mouseX / TILE_SIZE) + ", " + Math.floor(mouseY / TILE_SIZE), 7, 60 + cwh(BAR_TEXT_FIX));
    //canvas.fillText("DEBUG: " + mouseX + ", " + mouseY + " / " +
    //  canvasWidth + ", " + canvasHeight, 7, 60 + BAR_TEXT_FIX);
    //canvas.fillText(localStorage["whg_deaths"] + ", " + localStorage["whg_level"], cwh(7) + os.x, cwh(60 + BAR_TEXT_FIX) + os.y);
    //canvas.fillText("DEBUG: " + enemies[23][0].simpleX + ", " + enemies[23][0].simpleY, 7, 60 + cwh(BAR_TEXT_FIX));

HTML5 Coming Soon#

Used for the Adobe Flash version to announce that the HTML5 version is coming soon, commented out in the HTML5 version since that version was released already.

function drawComingSoon(x) {
    var y = 515;
    var triangle = 15;
    var rectWidth = 280;
    var rectHeight = 40;
    var strokeWidth = 2;
    var shadowOffset = 7;
    
    // shadow
    canvas.beginPath();
    canvas.moveTo(x + shadowOffset, y + shadowOffset);
    canvas.lineTo(x - triangle + shadowOffset, y - triangle + shadowOffset);
    canvas.lineTo(x - rectWidth / 2 + shadowOffset, y - triangle + shadowOffset);
    canvas.lineTo(x - rectWidth / 2 + shadowOffset, y - triangle - rectHeight + shadowOffset);
    canvas.lineTo(x + rectWidth / 2 + shadowOffset, y - triangle - rectHeight + shadowOffset);
    canvas.lineTo(x + rectWidth / 2 + shadowOffset, y - triangle + shadowOffset);
    canvas.lineTo(x + triangle + shadowOffset, y - triangle + shadowOffset);
    canvas.closePath();
    canvas.fillStyle = MENU_SHADOW_COLOR;
    canvas.fill();
    
    // main bubble
    canvas.beginPath();
    canvas.moveTo(x, y);
    canvas.lineTo(x - triangle, y - triangle);
    canvas.lineTo(x - rectWidth / 2, y - triangle);
    canvas.lineTo(x - rectWidth / 2, y - triangle - rectHeight);
    canvas.lineTo(x + rectWidth / 2, y - triangle - rectHeight);
    canvas.lineTo(x + rectWidth / 2, y - triangle);
    canvas.lineTo(x + triangle, y - triangle);
    canvas.closePath();
    canvas.fillStyle = "#fff";
    canvas.fill();
    canvas.lineWidth = strokeWidth;
    canvas.strokeStyle = "#000";
    canvas.stroke();
    
    // text
    canvas.fillStyle = "black";
    canvas.font = "bold " + BOTTOM_FONT;
    canvas.textAlign = "center";
    canvas.fillText("HTML5 COMING SOON...", x, y - 28);
}
// coming soon
    if (onButton("mm_twhg2"))
        drawComingSoon(430);
    else if (onButton("mm_twhg3"))
        drawComingSoon(534);
    else if (onButton("mm_twhg4"))
        drawComingSoon(637);

Enemy#

To do:
Figure out what this does.

 
function drawSep(x, y) {
    const SEP_SIZE = 10;
    const SEP_OUTLINE_SIZE = 3;
    canvas.beginPath();
    canvas.arc(x, y, SEP_SIZE / 2, 0, 2 * Math.PI, false);
    canvas.fillStyle = ENEMY_FILL_COLOR_0;
    canvas.fill();
    canvas.lineWidth = SEP_OUTLINE_SIZE;
    canvas.strokeStyle = ENEMY_OUTLINE_COLOR_0;
    canvas.stroke();
}

Unused Buttons#

To do:
There's more, please document them here.

Buttons that went unused due to being for other websites.

    // bottom text - label
    canvas.fillStyle = "black";
    canvas.font = BOTTOM_FONT;
    canvas.textAlign = "left";
    canvas.fillText("MORE FROM THE SERIES:", 128, BOTTOM_BUTTONS_Y);

    // bottom text - twhg2
    if (onButton("mm_twhg2"))
        canvas.fillStyle = LS_BUTTON_HOVER_COLOR;
    else
        canvas.fillStyle = "black";
    canvas.font = "bold " + BOTTOM_FONT;
    canvas.textAlign = "left";
    canvas.fillText("TWHG2", 393, BOTTOM_BUTTONS_Y);

    // bottom text - sep 0
    drawSep(482, 533);

    // bottom text - twhg3
    if (onButton("mm_twhg3"))
        canvas.fillStyle = LS_BUTTON_HOVER_COLOR;
    else
        canvas.fillStyle = "black";
    canvas.font = "bold " + BOTTOM_FONT;
    canvas.textAlign = "left";
    canvas.fillText("TWHG3", 497, BOTTOM_BUTTONS_Y);

    // bottom text - sep 1
    drawSep(585, 533);

    // bottom text - twhg4
    if (onButton("mm_twhg4"))
        canvas.fillStyle = LS_BUTTON_HOVER_COLOR;
    else
        canvas.fillStyle = "black";
    canvas.font = "bold " + BOTTOM_FONT;
    canvas.textAlign = "left";
    canvas.fillText("TWHG4", 600, BOTTOM_BUTTONS_Y);

Unused Enemy Placements#

Simple circular enemies that were commented out in Level 4 on the HTML5 version. 

new simpleCircularEnemy(440, 360, 140, 0, 2.75),
new simpleCircularEnemy(440, 360, 120, 0, 2.75),
new simpleCircularEnemy(440, 360, 100, 0, 2.75),
new simpleCircularEnemy(440, 360, 80, 0, 2.75),
new simpleCircularEnemy(440, 360, 60, 0, 2.75),
new simpleCircularEnemy(440, 360, 40, 0, 2.75),
new simpleCircularEnemy(440, 360, 20, 0, 2.75),
new simpleCircularEnemy(440, 360, 140, 120, 2.75),
new simpleCircularEnemy(440, 360, 120, 120, 2.75),
new simpleCircularEnemy(440, 360, 100, 120, 2.75),
new simpleCircularEnemy(440, 360, 80, 120, 2.75),
new simpleCircularEnemy(440, 360, 60, 120, 2.75),
new simpleCircularEnemy(440, 360, 40, 120, 2.75),
new simpleCircularEnemy(440, 360, 20, 120, 2.75),
new simpleCircularEnemy(440, 360, 140, 240, 2.75),
new simpleCircularEnemy(440, 360, 120, 240, 2.75),
new simpleCircularEnemy(440, 360, 100, 240, 2.75),
new simpleCircularEnemy(440, 360, 80, 240, 2.75),
new simpleCircularEnemy(440, 360, 60, 240, 2.75),
new simpleCircularEnemy(440, 360, 40, 240, 2.75),
new simpleCircularEnemy(440, 360, 20, 240, 2.75),

Static enemies that were commented out in Level 7 on the HTML5 version. 

new staticEnemy(400, 130),
new staticEnemy(400, 150),
new staticEnemy(400, 170),
new staticEnemy(400, 190),
new staticEnemy(400, 210),
new staticEnemy(400, 230),
new staticEnemy(400, 250),
new staticEnemy(400, 270),
new staticEnemy(400, 290),

Mobile Version#

Old code for mobile controls from previous versions, commented out for optimization.

canvasElement.addEventListener("touchstart", function(event) {
    if (state == "game" && !paused) {
        if (event.targetTouches.length == 1) {
            if (event.targetTouches[0].pageY >= cwh(BAR_HEIGHT) + os.y &&
                event.targetTouches[0].pageY <= cwh(CANVAS_HEIGHT - BAR_HEIGHT) + os.y) {
                touchOn = true;
                touchStartX = event.targetTouches[0].pageX;
                touchStartY = event.targetTouches[0].pageY;
                touchMoveX  = event.targetTouches[0].pageX;
                touchMoveY  = event.targetTouches[0].pageY;
            }
        }
    }
}, false);

canvasElement.addEventListener("touchend", function(event) {
    touchOn = false;
    keyUp    = false;
    keyDown  = false;
    keyRight = false;
    keyLeft  = false;
}, false);

canvasElement.addEventListener("touchmove", function(event) {
    if (state == "game" && !paused) {
        if (event.targetTouches.length == 1) {
            touchMoveX = event.targetTouches[0].pageX;
            touchMoveY = event.targetTouches[0].pageY;
        }
    }
}, false);

Old positions for the controls on Mobile, changed to fit in the screen for multiple mobile devices.

Early

Final

 
var coords_down  = [690, 790, 440, 540];
var coords_right = [580, 680, 440, 540];
var coords_up    = [470, 570, 440, 540];
var coords_left  = [360, 460, 440, 540];
 
var coords_down  = [580, 680, 440, 540];
var coords_right = [690, 790, 440, 540];
var coords_up    = [580, 680, 330, 430];
var coords_left  = [470, 570, 440, 540];

Old Unoptimized Code#

Player width and height cap code.

if (player.width < 1)
    player.width = 1;
if (player.height < 1)
    player.height = 1;

v · t · e

Adobe Flash

The World's Hardest Game • The World's Hardest Game 2