Skip to main content
GameDev.net gamedev.net
🔒 Locked

Coding horror experiment in HTML 5

Started by rip-off Oct 31, 2013 at 11:34 PM 20 replies 12.2k views
Original Post
rip-off
rip-off
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>
		

			<canvas id="canvas" width="800" height="600">
				Your browser does not support the canvas element
			</canvas>
		

		

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

	</body>
</html>
blog | twitter
froop
froop

Adding some WSAD controls


<html>
	<head>
		<title>Horror!</title>
	</head>
	<body>
		

			<canvas id="canvas" width="800" height="600">
				Your browser does not support the canvas element
			</canvas>
		

		

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

	</body>
</html>
JoshChittick
JoshChittick 

<html>
	<head>
		<title>Horror!</title>
	</head>
	<body>
		

			<canvas id="canvas" width="800" height="600">
				Your browser does not support the canvas element
			</canvas>
		

		

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

	</body>
</html>
Dragonsoulj
Dragonsoulj

Reversed the WASD to normal directions:


<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        

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

    </body>
</html>
Alpha_ProgDes
Alpha_ProgDes 

<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        

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

    </body>
</html>
Beginner in Game Development?  Read here. And read here.  
rip-off
rip-off
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
Alpha_ProgDes

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


<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        

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

    </body>
</html>
Beginner in Game Development?  Read here. And read here.  
rip-off
rip-off
Adding more images:

<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        

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

    </body>
</html>
blog | twitter
froop
froop

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>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        

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

    </body>
</html>
Alpha_ProgDes
Alpha_ProgDes
Changed teleportDelta to skipDelta.

<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        

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

    </body>
</html>
Beginner in Game Development?  Read here. And read here.  
rip-off
rip-off

Making new images transparent:


<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        
    </body>
</html>

2c1j.png

froop
froop

Need more organs


<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        
    </body>
</html>

zhzv.png

rip-off
rip-off

Made the gradient look vaguely like lightning (you might be able to tell I'm not much of a graphics programmer!):


<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        

            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        

        
    </body>
</html>

lightning.png

staunsholm
staunsholm

Added some movement, and heavy shaking when lightning strikes.


<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
</head>
<body>


    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>



</body>
</html>

(no screen shot, it looks the same)

Mkkl.

froop
froop

Added some movement, and heavy shaking when lightning strikes.

LOL that's awesome

froop
froop

Now when Frankenstein hits an organ, it will explode in a bloody mess!

image.png

PS: Seems like we've broken Internet Explorer compatiblity :( I get a "SCRIPT5022: IndexSizeError" in line 30. Anyone know what's up?


<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
    <style type="text/css">
        body {
            text-align:center;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>


    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>



</body>
</html>
Alpha_ProgDes
Alpha_ProgDes

Added ghosts.


<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
    <style type="text/css">
        body {
            text-align:center;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>


    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>



</body>
</html>
rip-off
rip-off

Constrain frank to the visible area:


<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
    <style type="text/css">
        body {
            text-align:center;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>


    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>



</body>
</html>
RLS0812
RLS0812

Now has a border around the frame. If I have time, I'll add in some framework for game functions.


<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
    <style type="text/css">
        body {
            text-align:center;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>


    <canvas id="canvas" width="800" height="600" style="border:4px solid #600000;">
        Your browser does not support the canvas element
    </canvas>



</body>
</html>
I cannot remember the books I've read any more than the meals I have eaten; even so, they have made me. ~ Ralph Waldo Emerson
RLS0812
RLS0812

Added background image.

Added title.

TODO: game mechanics if I have the time.


<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
    <style type="text/css">
        body {
            text-align:center;
            margin: 0;
            padding: 0;
			background-image:url('http://fc09.deviantart.net/fs70/f/2010/323/9/8/black_stone_by_rls0812-d335i0x.jpg');
        }
		<!-- I own the copyright to the background image, and it may be used for purpose of this project ~RLS0812 -->
    </style>
</head>
<body>




<canvas id="Title" width="800" height="35" style="border:4px solid #600000;">
<h1><center>Your browser is outdated. Use FireFox !</center></h1></canvas>
<script>
var Title = "Only Frankenstein Can Save The World !";
var c=document.getElementById("Title");
var ctx=c.getContext("2d");
ctx.rect(0,0,800,35);;
ctx.fillStyle="#000000";
ctx.fill();
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","#FF0000");
gradient.addColorStop("0.5","#FFFFFF");
gradient.addColorStop("1.0","#FF0000");
ctx.font="39px Verdana";
ctx.fillStyle=gradient;
ctx.fillText(Title,2,32);
</script>




    <canvas id="canvas" width="800" height="600" style="border:4px solid #600000;">
        Your browser does not support the canvas element
    </canvas>
	







</body>
</html>
I cannot remember the books I've read any more than the meals I have eaten; even so, they have made me. ~ Ralph Waldo Emerson

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.