Jump to content

  • Log In with Google      Sign In   
  • Create Account

Alpheus

Member Since 05 Jul 2002
Offline Last Active Yesterday, 03:33 PM

#5145364 What it's like to be a software engineer (video)

Posted by on 08 April 2014 - 09:15 AM

All companies with an IT department should be forced to watch this video before every meeting.

This is so unfortunately funny. It hurts.


#5144156 Making an object in Javascript?

Posted by on 03 April 2014 - 11:42 AM

I know you can do something like this:

var obj = {stuff: 'blah', work: function foo () {return 1}; place: 'bar'};

But you can also do this, I believe:

var obj = function () 
          { 
             this.stuff = 'blah', 
             this.work = function foo () {return 1}, 
             this.place = 'bar'
          };

So is there a difference between creating an object with a function as opposed to object notation? When would I use one over the other?




#5142055 Javascript Memory leak

Posted by on 25 March 2014 - 12:43 PM

@Alpha

 

In javascript functions without a return statement return the value undefined.

 

Duh. **slaps head**, **then reminds self it ain't lisp**, **slaps head again**




#5140730 What is the best 3D game to make first?

Posted by on 20 March 2014 - 12:42 PM

 

I've read lots of articles about 2D games where they suggest a path for development.  

 

http://web.archive.org/web/20051104034215/http://www.lupinegames.com/articles/path_to_dev.html

 

There are many different opinions, but I think starting with Tetris is a great way to go.  But I have been unable to find a comparable 3D game for starting. 

 

So I ask you Gamedev, what do you think is the best clone/genre/style for your first complete 3D game, and why?

A 3d astroid clone.

 

Advantages:

- you dont need vertex/skeletal animation (just models)

- you can use a simple import format (obj)

- you need to render basics (simple particles, simple models,'sky')

- you dont need to render advanced topics like terrain,foilage,skeletal animation

- you need to code/use a simple physics and controls

- no ai needed

- and finally: lot of fun blasting up things (++)

 

 

I was going to suggest this.

 

My next suggestion after that would be a Wolfenstein/Doom/Quake clone. Seeing as those were the grand-daddies of 3D gaming.

 

All you need to start off with with thoses are: your player, a room, an enemy, and movement for player and enemy. Then you can add weapons, health, armor, [better] physics, items, doors, more rooms.

 

Something a bit more challenging would be a variation of Marble Madness. (?)




#5139798 C# FPS, where do I start?

Posted by on 17 March 2014 - 02:49 PM

To echo frob, if you're just learning about the game dev mechanics (ex; game loop), then making a 2 maybe 3 2D games isn't a bad idea. Once you get familiar with it, you can move on to 3D games.

 

However, if I was you, I'd brush up on my linear algebra. 3D programming uses it heavily. If you find yourself about ask about linear algebra or other necessary maths for 3D game programming, then I would strongly suggest you finished some 2D games first.




#5139748 DirectX 12 Announced

Posted by on 17 March 2014 - 11:47 AM

 

If DirectX 12 has no Windows 7 support, I doubt any games will use it. Who would release a game for an OS that has only 10%  market share?

 

Windows 7 still has the largest share because Windows 8 and 8.1 didn't include any major improvement in graphics performance. If D3D12 does indeed improve graphics performance, developers will start using it and gamers will follow. 

 

 

I thought Win 7 had the largest share because Win 8 was unintuitive and gave no real reason to upgrade from Win 7.




#5137150 DirectX 12 Announced

Posted by on 07 March 2014 - 11:11 AM

I'll be the lone wolf here.

 

Isn't it easier and (at least for the API Creators) more beneficial to have your new Graphics API work on your new OS that most likely supports newer hardware? And, in theory, does things more effciently than the last OS?




#5135752 Am I Over Thinking This ?

Posted by on 01 March 2014 - 05:50 PM

I don't think trees and rocks should have tool_quality and tool_damage. Therefore, I think your catch-all class needs to be pared down a bit. My first thought is to have a smaller base class and use inheritance for things like (trees, rocks), (saw, drill), (engineer, miner), etc. But since I'm thinking inheritance and I know the better answer will involve composition, I think my answer will stop here. Someone more qualified will have to help you.




#5123114 PUTT Finals Scores

Posted by on 12 January 2014 - 01:38 PM

Who thought I was dead? (raise your hands)

 

Who didn't get their scores on time and wished I was dead? (feel free to raise both hands)

 

I'm going to post my scores here. The other judges will do so when they can.

 

 

 

Lucentbeam

Spoiler

 

shadowisadog

Spoiler

 

vortez

Spoiler

 

crow007

Spoiler

 

Noctumus

Spoiler

 

ml_

Spoiler

 

wintertime

Spoiler

 

segmented

Spoiler

 

mippy

Spoiler

 

staunsholm

Spoiler




#5107737 PUTT People's Choice Award and Comments

Posted by on 07 November 2013 - 02:30 PM

Hello all.

 

Unfortunately, some of the judges have had RL happen and have not gotten to judge all of the entries. So I'm going to have to delay the results until the 17th. I know it's awhile. But you know... things happen. Thanks, for your patience.




#5106813 PUTT People's Choice Award and Comments

Posted by on 03 November 2013 - 07:38 PM

Hey thanks for taking the time to check out some of the games and share your experience. For Staunsholm's game you should try the online version.


The online version was cool. I liked the moving background and the music. I didn't see any powerups though. The Top and Bottom Borders are hard to discern as well.


#5106513 Coding horror experiment in HTML 5

Posted by on 02 November 2013 - 01:10 PM

Changed teleportDelta to skipDelta.

<!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 style="display: none">
            <script>
                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;

                        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 = [];
                        for (var i = 0 ; i < organIds.length ; ++i) {
                            var organX = Math.random() * (canvasWidth - sprite.width);
                            var organY = Math.random() * (canvasHeight - sprite.height);
                            var organImage = document.getElementById(organIds[i]);
                            organs.push({ image: organImage, x: organX, y: organY })
                        }

                        function Draw() {
                            if (Math.random() > 0.9) {
                                var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);

                                for (var i = 0; i < 2; i++) {
                                    var offSet = i;
                                    var randomColor = Math.floor(Math.random() * 9999999);
                                    var randomColorHexString = '#' + randomColor.toString(16);
                                    grad.addColorStop(offSet, randomColorHexString);
                                }

                                context.fillStyle = grad;
                            }
                            context.fillRect(0, 0, canvasWidth, canvasHeight);

                            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;

                            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>



#5106494 Coding horror experiment in HTML 5

Posted by on 02 November 2013 - 12:13 PM

Added T F G H movement, which allows Frankenstein to jump by x * delta.
 

<!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 style="display: none">
            <script>
                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;

                        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);

                        function Draw() {
                            if (Math.random() > 0.9) {
                                var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);

                                for (var i = 0; i < 2; i++) {
                                    var offSet = i;
                                    var randomColor = Math.floor(Math.random() * 9999999);
                                    var randomColorHexString = '#' + randomColor.toString(16);
                                    grad.addColorStop(offSet, randomColorHexString);
                                }

                                context.fillStyle = grad;
                            }
                            context.fillRect(0, 0, canvasWidth, canvasHeight);
                            context.drawImage(sprite, x, y);
                        }

                        function keyDown(e) {
                            e = e || window.event;

                            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;
                            }

                        }

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

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

                        document.onkeydown = keyDown;
                    }
                }
            </script>
            <img id="sprite" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABDElEQVRYR8XOC27CMBBFUVbQNWVnzc4pZETGTk4+tiVa6UjtA9/p4/Xz/Gccv4njzjzPTdQ4wHGleAs1NzgudrHfn1t279AucFy0HD0y9A8o2EXtxDEo1kPtxDEo1kPtxDEo1kPtxDG0hVLbO45hGyn/PqO3xziGMjJC7cQxnMXu7uVnxtGhEboRODoyQjcCR0dG6Ebg6Ehp9PuJoyMjdCNwDAr1UDtxDIr1UDtxDIp9jHy3xjEo9qbPrr5/jGNQrIfaiWNSsIWaNY41he9Qa4+j6Yjo7TGOVh4oD2638s01jpVpmuL37cHS5rP1zTWOlXdsCZZHTqzfRws4VtYYjlH55hpH0zHRW3o8/wAvkCGGQzdTzQAAAABJRU5ErkJggg=="/>
        </div>
    </body>
</html>




#5106331 PUTT People's Choice Award and Comments

Posted by on 01 November 2013 - 02:49 PM

Here are the entries for this contest:

 

 

The rules are simple. Play the games and vote for which game you like the best. The game with the most votes wins the People's Choice Award!

 

 




#5106170 Coding horror experiment in HTML 5

Posted by on 01 November 2013 - 12:13 AM

<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 style="display: none">
            <script>
                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;
                        
                        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);
                        
                        function Draw() {
                            if (Math.random() > 0.9)
                            {
                                var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);

                                for (var i = 0; i < 2; i++)
                                    grad.addColorStop(i, "#" + Math.floor(Math.random()*9999999).toString(16));  //syntax error in IE10
                                context.fillStyle = grad;
                            }
                            context.fillRect(0, 0, canvasWidth, canvasHeight);
                            context.drawImage(sprite, x, y);
                        }
                        
                        function keyDown(e) {
                            e = e || window.event;

                            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;
                            }
                        }
                        
                        function Update() {
                            var now = Date.now();
                            if(lastTime === 0) {
                                lastTime = now;
                            }
                            delta = now - lastTime;
                            lastTime = now;
                        }
                        
                        var fps = 60;
                        var intervalId = setInterval(function() {
                            Update();
                            Draw();
                        }, 1000 / fps);
                    
                        document.onkeydown = keyDown;
                    }
                }
            </script>
            <img id="sprite" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABDElEQVRYR8XOC27CMBBFUVbQNWVnzc4pZETGTk4+tiVa6UjtA9/p4/Xz/Gccv4njzjzPTdQ4wHGleAs1NzgudrHfn1t279AucFy0HD0y9A8o2EXtxDEo1kPtxDEo1kPtxDEo1kPtxDG0hVLbO45hGyn/PqO3xziGMjJC7cQxnMXu7uVnxtGhEboRODoyQjcCR0dG6Ebg6Ehp9PuJoyMjdCNwDAr1UDtxDIr1UDtxDIp9jHy3xjEo9qbPrr5/jGNQrIfaiWNSsIWaNY41he9Qa4+j6Yjo7TGOVh4oD2638s01jpVpmuL37cHS5rP1zTWOlXdsCZZHTqzfRws4VtYYjlH55hpH0zHRW3o8/wAvkCGGQzdTzQAAAABJRU5ErkJggg=="/>
        </div>
    </body>
</html>





PARTNERS