Coding horror experiment in HTML 5

11,000

Author

October 31, 2013 11:34 PM

Welcome to the great GD.net collaborative coding horror experiment in HTML 5!

For an overview of what this is about, please read this thread.
The rules are here

In the spirit of the season, the theme for this game is "only Frankenstein can save the world"

This is the initial code. Please forgive any mistakes, I am still a relative beginner to HTML 5:


<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");
						
						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);
						context.drawImage(sprite, x, y);
					}
				}
			</script>
			<img id="sprite" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABDElEQVRYR8XOC27CMBBFUVbQNWVnzc4pZETGTk4+tiVa6UjtA9/p4/Xz/Gccv4njzjzPTdQ4wHGleAs1NzgudrHfn1t279AucFy0HD0y9A8o2EXtxDEo1kPtxDEo1kPtxDEo1kPtxDG0hVLbO45hGyn/PqO3xziGMjJC7cQxnMXu7uVnxtGhEboRODoyQjcCR0dG6Ebg6Ehp9PuJoyMjdCNwDAr1UDtxDIr1UDtxDIp9jHy3xjEo9qbPrr5/jGNQrIfaiWNSsIWaNY41he9Qa4+j6Yjo7TGOVh4oD2638s01jpVpmuL37cHS5rP1zTWOlXdsCZZHTqzfRws4VtYYjlH55hpH0zHRW3o8/wAvkCGGQzdTzQAAAABJRU5ErkJggg=="/>
		</div>
	</body>
</html>

blog | twitter

froop

642

November 01, 2013 02:15 AM

Adding some WSAD controls


<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() {
							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>

JoshChittick

190

November 01, 2013 03:11 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));
								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>

Dragonsoulj

3,213

November 01, 2013 04:41 AM

Reversed the WASD to normal directions:

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

Alpha_ProgDes

6,963

November 01, 2013 06: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>

Beginner in Game Development? Read here. And read here.

rip-off

11,000

Author

November 01, 2013 11:38 PM

Don't forget to include a brief summary of your changes. Also, the C++ guys have taken to posting screenshots, which is nice.

blog | twitter

Alpha_ProgDes

6,963

November 02, 2013 06: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>

Beginner in Game Development? Read here. And read here.

rip-off

11,000

Author

November 02, 2013 06:36 PM

Adding more images:


<!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 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=="/>
			<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>

blog | twitter

froop

642

November 02, 2013 06:40 PM

Did some refactoring to have a real delta. Movement was determined by the key repeat frequency before. Also made use of the unused variable 'keys' introduced in my first commit.

Edit: Merged rip-off's last commit

Edit Edit: Converted tabs to spaces

Edit Edit Edit: Forgot some of rip-off's code. Truly horrifying!


<!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;
                            teleportDelta = 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>

Alpha_ProgDes

6,963

November 02, 2013 07: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>

Beginner in Game Development? Read here. And read here.

Coding horror experiment in HTML 5

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Coding horror experiment in HTML 5

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines