Jump to content

  • Log In with Google      Sign In   
  • Create Account

Coding horror experiment in HTML 5

  • You cannot reply to this topic
21 replies to this topic

#1 rip-off   Moderators   -  Reputation: 8223

Like
6Likes
Like

Posted 31 October 2013 - 05:34 PM

Welcome to the great GD.net collaborative coding horror experiment in HTML 5!
  • For an overview of what this is about, please read this thread.
  • The rules are here
In the spirit of the season, the theme for this game is "only Frankenstein can save the world"

This is the initial code. Please forgive any mistakes, I am still a relative beginner to HTML 5:
<html>
	<head>
		<title>Horror!</title>
	</head>
	<body>
		<div>
			<canvas id="canvas" width="800" height="600">
				Your browser does not support the canvas element
			</canvas>
		</div>
		<div style="display: none">
			<script>
				window.onload = function() {
					var canvas = document.getElementById("canvas");
					if(canvas.getContext) {
						var canvasWidth = canvas.offsetWidth;
						var canvasHeight = canvas.offsetHeight;
						var context = canvas.getContext("2d");
						
						context.fillStyle = "rgb(0, 0, 0)";
						context.fillRect(0, 0, canvasWidth, canvasHeight);
						
						var sprite = document.getElementById("sprite");
						var x = Math.random() * (canvasWidth - sprite.width);
						var y = Math.random() * (canvasHeight - sprite.height);
						context.drawImage(sprite, x, y);
					}
				}
			</script>
			<img id="sprite" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABDElEQVRYR8XOC27CMBBFUVbQNWVnzc4pZETGTk4+tiVa6UjtA9/p4/Xz/Gccv4njzjzPTdQ4wHGleAs1NzgudrHfn1t279AucFy0HD0y9A8o2EXtxDEo1kPtxDEo1kPtxDEo1kPtxDG0hVLbO45hGyn/PqO3xziGMjJC7cQxnMXu7uVnxtGhEboRODoyQjcCR0dG6Ebg6Ehp9PuJoyMjdCNwDAr1UDtxDIr1UDtxDIp9jHy3xjEo9qbPrr5/jGNQrIfaiWNSsIWaNY41he9Qa4+j6Yjo7TGOVh4oD2638s01jpVpmuL37cHS5rP1zTWOlXdsCZZHTqzfRws4VtYYjlH55hpH0zHRW3o8/wAvkCGGQzdTzQAAAABJRU5ErkJggg=="/>
		</div>
	</body>
</html>


Sponsor:

#2 froop   Members   -  Reputation: 636

Like
3Likes
Like

Posted 31 October 2013 - 08:15 PM

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>


#3 GnollAF   Members   -  Reputation: 190

Like
4Likes
Like

Posted 31 October 2013 - 09:11 PM

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


#4 Dragonsoulj   Crossbones+   -  Reputation: 2111

Like
2Likes
Like

Posted 31 October 2013 - 10:41 PM

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>


#5 Alpha_ProgDes   Crossbones+   -  Reputation: 4688

Like
2Likes
Like

Posted 01 November 2013 - 12:13 AM

<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        </div>
        <div style="display: none">
            <script>
                window.onload = function() {
                    var canvas = document.getElementById("canvas");
                    if(canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        
                        context.fillStyle = "rgb(0, 0, 0)";
                        context.fillRect(0, 0, canvasWidth, canvasHeight);
                        
                        var sprite = document.getElementById("sprite");
                        var x = Math.random() * (canvasWidth - sprite.width);
                        var y = Math.random() * (canvasHeight - sprite.height);
                        
                        function Draw() {
                            if (Math.random() > 0.9)
                            {
                                var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);

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

                            if(e.keyCode == '87') {
                                y -= delta;
                            } else if (e.keyCode == '83') {
                                y += delta;
                            } else if (e.keyCode == '65') {
                                x -= delta;
                            } else if (e.keyCode == '68') {
                                x += delta;
                            }
                        }
                        
                        function Update() {
                            var now = Date.now();
                            if(lastTime === 0) {
                                lastTime = now;
                            }
                            delta = now - lastTime;
                            lastTime = now;
                        }
                        
                        var fps = 60;
                        var intervalId = setInterval(function() {
                            Update();
                            Draw();
                        }, 1000 / fps);
                    
                        document.onkeydown = keyDown;
                    }
                }
            </script>
            <img id="sprite" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAABDElEQVRYR8XOC27CMBBFUVbQNWVnzc4pZETGTk4+tiVa6UjtA9/p4/Xz/Gccv4njzjzPTdQ4wHGleAs1NzgudrHfn1t279AucFy0HD0y9A8o2EXtxDEo1kPtxDEo1kPtxDEo1kPtxDG0hVLbO45hGyn/PqO3xziGMjJC7cQxnMXu7uVnxtGhEboRODoyQjcCR0dG6Ebg6Ehp9PuJoyMjdCNwDAr1UDtxDIr1UDtxDIp9jHy3xjEo9qbPrr5/jGNQrIfaiWNSsIWaNY41he9Qa4+j6Yjo7TGOVh4oD2638s01jpVpmuL37cHS5rP1zTWOlXdsCZZHTqzfRws4VtYYjlH55hpH0zHRW3o8/wAvkCGGQzdTzQAAAABJRU5ErkJggg=="/>
        </div>
    </body>
</html>

Beginner in Game Development? Read here.
 
Super Mario Bros clone tutorial written in XNA 4.0 [MonoGame, ANX, and MonoXNA] by Scott Haley
 
If you have found any of the posts helpful, please show your appreciation by clicking the up arrow on those posts Posted Image
 
Spoiler

#6 rip-off   Moderators   -  Reputation: 8223

Like
1Likes
Like

Posted 01 November 2013 - 05:38 PM

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

#7 Alpha_ProgDes   Crossbones+   -  Reputation: 4688

Like
1Likes
Like

Posted 02 November 2013 - 12:13 PM

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

<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        </div>
        <div style="display: none">
            <script>
                window.onload = function () {
                    var canvas = document.getElementById("canvas");
                    if (canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        var skipDelta = 0;
                        var skipInterval = 4;

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

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

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

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

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

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

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

                        }

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

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

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


Beginner in Game Development? Read here.
 
Super Mario Bros clone tutorial written in XNA 4.0 [MonoGame, ANX, and MonoXNA] by Scott Haley
 
If you have found any of the posts helpful, please show your appreciation by clicking the up arrow on those posts Posted Image
 
Spoiler

#8 rip-off   Moderators   -  Reputation: 8223

Like
2Likes
Like

Posted 02 November 2013 - 12:36 PM

Adding more images:
<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        </div>
        <div style="display: none">
            <script>
                window.onload = function () {
                    var canvas = document.getElementById("canvas");
                    if (canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        var skipDelta = 0;
                        var skipInterval = 4;

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

                        var sprite = document.getElementById("sprite");
                        var x = Math.random() * (canvasWidth - sprite.width);
                        var y = Math.random() * (canvasHeight - sprite.height);
						
						var organIds = ['brain', 'heart', 'lungs', 'liver', 'kidney', 'stomache', 'intestines'];
						var organs = [];
						for(var i = 0 ; i < organIds.length ; ++i) {
							var organX = Math.random() * (canvasWidth - sprite.width);
							var organY = Math.random() * (canvasHeight - sprite.height);
							var organImage = document.getElementById(organIds[i]);
							organs.push({image: organImage, x: organX, y: organY})
						}

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

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

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

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

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

                        }

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

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

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


#9 froop   Members   -  Reputation: 636

Like
3Likes
Like

Posted 02 November 2013 - 12:40 PM

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

 

Edit: Merged rip-off's last commit

Edit Edit: Converted tabs to spaces

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

<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        </div>
        <div style="display: none">
            <script>
                window.onload = function () {
                    var canvas = document.getElementById("canvas");
                    if (canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        var skipDelta = 0;
                        var skipInterval = 4;

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

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

                var organIds = ['brain', 'heart', 'lungs', 'liver', 'kidney', 'stomache', 'intestines'];
                        var organs = [];
                        for(var i = 0 ; i < organIds.length ; ++i) {
                            var organX = Math.random() * (canvasWidth - sprite.width);
                            var organY = Math.random() * (canvasHeight - sprite.height);
                            var organImage = document.getElementById(organIds[i]);
                            organs.push({image: organImage, x: organX, y: organY})
                        }

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

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

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

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

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

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

                        function Update() {
                            var now = Date.now();
                            if (lastTime === 0) {
                                lastTime = now;
                            }
                            delta = now - lastTime;
                            teleportDelta = skipInterval * delta;
                            lastTime = now;
                            
                            if(e = keys.down) {
                                if (e.keyCode == '87') {
                                    y -= delta;
                                } else if (e.keyCode == '83') {
                                    y += delta;
                                } else if (e.keyCode == '65') {
                                    x -= delta;
                                } else if (e.keyCode == '68') {
                                    x += delta;
                                } else if (e.keyCode == '84') {  
                                    y -= skipDelta;
                                } else if (e.keyCode == '71') {
                                    y += skipDelta;
                                } else if (e.keyCode == '70') {
                                    x -= skipDelta;
                                } else if (e.keyCode == '72') {
                                    x += skipDelta;
                                }
                            }
                        }

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

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

Edited by froop, 02 November 2013 - 12:52 PM.


#10 Alpha_ProgDes   Crossbones+   -  Reputation: 4688

Like
2Likes
Like

Posted 02 November 2013 - 01:10 PM

Changed teleportDelta to skipDelta.

<!DOCTYPE html>
<html>
    <head>
        <title>Horror!</title>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        </div>
        <div style="display: none">
            <script>
                window.onload = function () {
                    var canvas = document.getElementById("canvas");
                    if (canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        var skipDelta = 0;
                        var skipInterval = 4;

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

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

                        var organIds = ['brain', 'heart', 'lungs', 'liver', 'kidney', 'stomache', 'intestines'];
                        var organs = [];
                        for (var i = 0 ; i < organIds.length ; ++i) {
                            var organX = Math.random() * (canvasWidth - sprite.width);
                            var organY = Math.random() * (canvasHeight - sprite.height);
                            var organImage = document.getElementById(organIds[i]);
                            organs.push({ image: organImage, x: organX, y: organY })
                        }

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

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

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

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

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

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

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

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

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

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

Beginner in Game Development? Read here.
 
Super Mario Bros clone tutorial written in XNA 4.0 [MonoGame, ANX, and MonoXNA] by Scott Haley
 
If you have found any of the posts helpful, please show your appreciation by clicking the up arrow on those posts Posted Image
 
Spoiler

#11 rip-off   Moderators   -  Reputation: 8223

Like
2Likes
Like

Posted 02 November 2013 - 02:36 PM

Making new images transparent:

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

					var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height);
					var imageData = canvasImage.data;
					for(var i = 0; i < imageData.length; i += 4) {
						if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
							imageData[i + 3] = 0;
						}
					}
					canvasImage.data = imageData;
					context.putImageData(canvasImage, 0, 0);
					
					var newImage = new Image();
					newImage.src = canvas.toDataURL();
					return newImage;
				}
			
                window.onload = function () {
                    var canvas = document.getElementById("canvas");
                    if (canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        var skipDelta = 0;
                        var skipInterval = 4;

                        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: makeTransparent(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>

2c1j.png


Edited by rip-off, 02 November 2013 - 02:48 PM.


#12 froop   Members   -  Reputation: 636

Like
1Likes
Like

Posted 02 November 2013 - 09:32 PM

Need more organs

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

                    var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height);
                    var imageData = canvasImage.data;
                    for(var i = 0; i < imageData.length; i += 4) {
                        if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
                            imageData[i + 3] = 0;
                        }
                    }
                    canvasImage.data = imageData;
                    context.putImageData(canvasImage, 0, 0);
                    
                    var newImage = new Image();
                    newImage.src = canvas.toDataURL();
                    return newImage;
                }
            
                window.onload = function () {
                    var canvas = document.getElementById("canvas");
                    if (canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        var skipDelta = 0;
                        var skipInterval = 4;

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

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

                        var organIds = ['brain', 'heart', 'lungs', 'liver', 'kidney', 'stomache', 'intestines'];
                        var organs = [];
                        var organImages = [];
                        
                        for (var i = 0 ; i < organIds.length ; ++i) {
                            var organImage = document.getElementById(organIds[i]);
                            organImages.push(makeTransparent(organImage));
                        }
                        
                        for (var i = 0 ; i < organIds.length * 10; ++i) {
                            var organX = Math.random() * (canvasWidth - sprite.width);
                            var organY = Math.random() * (canvasHeight - sprite.height);
                            organs.push({ image: organImages[i % organIds.length], x: organX, y: organY });
                        }

                        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>

zhzv.png


Edited by froop, 02 November 2013 - 09:56 PM.


#13 rip-off   Moderators   -  Reputation: 8223

Like
0Likes
Like

Posted 03 November 2013 - 10:48 AM

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>
        <div>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas element
            </canvas>
        </div>
        <div id="hiddenStuff" style="display: none">
            <script>
                function makeTransparent(imageElement) {
                    var canvas = document.createElement("canvas");
                    canvas.width = imageElement.width;
                    canvas.height = imageElement.height;
                    document.getElementById("hiddenStuff").appendChild(canvas);
                    
                    var context = canvas.getContext("2d");
                    context.drawImage(imageElement, 0, 0);
 
                    var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height);
                    var imageData = canvasImage.data;
                    for(var i = 0; i < imageData.length; i += 4) {
                        if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
                            imageData[i + 3] = 0;
                        }
                    }
                    canvasImage.data = imageData;
                    context.putImageData(canvasImage, 0, 0);
                    
                    var newImage = new Image();
                    newImage.src = canvas.toDataURL();
                    return newImage;
                }
            
                window.onload = function () {
                    var canvas = document.getElementById("canvas");
                    if (canvas.getContext) {
                        var canvasWidth = canvas.offsetWidth;
                        var canvasHeight = canvas.offsetHeight;
                        var context = canvas.getContext("2d");
                        var lastTime = 0;
                        var keys = new Object();
                        var delta = 0;
                        var skipDelta = 0;
                        var skipInterval = 4;
                        var lightning = { current: 0, max: 0 };
 
                        context.fillStyle = "rgb(0, 0, 0)";
                        context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                        var sprite = document.getElementById("sprite");
                        var x = Math.random() * (canvasWidth - sprite.width);
                        var y = Math.random() * (canvasHeight - sprite.height);
 
                        var organIds = ['brain', 'heart', 'lungs', 'liver', 'kidney', 'stomache', 'intestines'];
                        var organs = [];
                        var organImages = [];
                        
                        for (var i = 0 ; i < organIds.length ; ++i) {
                            var organImage = document.getElementById(organIds[i]);
                            organImages.push(makeTransparent(organImage));
                        }
                        
                        for (var i = 0 ; i < organIds.length * 10; ++i) {
                            var organX = Math.random() * (canvasWidth - sprite.width);
                            var organY = Math.random() * (canvasHeight - sprite.height);
                            organs.push({ image: organImages[i % organIds.length], x: organX, y: organY });
                        }
 
                        function Draw() {
                            var LIGHTNING_WIDTH = 0.03;
                            if (Math.random() > 0.99 && lightning.current <= 0) {
                                lightning.max = 100 * (0.5 + Math.random());
                                lightning.current = lightning.max;
                                var LIGHTNING_NOT_TOO_CLOSE_TO_EDGE = LIGHTNING_WIDTH * 3;
                                lightning.position = LIGHTNING_NOT_TOO_CLOSE_TO_EDGE + ((1 - LIGHTNING_NOT_TOO_CLOSE_TO_EDGE) * Math.random());
                            }
                            
                            context.fillStyle = '#000000';
                            if(lightning.current > 0) {
                                context.fillRect(0, 0, canvasWidth, canvasHeight);
                                
                                var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);
                                var gradientLimit = 8;
                                var gradientMid = gradientLimit / 2;
                                for (var i = 0; i < 1 * gradientLimit; i++) {
                                    var offSet = i;
                                    if(i == 0 || i == (gradientLimit - 1)) {
                                        offSet = (i == 0) ? 0 : 1;
                                    } else {
                                        offSet = lightning.position;
                                        var difference = i - gradientMid;
                                        offSet += difference * LIGHTNING_WIDTH;
                                    }
                                    
                                    if(false) {
                                        var randomColor = Math.floor(Math.random() * 9999999);
                                        var randomColorHexString = '#' + randomColor.toString(16);
                                    }
                                    var redAndGreen = (i == gradientMid) ? 0xff : 0x00;
                                    var blue = (Math.abs(i - gradientMid) < 2) ? 0xff : 0x00;
                                    var lightningAlpha = lightning.current / lightning.max;
                                    var randomColorRGBAString = "rgba(" + redAndGreen + "," + redAndGreen + "," + blue + "," + lightningAlpha + ")";
                                    
                                    var offSetLimited = Math.min(1, Math.max(0, offSet))
                                    grad.addColorStop(offSetLimited, randomColorRGBAString /* randomColorHexString */);
                                }
 
                                context.fillStyle = grad;
                                lightning.current -= 1;
                            }
                            context.fillRect(0, 0, canvasWidth, canvasHeight);
                            context.fillStyle = '#FFFFFF';
 
                            for (var i = 0 ; i < organs.length ; ++i) {
                                var organ = organs[i];
                                context.drawImage(organ.image, organ.x, organ.y);
                            }
 
                            context.drawImage(sprite, x, y);
                        }
 
                        function keyEvent(e) {
                            e = e || window.event;
                            if (e.type == 'keyup') {
                                keys.down = null;
                            } else {
                                keys.down = e;
                            }
                        }
 
                        function Update() {
                            var now = Date.now();
                            if (lastTime === 0) {
                                lastTime = now;
                            }
                            delta = now - lastTime;
                            skipDelta = skipInterval * delta;
                            lastTime = now;
 
                            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>

lightning.png


Edited by rip-off, 03 November 2013 - 10:55 AM.


#14 staunsholm   Members   -  Reputation: 247

Like
3Likes
Like

Posted 03 November 2013 - 03:23 PM

Added some movement, and heavy shaking when lightning strikes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(no screen shot, it looks the same)

 

Mkkl.



#15 froop   Members   -  Reputation: 636

Like
1Likes
Like

Posted 03 November 2013 - 04:12 PM

Added some movement, and heavy shaking when lightning strikes.

 

LOL that's awesome



#16 froop   Members   -  Reputation: 636

Like
1Likes
Like

Posted 03 November 2013 - 05:20 PM

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>
<div>
    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>
</div>
<div id="hiddenStuff" style="display: none">
    <script>
        function makeTransparent(imageElement) {
            var canvas = document.createElement("canvas");
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            document.getElementById("hiddenStuff").appendChild(canvas);

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

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

            var newImage = new Image();
            newImage.src = canvas.toDataURL();
            return newImage;
        }
        
        function Particle(x, y, vx, vy, color, size, lifeTime) {
            this.x = x;
            this.y = y;
            this.vx = vx;
            this.vy = vy;
            this.color = color;
            this.size = size;
            this.lifeTime = lifeTime;
            
            this.Update = function(delta) {
                this.x += this.vx * delta;
                this.y += this.vy * delta;
                this.lifeTime -= delta;
            }
        }
        
        function CreateParticleExplosion(x, y, particles) {
            for(var i = 0; i < 100; ++i) {
                particles.push(new Particle(x, y, Math.random() - 0.5, Math.random() - 0.5, '#FF0000', 10, 5000));
            }
        }
        
        function Rect(left, top, right, bottom) {
            this.left = left;
            this.right = right;
            this.top = top;
            this.bottom = bottom;
        }
        
        function IntersectRect(r1, r2) {
            return !(r2.left > r1.right || 
                r2.right < r1.left || 
                r2.top > r1.bottom ||
                r2.bottom < r1.top);
        }

        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 skipDelta = 0;
                var skipInterval = 4;
                var lightning = { current: 0, max: 0 };
                var speed = 0.5;
                var particles = [];

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

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

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

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

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

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

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

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

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

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

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

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

                    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(delta, now) {
                    skipDelta = skipInterval * delta;
                    
                    for(var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        if(IntersectRect(new Rect(x, y, x + sprite.width, y + sprite.height),
                            new Rect(organ.x, organ.y, organ.x + sprite.width, organ.y + sprite.height))) {
                            organs.splice(i, 1);
                            CreateParticleExplosion(x, y, particles);
                        }
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        if(particles[i].lifeTime <= 0) {
                            particles.splice(i, 1);
                        } else {
                            particles[i].Update(delta);
                        }
                    }

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

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

                    if (e = keys.down) {
                        if (e.keyCode == '87') {
                            y -= delta * speed;
                        } else if (e.keyCode == '83') {
                            y += delta * speed;
                        } else if (e.keyCode == '65') {
                            x -= delta * speed;
                        } else if (e.keyCode == '68') {
                            x += delta * speed;
                        } 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 () {
                    var now = Date.now();
                    if(lastTime === 0) {
                        lastTime = now;
                    }
                    var delta = now - lastTime;
                    lastTime = now;
                    Update(delta, now);
                    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, 03 November 2013 - 05:37 PM.


#17 Alpha_ProgDes   Crossbones+   -  Reputation: 4688

Like
0Likes
Like

Posted 03 November 2013 - 09:24 PM

Added ghosts.

<!DOCTYPE html>
<html>
<head>
    <title>Horror!</title>
    <style type="text/css">
        body {
            text-align:center;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div>
    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>
</div>
<div id="hiddenStuff" style="display: none">
    <script>
        function makeTransparent(imageElement) {
            var canvas = document.createElement("canvas");
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            document.getElementById("hiddenStuff").appendChild(canvas);
 
            var context = canvas.getContext("2d");
            context.drawImage(imageElement, 0, 0);
 
            var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height); //IE10 error: IndexSizeError
            var imageData = canvasImage.data;
            for(var i = 0; i < imageData.length; i += 4) {
                if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
                    imageData[i + 3] = 0;
                }
            }
            canvasImage.data = imageData;
            context.putImageData(canvasImage, 0, 0);
 
            var newImage = new Image();
            newImage.src = canvas.toDataURL();
            return newImage;
        }
        
        function Particle(x, y, vx, vy, color, size, lifeTime) {
            this.x = x;
            this.y = y;
            this.vx = vx;
            this.vy = vy;
            this.color = color;
            this.size = size;
            this.lifeTime = lifeTime;
            
            this.Update = function(delta) {
                this.x += this.vx * delta;
                this.y += this.vy * delta;
                this.lifeTime -= delta;
            }
        }
        
        function CreateParticleExplosion(x, y, particles) {
            for(var i = 0; i < 100; ++i) {
                particles.push(new Particle(x, y, Math.random() - 0.5, Math.random() - 0.5, '#FF0000', 10, 5000));
            }
        }
        
        function Rect(left, top, right, bottom) {
            this.left = left;
            this.right = right;
            this.top = top;
            this.bottom = bottom;
        }
        
        function IntersectRect(r1, r2) {
            return !(r2.left > r1.right || 
                r2.right < r1.left || 
                r2.top > r1.bottom ||
                r2.bottom < r1.top);
        }
 
        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 skipDelta = 0;
                var skipInterval = 4;
                var lightning = { current: 0, max: 0 };
                var speed = 0.5;
                var particles = [];
 
                context.fillStyle = "rgb(0, 0, 0)";
                context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                var sprite = makeTransparent(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', 'ghost1', 'ghost2', 'ghost3'];
                var organs = [];
                var organImages = [];
 
                for (var i = 0 ; i < organIds.length ; ++i) {
                    var organImage = document.getElementById(organIds[i]);
                    organImages.push(makeTransparent(organImage));
                }
 
                for (var i = 0 ; i < organIds.length * 10; ++i) {
                    var organX = Math.random() * (canvasWidth - sprite.width);
                    var organY = Math.random() * (canvasHeight - sprite.height);
                    organs.push({ image: organImages[i % organIds.length], x: organX, y: organY, origX: organX, origY: organY });
                }
 
                function Draw() {
                    var LIGHTNING_WIDTH = 0.03;
                    if (Math.random() > 0.99 && lightning.current <= 0) {
                        lightning.max = 100 * (0.5 + Math.random());
                        lightning.current = lightning.max;
                        var LIGHTNING_NOT_TOO_CLOSE_TO_EDGE = LIGHTNING_WIDTH * 3;
                        lightning.position = LIGHTNING_NOT_TOO_CLOSE_TO_EDGE + ((1 - LIGHTNING_NOT_TOO_CLOSE_TO_EDGE) * Math.random());
                    }
 
                    context.fillStyle = '#000000';
                    if(lightning.current > 0) {
                        context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                        var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);
                        var gradientLimit = 8;
                        var gradientMid = gradientLimit / 2;
                        for (var i = 0; i < 1 * gradientLimit; i++) {
                            var offSet = i;
                            if(i == 0 || i == (gradientLimit - 1)) {
                                offSet = (i == 0) ? 0 : 1;
                            } else {
                                offSet = lightning.position;
                                var difference = i - gradientMid;
                                offSet += difference * LIGHTNING_WIDTH;
                            }
 
                            if(false) {
                                var randomColor = Math.floor(Math.random() * 9999999);
                                var randomColorHexString = '#' + randomColor.toString(16);
                            }
                            var redAndGreen = (i == gradientMid) ? 0xff : 0x00;
                            var blue = (Math.abs(i - gradientMid) < 2) ? 0xff : 0x00;
                            var lightningAlpha = lightning.current / lightning.max;
                            var randomColorRGBAString = "rgba(" + redAndGreen + "," + redAndGreen + "," + blue + "," + lightningAlpha + ")";
 
                            var offSetLimited = Math.min(1, Math.max(0, offSet))
                            grad.addColorStop(offSetLimited, randomColorRGBAString /* randomColorHexString */);
                        }
 
                        context.fillStyle = grad;
                        lightning.current -= 1;
                    }
                    context.fillRect(0, 0, canvasWidth, canvasHeight);
                    context.fillStyle = '#FFFFFF';
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        context.drawImage(organ.image, organ.x, organ.y);
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        var p = particles[i];
                        context.fillStyle = p.color;
                        context.fillRect(p.x, p.y, p.size, p.size);
                    }
 
                    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(delta, now) {
                    skipDelta = skipInterval * delta;
                    
                    for(var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        if(IntersectRect(new Rect(x, y, x + sprite.width, y + sprite.height),
                            new Rect(organ.x, organ.y, organ.x + sprite.width, organ.y + sprite.height))) {
                            organs.splice(i, 1);
                            CreateParticleExplosion(x, y, particles);
                        }
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        if(particles[i].lifeTime <= 0) {
                            particles.splice(i, 1);
                        } else {
                            particles[i].Update(delta);
                        }
                    }
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        organ.x = organ.origX + Math.cos(now/((i%5)*100 + 500) + i) * (i % 20);
                        organ.y = organ.origY + Math.sin(now/((i%5)*100 + 500) + i) * (i % 20);
                    }
 
                    if(lightning.current > 0) {
                        for (var i = 0 ; i < organs.length ; ++i) {
                            var organ = organs[i];
                            organ.x += Math.random() * lightning.current/4;
                            organ.y += Math.random() * lightning.current/4;
                        }
                    }
 
                    if (e = keys.down) {
                        if (e.keyCode == '87') {
                            y -= delta * speed;
                        } else if (e.keyCode == '83') {
                            y += delta * speed;
                        } else if (e.keyCode == '65') {
                            x -= delta * speed;
                        } else if (e.keyCode == '68') {
                            x += delta * speed;
                        } 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 () {
                    var now = Date.now();
                    if(lastTime === 0) {
                        lastTime = now;
                    }
                    var delta = now - lastTime;
                    lastTime = now;
                    Update(delta, now);
                    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="/>
    //Credit for sprites goes to George Williams
    //http://gmc.yoyogames.com/index.php?showtopic=302110
    <img id="ghost1" src="data:image/gif;base64,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" />
    <img id="ghost2" src="data:image/gif;base64,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" />
    <img id="ghost3" src="data:image/gif;base64,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" />
</div>
</body>
</html>

Edited by rip-off, 04 November 2013 - 05:02 PM.

Beginner in Game Development? Read here.
 
Super Mario Bros clone tutorial written in XNA 4.0 [MonoGame, ANX, and MonoXNA] by Scott Haley
 
If you have found any of the posts helpful, please show your appreciation by clicking the up arrow on those posts Posted Image
 
Spoiler

#18 rip-off   Moderators   -  Reputation: 8223

Like
1Likes
Like

Posted 04 November 2013 - 05:33 PM

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>
<div>
    <canvas id="canvas" width="800" height="600">
        Your browser does not support the canvas element
    </canvas>
</div>
<div id="hiddenStuff" style="display: none">
    <script>
        function makeTransparent(imageElement) {
            var canvas = document.createElement("canvas");
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            document.getElementById("hiddenStuff").appendChild(canvas);
 
            var context = canvas.getContext("2d");
            context.drawImage(imageElement, 0, 0);
 
            var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height); //IE10 error: IndexSizeError
            var imageData = canvasImage.data;
            for(var i = 0; i < imageData.length; i += 4) {
                if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
                    imageData[i + 3] = 0;
                }
            }
            canvasImage.data = imageData;
            context.putImageData(canvasImage, 0, 0);
 
            var newImage = new Image();
            newImage.src = canvas.toDataURL();
            return newImage;
        }
        
        function Particle(x, y, vx, vy, color, size, lifeTime) {
            this.x = x;
            this.y = y;
            this.vx = vx;
            this.vy = vy;
            this.color = color;
            this.size = size;
            this.lifeTime = lifeTime;
            
            this.Update = function(delta) {
                this.x += this.vx * delta;
                this.y += this.vy * delta;
                this.lifeTime -= delta;
            }
        }
        
        function CreateParticleExplosion(x, y, particles) {
            for(var i = 0; i < 100; ++i) {
                particles.push(new Particle(x, y, Math.random() - 0.5, Math.random() - 0.5, '#FF0000', 10, 5000));
            }
        }
        
        function Rect(left, top, right, bottom) {
            this.left = left;
            this.right = right;
            this.top = top;
            this.bottom = bottom;
        }
        
        function IntersectRect(r1, r2) {
            return !(r2.left > r1.right || 
                r2.right < r1.left || 
                r2.top > r1.bottom ||
                r2.bottom < r1.top);
        }
 
        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 skipDelta = 0;
                var skipInterval = 4;
                var lightning = { current: 0, max: 0 };
                var speed = 0.5;
                var particles = [];
 
                context.fillStyle = "rgb(0, 0, 0)";
                context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                var sprite = makeTransparent(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', 'ghost1', 'ghost2', 'ghost3'];
                var organs = [];
                var organImages = [];
 
                for (var i = 0 ; i < organIds.length ; ++i) {
                    var organImage = document.getElementById(organIds[i]);
                    organImages.push(makeTransparent(organImage));
                }
 
                for (var i = 0 ; i < organIds.length * 10; ++i) {
                    var organX = Math.random() * (canvasWidth - sprite.width);
                    var organY = Math.random() * (canvasHeight - sprite.height);
                    organs.push({ image: organImages[i % organIds.length], x: organX, y: organY, origX: organX, origY: organY });
                }
 
                function Draw() {
                    var LIGHTNING_WIDTH = 0.03;
                    if (Math.random() > 0.99 && lightning.current <= 0) {
                        lightning.max = 100 * (0.5 + Math.random());
                        lightning.current = lightning.max;
                        var LIGHTNING_NOT_TOO_CLOSE_TO_EDGE = LIGHTNING_WIDTH * 3;
                        lightning.position = LIGHTNING_NOT_TOO_CLOSE_TO_EDGE + ((1 - LIGHTNING_NOT_TOO_CLOSE_TO_EDGE) * Math.random());
                    }
 
                    context.fillStyle = '#000000';
                    if(lightning.current > 0) {
                        context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                        var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);
                        var gradientLimit = 8;
                        var gradientMid = gradientLimit / 2;
                        for (var i = 0; i < 1 * gradientLimit; i++) {
                            var offSet = i;
                            if(i == 0 || i == (gradientLimit - 1)) {
                                offSet = (i == 0) ? 0 : 1;
                            } else {
                                offSet = lightning.position;
                                var difference = i - gradientMid;
                                offSet += difference * LIGHTNING_WIDTH;
                            }
 
                            if(false) {
                                var randomColor = Math.floor(Math.random() * 9999999);
                                var randomColorHexString = '#' + randomColor.toString(16);
                            }
                            var redAndGreen = (i == gradientMid) ? 0xff : 0x00;
                            var blue = (Math.abs(i - gradientMid) < 2) ? 0xff : 0x00;
                            var lightningAlpha = lightning.current / lightning.max;
                            var randomColorRGBAString = "rgba(" + redAndGreen + "," + redAndGreen + "," + blue + "," + lightningAlpha + ")";
 
                            var offSetLimited = Math.min(1, Math.max(0, offSet))
                            grad.addColorStop(offSetLimited, randomColorRGBAString /* randomColorHexString */);
                        }
 
                        context.fillStyle = grad;
                        lightning.current -= 1;
                    }
                    context.fillRect(0, 0, canvasWidth, canvasHeight);
                    context.fillStyle = '#FFFFFF';
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        context.drawImage(organ.image, organ.x, organ.y);
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        var p = particles[i];
                        context.fillStyle = p.color;
                        context.fillRect(p.x, p.y, p.size, p.size);
                    }
 
                    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(delta, now) {
                    skipDelta = skipInterval * delta;
                    
                    for(var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        if(IntersectRect(new Rect(x, y, x + sprite.width, y + sprite.height),
                            new Rect(organ.x, organ.y, organ.x + sprite.width, organ.y + sprite.height))) {
                            organs.splice(i, 1);
                            CreateParticleExplosion(x, y, particles);
                        }
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        if(particles[i].lifeTime <= 0) {
                            particles.splice(i, 1);
                        } else {
                            particles[i].Update(delta);
                        }
                    }
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        organ.x = organ.origX + Math.cos(now/((i%5)*100 + 500) + i) * (i % 20);
                        organ.y = organ.origY + Math.sin(now/((i%5)*100 + 500) + i) * (i % 20);
                    }
 
                    if(lightning.current > 0) {
                        for (var i = 0 ; i < organs.length ; ++i) {
                            var organ = organs[i];
                            organ.x += Math.random() * lightning.current/4;
                            organ.y += Math.random() * lightning.current/4;
                        }
                    }
 
                    if (e = keys.down) {
                        if (e.keyCode == '87') {
                            y -= delta * speed;
                        } else if (e.keyCode == '83') {
                            y += delta * speed;
                        } else if (e.keyCode == '65') {
                            x -= delta * speed;
                        } else if (e.keyCode == '68') {
                            x += delta * speed;
                        } 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;
                        }
                        
                        if(x < 0) {
                            x = 0;
                        } else if(x > (canvasWidth - sprite.width)) {
                            x = canvasWidth - sprite.width;
                        }
                        
                        if(y < 0) {
                            y = 0;
                        } else if(y > (canvasHeight - sprite.height)) {
                            y = canvasHeight - sprite.height;
                        }
                    }
                }
 
                var fps = 60;
                var intervalId = setInterval(function () {
                    var now = Date.now();
                    if(lastTime === 0) {
                        lastTime = now;
                    }
                    var delta = now - lastTime;
                    lastTime = now;
                    Update(delta, now);
                    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="/>
    //Credit for sprites goes to George Williams
    //http://gmc.yoyogames.com/index.php?showtopic=302110
    <img id="ghost1" src="data:image/gif;base64,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" />
    <img id="ghost2" src="data:image/gif;base64,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" />
    <img id="ghost3" src="data:image/gif;base64,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" />
</div>
</body>
</html>

Edited by rip-off, 04 November 2013 - 05:34 PM.


#19 Shippou   Members   -  Reputation: 1528

Like
0Likes
Like

Posted 20 November 2013 - 01:05 AM

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>
<div>
    <canvas id="canvas" width="800" height="600" style="border:4px solid #600000;">
        Your browser does not support the canvas element
    </canvas>
</div>
<div id="hiddenStuff" style="display: none">
    <script>
        function makeTransparent(imageElement) {
            var canvas = document.createElement("canvas");
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            document.getElementById("hiddenStuff").appendChild(canvas);
 
            var context = canvas.getContext("2d");
            context.drawImage(imageElement, 0, 0);
 
            var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height); //IE10 error: IndexSizeError
            var imageData = canvasImage.data;
            for(var i = 0; i < imageData.length; i += 4) {
                if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
                    imageData[i + 3] = 0;
                }
            }
            canvasImage.data = imageData;
            context.putImageData(canvasImage, 0, 0);
 
            var newImage = new Image();
            newImage.src = canvas.toDataURL();
            return newImage;
        }
        
        function Particle(x, y, vx, vy, color, size, lifeTime) {
            this.x = x;
            this.y = y;
            this.vx = vx;
            this.vy = vy;
            this.color = color;
            this.size = size;
            this.lifeTime = lifeTime;
            
            this.Update = function(delta) {
                this.x += this.vx * delta;
                this.y += this.vy * delta;
                this.lifeTime -= delta;
            }
        }
        
        function CreateParticleExplosion(x, y, particles) {
            for(var i = 0; i < 100; ++i) {
                particles.push(new Particle(x, y, Math.random() - 0.5, Math.random() - 0.5, '#FF0000', 10, 5000));
            }
        }
        
        function Rect(left, top, right, bottom) {
            this.left = left;
            this.right = right;
            this.top = top;
            this.bottom = bottom;
        }
        
        function IntersectRect(r1, r2) {
            return !(r2.left > r1.right || 
                r2.right < r1.left || 
                r2.top > r1.bottom ||
                r2.bottom < r1.top);
        }
 
        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 skipDelta = 0;
                var skipInterval = 4;
                var lightning = { current: 0, max: 0 };
                var speed = 0.5;
                var particles = [];
 
                context.fillStyle = "rgb(0, 0, 0)";
                context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                var sprite = makeTransparent(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', 'ghost1', 'ghost2', 'ghost3'];
                var organs = [];
                var organImages = [];
 
                for (var i = 0 ; i < organIds.length ; ++i) {
                    var organImage = document.getElementById(organIds[i]);
                    organImages.push(makeTransparent(organImage));
                }
 
                for (var i = 0 ; i < organIds.length * 10; ++i) {
                    var organX = Math.random() * (canvasWidth - sprite.width);
                    var organY = Math.random() * (canvasHeight - sprite.height);
                    organs.push({ image: organImages[i % organIds.length], x: organX, y: organY, origX: organX, origY: organY });
                }
 
                function Draw() {
                    var LIGHTNING_WIDTH = 0.03;
                    if (Math.random() > 0.99 && lightning.current <= 0) {
                        lightning.max = 100 * (0.5 + Math.random());
                        lightning.current = lightning.max;
                        var LIGHTNING_NOT_TOO_CLOSE_TO_EDGE = LIGHTNING_WIDTH * 3;
                        lightning.position = LIGHTNING_NOT_TOO_CLOSE_TO_EDGE + ((1 - LIGHTNING_NOT_TOO_CLOSE_TO_EDGE) * Math.random());
                    }
 
                    context.fillStyle = '#000000';
                    if(lightning.current > 0) {
                        context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                        var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);
                        var gradientLimit = 8;
                        var gradientMid = gradientLimit / 2;
                        for (var i = 0; i < 1 * gradientLimit; i++) {
                            var offSet = i;
                            if(i == 0 || i == (gradientLimit - 1)) {
                                offSet = (i == 0) ? 0 : 1;
                            } else {
                                offSet = lightning.position;
                                var difference = i - gradientMid;
                                offSet += difference * LIGHTNING_WIDTH;
                            }
 
                            if(false) {
                                var randomColor = Math.floor(Math.random() * 9999999);
                                var randomColorHexString = '#' + randomColor.toString(16);
                            }
                            var redAndGreen = (i == gradientMid) ? 0xff : 0x00;
                            var blue = (Math.abs(i - gradientMid) < 2) ? 0xff : 0x00;
                            var lightningAlpha = lightning.current / lightning.max;
                            var randomColorRGBAString = "rgba(" + redAndGreen + "," + redAndGreen + "," + blue + "," + lightningAlpha + ")";
 
                            var offSetLimited = Math.min(1, Math.max(0, offSet))
                            grad.addColorStop(offSetLimited, randomColorRGBAString /* randomColorHexString */);
                        }
 
                        context.fillStyle = grad;
                        lightning.current -= 1;
                    }
                    context.fillRect(0, 0, canvasWidth, canvasHeight);
                    context.fillStyle = '#FFFFFF';
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        context.drawImage(organ.image, organ.x, organ.y);
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        var p = particles[i];
                        context.fillStyle = p.color;
                        context.fillRect(p.x, p.y, p.size, p.size);
                    }
 
                    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(delta, now) {
                    skipDelta = skipInterval * delta;
                    
                    for(var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        if(IntersectRect(new Rect(x, y, x + sprite.width, y + sprite.height),
                            new Rect(organ.x, organ.y, organ.x + sprite.width, organ.y + sprite.height))) {
                            organs.splice(i, 1);
                            CreateParticleExplosion(x, y, particles);
                        }
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        if(particles[i].lifeTime <= 0) {
                            particles.splice(i, 1);
                        } else {
                            particles[i].Update(delta);
                        }
                    }
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        organ.x = organ.origX + Math.cos(now/((i%5)*100 + 500) + i) * (i % 20);
                        organ.y = organ.origY + Math.sin(now/((i%5)*100 + 500) + i) * (i % 20);
                    }
 
                    if(lightning.current > 0) {
                        for (var i = 0 ; i < organs.length ; ++i) {
                            var organ = organs[i];
                            organ.x += Math.random() * lightning.current/4;
                            organ.y += Math.random() * lightning.current/4;
                        }
                    }
 
                    if (e = keys.down) {
                        if (e.keyCode == '87') {
                            y -= delta * speed;
                        } else if (e.keyCode == '83') {
                            y += delta * speed;
                        } else if (e.keyCode == '65') {
                            x -= delta * speed;
                        } else if (e.keyCode == '68') {
                            x += delta * speed;
                        } 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;
                        }
                        
                        if(x < 0) {
                            x = 0;
                        } else if(x > (canvasWidth - sprite.width)) {
                            x = canvasWidth - sprite.width;
                        }
                        
                        if(y < 0) {
                            y = 0;
                        } else if(y > (canvasHeight - sprite.height)) {
                            y = canvasHeight - sprite.height;
                        }
                    }
                }
 
                var fps = 60;
                var intervalId = setInterval(function () {
                    var now = Date.now();
                    if(lastTime === 0) {
                        lastTime = now;
                    }
                    var delta = now - lastTime;
                    lastTime = now;
                    Update(delta, now);
                    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="/>
    //Credit for sprites goes to George Williams
    //http://gmc.yoyogames.com/index.php?showtopic=302110
    <img id="ghost1" src="data:image/gif;base64,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" />
    <img id="ghost2" src="data:image/gif;base64,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" />
    <img id="ghost3" src="data:image/gif;base64,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" />
</div>
</body>
</html>

 Reactions To Technologies:
1. Anything that is in the world when you’re born is normal and ordinary and is just a natural part of the way the world works.
2. Anything that's invented between when you’re fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it.
3. Anything invented after you're thirty-five is against the natural order of things.

- Douglas Adams 2002


 


#20 Shippou   Members   -  Reputation: 1528

Like
0Likes
Like

Posted 23 November 2013 - 07:03 AM

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>
<br>
<div>
<canvas id="Title" width="800" height="35" style="border:4px solid #600000;">
<h1><b><center>Your browser is outdated. Use <a href="http://mozilla-firefox.todownload.com">FireFox</a> !</center></b></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>
</div>
<div>
    <canvas id="canvas" width="800" height="600" style="border:4px solid #600000;">
        Your browser does not support the canvas element
    </canvas>
	
</div>
<div id="hiddenStuff" style="display: none">
    <script>
        function makeTransparent(imageElement) {
            var canvas = document.createElement("canvas");
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;
            document.getElementById("hiddenStuff").appendChild(canvas);
 
            var context = canvas.getContext("2d");
            context.drawImage(imageElement, 0, 0);
 
            var canvasImage = context.getImageData(0, 0, canvas.width, canvas.height); //IE10 error: IndexSizeError
            var imageData = canvasImage.data;
            for(var i = 0; i < imageData.length; i += 4) {
                if(imageData[i + 0] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0) {
                    imageData[i + 3] = 0;
                }
            }
            canvasImage.data = imageData;
            context.putImageData(canvasImage, 0, 0);
 
            var newImage = new Image();
            newImage.src = canvas.toDataURL();
            return newImage;
        }
        
        function Particle(x, y, vx, vy, color, size, lifeTime) {
            this.x = x;
            this.y = y;
            this.vx = vx;
            this.vy = vy;
            this.color = color;
            this.size = size;
            this.lifeTime = lifeTime;
            
            this.Update = function(delta) {
                this.x += this.vx * delta;
                this.y += this.vy * delta;
                this.lifeTime -= delta;
            }
        }
        
        function CreateParticleExplosion(x, y, particles) {
            for(var i = 0; i < 100; ++i) {
                particles.push(new Particle(x, y, Math.random() - 0.5, Math.random() - 0.5, '#FF0000', 10, 5000));
            }
        }
        
        function Rect(left, top, right, bottom) {
            this.left = left;
            this.right = right;
            this.top = top;
            this.bottom = bottom;
        }
        
        function IntersectRect(r1, r2) {
            return !(r2.left > r1.right || 
                r2.right < r1.left || 
                r2.top > r1.bottom ||
                r2.bottom < r1.top);
        }
 
        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 skipDelta = 0;
                var skipInterval = 4;
                var lightning = { current: 0, max: 0 };
                var speed = 0.5;
                var particles = [];
 
                context.fillStyle = "rgb(0, 0, 0)";
                context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                var sprite = makeTransparent(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', 'ghost1', 'ghost2', 'ghost3'];
                var organs = [];
                var organImages = [];
 
                for (var i = 0 ; i < organIds.length ; ++i) {
                    var organImage = document.getElementById(organIds[i]);
                    organImages.push(makeTransparent(organImage));
                }
 
                for (var i = 0 ; i < organIds.length * 10; ++i) {
                    var organX = Math.random() * (canvasWidth - sprite.width);
                    var organY = Math.random() * (canvasHeight - sprite.height);
                    organs.push({ image: organImages[i % organIds.length], x: organX, y: organY, origX: organX, origY: organY });
                }
 
                function Draw() {
                    var LIGHTNING_WIDTH = 0.03;
                    if (Math.random() > 0.99 && lightning.current <= 0) {
                        lightning.max = 100 * (0.5 + Math.random());
                        lightning.current = lightning.max;
                        var LIGHTNING_NOT_TOO_CLOSE_TO_EDGE = LIGHTNING_WIDTH * 3;
                        lightning.position = LIGHTNING_NOT_TOO_CLOSE_TO_EDGE + ((1 - LIGHTNING_NOT_TOO_CLOSE_TO_EDGE) * Math.random());
                    }
 
                    context.fillStyle = '#000000';
                    if(lightning.current > 0) {
                        context.fillRect(0, 0, canvasWidth, canvasHeight);
 
                        var grad = context.createLinearGradient(0, 0, canvasWidth, canvasHeight);
                        var gradientLimit = 8;
                        var gradientMid = gradientLimit / 2;
                        for (var i = 0; i < 1 * gradientLimit; i++) {
                            var offSet = i;
                            if(i == 0 || i == (gradientLimit - 1)) {
                                offSet = (i == 0) ? 0 : 1;
                            } else {
                                offSet = lightning.position;
                                var difference = i - gradientMid;
                                offSet += difference * LIGHTNING_WIDTH;
                            }
 
                            if(false) {
                                var randomColor = Math.floor(Math.random() * 9999999);
                                var randomColorHexString = '#' + randomColor.toString(16);
                            }
                            var redAndGreen = (i == gradientMid) ? 0xff : 0x00;
                            var blue = (Math.abs(i - gradientMid) < 2) ? 0xff : 0x00;
                            var lightningAlpha = lightning.current / lightning.max;
                            var randomColorRGBAString = "rgba(" + redAndGreen + "," + redAndGreen + "," + blue + "," + lightningAlpha + ")";
 
                            var offSetLimited = Math.min(1, Math.max(0, offSet))
                            grad.addColorStop(offSetLimited, randomColorRGBAString /* randomColorHexString */);
                        }
 
                        context.fillStyle = grad;
                        lightning.current -= 1;
                    }
                    context.fillRect(0, 0, canvasWidth, canvasHeight);
                    context.fillStyle = '#FFFFFF';
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        context.drawImage(organ.image, organ.x, organ.y);
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        var p = particles[i];
                        context.fillStyle = p.color;
                        context.fillRect(p.x, p.y, p.size, p.size);
                    }
 
                    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(delta, now) {
                    skipDelta = skipInterval * delta;
                    
                    for(var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        if(IntersectRect(new Rect(x, y, x + sprite.width, y + sprite.height),
                            new Rect(organ.x, organ.y, organ.x + sprite.width, organ.y + sprite.height))) {
                            organs.splice(i, 1);
                            CreateParticleExplosion(x, y, particles);
                        }
                    }
                
                    for(var i = 0; i < particles.length; ++i) {
                        if(particles[i].lifeTime <= 0) {
                            particles.splice(i, 1);
                        } else {
                            particles[i].Update(delta);
                        }
                    }
 
                    for (var i = 0 ; i < organs.length ; ++i) {
                        var organ = organs[i];
                        organ.x = organ.origX + Math.cos(now/((i%5)*100 + 500) + i) * (i % 20);
                        organ.y = organ.origY + Math.sin(now/((i%5)*100 + 500) + i) * (i % 20);
                    }
 
                    if(lightning.current > 0) {
                        for (var i = 0 ; i < organs.length ; ++i) {
                            var organ = organs[i];
                            organ.x += Math.random() * lightning.current/4;
                            organ.y += Math.random() * lightning.current/4;
                        }
                    }
 
                    if (e = keys.down) {
                        if (e.keyCode == '87') {
                            y -= delta * speed;
                        } else if (e.keyCode == '83') {
                            y += delta * speed;
                        } else if (e.keyCode == '65') {
                            x -= delta * speed;
                        } else if (e.keyCode == '68') {
                            x += delta * speed;
                        } 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;
                        }
                        
                        if(x < 0) {
                            x = 0;
                        } else if(x > (canvasWidth - sprite.width)) {
                            x = canvasWidth - sprite.width;
                        }
                        
                        if(y < 0) {
                            y = 0;
                        } else if(y > (canvasHeight - sprite.height)) {
                            y = canvasHeight - sprite.height;
                        }
                    }
                }
 
                var fps = 60;
                var intervalId = setInterval(function () {
                    var now = Date.now();
                    if(lastTime === 0) {
                        lastTime = now;
                    }
                    var delta = now - lastTime;
                    lastTime = now;
                    Update(delta, now);
                    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="/>
    //Credit for sprites goes to George Williams
    //http://gmc.yoyogames.com/index.php?showtopic=302110
    <img id="ghost1" src="data:image/gif;base64,R0lGODdhIAAgAHcAACwAAAAAIAAgAIcAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvAAAAAAAIAAAP9AgACAgAD//wCAgIDAwMD///8T6oRCDrsYeSgKA0wT6uxCDIJCDX0T6WDxfkEBDqIT6Xzxflj1MCAAAADxhEQAAAET6dBB4BQBDqIT6Xw8RVgBDqIAAAAFBCIAAA4AAAQAAAUAAAAAAAYAABAAArzxYKv9UMT98AAAAAAAAADxeonxepgBDqIAAAAAAAUAABoT6sQ8RXLuDLAAAAAT6nRB4ToBDqIAAAAAAAVB3X8AAAAAAAAYeSgAAAAAAh4AABoAADAAAAEAAAFBhPxBhaQFBCIT6jxBs/kFBCIAsCkAAAAAAAAAAABBi9lHAIgAsCkT6oRBs8xBs6cAAAAYeSgAAAAAAAAAAAEAAAAT6lQAAAAT7HREBFdBs7D///9Bs6dCDXIFBCIAsCkAAAAAAAAT7FhCDIJCDX0T6uxCDIIT6xhBi9n98AAT6xhBiFoT6thBiCoAAAdCDIIT7SgAABQAAAEAAAAAAAAFBCIAAACDGAoAAAEAAAAAAAAT6szxb/oT7PhEBFdBiDD///9BiCpBxj8AAABCDIIFBCIAAAcKA0wAAAAAAAAAAAAAAAeeiVAT62hB9l3/AVMFBCIAAAcKA0wAAAAAAAET7MBIFKT/AVMT7PhIITZIIT6eAACeiVAT7SgAAAAT7MBIH5WeiVBH41+eAAAT7SieiVDxWg4BDdw8nfA8nhRBhLJBhr4BDdwAADkT7KRCDIICBLwBDdwCBLwT7OAAAAEBAAAAEAET7BxBhzQFBCIAsCkAAAAAAABCDIK6q80AAAAT7FhCDIIT7IRBi9n98AAT7IRBiFoT7ERBiCoAsClCDIIT7mAAABQAAAEAAAAAAAAAABAAAAAQDjoAAAEAAAAAAAAT7DgAABET8AhEBFdBiDD///9BiCpBxj8AAABCDIIFBCIAsCkAAAAAAAAAAAAAAACgoKSAgID/AAAA/wD//wAAAP//AP8A//////8wDEoI/wAbCBxIsKDBgwgTKlzIsAGAhw8bMnwo4UFFCRElHgRgsePFAQA0FuR4UcLFBwdAihRI0qRJiy8PhBTZ0iXMigdQzpQI4IBLjCQfPEy5c2JOlwAgQOCYdClRnjeFKgWAceoAmTyPmmzKdCrRoglrWnzYcejVjAo5HvUYNedXo1FLnvwKdmNctjjPog27dq1NCVdB7kXY0i9buhNhuvUYU29dgz07Gj7q+DHByIAX45TgVrDlgT0Df02J06LjhQAqE3CKUrLetIIhrJ7NOqVtiJ8f0mYAgffqh4Efyh48Ujjvh7yTQ6RNvDju5wCS98Y9kTr0658bYs++srv3794DAgAsAAAAACAAIACHAAAAgAAAAIAAgIAAAACAgACAAICAwMDAwNzApsrwAAAAfwAdf39/QIAA/wA8//8Av7+/////////E+qEQg67GHkoCgNME+rsQgyCQg19E+lg8X5BAQ6iE+l88X5Y9TAgAAAA8YREAAABE+nQQeAUAQ6iE+l8PEVYAQ6iAAAABQQiAAAOAAAEAAAFAAAAAAAGAAAQAAK88WCr/VDE/fAAAAAAAAAA8XqJ8XqYAQ6iAAAAAAAFAAAaE+rEPEVy7gywAAAAE+p0QeE6AQ6iAAAAAAAFQd1/AAAAAAAAGHkoAAAAAAIeAAAaAAAwAAABAAABQYT8QYWkBQQiE+o8QbP5BQQiALApAAAAAAAAAAAAQYvZRwCIALApE+qEkQgzAAAAAAAAAQvXQAEAE+pQAAABE+rgkO4YkQg4////kQgzgSxbgSyHAAAAE+tgAQvXALApAAAAAAAAE+xYQgyCQg19/fAAQgyCE+sYQYvZQAEA/VAAAQv3AAAABAAAE+0oE+0EE+0oE+qEAAABE/EIg5qogSyQ////gSyHgS1AAAAAhQAPkOGqE+tUgS2VE+scE+tIE+tgAAAAAAAAAmJaABAAAb58AAACAb7vAQAAAQAA/v//AAABnokBDwAAACwAkQgzE+ygAAAAQAAAQAEAE+tUAAAAE+uMkQiVQAAAAAABAAACE+w0E+ygWu8AWuAAE+xgkSdUAAAAWuAAkQgzE+zwAAAAQAAAQAEAE+ukAAAAE+vckQiVQAAAAAABAAACE+yEE+zwWu8AWuAAE+ywkSdUAAAAWuAAkSk3E+10kQgzE+10AP6cQAAAQAEAE+v8AP6cE+w0kQiVQAAAAAABAAACE+xcQAEAQAAAE+yUkSl1QAAAAAABAAACkSm5E+10AP6cQAAAkQgzCxAAAP6cQAAAQAEAAAAAAAAAWuAAE+10E+xMQAAAE+0YkO4YkSnA////kSm5kSxZQAAAWvxQE+0IAAAAoKCkgICA/wAAAP8A//8AAAD//wD/AP//////MAxKCP8AGwgcSLCgwYMIEypcyLABgIcPGzJ8GMFBxQgRJR4EYLHjxQUANBbkeDHCRQcQQIoUSNKkSYsvIYQU2dIlzIoQUM6UCACCS4wkHTxMuXNiTpcAHjzgmHQpUZ43hSoFgHHqApk8j5psynQq0aIJa1p82HHo1YwKOR71GDXnV6NRS578CnZjXLY4z6INu3atzQhXQe5F2NIvW7oTYbr1GFNvXYM9Oxo+6vgxwciAF+OM4Faw5YE9A39NidOi44UAKi9gELmv3rSCGayezbpzSpkQw6aWzcBBb94PAz+UPXjkcN9kfwsNDvwzS4jQofueDn1i9ejYc6+8nN359u/gw2sCDAgALAAAAAAgACAAhwAAAIAAAACAAICAAAAAgIAAgACAgMDAwMDcwKbK8AAAAAB/X39/fwAA/0CAAAD/v7+/v////////xPqhEIOuxh5KAoDTBPq7EIMgkINfRPpYPF+QQEOohPpfPF+WPUwIAAAAPGERAAAARPp0EHgFAEOohPpfDxFWAEOogAAAAUEIgAADgAABAAABQAAAAAABgAAEAACvPFgq/1QxP3wAAAAAAAAAPF6ifF6mAEOogAAAAAABQAAGhPqxDxFcu4MsAAAABPqdEHhOgEOogAAAAAABUHdfwAAAAAAABh5KAAAAAACHgAAGgAAMAAAAQAAAUGE/EGFpAUEIhPqPEGz+QUEIgCwKQAAAAAAAAAAAEGL2UcAiACwKRPqhJEIMwAAAAAAAAEO1EABABPqUAAAARPq4JDuGJEIOP///5EIM4EsW4EshwAAABPrYAEO1ACwKQAAAAAAABPsWEIMgkINff3wAEIMghPrGEGL2UABAP1QAAEL9wAAAAQAABPtKBPtBBPtKBPqhAAAARPxCIOaqIEskP///4Esh4EtQAAAAIUAD5DhqhPrVIEtlRPrHBPrSBPrYAAAAAAAAAJiWgAQAAG+fAAAAgG+7wEAAAEAAP7//wAAAZ6JAQ8AAAAsAJEIMxPsoAAAAEAAAEABABPrVAAAABPrjJEIlUAAAAAAAQAAAhPsNBPsoFrvAFrgABPsYJEnVAAAAFrgAJEIMxPs8AAAAEAAAEABABPrpAAAABPr3JEIlUAAAAAAAQAAAhPshBPs8FrvAFrgABPssJEnVAAAAFrgAJEpNxPtdJEIMxPtdAD+nEAAAEABABPr/AD+nBPsNJEIlUAAAAAAAQAAAhPsXEABAEAAABPslJEpdUAAAAAAAQAAApEpuRPtdAD+nEAAAJEIMwsQAAD+nEAAAEABAAAAAAAAAFrgABPtdBPsTEAAABPtGJDuGJEpwP///5EpuZEsWUAAAFr8UBPtCAAAAKCgpICAgP8AAAD/AP//AAAA//8A/wD//////zAMSgj/AB0IHEiwoMGDCBMqXMjQAYCHDxsyfBjhQcUIESUeBGCx48UFADQW5HgxwsUHEECKFEjSpEmLLyGEFNnSJcyKEFDOlAgAgkuMJB88TLlzYk6XABo04Jh0KVGeN4UqBYBx6gKZPI+abMp0KtGiCWtafNhx6NWMCjke9Rg151ejUUue/Ap2Y1y2OM+iDbt2rc0IV0HuRdjSL1u6E2G69RhTb12DPTsaPur4McHIgBfjjOBWsOWBPQN/TYnTouOFACovYBC5r960ghmsns26c0qZEMOmls3gQW/eDwM/lD145HDfZH8LDQ78M0uI0KH7ng59YvXo2HOvvJzd+fbv4MNrAgwIACwAAAAAIAAgAIcAAACAAAAAgACAgAAAAICAAIAAgIDAwMDA3MCmyvAAAAAAHX9/f38APP9AgAD/AAC/v7////////8T6oRCDrsYeSgKA0wT6uxCDIJCDX0T6WDxfkEBDqIT6Xzxflj1MCAAAADxhEQAAAET6dBB4BQBDqIT6Xw8RVgBDqIAAAAFBCIAAA4AAAQAAAUAAAAAAAYAABAAArzxYKv9UMT98AAAAAAAAADxeonxepgBDqIAAAAAAAUAABoT6sQ8RXLuDLAAAAAT6nRB4ToBDqIAAAAAAAVB3X8AAAAAAAAYeSgAAAAAAh4AABoAADAAAAEAAAFBhPxBhaQFBCIT6jxBs/kFBCIAsCkAAAAAAAAAAABBi9lHAIgAsCkT6oSRCDMAAAAAAAABDl9AAQAT6lAAAAET6uCQ7hiRCDj///+RCDOBLFuBLIcAAAAT62ABDl8AsCkAAAAAAAAT7FhCDIJCDX398ABCDIIT6xhBi9lAAQD9UAABC/cAAAAEAAAT7SgT7QQT7SgT6oQAAAET8QiDmqiBLJD///+BLIeBLUAAAACFAA+Q4aoT61SBLZUT6xwT60gT62AAAAAAAAACYloAEAABvnwAAAIBvu8BAAABAAD+//8AAAGeiQEPAAAALACRCDMT7KAAAABAAABAAQAT61QAAAAT64yRCJVAAAAAAAEAAAIT7DQT7KBa7wBa4AAT7GCRJ1QAAABa4ACRCDMT7PAAAABAAABAAQAT66QAAAAT69yRCJVAAAAAAAEAAAIT7IQT7PBa7wBa4AAT7LCRJ1QAAABa4ACRKTcT7XSRCDMT7XQA/pxAAABAAQAT6/wA/pwT7DSRCJVAAAAAAAEAAAIT7FxAAQBAAAAT7JSRKXVAAAAAAAEAAAKRKbkT7XQA/pxAAACRCDMLEAAA/pxAAABAAQAAAAAAAABa4AAT7XQT7ExAAAAT7RiQ7hiRKcD///+RKbmRLFlAAABa/FAT7QgAAACgoKSAgID/AAAA/wD//wAAAP//AP8A//////8wDEoI/wAdCBxIsKDBgwgTKlzI0AGAhw8bMnwYoUHFCBElHgRgsePFBQA0FuR4McLFBhBAihRI0qRJiy8hhBTZ0iXMihBQzpQIAIJLjCQbPEy5c2JOlwAePOCYdClRnjeFKgWAceoCmTyPmmzKdCrRoglrWnzYcejVjAo5HvUYNedXo1FLnvwKdmNctjjPog27dq3NCFdB7kXY0i9buhNhuvUYU29dgz07Gj7q+DHByIAX44zgVrDlgT0Df02J06LjhQAqL2AQua/etIIZrJ7NunNKmRDDppbNoEFv3g8DP5Q9eORw32R/Cw0O/DNLiNCh+54OfWL16Nhzr7yc3fn27+DDawIMCAA7" />
    <img id="ghost2" src="data:image/gif;base64,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" />
    <img id="ghost3" src="data:image/gif;base64,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" />
</div>
<br><br><br>
</body>
</html>

 Reactions To Technologies:
1. Anything that is in the world when you’re born is normal and ordinary and is just a natural part of the way the world works.
2. Anything that's invented between when you’re fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it.
3. Anything invented after you're thirty-five is against the natural order of things.

- Douglas Adams 2002


 






PARTNERS