Jump to content

  • Log In with Google      Sign In   
  • Create Account

staunsholm

Member Since 25 Jul 2013
Offline Last Active Apr 06 2014 06:03 AM

Posts I've Made

In Topic: Coding horror experiment in HTML 5

03 November 2013 - 03:23 PM

Added some movement, and heavy shaking when lightning strikes.

<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
</head>
<body>
<div>
    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>
</div>
<div id="hiddenStuff" style="display: none">
    <script>
        function makeTransparent(imageElement) {
            var canvas = document.createElement("canvas");
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            document.getElementById("hiddenStuff").appendChild(canvas);

            var context = canvas.getContext("2d");
            context.drawImage(imageElement, 0, 0);

            var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height);
            var imageData = canvasImage.data;
            for(var i = 0; i < imageData.length; i += 4) {
                if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
                    imageData[i + 3] = 0;
                }
            }
            canvasImage.data = imageData;
            context.putImageData(canvasImage, 0, 0);

            var newImage = new Image();
            newImage.src = canvas.toDataURL();
            return newImage;
        }

        window.onload = function () {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var canvasWidth = canvas.offsetWidth;
                var canvasHeight = canvas.offsetHeight;
                var context = canvas.getContext("2d");
                var lastTime = 0;
                var keys = new Object();
                var delta = 0;
                var skipDelta = 0;
                var skipInterval = 4;
                var lightning = { current: 0, max: 0 };

                context.fillStyle = "rgb(0, 0, 0)";
                context.fillRect(0, 0, canvasWidth, canvasHeight);

                var sprite = document.getElementById("sprite");
                var x = Math.random() * (canvasWidth - sprite.width);
                var y = Math.random() * (canvasHeight - sprite.height);

                var organIds = ['brain', 'heart', 'lungs', 'liver', 'kidney', 'stomache', 'intestines'];
                var organs = [];
                var organImages = [];

                for (var i = 0 ; i < organIds.length ; ++i) {
                    var organImage = document.getElementById(organIds[i]);
                    organImages.push(makeTransparent(organImage));
                }

                for (var i = 0 ; i < organIds.length * 10; ++i) {
                    var organX = Math.random() * (canvasWidth - sprite.width);
                    var organY = Math.random() * (canvasHeight - sprite.height);
                    organs.push({ image: organImages[i % organIds.length], x: organX, y: organY, origX: organX, origY: organY });
                }

                function Draw() {
                    var LIGHTNING_WIDTH = 0.03;
                    if (Math.random() > 0.99 && lightning.current <= 0) {
                        lightning.max = 100 * (0.5 + Math.random());
                        lightning.current = lightning.max;
                        var LIGHTNING_NOT_TOO_CLOSE_TO_EDGE = LIGHTNING_WIDTH * 3;
                        lightning.position = LIGHTNING_NOT_TOO_CLOSE_TO_EDGE + ((1 - LIGHTNING_NOT_TOO_CLOSE_TO_EDGE) * Math.random());
                    }

                    context.fillStyle = '#000000';
                    if(lightning.current > 0) {
                        context.fillRect(0, 0, canvasWidth, canvasHeight);

                        var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);
                        var gradientLimit = 8;
                        var gradientMid = gradientLimit / 2;
                        for (var i = 0; i < 1 * gradientLimit; i++) {
                            var offSet = i;
                            if(i == 0 || i == (gradientLimit - 1)) {
                                offSet = (i == 0) ? 0 : 1;
                            } else {
                                offSet = lightning.position;
                                var difference = i - gradientMid;
                                offSet += difference * LIGHTNING_WIDTH;
                            }

                            if(false) {
                                var randomColor = Math.floor(Math.random() * 9999999);
                                var randomColorHexString = '#' + randomColor.toString(16);
                            }
                            var redAndGreen = (i == gradientMid) ? 0xff : 0x00;
                            var blue = (Math.abs(i - gradientMid) < 2) ? 0xff : 0x00;
                            var lightningAlpha = lightning.current / lightning.max;
                            var randomColorRGBAString = "rgba(" + redAndGreen + "," + redAndGreen + "," + blue + "," + lightningAlpha + ")";

                            var offSetLimited = Math.min(1, Math.max(0, offSet))
                            grad.addColorStop(offSetLimited, randomColorRGBAString /* randomColorHexString */);
                        }

                        context.fillStyle = grad;
                        lightning.current -= 1;
                    }
                    context.fillRect(0, 0, canvasWidth, canvasHeight);
                    context.fillStyle = '#FFFFFF';

                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        context.drawImage(organ.image, organ.x, organ.y);
                    }

                    context.drawImage(sprite, x, y);
                }

                function keyEvent(e) {
                    e = e || window.event;
                    if (e.type == 'keyup') {
                        keys.down = null;
                    } else {
                        keys.down = e;
                    }
                }

                function Update() {
                    var now = Date.now();
                    if (lastTime === 0) {
                        lastTime = now;
                    }
                    delta = now - lastTime;
                    skipDelta = skipInterval * delta;
                    lastTime = now;

                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        organ.x = organ.origX + Math.cos(now/((i%5)*100 + 500) + i) * (i % 20);
                        organ.y = organ.origY + Math.sin(now/((i%5)*100 + 500) + i) * (i % 20);
                    }

                    if(lightning.current > 0) {
                        for (var i = 0 ; i < organs.length ; ++i) {
                            var organ = organs[i];
                            organ.x += Math.random() * lightning.current/4;
                            organ.y += Math.random() * lightning.current/4;
                        }
                    }

                    if (e = keys.down) {
                        if (e.keyCode == '87') {
                            y -= delta;
                        } else if (e.keyCode == '83') {
                            y += delta;
                        } else if (e.keyCode == '65') {
                            x -= delta;
                        } else if (e.keyCode == '68') {
                            x += delta;
                        } else if (e.keyCode == '84') {
                            y -= skipDelta;
                        } else if (e.keyCode == '71') {
                            y += skipDelta;
                        } else if (e.keyCode == '70') {
                            x -= skipDelta;
                        } else if (e.keyCode == '72') {
                            x += skipDelta;
                        }
                    }
                }

                var fps = 60;
                var intervalId = setInterval(function () {
                    Update();
                    Draw();
                }, 1000 / fps);

                document.onkeydown = keyEvent;
                document.onkeyup = keyEvent;
            }
        }
    </script>
    <img id="sprite" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABDElEQVRYR8XOC27CMBBFUVbQNWVnzc4pZETGTk4+tiVa6UjtA9/p4/Xz/Gccv4njzjzPTdQ4wHGleAs1NzgudrHfn1t279AucFy0HD0y9A8o2EXtxDEo1kPtxDEo1kPtxDEo1kPtxDG0hVLbO45hGyn/PqO3xziGMjJC7cQxnMXu7uVnxtGhEboRODoyQjcCR0dG6Ebg6Ehp9PuJoyMjdCNwDAr1UDtxDIr1UDtxDIp9jHy3xjEo9qbPrr5/jGNQrIfaiWNSsIWaNY41he9Qa4+j6Yjo7TGOVh4oD2638s01jpVpmuL37cHS5rP1zTWOlXdsCZZHTqzfRws4VtYYjlH55hpH0zHRW3o8/wAvkCGGQzdTzQAAAABJRU5ErkJggg=="/>
    <img id="brain" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAUdJREFUWEfFkUFuQjEMRH3iHg1RNhygu56BXqPqApHWGCe2M/khVJhKTyITx2++Sn9/5cXAMBMYZgLDTGCYCQwf5kClgu4BMITY5VEQ7xQ7MwCGEF5Y6HTFCvS33ikf9N3tAMCwQwRvhlZiVMDOoJ03YOhoy30BK9CzvVMmJWBYwXKR9HI8Z2eBowscIhgvLfR1O8cZRYsNS7iDQwRoOfr6OBORuXe6RI87VLygX7YmZ3RW3hqXFzNebgVtgdxrpvczFgrocFzg5Y8wKdAEz5AzGwX44kjn6xB69H85MynwPLn8S3WX8W4XaPJYbBUoZ7YKyKN1uXxtPAM50w4i84vmBVS2zUDOtAMP7eineyi/kZyRmRnWE+jD+HhcYPp19wBDh5TYVyFzoc9aEL1ZAIYdKoug2UVgmAkMM4FhJjDMBIaZwDAJKr+ZqoF7rlvrLwAAAABJRU5ErkJggg=="/>
    <img id="heart" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABLklEQVRYR8WSC47CMAwFe6c94B696xfVaTBT5yPIIo2EX+x4aDnsc/4zd/ELtOcrDNx3F6Xp5zitqCSDKT4nLMjuuovSYAItdjAl4n3CgpdZATN30TZWQEK0c3HeircZ6r/AsOIXuEitL2KfeiKxN4DhC+WC5km0+MVPy51EAsOKD2YLynn4zxDLAvYlxQV7EtMCfrEVXaqE6LyuAIaF0eUtmcSSQO+9EjTnYrAHw8KnBWiHgWHBrWclNEMZ7TAwrKwIRPyH0P0GhhUflsSqSLJcYPhGK2LBFB8RECsSneUCw0dmBAaWCwwfmXkKXxEQIwKDywWGKS6QSXxVQGQSE8sFhl2KgLgkXMRzmnkAwyGiwMJygeEQvrCF+jpguBMMd4LhTjDcCYY7wXATx/kHt+4qtXoUaqkAAAAASUVORK5CYII="/>
    <img id="lungs" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAThJREFUWEfVjlGSgjAQBbnlHsc7eUGWUD54M3Qw2SirVvWHw3RPpuU3/zM4vBIcXgkOm/iZbiv0rQMcNvH2B+hA7dCzee174jh0+T7NKxQ7m2Uv7xlx4IIiHqPdPCOPdh/EgRZzRCHazbOam3cf7H+0RIFCDlD0mZ/3F9rkgmSFMj0No+8BLZAryne/ufC3B7gnV5ArwI0RkoQOuOPoO7kC/BggSegARMI3cgW4MUKS8CPuyRXkCnBjhCRHR9yT2+onN0ZIcnTIPbmtfnL7AxAZ8YcDo/4eICEDgc3vaZi7B2g5o0MW2Pyehrl7gJYzdFx87wPK4OoHWOdDHkCLmSQe0HdyM9Y5f4CiQsdq5H1qFqxVf4Aiivciv9Ze984WtqUB1KndCA/Q8voBYiN4+/AAh+RXEu/d5l/4B/ATKM7DZAAAAABJRU5ErkJggg=="/>
    <img id="liver" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAOxJREFUWEfFjtsOwzAIQ/vn+/QOHmgM8ZKlFzfSkWILbDZ7+8tQUwk1lVBTCTWVUFMJNffPgNV5hOxS81gwkcCwSp1lxCx0JXEwCowQhM39wuehK4lTgau8ckDklnInG08c8KM4yMZd5VE6KXeaiGETp8HSADsITcSCiSWwjIEdhCZ82D5L1DIEswc04Uv2mVKLGJg7oQlftM+QWoRg1gJNRJAJCpYhmHGCbHigfablde8C2fjngLpzkWywAx4sd7IRRSa6A+rsTfQmHvBwudObcYCg3OnNKBaUO9RUQk0l1FRCTSXUVEJNEdv+BVHR+n2aiu90AAAAAElFTkSuQmCC"/>
    <img id="kidney" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAOpJREFUWEflktENgzAMRLtTt+oSXbPbUE7IkuO8EEio+SjSk/DV5ztVPNZnuRkUM0HxMpbXxvvJv6+gOI0FR6BIJUxDwUZugY97d4T9SpiGQj3hXyiGS6BQz6ECZBS0GyGfp1uATB7yEOQVuwXIQERfC4V55O0X0Nfb+IKNcKTJAW8xbEudcPHbAh104LYCZ8JF64bbKQY0CAs+Ey5at9xOMaBBjISLA3eKoTJERkrIs+MvBR9GjBQQ8jW8tUjBxmiBHWqRgo3/KCAoXKQVELcXMGIJ2pkAxUxQzATFTFDMBMVMUMwExSQeyxcohkKoZGlOOAAAAABJRU5ErkJggg=="/>
    <img id="stomache" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAANVJREFUWEftz1EOwiAQhOHewTt4TS/hfdENbrqFX8pCoS+YfDFOkZlu30+4GYbnHq+InvlgWHZducCwbA0QpRH6LEVnIahDBdYzHGme35UF9WyhZYvfP/9HHH70oQF2xG0DdIR8DxtQKrfWgKEDqDA1ZEBtubh8gFzoefshA6jM0uK8XGRBPb2USi0uVhjmtMyispSepTsjDHeeMlIuFxjuesu7BugFZ9rLBYaRLaHnwp7xlwsMI89FetbznwjDyH9ZCwxb36YFhmvATBjOhOFMGE6yhQ/Vn9p8tmxuOAAAAABJRU5ErkJggg=="/>
    <img id="intestines" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAO5JREFUWEftjmsOgzAMg7nTDrijs1Elke2GxxCkmgTS96OObTx9v3kwqVhJKlaSipWkYiWpeAnvDcBHj4YYThM/fAGmgS8JAHj/BerBATYCvBISo5gP4bkAO60X/BJUcx9IiZ85kKUu0yCblCQBB/2U04zkUJM8C6tljnu2/OAJ5Ab/pAeHHCxHsptluk7xwJ0eUYCm0LAkAzJIl+U7PdisOt7A42AP0uX4Tg82yy3ugnqU5js74MgP9ngGPAP+e4Dez7DTyULFAOmlRxiGDVi4e4DcO+HyAQutUzSjF908bMBdDB+wQipWkopFTPMHvTGkayscCJoAAAAASUVORK5CYII="/>
</div>
</body>
</html>

(no screen shot, it looks the same)

 

Mkkl.


In Topic: PUTT People's Choice Award and Comments

03 November 2013 - 09:08 AM

Not really easy to pull mine from github, since you need to setup a server to play it. Here's an online version:

 

http://test.staunsholm.dk/icecube/

 

(yes, needs webgl - but should work in all latest browserversions)

 

Mkkl.

 

PS! No, it's not finished :-)


In Topic: Power Up Table Tennis Contest

24 October 2013 - 03:24 PM

Sign me up! Actually looks like I will be getting something done...

 

Mkkl.


In Topic: PUTT Updates and Finals Thread

18 October 2013 - 05:33 PM

Had fun this evening:

 

http://test.staunsholm.dk/icecube/

 

Attached File  Screen Shot 2013-10-19 at 01.25.15.png   1.13MB   3 downloads

Attached File  Screen Shot 2013-10-19 at 01.27.25.png   624.41KB   2 downloads

 

Now, all I need is to turn it into something that I'd actually call a game :-)

 

Mkkl.

 

PS! don't worry: credits for music photo, music and sound will be added.

PPS! Code is here, if you want to steal something: https://github.com/staunsholm/ice-cube


PARTNERS