Untitled

<html>
	<style>

		canvas
		{
    		border: 1px solid #d3d3d3;
    		background-image: url("https://ak0.picdn.net/shutterstock/videos/22492090/thumb/1.jpg");
		}

	</style>

	<body onload = "startGame()">
		<script>
//-----------------------------------------Variables
			var gamePieceRed;
			var gamePieceBorder;
			var gameObstacle;
//-----------------------------------------

//-----------------------------------------Main game function
			function startGame()
			{
				gamePieceRed = new component(22, 22, "rgb(255, 132, 156)", 10, 120);
				gamePieceBorder = new component(24, 24, "black", 9, 119);

				obstacle = new component(10, 200, "rgb(64, 0 ,12)", 300, 120)

				gameArea.start();
			}
//-----------------------------------------

//-----------------------------------------Creating game area and applying controls
			var gameArea =
			{
  				canvas : document.createElement("canvas"), start : function()
	  			{
	    			this.canvas.width = 510;
	    			this.canvas.height = 280;
	    			this.context = this.canvas.getContext("2d");

	    			document.body.insertBefore(this.canvas, document.body.childNodes[0]);

	    			this.interval = setInterval(gameUpdate, 20);

	    			window.EventListener("keyDown", function (e)
	    			{
      					gameArea.keys = (gameArea.keys || []);
      					gameArea.keys[e.keyCode] = true;
    				})

    				window.EventListener("keyUp", function (e)
    				{
      					gameArea.keys[e.keyCode] = false;
    				})
	  			},

	  			clear : function()
	  			{
    				this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    			},

    			stop : function()
    			{
    				clearInterval(this.interval);
    			}
			}
//-----------------------------------------

//-----------------------------------------Game component
			function component(width, height, color, x, y)
			{
				this.width = width;
				this.height = height;

				this.x = x;
				this.y = y;

				this.speedX = 0;
				this.speedY = 0;

				this.update = function()
				{
					ctx = gameArea.context;
					ctx.fillStyle = color;
					ctx.fillRect(this.x, this.y, this.width, this.height)
				}

				this.pos = function()
				{
					this.x += this.speedX;
					this.y += this.speedY;
				}

				this.move = function()
				{
					gamePieceBorder.speedX = 0;
					gamePieceRed.speedX = 0;

					gamePieceBorder.speedY = 0;
					gamePieceRed.speedY = 0;

					if (gameArea.keys && gameArea.keys[37]) {gamePieceBorder.speedX = -2; gamePieceRed.speedX = -2;}
  				if (gameArea.keys && gameArea.keys[39]) {gamePieceBorder.speedX = 2; gamePieceRed.speedX = 2;}
  				if (gameArea.keys && gameArea.keys[38]) {gamePieceBorder.speedY = -2; gamePieceRed.speedY = -2;}
  				if (gameArea.keys && gameArea.keys[40]) {gamePieceBorder.speedY = 2; gamePieceRed.speedY = 2;}
				}

				this.crashGame = function(obj)
				{
					var left = this.x;
    				var right = this.x + (this.width);
    				var top = this.y;
    				var bottom = this.y + (this.height);

    				var otherLeft = obj.x;
    				var otherRight = obj.x + (obj.width);
    				var otherTop = obj.y;
   					var otherBottom = obj.y + (obj.height);

    				var crash = true;

    				if (bottom < otherTop || top > otherBottom || right < otherLeft || left > otherRight)
    				{
    					crash = false;
    				}

    				return crash;
				}
			}
//-----------------------------------------

//-----------------------------------------Game area updater
			function gameUpdate()
			{
				if(gamePieceBorder.crashGame(gameObstacle) || gamePieceRed.crashGame(gameObstacle))
				{
					gameArea.stop();
				}

				else
				{
  				obstacle.update();

					gamePieceBorder.pos();
					gamePieceBorder.move();
					gamePieceBorder.update();

					gamePieceRed.pos();
					gamePieceRed.move();
					gamePieceRed.update();

					gameArea.clear();
				}
			}
//-----------------------------------------
		</script>
	</body>
</html>