<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="ru"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="ru"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="ru"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ru"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<title>Ошибка 404</title>
	<meta name="description" content="Сраница ошибки 404">
	<meta name="author" content="Артем Романов">
	<meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="https://romanov-artem.ru/error/style.css">
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
</head>
<body>
<div class="comingcontainer">
    <div class="checkbacksoon">
		<p>
			<span class="go3d">4</span>
			<span class="go3d">0</span>
			<span class="go3d">4</span>
			<span class="go3d">!</span>
			
		</p>
        
        <p class="error">
		Страница не найдена! Воспользуйтесь ссылками ниже. 
		<br />Или поиграйте в змейку =)
		</p>
		<br /><canvas id="canvas" style="display: block; margin: 0 auto;" width="300" height="300"></canvas>

		

		<script>

		

			$(document).ready(function(){
			//Canvas stuff
			var canvas = $("#canvas")[0];
			var ctx = canvas.getContext("2d");
			var w = $("#canvas").width();
			var h = $("#canvas").height();

			//Lets save the cell width in a variable for easy control
			var cw = 10;
			var d;
			var food;
			var score;

			//Lets create the snake now
			var snake_array; //an array of cells to make up the snake

			function init()
			{
				d = "right"; //default direction
				create_snake();
				create_food(); //Now we can see the food particle
				//finally lets display the score
				score = 0;

				//Lets move the snake now using a timer which will trigger the paint function
				//every 60ms
				if(typeof game_loop != "undefined") clearInterval(game_loop);
				game_loop = setInterval(paint, 60);
			}
			init();

			function create_snake()
			{
				var length = 5; //Length of the snake
				snake_array = []; //Empty array to start with
				for(var i = length-1; i>=0; i--)
				{
					//This will create a horizontal snake starting from the top left
					snake_array.push({x: i, y:0});
				}
			}

			//Lets create the food now
			function create_food()
			{
				food = {
					x: Math.round(Math.random()*(w-cw)/cw),
					y: Math.round(Math.random()*(h-cw)/cw),
				};
				//This will create a cell with x/y between 0-44
				//Because there are 45(450/10) positions accross the rows and columns
			}

			//Lets paint the snake now
			function paint()
			{
				//To avoid the snake trail we need to paint the BG on every frame
				//Lets paint the canvas now
				ctx.fillStyle = "white";
				ctx.fillRect(0, 0, w, h);
				ctx.strokeStyle = "black";
				ctx.strokeRect(0, 0, w, h);

				//The movement code for the snake to come here.
				//The logic is simple
				//Pop out the tail cell and place it infront of the head cell
				var nx = snake_array[0].x;
				var ny = snake_array[0].y;
				//These were the position of the head cell.
				//We will increment it to get the new head position
				//Lets add proper direction based movement now
				if(d == "right") nx++;
				else if(d == "left") nx--;
				else if(d == "up") ny--;
				else if(d == "down") ny++;

				//Lets add the game over clauses now
				//This will restart the game if the snake hits the wall
				//Lets add the code for body collision
				//Now if the head of the snake bumps into its body, the game will restart
				if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
				{
					//restart game
					init();
					//Lets organize the code a bit now.
					return;
				}

				//Lets write the code to make the snake eat the food
				//The logic is simple
				//If the new head position matches with that of the food,
				//Create a new head instead of moving the tail
				if(nx == food.x && ny == food.y)
				{
					var tail = {x: nx, y: ny};
					score++;
					//Create new food
					create_food();
				}
				else
				{
					var tail = snake_array.pop(); //pops out the last cell
					tail.x = nx; tail.y = ny;
				}
				//The snake can now eat the food.

				snake_array.unshift(tail); //puts back the tail as the first cell

				for(var i = 0; i < snake_array.length; i++)
				{
					var c = snake_array[i];
					//Lets paint 10px wide cells
					paint_cell(c.x, c.y);
				}

				//Lets paint the food
				paint_cell(food.x, food.y);
				//Lets paint the score
				var score_text = "Score: " + score;
				ctx.fillText(score_text, 5, h-5);
			}

			//Lets first create a generic function to paint cells
			function paint_cell(x, y)
			{
				ctx.fillStyle = "#3495DD";
				ctx.fillRect(x*cw, y*cw, cw, cw);
				ctx.strokeStyle = "white";
				ctx.strokeRect(x*cw, y*cw, cw, cw);
			}

			function check_collision(x, y, array)
			{
				//This function will check if the provided x/y coordinates exist
				//in an array of cells or not
				for(var i = 0; i < array.length; i++)
				{
					if(array[i].x == x && array[i].y == y)
					 return true;
				}
				return false;
			}

			//Lets add the keyboard controls now
			$(document).keydown(function(e){
				var key = e.which;
				//We will add another clause to prevent reverse gear
				if(key == "37" && d != "right") d = "left";
				else if(key == "38" && d != "down") d = "up";
				else if(key == "39" && d != "left") d = "right";
				else if(key == "40" && d != "up") d = "down";
				//The snake is now keyboard controllable
			})

		})
		</script>
        <nav>
            <ul>
                <li><a href="https://romanov-artem.ru/">Главная</a></li>
                <li><a href="https://romanov-artem.ru/about.html">Обо мне</a></li>
                <li><a href="https://romanov-artem.ru/services.html">Услуги</a></li>
                <li><a href="https://romanov-artem.ru/portfolio.html">Портфолио</a></li>
                <li><a href="https://romanov-artem.ru/feedback.html">Контакты</a></li>
            </ul>	
        </nav>
    
	</div>
</div>

</body>
</html>