Jump to content
  • Advertisement
Sign in to follow this  
rip-off

Coding horror experiment in HTML 5

This topic is 2151 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Advertisement

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>

Share this post


Link to post
Share on other sites
<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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
<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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

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>
Edited by froop

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!