html5-canvas-tut/public/tutorial.js

window.onload = function() {
    // Get the canvas and context
    var canvas = document.getElementById("viewport");
    var context = canvas.getContext("2d");

    context.canvas.width = 856;
    context.canvas.height = 1193;

    var images = ["wolfnaked.png", "belly.png", "head.png", "penis.png", "undies.png", "shirt.png", "pants.png", "blink.png"];
    var loadedimages = [];

    var wearing_shirt = true;
    var wearing_jeans = true;
    var wearing_underwear = true;
    var blinktimer = 0;
    var breathtimer = 0;
    var speechtimer = 0;
    var quote = "";

    buttons = [{ //Shirt
        x: 300,
        y: 200,
        width: 250,
        height: 350
    }, { //Pants
        x: 270,
        y: 600,
        width: 400,
        height: 450
    }, { //Underwear
        x: 300,
        y: 520,
        width: 300,
        height: 200
    }];

    function loadImages(imageindex) {
        if (imageindex < images.length) {
            var newimage = new Image();
            newimage.onload = function() {
                loadedimages.push(newimage);
                imageindex++;
                loadImages(imageindex);
            }
            newimage.src = images[imageindex];
        } else {
            init();
        }
    };

    function init() {
        document.getElementById("load").style.display = "none";
        canvas.addEventListener("mousedown", onMouseDown);
        doTheRest();
    };

    function calculatebellyrise() {
        return Math.sin(breathtimer / 50);
    };

    function drawBubble() {
        context.font = "20pt Verdana";

        var x = 300;
        var y = 350;
        var w = context.measureText(quote).width + 10;
        var h = parseInt(context.font) + 10;
        var radius = 10;
        if (speechtimer) {
            var r = x + w;
            var b = y + h;
            context.beginPath();
            context.strokeStyle = "black";
            context.lineWidth = "2";
            context.moveTo(x + radius, y);
            context.lineTo(x + radius / 2, y - 10);
            context.lineTo(x + radius * 2, y);
            context.lineTo(r - radius, y);
            context.quadraticCurveTo(r, y, r, y + radius);
            context.lineTo(r, y + h - radius);
            context.quadraticCurveTo(r, b, r - radius, b);
            context.lineTo(x + radius, b);
            context.quadraticCurveTo(x, b, x, b - radius);
            context.lineTo(x, y + radius);
            context.quadraticCurveTo(x, y, x + radius, y);
            context.fillStyle = "#ffffff";
            context.fill();
            context.stroke();

            context.fillStyle = "black";
            context.fillText(quote, x + 5, y + h - 5);
        }
    };

    function doTheRest() {
        window.requestAnimationFrame(doTheRest);

        breathtimer++;
        blinktimer++;
        if (blinktimer > 200) {
            blinktimer = 0;
        }

        speechtimer--;
        if (speechtimer < 0) {
            speechtimer = 0;
        }

        context.globalAlpha = 1;
        context.fillStyle = "lightblue";
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(loadedimages[0], 0, 0, canvas.width, canvas.height);

        var amount_to_raise = calculatebellyrise() * 2;
        context.drawImage(loadedimages[1], 0, 0 + amount_to_raise, canvas.width, canvas.height);
        if (blinktimer > 190) {
            context.drawImage(loadedimages[7], 0, 0, canvas.width, canvas.height);
        } else {
            context.drawImage(loadedimages[2], 0, 0, canvas.width, canvas.height);
        }


        if (!wearing_underwear && !wearing_jeans) {
            context.drawImage(loadedimages[3], 0, 0, canvas.width, canvas.height);
        }
        if (wearing_underwear && !wearing_jeans) {
            context.drawImage(loadedimages[4], 0, 0, canvas.width, canvas.height);
        }
        if (wearing_shirt) {
            context.drawImage(loadedimages[5], 0, 0 + amount_to_raise, canvas.width, canvas.height);
        }
        if (wearing_jeans) {
            context.drawImage(loadedimages[6], 0, 0, canvas.width, canvas.height);
        }

        drawBubble();

        // context.fillStyle = "black";
        // context.globalAlpha = 0.8;
        // for (var i = 0; i < buttons.length; i++) {
        // context.fillRect(buttons[i].x, buttons[i].y, buttons[i].width, buttons[i].height);
        // }
    };

    function getMousePos(canvas, e) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: Math.round((e.clientX - rect.left) / (rect.right - rect.left) * canvas.width),
            y: Math.round((e.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height)
        };
    }

    function onMouseDown(e) {
        var pos = getMousePos(canvas, e);
        for (var i = 0; i < buttons.length; i++) {
            if (pos.x >= buttons[i].x && pos.x < buttons[i].x + buttons[i].width &&
                pos.y >= buttons[i].y && pos.y < buttons[i].y + buttons[i].height) {

                if (i == 0) { //Shirt
                    wearing_shirt = false;
                    quote = "I have very soft chest fur!";
                    speechtimer = 50;
                    break;
                }
                if (i == 1 && wearing_jeans) { //Pants
                    wearing_jeans = false;
                    break;
                }
                if (i == 2 && !wearing_jeans) { //Underwear - but only if the pants are off
                    wearing_underwear = false;
                    break;
                }

            }
        }
    };

    loadImages(0);
};