{"id":307110,"date":"2020-07-17T15:00:47","date_gmt":"2020-07-17T15:00:47","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=307110"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=307110","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 3d-\u0438\u0433\u0440 \u0441 \u043d\u0443\u043b\u044f \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c html, css \u0438 js. \u0427\u0430\u0441\u0442\u044c 2\/2"},"content":{"rendered":"\n
\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u0443\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u0438\u0433\u0440\u0443 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c html, css \u0438 javascript. \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 3-\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0438\u0440, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430 \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044e, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0435 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 (\u0431\u0435\u0437 \u0442\u0435\u043d\u0435\u0439), \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0437\u0432\u0443\u043a\u0438 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0435\u043d\u044e. \u0423\u0432\u044b, \u043a\u0430\u043a \u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0434\u0435\u043c\u043e\u043a \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.
<\/a>
\u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438. \u0423 \u043d\u0430\u0441 \u0438\u043c\u0435\u044e\u0442\u0441\u044f 3 \u0444\u0430\u0439\u043b\u0430:<\/p>\n
index.html<\/b> <\/p>\n
\n
<!DOCTYPE HTML> <HTML> <HEAD> \t<TITLE>\u0418\u0433\u0440\u0430<\/TITLE> \t<LINK rel="stylesheet" href="style.css"> \t<meta charset="utf-8"> <\/HEAD> <BODY> \t<div id="container"> \t\t<div id="world"> \t\t<\/div> \t\t<div id="pawn"><\/div> \t<\/div> <\/BODY> <\/HTML> <script src="script.js"><\/script> <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
                         style.css<\/b>                         <\/p>\n
\n
#container{ \tposition:absolute; \twidth:1200px; \theight:800px; \tborder:2px solid #000000; \tperspective:600px; \toverflow:hidden; } #world{ \tposition:absolute; \twidth:inherit; \theight:inherit; \ttransform-style:preserve-3d; } .square{ \tposition:absolute; } #pawn{ \tdisplay:none; \tposition:absolute; \ttop:400px; \tleft:600px; \ttransform:translate(-50%,-50%); \twidth:100px; \theight:100px; } <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
                         script.js<\/b>                         <\/p>\n
\n
\/\/ \u041c\u0438\u0440\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b  var pi = 3.141592; var deg = pi\/180;  \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 player  function player(x,y,z,rx,ry) { \tthis.x = x; \tthis.y = y; \tthis.z = z; \tthis.rx = rx; \tthis.ry = ry; }  \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432  var map = [ \t\t   [0,0,1000,0,180,0,2000,200,"#F0C0FF"], \t\t   [0,0,-1000,0,0,0,2000,200,"#F0C0FF"], \t\t   [1000,0,0,0,-90,0,2000,200,"#F0C0FF"], \t\t   [-1000,0,0,0,90,0,2000,200,"#F0C0FF"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ];  \/\/ \u041d\u0430\u0436\u0430\u0442\u0430 \u043b\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0430 \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043c\u044b\u0448\u044c?  var PressBack = 0; var PressForward = 0; var PressLeft = 0; var PressRight = 0; var PressUp = 0; var MouseX = 0; var MouseY = 0;  \/\/ \u0412\u0432\u0435\u0434\u0435\u043d \u043b\u0438 \u0437\u0430\u0445\u0432\u0430\u0442 \u043c\u044b\u0448\u0438?  var lock = false;  \/\/ \u041d\u0430 \u0437\u0435\u043c\u043b\u0435 \u043b\u0438 \u0438\u0433\u0440\u043e\u043a?  var onGround = true;  \/\/ \u041f\u0440\u0438\u0432\u044f\u0436\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043a container  var container = document.getElementById("container");  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u0430  document.addEventListener("pointerlockchange", (event)=>{ \tlock = !lock; });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438  container.onclick = function(){ \tif (!lock) container.requestPointerLock(); };  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448  document.addEventListener("keydown", (event) =>{ \tif (event.key == "a"){ \t\tPressLeft = 1; \t} \tif (event.key == "w"){ \t\tPressForward = 1; \t} \tif (event.key == "d"){ \t\tPressRight = 1; \t} \tif (event.key == "s"){ \t\tPressBack = 1; \t} \tif (event.keyCode == 32 && onGround){ \t\tPressUp = 1; \t} });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448  document.addEventListener("keyup", (event) =>{ \tif (event.key == "a"){ \t\tPressLeft = 0; \t} \tif (event.key == "w"){ \t\tPressForward = 0; \t} \tif (event.key == "d"){ \t\tPressRight = 0; \t} \tif (event.key == "s"){ \t\tPressBack = 0; \t} \tif (event.keyCode == 32){ \t\tPressUp = 0; \t} });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438  document.addEventListener("mousemove", (event)=>{ \tMouseX = event.movementX; \tMouseY = event.movementY; });  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442  var pawn = new player(-900,0,-900,0,0);  \/\/ \u041f\u0440\u0438\u0432\u044f\u0436\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043a world  var world = document.getElementById("world");  function update(){ \t \t\/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \t \tdx =   (PressRight - PressLeft)*Math.cos(pawn.ry*deg) - (PressForward - PressBack)*Math.sin(pawn.ry*deg); \tdz = - (PressForward - PressBack)*Math.cos(pawn.ry*deg) - (PressRight - PressLeft)*Math.sin(pawn.ry*deg); \tdy = - PressUp; \tdrx = MouseY; \tdry = - MouseX; \t \t\/\/ \u041e\u0431\u043d\u0443\u043b\u0438\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438: \t \tMouseX = MouseY = 0; \t \t\/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u044e \u0441 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438 \t \tcollision(); \t \t\/\/ \u041f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \t \tpawn.x = pawn.x + dx; \tpawn.y = pawn.y + dy; \tpawn.z = pawn.z + dz; \tconsole.log(pawn.x + ":" + pawn.y + ":" + pawn.z); \t \t\/\/ \u0415\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0437\u0430\u0445\u0432\u0430\u0447\u0435\u043d, \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \t \tif (lock){ \t\tpawn.rx = pawn.rx + drx; \t\tpawn.ry = pawn.ry + dry; \t};  \t\/\/ \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u0438\u0440\u0430 (\u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f) \t \tworld.style.transform =  \t"translateZ(" + (600 - 0) + "px)" + \t"rotateX(" + (-pawn.rx) + "deg)" + \t"rotateY(" + (-pawn.ry) + "deg)" + \t"translate3d(" + (-pawn.x) + "px," + (-pawn.y) + "px," + (-pawn.z) + "px)"; \t };  function CreateNewWorld(){ \tfor (let i = 0; i < map.length; i++){ \t\t \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438 \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u0435 \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \t\t \t\tlet newElement = document.createElement("div"); \t\tnewElement.className = "square"; \t\tnewElement.id = "square" + i; \t\tnewElement.style.width = map[i][6] + "px"; \t\tnewElement.style.height = map[i][7] + "px"; \t\tnewElement.style.background = map[i][8]; \t\tnewElement.style.transform = "translate3d(" + \t\t(600 - map[i][6]\/2 + map[i][0]) + "px," + \t\t(400 - map[i][7]\/2 + map[i][1]) + "px," + \t\t(map[i][2]) + "px)" + \t\t"rotateX(" + map[i][3] + "deg)" + \t\t"rotateY(" + map[i][4] + "deg)" + \t\t"rotateZ(" + map[i][5] + "deg)"; \t\t \t\t\/\/ \u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 world \t\t \t\tworld.append(newElement); \t} }  function collision(){ \tfor(let i = 0; i < map.length; i++){ \t\t \t\t\/\/ \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \t\t \t\tlet x0 = (pawn.x - map[i][0]); \t\tlet y0 = (pawn.y - map[i][1]); \t\tlet z0 = (pawn.z - map[i][2]); \t\t \t\tif ((x0**2 + y0**2 + z0**2 + dx**2 + dy**2 + dz**2) < (map[i][6]**2 + map[i][7]**2)){ \t\t \t\t\tlet x1 = x0 + dx; \t\t\tlet y1 = y0 + dy; \t\t\tlet z1 = z0 + dz; \t\t \t\t\tlet point0 = coorTransform(x0,y0,z0,map[i][3],map[i][4],map[i][5]); \t\t\tlet point1 = coorTransform(x1,y1,z1,map[i][3],map[i][4],map[i][5]); \t\t\tlet point2 = new Array(); \t\t \t\t\t\/\/ \u0423\u0441\u043b\u043e\u0432\u0438\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438 \u043d\u0435\u043c \t\t \t\t\tif (Math.abs(point1[0])<(map[i][6]+98)\/2 && Math.abs(point1[1])<(map[i][7]+98)\/2 && Math.abs(point1[2]) < 50){ \t\t\t\tpoint1[2] = Math.sign(point0[2])*50; \t\t\t\tpoint2 = coorReTransform(point1[0],point1[1],point1[2],map[i][3],map[i][4],map[i][5]); \t\t\t\tdx = point2[0] - x0; \t\t\t\tdy = point2[1] - y0; \t\t\t\tdz = point2[2] - z0; \t\t\t} \t\t\t \t\t} \t}; }  function coorTransform(x0,y0,z0,rxc,ryc,rzc){ \tlet x1 =  x0; \tlet y1 =  y0*Math.cos(rxc*deg) + z0*Math.sin(rxc*deg); \tlet z1 = -y0*Math.sin(rxc*deg) + z0*Math.cos(rxc*deg); \tlet x2 =  x1*Math.cos(ryc*deg) - z1*Math.sin(ryc*deg); \tlet y2 =  y1; \tlet z2 =  x1*Math.sin(ryc*deg) + z1*Math.cos(ryc*deg); \tlet x3 =  x2*Math.cos(rzc*deg) + y2*Math.sin(rzc*deg);  \tlet y3 = -x2*Math.sin(rzc*deg) + y2*Math.cos(rzc*deg); \tlet z3 =  z2; \treturn [x3,y3,z3]; }  function coorReTransform(x3,y3,z3,rxc,ryc,rzc){ \tlet x2 =  x3*Math.cos(rzc*deg) - y3*Math.sin(rzc*deg); \tlet y2 =  x3*Math.sin(rzc*deg) + y3*Math.cos(rzc*deg); \tlet z2 =  z3 \tlet x1 =  x2*Math.cos(ryc*deg) + z2*Math.sin(ryc*deg); \tlet y1 =  y2; \tlet z1 = -x2*Math.sin(ryc*deg) + z2*Math.cos(ryc*deg); \tlet x0 =  x1; \tlet y0 =  y1*Math.cos(rxc*deg) - z1*Math.sin(rxc*deg); \tlet z0 =  y1*Math.sin(rxc*deg) + z1*Math.cos(rxc*deg); \treturn [x0,y0,z0]; }  CreateNewWorld(); TimerGame = setInterval(update,10); <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
1. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u0438 \u0438 \u0444\u0438\u0437\u0438\u043a\u0438 \u043f\u0440\u044b\u0436\u043a\u0430<\/h3>\n
  \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u0444\u0430\u0439\u043b\u0430 javascript. \u0411\u0443\u0434\u0435\u0442 \u043b\u0443\u0447\u0448\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0438\u0445 \u0432 \u043e\u0434\u043d\u043e \u043c\u0435\u0441\u0442\u043e:<\/p>\n
\/\/ \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  var lock = false; var onGround = true; var container = document.getElementById("container"); var world = document.getElementById("world"); <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043a \u043d\u0438\u043c:<\/p>\n
var g = 0.1;<\/code><\/pre>\n
  \u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 player \u0434\u043e\u0431\u0430\u0432\u0438\u043c 3 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u2014 vx, vy \u0438 vz:<\/p>\n
function player(x,y,z,rx,ry) { \tthis.x = x; \tthis.y = y; \tthis.z = z; \tthis.rx = rx; \tthis.ry = ry; \tthis.vx = 3; \tthis.vy = 5; \tthis.vz = 3; } <\/code><\/pre>\n
  \u042d\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u041c\u0435\u043d\u044f\u044f \u0438\u0445, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0431\u0435\u0433\u0430 \u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0440\u044b\u0436\u043a\u0430 \u0438\u0433\u0440\u043e\u043a\u0430. \u041f\u043e\u043a\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 update():<\/p>\n
         dx =   ((PressRight - PressLeft)*Math.cos(pawn.ry*deg) - (PressForward - PressBack)*Math.sin(pawn.ry*deg))*pawn.vx; \tdz = ( -(PressForward - PressBack)*Math.cos(pawn.ry*deg) - (PressRight - PressLeft)*Math.sin(pawn.ry*deg))*pawn.vz; \tdy = PressUp*pawn.vy; \tdrx = MouseY; \tdry = - MouseX; <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0433\u0440\u043e\u043a \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u041d\u043e \u043e\u043d \u043d\u0435 \u043f\u0430\u0434\u0430\u0435\u0442 \u0438 \u043d\u0435 \u043f\u0440\u044b\u0433\u0430\u0435\u0442. \u041d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u044b\u0436\u043e\u043a \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043d\u0430 \u0447\u0435\u043c-\u0442\u043e \u0441\u0442\u043e\u0438\u0442. \u0410 \u0441\u0442\u043e\u044f\u0442\u044c \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0441\u044f \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 (\u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438) \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c\u044e. \u041a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c? \u041d\u0443\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043d\u043e\u0440\u043c\u0430\u043b\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u0432\u0434\u043e\u043b\u044c \u043e\u0441\u0438 z. \u0422\u043e\u0433\u0434\u0430 \u0432 \u043c\u0438\u0440\u043e\u0432\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 \u043d\u043e\u0440\u043c\u0430\u043b\u044c \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b. \u041d\u0430\u0439\u0434\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c (\u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e normal):<\/p>\n
let point0 = coorTransform(x0,y0,z0,map[i][3],map[i][4],map[i][5]); let point1 = coorTransform(x1,y1,z1,map[i][3],map[i][4],map[i][5]); let point2 = new Array(); let normal = coorReTransform(0,0,1,map[i][3],map[i][4],map[i][5]); <\/code><\/pre>\n
  \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439, \u0441\u043a\u0430\u043b\u044f\u0440\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u0438 \u043d\u0430 \u043e\u0441\u044c y \u0432 \u043c\u0438\u0440\u043e\u0432\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0432\u043d\u044f\u0442\u044c\u0441\u044f 1 \u0438\u043b\u0438 -1, \u0430 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u2013 \u0431\u043b\u0438\u0437\u043a\u043e \u043a 1 \u0438\u043b\u0438 -1. \u0417\u0430\u0434\u0430\u0434\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438:<\/p>\n
if (Math.abs(normal[1]) > 0.8){ \tonGround = true; } <\/code><\/pre>\n
  \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 \u0438\u0433\u0440\u043e\u043a \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0437\u0435\u043c\u043b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 collision() \u0437\u0430\u0434\u0430\u0434\u0438\u043c onGround = false:<\/p>\n
function collision(){ \t \tonGround = false; \t \tfor(let i = 0; i < map.length; i++){ <\/code><\/pre>\n
  \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043d\u0438\u0437\u0443, \u0442\u043e \u043e\u043d \u0442\u043e\u0436\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0431\u044b \u043d\u0430 \u0437\u0435\u043c\u043b\u0435. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u044d\u0442\u043e, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0438\u0433\u0440\u043e\u043a\u0430 \u043d\u0430 \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 (point3[1] \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 point2[1]):<\/p>\n
let point3 = coorReTransform(point1[0],point1[1],0,map[i][3],map[i][4],map[i][5]); \t\t\t\tdx = point2[0] - x0; \t\t\t\tdy = point2[1] - y0; \t\t\t\tdz = point2[2] - z0; \t\t\t\tif (Math.abs(normal[1]) > 0.8){ \t\t\t\t\tif (point3[1] > point2[1]) onGround = true; \t\t\t\t} \t\t\t\telse dy = y1 - y0;  <\/code><\/pre>\n
  \u0427\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c? \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:<\/p>\n
  <\/p>\n
  \u041a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0440\u0435\u0441\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0438\u0436\u0435 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e \u0432 \u043c\u0438\u0440\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 (\u0438\u043b\u0438 y-\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435). \u042d\u0442\u043e \u043c\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432 point3[1] > point2[1]. \u0410 point3 \u2013 \u0435\u0441\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0437 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0440\u0430\u0441\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438. \u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e point2 \u0432\u043d\u0443\u0442\u0440\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438: <\/p>\n
let point0 = coorTransform(x0,y0,z0,map[i][3],map[i][4],map[i][5]); \t\t\tlet point1 = coorTransform(x1,y1,z1,map[i][3],map[i][4],map[i][5]); \t\t\tlet normal = coorReTransform(0,0,1,map[i][3],map[i][4],map[i][5]); \t\t \t\t\t\/\/ \u0423\u0441\u043b\u043e\u0432\u0438\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438 \u043d\u0435\u043c \t\t \t\t\tif (Math.abs(point1[0])<(map[i][6]+98)\/2 && Math.abs(point1[1])<(map[i][7]+98)\/2 && Math.abs(point1[2]) < 50){ \t\t\t\tpoint1[2] = Math.sign(point0[2])*50; \t\t\t\tlet point2 = coorReTransform(point1[0],point1[1],point1[2],map[i][3],map[i][4],map[i][5]); \t\t\t\tlet point3 = coorReTransform(point1[0],point1[1],0,map[i][3],map[i][4],map[i][5]); \t\t\t\tdx = point2[0] - x0; \t\t\t\tdy = point2[1] - y0; \t\t\t\tdz = point2[2] - z0; \t\t\t\tif (Math.abs(normal[1]) > 0.8){ \t\t\t\t\tif (point3[1] > point2[1]) onGround = true; \t\t\t\t} \t\t\t} <\/code><\/pre>\n
  \u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c\u0441\u044f \u0432 update(). \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u043e\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044e \u0438 \u0443\u0431\u0435\u0440\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e y \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043f\u0440\u043e\u0431\u0435\u043b:<\/p>\n
\/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f  dx =   ((PressRight - PressLeft)*Math.cos(pawn.ry*deg) - (PressForward - PressBack)*Math.sin(pawn.ry*deg))*pawn.vx; \tdz = ( -(PressForward - PressBack)*Math.cos(pawn.ry*deg) - (PressRight - PressLeft)*Math.sin(pawn.ry*deg))*pawn.vz; \tdy = dy + g; \tdrx = MouseY; \tdry = - MouseX;   <\/code><\/pre>\n
  \u0412\u043e \u0432\u0442\u043e\u0440\u044b\u0445, \u0435\u0441\u043b\u0438 \u0438\u0433\u0440\u043e\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0437\u0435\u043c\u043b\u0435, \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044e, \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e y (\u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u0441\u043b\u0435 \u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043d\u0430\u043a\u043b\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0438\u0433\u0440\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u043b\u0435\u0442\u0430\u0442\u044c) \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u044b\u0436\u043a\u0430 (\u0443\u0441\u043b\u043e\u0432\u0438\u0435 if (onGround)):<\/p>\n
\/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \t \tdx =   ((PressRight - PressLeft)*Math.cos(pawn.ry*deg) - (PressForward - PressBack)*Math.sin(pawn.ry*deg))*pawn.vx; \tdz = ( -(PressForward - PressBack)*Math.cos(pawn.ry*deg) - (PressRight - PressLeft)*Math.sin(pawn.ry*deg))*pawn.vz; \tdy = dy + g; \tif (onGround){ \t\tdy = 0; \t\tif (PressUp){ \t\t\tdy = - PressUp*pawn.vy; \t\t\tonGround = false; \t\t} \t}; \tdrx = MouseY; \tdry = - MouseX; <\/code><\/pre>\n
  \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u0440\u044b\u0436\u043a\u0430 \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u043f\u0440\u044b\u0436\u043e\u043a, \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 onGround \u0432 false. \u0412 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u0440\u043e\u0431\u0435\u043b\u0430 \u043f\u0440\u0430\u0432\u0434\u0438\u0432\u043e\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430:<\/p>\n
if (event.keyCode == 32){ \t\tPressUp = 1; \t} <\/code><\/pre>\n
  \u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043c\u0438\u0440:<\/p>\n
var map = [ \t\t   [0,0,1000,0,180,0,2000,200,"#F0C0FF"], \t\t   [0,0,-1000,0,0,0,2000,200,"#F0C0FF"], \t\t   [1000,0,0,0,-90,0,2000,200,"#F0C0FF"], \t\t   [-1000,0,0,0,90,0,2000,200,"#F0C0FF"], \t\t   [0,0,-300,70,0,0,200,500,"#F000FF"], \t\t   [0,-86,-786,90,0,0,200,500,"#F000FF"], \t\t   [-500,0,-300,20,0,0,200,500,"#00FF00"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ]; <\/code><\/pre>\n
  \u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0438\u0433\u0440\u0443, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0435\u043b\u0435\u043d\u043e\u0439 \u0441\u0442\u0435\u043d\u0435. \u0417\u0430\u043f\u0440\u0435\u0442\u0438\u043c \u044d\u0442\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 else dy = y1 \u2014 y0:<\/p>\n
if (Math.abs(point1[0])<(map[i][6]+98)\/2 && Math.abs(point1[1])<(map[i][7]+98)\/2 && Math.abs(point1[2]) < 50){ \t\t\t\tpoint1[2] = Math.sign(point0[2])*50; \t\t\t\tlet point2 = coorReTransform(point1[0],point1[1],point1[2],map[i][3],map[i][4],map[i][5]); \t\t\t\tlet point3 = coorReTransform(point1[0],point1[1],0,map[i][3],map[i][4],map[i][5]); \t\t\t\tdx = point2[0] - x0; \t\t\t\tdy = point2[1] - y0; \t\t\t\tdz = point2[2] - z0; \t\t\t\tif (Math.abs(normal[1]) > 0.8){ \t\t\t\t\tif (point3[1] > point2[1]) onGround = true; \t\t\t\t} \t\t\t\telse dy = y1 - y0; \t\t\t} <\/code><\/pre>\n
  \u0418\u0442\u0430\u043a, \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0442\u0435\u043d\u043a\u0430\u043c\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e y. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0433\u043e\u043d \u043d\u0430 \u0442\u0430\u043a\u0438\u0445 \u0441\u0442\u0435\u043d\u043a\u0430\u0445 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0437\u0435\u043b\u0435\u043d\u0443\u044e \u0441\u0442\u0435\u043d\u0443. \u0423 \u043d\u0430\u0441 \u044d\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0418\u0442\u0430\u043a, \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u0440\u044b\u0436\u043a\u0430\u043c\u0438 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e \u0432\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0441\u043b\u0430\u0431\u043e \u043d\u0430\u043a\u043b\u043e\u043d\u0435\u043d\u043d\u044b\u043c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044f\u043c. \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043a\u043e\u0434:<\/p>\n
                         index.html<\/b>                         <\/p>\n
\n
<!DOCTYPE HTML> <HTML> <HEAD> \t<TITLE>\u0418\u0433\u0440\u0430<\/TITLE> \t<LINK rel="stylesheet" href="style.css"> \t<meta charset="utf-8"> <\/HEAD> <BODY> \t<div id="container"> \t\t<div id="world"> \t\t<\/div> \t\t<div id="pawn"><\/div> \t<\/div> <\/BODY> <\/HTML> <script src="script.js"><\/script> <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
                         style.css<\/b>                         <\/p>\n
\n
#container{ \tposition:absolute; \twidth:1200px; \theight:800px; \tborder:2px solid #000000; \tperspective:600px; \toverflow:hidden; } #world{ \tposition:absolute; \twidth:inherit; \theight:inherit; \ttransform-style:preserve-3d; } .square{ \tposition:absolute; } #pawn{ \tdisplay:none; \tposition:absolute; \ttop:400px; \tleft:600px; \ttransform:translate(-50%,-50%); \twidth:100px; \theight:100px; } <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
                         script.js<\/b>                         <\/p>\n
\n
\/\/ \u041c\u0438\u0440\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b  var pi = 3.141592; var deg = pi\/180;  \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 player  function player(x,y,z,rx,ry) { \tthis.x = x; \tthis.y = y; \tthis.z = z; \tthis.rx = rx; \tthis.ry = ry; \tthis.vx = 3; \tthis.vy = 5; \tthis.vz = 3; }  \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432  var map = [ \t\t   [0,0,1000,0,180,0,2000,200,"#F0C0FF"], \t\t   [0,0,-1000,0,0,0,2000,200,"#F0C0FF"], \t\t   [1000,0,0,0,-90,0,2000,200,"#F0C0FF"], \t\t   [-1000,0,0,0,90,0,2000,200,"#F0C0FF"], \t\t   [0,0,-300,70,0,0,200,500,"#F000FF"], \t\t   [0,-86,-786,90,0,0,200,500,"#F000FF"], \t\t   [-500,0,-300,20,0,0,200,500,"#00FF00"], \t\t   [0,-800,0,90,0,0,500,500,"#00FF00"], \t\t   [0,-400,700,60,0,0,500,900,"#FFFF00"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ];  \/\/ \u041d\u0430\u0436\u0430\u0442\u0430 \u043b\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0430 \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043c\u044b\u0448\u044c?  var PressBack = 0; var PressForward = 0; var PressLeft = 0; var PressRight = 0; var PressUp = 0; var MouseX = 0; var MouseY = 0;  \/\/ \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  var lock = false; var onGround = false; var container = document.getElementById("container"); var world = document.getElementById("world"); var g = 0.1; var dx = dy = dz = 0;   \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u0430  document.addEventListener("pointerlockchange", (event)=>{ \tlock = !lock; });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438  container.onclick = function(){ \tif (!lock) container.requestPointerLock(); };  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448  document.addEventListener("keydown", (event) =>{ \tif (event.key == "a"){ \t\tPressLeft = 1; \t} \tif (event.key == "w"){ \t\tPressForward = 1; \t} \tif (event.key == "d"){ \t\tPressRight = 1; \t} \tif (event.key == "s"){ \t\tPressBack = 1; \t} \tif (event.keyCode == 32){ \t\tPressUp = 1; \t} });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448  document.addEventListener("keyup", (event) =>{ \tif (event.key == "a"){ \t\tPressLeft = 0; \t} \tif (event.key == "w"){ \t\tPressForward = 0; \t} \tif (event.key == "d"){ \t\tPressRight = 0; \t} \tif (event.key == "s"){ \t\tPressBack = 0; \t} \tif (event.keyCode == 32){ \t\tPressUp = 0; \t} });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438  document.addEventListener("mousemove", (event)=>{ \tMouseX = event.movementX; \tMouseY = event.movementY; });  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442  var pawn = new player(0,-900,0,0,0);  function update(){ \t \t\/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \t \tdx =   ((PressRight - PressLeft)*Math.cos(pawn.ry*deg) - (PressForward - PressBack)*Math.sin(pawn.ry*deg))*pawn.vx; \tdz = ( -(PressForward - PressBack)*Math.cos(pawn.ry*deg) - (PressRight - PressLeft)*Math.sin(pawn.ry*deg))*pawn.vz; \tdy = dy + g; \tif (onGround){ \t\tdy = 0; \t\tif (PressUp){ \t\t\tdy = - PressUp*pawn.vy; \t\t\tonGround = false; \t\t} \t}; \tdrx = MouseY; \tdry = - MouseX; \t \t\/\/ \u041e\u0431\u043d\u0443\u043b\u0438\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438: \t \tMouseX = MouseY = 0; \t \t\/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u044e \u0441 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438 \t \tcollision(); \t \t\/\/ \u041f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \t \tpawn.x = pawn.x + dx; \tpawn.y = pawn.y + dy; \tpawn.z = pawn.z + dz; \t \t\/\/ \u0415\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0437\u0430\u0445\u0432\u0430\u0447\u0435\u043d, \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \t \tif (lock){ \t\tpawn.rx = pawn.rx + drx; \t\tpawn.ry = pawn.ry + dry; \t};  \t\/\/ \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u0438\u0440\u0430 (\u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f) \t \tworld.style.transform =  \t"translateZ(" + (600 - 0) + "px)" + \t"rotateX(" + (-pawn.rx) + "deg)" + \t"rotateY(" + (-pawn.ry) + "deg)" + \t"translate3d(" + (-pawn.x) + "px," + (-pawn.y) + "px," + (-pawn.z) + "px)"; \t };  function CreateNewWorld(){ \tfor (let i = 0; i < map.length; i++){ \t\t \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438 \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u0435 \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \t\t \t\tlet newElement = document.createElement("div"); \t\tnewElement.className = "square"; \t\tnewElement.id = "square" + i; \t\tnewElement.style.width = map[i][6] + "px"; \t\tnewElement.style.height = map[i][7] + "px"; \t\tnewElement.style.background = map[i][8]; \t\tnewElement.style.transform = "translate3d(" + \t\t(600 - map[i][6]\/2 + map[i][0]) + "px," + \t\t(400 - map[i][7]\/2 + map[i][1]) + "px," + \t\t(map[i][2]) + "px)" + \t\t"rotateX(" + map[i][3] + "deg)" + \t\t"rotateY(" + map[i][4] + "deg)" + \t\t"rotateZ(" + map[i][5] + "deg)"; \t\t \t\t\/\/ \u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 world \t\t \t\tworld.append(newElement); \t} }  function collision(){ \t \tonGround = false; \t \tfor(let i = 0; i < map.length; i++){ \t\t \t\t\/\/ \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \t\t \t\tlet x0 = (pawn.x - map[i][0]); \t\tlet y0 = (pawn.y - map[i][1]); \t\tlet z0 = (pawn.z - map[i][2]); \t\t \t\tif ((x0**2 + y0**2 + z0**2 + dx**2 + dy**2 + dz**2) < (map[i][6]**2 + map[i][7]**2)){ \t\t \t\t\tlet x1 = x0 + dx; \t\t\tlet y1 = y0 + dy; \t\t\tlet z1 = z0 + dz; \t\t \t\t\tlet point0 = coorTransform(x0,y0,z0,map[i][3],map[i][4],map[i][5]); \t\t\tlet point1 = coorTransform(x1,y1,z1,map[i][3],map[i][4],map[i][5]); \t\t\tlet normal = coorReTransform(0,0,1,map[i][3],map[i][4],map[i][5]); \t\t \t\t\t\/\/ \u0423\u0441\u043b\u043e\u0432\u0438\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438 \u043d\u0435\u043c \t\t \t\t\tif (Math.abs(point1[0])<(map[i][6]+98)\/2 && Math.abs(point1[1])<(map[i][7]+98)\/2 && Math.abs(point1[2]) < 50){ \t\t\t\tpoint1[2] = Math.sign(point0[2])*50; \t\t\t\tlet point2 = coorReTransform(point1[0],point1[1],point1[2],map[i][3],map[i][4],map[i][5]); \t\t\t\tlet point3 = coorReTransform(point1[0],point1[1],0,map[i][3],map[i][4],map[i][5]); \t\t\t\tdx = point2[0] - x0; \t\t\t\tdy = point2[1] - y0; \t\t\t\tdz = point2[2] - z0; \t\t\t\tif (Math.abs(normal[1]) > 0.8){ \t\t\t\t\tif (point3[1] > point2[1]) onGround = true; \t\t\t\t} \t\t\t\telse dy = y1 - y0; \t\t\t} \t\t\t \t\t} \t}; }  function coorTransform(x0,y0,z0,rxc,ryc,rzc){ \tlet x1 =  x0; \tlet y1 =  y0*Math.cos(rxc*deg) + z0*Math.sin(rxc*deg); \tlet z1 = -y0*Math.sin(rxc*deg) + z0*Math.cos(rxc*deg); \tlet x2 =  x1*Math.cos(ryc*deg) - z1*Math.sin(ryc*deg); \tlet y2 =  y1; \tlet z2 =  x1*Math.sin(ryc*deg) + z1*Math.cos(ryc*deg); \tlet x3 =  x2*Math.cos(rzc*deg) + y2*Math.sin(rzc*deg);  \tlet y3 = -x2*Math.sin(rzc*deg) + y2*Math.cos(rzc*deg); \tlet z3 =  z2; \treturn [x3,y3,z3]; }  function coorReTransform(x3,y3,z3,rxc,ryc,rzc){ \tlet x2 =  x3*Math.cos(rzc*deg) - y3*Math.sin(rzc*deg); \tlet y2 =  x3*Math.sin(rzc*deg) + y3*Math.cos(rzc*deg); \tlet z2 =  z3 \tlet x1 =  x2*Math.cos(ryc*deg) + z2*Math.sin(ryc*deg); \tlet y1 =  y2; \tlet z1 = -x2*Math.sin(ryc*deg) + z2*Math.cos(ryc*deg); \tlet x0 =  x1; \tlet y0 =  y1*Math.cos(rxc*deg) - z1*Math.sin(rxc*deg); \tlet z0 =  y1*Math.sin(rxc*deg) + z1*Math.cos(rxc*deg); \treturn [x0,y0,z0]; }  CreateNewWorld(); TimerGame = setInterval(update,10); <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
2. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u043d\u044e <\/h3>\n
  \u041c\u0435\u043d\u044e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0432\u0438\u0434\u0435 html-\u043f\u0430\u043d\u0435\u043b\u0435\u0439 \u0438 html-\u0431\u043b\u043e\u043a\u043e\u0432. \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0443 \u0432\u0441\u0435\u0433\u043e \u043c\u0435\u043d\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c: \u0444\u043e\u043d \u0438 \u0441\u0442\u0438\u043b\u044c \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u043c\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445. \u0418\u0442\u0430\u043a, \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0442\u0440\u0438 \u043f\u0430\u043d\u0435\u043b\u0438 \u043c\u0435\u043d\u044e: \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0438 \u0432\u044b\u0432\u043e\u0434 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044e \u0438\u0433\u0440\u044b. \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u043d\u044e, \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u043c\u0438\u0440 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 javascript. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0433\u0440\u043e\u043c\u043e\u0436\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b script.js, \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u043d\u044e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b menu.js, \u0430 \u0432 index.html \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0435\u0433\u043e:<\/p>\n
<script src="menu.js"><\/script> <\/code><\/pre>\n
  \u0412 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c 3 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0430\u043d\u0435\u043b\u044f\u043c\u0438 \u043c\u0435\u043d\u044e:<\/p>\n
<div id="container">     <div id = "world"><\/div>     <div id = "pawn"><\/div>     <div id = "menu1"><\/div>     <div id = "menu2"><\/div>     <div id = "menu3"><\/div> <\/div> <\/code><\/pre>\n
  \u041e\u0444\u043e\u0440\u043c\u0438\u043c \u0438\u0445, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 style.css \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u201cmenu\u201d:<\/p>\n
.menu{ \tdisplay:none; \tposition:absolute; \twidth:inherit; \theight:inherit; \tbackground-color:#C0FFFF; } <\/code><\/pre>\n
  \u0412 \u043c\u0435\u043d\u044e (\u0432 \u0444\u0430\u0439\u043b\u0435 index.html) \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0430\u0434\u043f\u0438\u0441\u044f\u043c\u0438:<\/p>\n
                 <div class = "menu" id = "menu1"> \t\t\t<div id="button1" class="button"> \t\t\t\t<p>\u041d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0443<\/p> \t\t\t<\/div> \t\t\t<div id="button2" class="button"> \t\t\t\t<p>\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/p> \t\t\t<\/div> \t\t<\/div> \t\t<div class = "menu" id = "menu2"> \t\t\t<p style="font-size:30px; top:200px"> \t\t\t\t<strong>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435:<\/strong> <br> \t\t\t\tw - \u0432\u043f\u0435\u0440\u0435\u0434 <br> \t\t\t\ts - \u043d\u0430\u0437\u0430\u0434 <br> \t\t\t\td - \u0432\u043f\u0440\u0430\u0432\u043e <br> \t\t\t\ta - \u0432\u043b\u0435\u0432\u043e <br> \t\t\t\t\u043f\u0440\u043e\u0431\u0435\u043b - \u043f\u0440\u044b\u0436\u043e\u043a <br> \t\t\t\t!!! \u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0443\u044e \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443 !!!<br> \t\t\t\t<strong>\u0417\u0430\u0434\u0430\u0447\u0430:<\/strong> <br> \t\t\t\t\u0412\u0437\u044f\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0438 \u043d\u0430\u0439\u0442\u0438 \u0433\u043e\u043b\u0443\u0431\u043e\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \t\t\t<\/p> \t\t\t<div id="button3" class="button"> \t\t\t\t<p>\u041d\u0430\u0437\u0430\u0434<\/p> \t\t\t<\/div> \t\t<\/div> \t\t<div class = "menu" id = "menu3"> \t\t\t<p id = "result" style="top:100px"><\/p> \t\t\t<div id="button4" class="button"> \t\t\t\t<p>\u0412\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430\u0437\u0430\u0434<\/p> \t\t\t<\/div> \t\t<\/div> <\/code><\/pre>\n
  \u0414\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0442\u043e\u0436\u0435 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0432 style.css:<\/p>\n
.button{ \tmargin:0px; \tposition:absolute; \twidth:900px; \theight:250px; \tbackground-color:#FFF; \tcursor:pointer; } .button:hover{ \tbackground-color:#DDD; }  #button1{ \ttop:100px; \tleft:150px; } #button2{ \ttop:450px; \tleft:150px; } #button3{ \ttop:450px; \tleft:150px; } #button4{ \ttop:450px; \tleft:150px; } <\/code><\/pre>\n
  \u041d\u043e \u043c\u044b \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u043c\u0435\u043d\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0438\u0445 \u0437\u0430\u0434\u0430\u043d \u0441\u0442\u0438\u043b\u044c display:none, \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0436\u0435 \u0438\u0433\u0440\u044b \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u0435\u043d\u044e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 html \u0434\u043b\u044f 1-\u0433\u043e \u043c\u0435\u043d\u044e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u043f\u0438\u0441\u044c style = \u201cdisplay:block;\u201d, \u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
<div class = "menu" id = "menu1" style = "display:block;"> <\/code><\/pre>\n
  \u041c\u0435\u043d\u044e \u0441\u0442\u0430\u043b\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n
  <\/p>\n
  \u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0436\u043c\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0442\u043e \u043a\u0443\u0440\u0441\u043e\u0440 \u0443 \u043d\u0430\u0441 \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u0441\u044f. \u0417\u043d\u0430\u0447\u0438\u0442 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0437\u0430\u0445\u0432\u0430\u0442 \u043c\u044b\u0448\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0433\u0440\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0432\u0435\u0434\u0435\u043c \u0432 script.js \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e canlock \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0435 \u0432 \u043f\u0443\u043d\u043a\u0442 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n
\/\/ \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  var lock = false; var onGround = false; var container = document.getElementById("container"); var world = document.getElementById("world"); var g = 0.1; var dx = dy = dz = 0; var canlock = false;  \u0410 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043c\u044b\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435:  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438  container.onclick = function(){ \tif (!lock && canlock) container.requestPointerLock(); }; <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0449\u0435\u043b\u043a\u0430\u0442\u044c \u043c\u0435\u043d\u044e. \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b\u0435 menu.js:<\/p>\n
\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  var menu1 = document.getElementById("menu1"); var menu2 = document.getElementById("menu2"); var menu3 = document.getElementById("menu3"); var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var button3 = document.getElementById("button3"); var button4 = document.getElementById("button4");  \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b  button2.onclick = function(){ \tmenu1.style.display = "none"; \tmenu2.style.display = "block"; }  button3.onclick = function(){ \tmenu1.style.display = "block"; \tmenu2.style.display = "none"; }  button4.onclick = function(){ \tmenu1.style.display = "block"; \tmenu3.style.display = "none"; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u0435\u043d\u044e, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u201c\u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0443\u201d, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043d\u043e\u043f\u043a\u0443 button1. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0432 \u0444\u0430\u0439\u043b\u0435 script.js \u0444\u0443\u043d\u043a\u0446\u0438\u0438 CreateNewWorld() \u0438 setInterval() \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0423\u0434\u0430\u043b\u0438\u043c \u0438\u0445 \u043e\u0442\u0442\u0443\u0434\u0430. \u0412\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0431\u0443\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 button1. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e:<\/p>\n
button1.onclick = function(){ \tmenu1.style.display = "none"; \tCreateNewWorld(); \tTimerGame = setInterval(update,10); } <\/code><\/pre>\n
  \u041c\u0435\u043d\u044e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438. \u0414\u0430, \u043e\u043d\u043e \u0435\u0449\u0435 \u043d\u0435\u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0435, \u043d\u043e \u044d\u0442\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n
3. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0443\u0440\u043e\u0432\u043d\u0435\u0439.<\/h3>\n
  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0438\u0433\u0440\u044b. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u0442\u0438\u043f\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432: \u043c\u043e\u043d\u0435\u0442\u044b (\u0436\u0435\u043b\u0442\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b), \u043a\u043b\u044e\u0447\u0438 (\u043a\u0440\u0430\u0441\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b) \u0438 \u0444\u0438\u043d\u0438\u0448 (\u0433\u043e\u043b\u0443\u0431\u043e\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442). \u041c\u043e\u043d\u0435\u0442\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043e\u0447\u043a\u0438. \u0418\u0433\u0440\u043e\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0439\u0442\u0438 \u043a\u043b\u044e\u0447, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0438\u0439\u0442\u0438 \u043a \u0444\u0438\u043d\u0438\u0448\u0443. \u0415\u0441\u043b\u0438 \u043e\u043d \u043f\u0440\u0438\u0434\u0435\u0442 \u043a \u0444\u0438\u043d\u0438\u0448\u0443 \u0431\u0435\u0437 \u043a\u043b\u044e\u0447\u0430, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0439\u0442\u0438 \u043a\u043b\u044e\u0447. \u041f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u043a\u0430\u0440\u0442\u0430. \u0417\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432. \u041d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u041c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u0440\u0442\u044b, \u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438\u0437 CreateNewWorld(). \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0435 CreateSquares(). \u0418\u0442\u0430\u043a, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0444\u0430\u0439\u043b\u0430 script.js \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n
function CreateSquares(squares,string){ \tfor (let i = 0; i < squares.length; i++){ \t\t \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438 \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u0435 \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \t\t \t\tlet newElement = document.createElement("div"); \t\tnewElement.className = string + " square"; \t\tnewElement.id = string + i; \t\tnewElement.style.width = squares[i][6] + "px"; \t\tnewElement.style.height = squares[i][7] + "px"; \t\tnewElement.style.background = squares[i][8]; \t\tnewElement.style.transform = "translate3d(" + \t\t(600 - squares[i][6]\/2 + squares[i][0]) + "px," + \t\t(400 - squares[i][7]\/2 + squares[i][1]) + "px," + \t\t(squares[i][2]) + "px)" + \t\t"rotateX(" + squares[i][3] + "deg)" + \t\t"rotateY(" + squares[i][4] + "deg)" + \t\t"rotateZ(" + squares[i][5] + "deg)"; \t\t \t\t\/\/ \u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 world \t\t \t\tworld.append(newElement); \t} } <\/code><\/pre>\n
  \u0410 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 createNewWorld() \u0438\u0437\u043c\u0435\u043d\u0438\u043c:<\/p>\n
function CreateNewWorld(){ \tCreateSquares(map,\u201dmap\u201d); } <\/code><\/pre>\n
  \u0421\u0442\u0440\u043e\u043a\u0430 \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043c\u044f id. \u0418\u0433\u0440\u0430 \u043f\u043e\u043a\u0430 \u043d\u0438\u0447\u0443\u0442\u044c \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c 3 \u043c\u0430\u0441\u0441\u0438\u0432\u0430: \u043c\u043e\u043d\u0435\u0442\u044b (things), \u043a\u043b\u044e\u0447\u0438 (keys) \u0438 \u0444\u0438\u043d\u0438\u0448 (finish). \u0412\u0441\u0442\u0430\u0432\u0438\u043c \u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043a\u0430\u0440\u0442\u044b:<\/p>\n
var things = [[900,50,-900,0,0,0,50,50,"#FFFF00"], \t\t    [-400,50,900,0,0,0,50,50,"#FFFF00"], \t\t    [-400,50,-300,0,0,0,50,50,"#FFFF00"]]; \t\t\t   var keys = [[-100,50,600,0,0,0,50,50,"#FF0000"]];\t  var start = [[-900,0,-900,0,0]];  var finish = [[-900,50,900,0,0,0,50,50,"#00FFFF"]]; <\/code><\/pre>\n
  \u0410 \u0432 menu.js \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e CreateSquares() \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u201cbutton1\u201d:<\/p>\n
button1.onclick = function(){ \tmenu1.style.display = "none"; \tCreateNewWorld(); \tCreateSquares(things,\u201dthing\u201d); \tCreateSquares(keys,\u201dkey\u201d); \tCreateSquares(finish,\u201dfinish\u201d); \tTimerGame = setInterval(update,10); \tcanlock = true; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432. \u0412 menu.js \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043e\u0442 \u0438\u0433\u0440\u043e\u043a\u0430 \u0434\u043e \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432:<\/p>\n
function interact(objects,string){ \tfor (i = 0; i < objects.length; i++){ \t\tlet r = (objects[i][0] - pawn.x)**2 + (objects[i][1] - pawn.y)**2 + (objects[i][2] - pawn.z)**2; \t\tif(r < (objects[i][7]**2)\/4){ \t\t\tdocument.getElementById(string + i).style.display = "none";                         document.getElementById(string + i).style.transform =  \t\t\t"translate3d(1000000px,1000000px,1000000px)"; \t\t}; \t}; } <\/code><\/pre>\n
  \u0422\u0430\u043a\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e repeatFunction() \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n
function repeatFunction(){ \tupdate(); \tinteract(things,"thing"); \tinteract(keys,"key"); } <\/code><\/pre>\n
  \u0410 \u0435\u0435 \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u044b\u0437\u043e\u0432 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0432 setInterval \u0432\u043d\u0443\u0442\u0440\u0438 button1:<\/p>\n
TimerGame = setInterval(repeatFunction,10); <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043a \u043d\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d\u0438 \u0440\u043e\u0432\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442. \u0410 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0432\u0437\u044f\u0442\u0438\u0438 \u0436\u0435\u043b\u0442\u044b\u0445 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043e\u0432 \u043d\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u043e\u0447\u043a\u0438, \u043f\u0440\u0438 \u0432\u0437\u044f\u0442\u0438\u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0445 \u2013 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0437\u044f\u0442\u044c \u0441\u0438\u043d\u0438\u0439 \u0438 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0438\u0433\u0440\u0443. \u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e interact():<\/p>\n
function interact(objects,string,num){ \tfor (i = 0; i < objects.length; i++){ \t\tlet r = (objects[i][0] - pawn.x)**2 + (objects[i][1] - pawn.y)**2 + (objects[i][2] - pawn.z)**2; \t\tif(r < (objects[i][7]**2)){ \t\t\tdocument.getElementById(string + i).style.display = "none"; \t\t\tobjects[i][0] = 1000000; \t\t\tobjects[i][1] = 1000000; \t\t\tobjects[i][2] = 1000000; \t\t\tdocument.getElementById(string + i).style.transform =  \t\t\t"translate3d(1000000px,1000000px,1000000px)"; \t\t\tnum[0]++; \t\t}; \t}; } <\/code><\/pre>\n
  \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n
function repeatFunction(){ \tupdate(); \tinteract(things,"thing",m); \tinteract(keys,"key",k); }<\/code><\/pre>\n
  \u0410 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0447\u0435\u0442\u044b\u0440\u0435 \u043d\u043e\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n
var m = [0]; var k = [0]; var f = [0]; var score = 0; <\/code><\/pre>\n
  \u0412\u044b \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435? \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 interact() \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0430 \u043d\u0435 \u043f\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e. \u0412 javascript \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e, \u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 interact() \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0442\u043e num \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043f\u0438\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 num \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e k \u0438\u043b\u0438 m. \u0410 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432, \u0442\u043e num \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432 k \u0438\u043b\u0438 m, \u0438 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c num[0], \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f k[0] \u0438 m[0]. \u041c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u043e\u0437\u0434\u0430\u0442\u044c 2 \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u043e\u0434\u043d\u043e\u0439, \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0439.<\/p>\n
  \u0414\u043b\u044f \u0444\u0438\u043d\u0438\u0448\u0430 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n
function finishInteract(){ \tlet r = (finish[0][0] - pawn.x)**2 + (finish[0][1] - pawn.y)**2 + (finish[0][2] - pawn.z)**2; \tif(r < (finish[0][7]**2)){ \t\tif (k[0] == 0){ \t\t\tconsole.log("\u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u043b\u044e\u0447"); \t\t} \t\telse{ \t\t\tclearWorld();                         clearInterval(TimerGame); \t\t\tdocument.exitPointerLock();                         score = score + m[0]; \t\t\tk[0] = 0;                         m[0] = 0; \t\t\tmenu1.style.display = "block"; \t\t}; \t}; }; <\/code><\/pre>\n
  \u0410 clearWorld() \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0432 script.js:<\/p>\n
function clearWorld(){ \tworld.innerHTML = ""; } <\/code><\/pre>\n
  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043c\u0438\u0440\u0430 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0412 repeatFunction() \u0434\u043e\u0431\u0430\u0432\u0438\u043c finishInteract():<\/p>\n
function repeatFunction(){ \tupdate(); \tinteract(things,"thing",m); \tinteract(keys,"key",k); \tfinishInteract(); } <\/code><\/pre>\n
  \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 finishInteract()? \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0432\u0437\u044f\u043b\u0438 \u043a\u043b\u044e\u0447 (k[0] == 0), \u0442\u043e \u043f\u043e\u043a\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0415\u0441\u043b\u0438 \u0432\u0437\u044f\u043b\u0438, \u0442\u043e \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f \u043c\u0438\u0440, \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f repeatFunction(), \u043a\u0443\u0440\u0441\u043e\u0440 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u044b\u043c, \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043a\u043b\u044e\u0447\u0435\u0439 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u0442\u0441\u044f, \u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e. \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u0438\u0433\u0440\u0443. \u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0441\u043d\u043e\u0432\u0430 \u043d\u0430 \u0438\u0433\u0440\u0443, \u043c\u044b \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0444\u0438\u043d\u0438\u0448\u0435, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0442. \u0412\u0441\u0435 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0432\u0432\u0435\u043b\u0438 \u043c\u0435\u0441\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043f\u0430\u0443\u043d\u0430 \u0438\u0433\u0440\u043e\u043a\u0430, \u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 button1 \u0442\u043e\u0447\u043a\u0443 \u0441\u043f\u0430\u0443\u043d\u0430 \u0434\u043b\u044f \u0438\u0433\u0440\u043e\u043a\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e, \u043f\u0440\u0438\u0440\u0430\u0432\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430 start[0]:<\/p>\n
button1.onclick = function(){ \tmenu1.style.display = "none"; \tCreateNewWorld(); \tpawn.x = start[0][0]; \tpawn.y = start[0][1]; \tpawn.z = start[0][2]; \tpawn.rx = start[0][3]; \tpawn.rx = start[0][4]; \tCreateSquares(things,"thing"); \tCreateSquares(keys,"key"); \tCreateSquares(finish,"finish"); \tTimerGame = setInterval(repeatFunction,10); \tcanlock = true; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0433\u0440\u043e\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u041d\u043e \u0432\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: \u0430 \u0435\u0441\u043b\u0438 \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0432 \u0438\u0433\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e? \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0432 menu.js:<\/p>\n
\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  var menu1 = document.getElementById("menu1"); var menu2 = document.getElementById("menu2"); var menu3 = document.getElementById("menu3"); var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var button3 = document.getElementById("button3"); var button4 = document.getElementById("button4"); var m = [0]; var k = [0]; var f = [0]; var score = 0; var level = 0; <\/code><\/pre>\n
  \u041f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 map, things, keys, start, finish \u0432\u043d\u0443\u0442\u0440\u0438 script.js \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u044b, \u0441\u043b\u0435\u0433\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435:<\/p>\n
\/\/ 1 \u0443\u0440\u043e\u0432\u0435\u043d\u044c  mapArray[0] = [ \t\t   [0,0,1000,0,180,0,2000,200,"#F0C0FF"], \t\t   [0,0,-1000,0,0,0,2000,200,"#F0C0FF"], \t\t   [1000,0,0,0,-90,0,2000,200,"#F0C0FF"], \t\t   [-1000,0,0,0,90,0,2000,200,"#F0C0FF"], \t\t   [0,0,-300,70,0,0,200,500,"#F000FF"], \t\t   [0,-86,-786,90,0,0,200,500,"#F000FF"], \t\t   [-500,0,-300,20,0,0,200,500,"#00FF00"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ];  thingsArray [0] = [[900,50,-900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,-300,0,0,0,50,50,"#FFFF00"]]; \t\t\t   keysArray [0] = [[-100,50,600,0,0,0,50,50,"#FF0000"]];\t  startArray[0] = [[-900,0,-900,0,0]];  finishArray [0] = [[-900,50,900,0,0,0,50,50,"#00FFFF"]]; <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c 2-\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c:<\/p>\n
\/\/ 2 \u0443\u0440\u043e\u0432\u0435\u043d\u044c  mapArray [1] = [ \t\t   [0,0,1000,0,180,0,2000,200,"#F0C0FF"], \t\t   [0,0,-1000,0,0,0,2000,200,"#F0C0FF"], \t\t   [1000,0,0,0,-90,0,2000,200,"#F0C0FF"], \t\t   [-1000,0,0,0,90,0,2000,200,"#F0C0FF"], \t\t   [0,0,-300,70,0,0,200,500,"#F000FF"], \t\t   [0,-86,-786,90,0,0,200,500,"#F000FF"], \t\t   [-500,0,-300,20,0,0,200,500,"#00FF00"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ];  thingsArray [1] = [[900,50,-900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,-300,0,0,0,50,50,"#FFFF00"]]; \t\t\t   keysArray [1] = [[-100,50,600,0,0,0,50,50,"#FF0000"]];  startArray[1] = [[0,0,0,0,0]];\t  finishArray [1] = [[-900,50,900,0,0,0,50,50,"#00FFFF"]]; <\/code><\/pre>\n
  \u0410 \u0441\u0430\u043c\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u0434 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438:<\/p>\n
\/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0443\u0440\u043e\u0432\u043d\u0435\u0439  var mapArray = new Array(); var thingsArray = new Array(); var keysArray = new Array(); var startArray = new Array(); var finishArray = new Array(); <\/code><\/pre>\n
  \u0444\u0443\u043d\u043a\u0446\u0438\u044e CreateNewWorld() \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442:<\/p>\n
function CreateNewWorld(map){ \tCreateSquares(map,"map"); } <\/code><\/pre>\n
  \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432 CreateNewWorld() \u0432 \u0444\u0430\u0439\u043b\u0435 menu.js:<\/p>\n
button1.onclick = function(){ \tmenu1.style.display = "none"; \tCreateNewWorld(map); \tpawn.x = start[0][0]; \tpawn.y = start[0][1]; \tpawn.z = start[0][2]; \tpawn.rx = start[0][3]; \tpawn.rx = start[0][4]; \tCreateSquares(things,"thing"); \tCreateSquares(keys,"key"); \tCreateSquares(finish,"finish"); \tTimerGame = setInterval(repeatFunction,10); \tcanlock = true; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0432\u044b\u0434\u0430\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0443. \u0412\u0435\u0440\u043d\u043e, \u0432\u0435\u0434\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 map, things, keys \u0438 finish, \u0442\u0435\u043f\u0435\u0440\u044c javascript \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0417\u0430\u043d\u043e\u0432\u043e \u0438\u0445 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0432 script.js:<\/p>\n
\/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0443\u0440\u043e\u0432\u043d\u0435\u0439  var map; var things; var keys; var start; var finish; <\/code><\/pre>\n
  \u0410 \u0432 button1 (\u0432 menu.js) \u044d\u0442\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u043a\u043e\u043f\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 mapArray, thingsArray, keysArray \u0438 finishArray (\u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438):<\/p>\n
button1.onclick = function(){ \t \t\/\/ \u041f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435 \u043a\u043e\u043f\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \t \tmap = userSlice(mapArray[level]); \tthings = userSlice(thingsArray[level]); \tkeys = userSlice(keysArray[level]);         start = userSlice(startArray[level]); \tfinish = userSlice(finishArray[level]);\t  \t\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0438\u0440\u0430 \u0438 \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432 \t \tmenu1.style.display = "none"; \tCreateNewWorld(map); \tpawn.x = start[0][0]; \tpawn.y = start[0][1]; \tpawn.z = start[0][2]; \tpawn.rx = start[0][3]; \tpawn.rx = start[0][4]; \tCreateSquares(things,"thing"); \tCreateSquares(keys,"key"); \tCreateSquares(finish,"finish"); \t \t\/\/ \u0417\u0430\u043f\u0443\u0441\u043a \u0438\u0433\u0440\u044b \t \tTimerGame = setInterval(repeatFunction,10); \tcanlock = true; } <\/code><\/pre>\n
  \u0413\u0434\u0435 userSlice() \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432:<\/p>\n
function userSlice(array){ \tlet NewArray = new Array(); \tfor (let i = 0; i < array.length; i++){ \t\tNewArray[i] = new Array(); \t\tfor (let j = 0; j < array[i].length; j++){ \t\t\tNewArray[i][j] = array[i][j]; \t\t} \t} \treturn NewArray; } <\/code><\/pre>\n
  \u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, keys = keysArray[level], \u0442\u043e \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u044b\u043b\u0438 \u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u043d\u0435 \u043a\u043e\u043f\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043d\u0430 \u043d\u0438\u0445, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u0431\u044b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0433\u0440\u044b, \u0447\u0442\u043e \u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u0438\u0431\u043e \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043a\u043b\u044e\u0447\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0443\u0436\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0431\u044b. \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b \u043f\u0440\u043e\u0441\u0442\u043e keysArray[level].slice(), \u0430 \u0438\u0437\u043e\u0431\u0440\u0435\u043b \u0441\u0432\u043e\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438? \u0412\u0435\u0434\u044c slice() \u0442\u043e\u0436\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u044b. \u042f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0442\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043e\u0434\u043d\u0430\u043a\u043e \u043e\u043d \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432, \u0430 \u043d\u0435 \u0441\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0447\u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 keys \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u043e \u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e keysArray[level], \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u043b\u043e \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0430 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e, \u0447\u0442\u043e \u0432 \u043e\u0434\u043d\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u043d \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043a\u0430\u043a \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0438 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u0438\u0445, \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0436\u0435 \u043e\u043d \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u043b\u0438\u0448\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043d\u0430 \u043d\u0438\u0445. \u041a\u0430\u043a \u043e\u043d \u044d\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0437\u0430\u0433\u0430\u0434\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u043c\u043d\u0435 \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 slice() \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c, \u0442\u043e \u044f \u0431\u0443\u0434\u0443 \u0435\u043c\u0443 \u0441\u0438\u043b\u044c\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u0435\u043d.<\/p>\n
  \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0443\u0440\u043e\u0432\u043d\u0435\u0439. \u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0418\u0437\u043c\u0435\u043d\u0438\u043c finishInteract(), \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432\u043d\u0443\u0442\u0440\u044c else \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n
level++; if(level >= 2){ \tlevel = 0; \tscore = 0; }; <\/code><\/pre>\n
  \u0422\u043e \u0435\u0441\u0442\u044c, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 1, \u0430 \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0443\u0440\u043e\u0432\u043d\u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u044b (\u0443 \u043d\u0430\u0441 \u0438\u0445 2), \u0442\u043e \u0443\u0440\u043e\u0432\u043d\u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u043e\u0447\u043a\u0438 score \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0442\u0440\u0443\u0434\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0438 \u0443\u0440\u043e\u0432\u043d\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0438\u0447\u0435\u043c \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0442\u043e\u0433\u0434\u0430 mapArray[1]:<\/p>\n
mapArray[1] = [ \t\t   [0,0,1000,0,180,0,2000,200,"#00FF00"], \t\t   [0,0,-1000,0,0,0,2000,200,"#00FF00"], \t\t   [1000,0,0,0,-90,0,2000,200,"#00FF00"], \t\t   [-1000,0,0,0,90,0,2000,200,"#00FF00"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ]; <\/code><\/pre>\n
  \u041c\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438 \u0446\u0432\u0435\u0442 \u0441\u0442\u0435\u043d. \u041f\u043e\u0438\u0433\u0440\u0430\u0435\u043c \u0432 \u0438\u0433\u0440\u0443. \u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f (\u0441 \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u044b\u043c\u0438 \u0441\u0442\u0435\u043d\u043a\u0430\u043c\u0438 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438) \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u043c\u0443 (\u0441 \u0437\u0435\u043b\u0435\u043d\u044b\u043c\u0438 \u0441\u0442\u0435\u043d\u043a\u0430\u043c\u0438), \u0430 \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c \u0432\u0442\u043e\u0440\u043e\u0439, \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u043f\u0435\u0440\u0432\u043e\u043c\u0443. \u0418\u0442\u0430\u043a, \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0438\u0433\u0440\u0443, \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0448\u0440\u0438\u0444\u0442\u044b, \u043f\u043e\u0434\u043a\u0440\u0430\u0441\u0438\u0432 \u043c\u0438\u0440, \u0434\u0430 \u0438 \u0443\u0440\u043e\u0432\u043d\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0443\u0442\u044c \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0444\u0430\u0439\u043b\u044b index.html \u0438 style.css \u043c\u044b \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b:<\/p>\n
                         script.js<\/b>                         <\/p>\n
\n
\/\/ \u041c\u0438\u0440\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b  var pi = 3.141592; var deg = pi\/180;  \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 player  function player(x,y,z,rx,ry) { \tthis.x = x; \tthis.y = y; \tthis.z = z; \tthis.rx = rx; \tthis.ry = ry; \tthis.vx = 3; \tthis.vy = 5; \tthis.vz = 3; }  \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0443\u0440\u043e\u0432\u043d\u0435\u0439  var mapArray = new Array(); var thingsArray = new Array(); var keysArray = new Array(); var startArray = new Array(); var finishArray = new Array();  \/\/ 1 \u0443\u0440\u043e\u0432\u0435\u043d\u044c  mapArray[0] = [ \t\t   [0,0,1000,0,180,0,2000,200,"#F0C0FF"], \t\t   [0,0,-1000,0,0,0,2000,200,"#F0C0FF"], \t\t   [1000,0,0,0,-90,0,2000,200,"#F0C0FF"], \t\t   [-1000,0,0,0,90,0,2000,200,"#F0C0FF"], \t\t   [0,0,-300,70,0,0,200,500,"#F000FF"], \t\t   [0,-86,-786,90,0,0,200,500,"#F000FF"], \t\t   [-500,0,-300,20,0,0,200,500,"#00FF00"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ];  thingsArray[0] = [[900,50,-900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,-300,0,0,0,50,50,"#FFFF00"]]; \t\t\t   keysArray[0] = [[-100,50,600,0,0,0,50,50,"#FF0000"]];\t  startArray[0] = [[-900,0,-900,0,0]];  finishArray[0] = [[-900,50,900,0,0,0,50,50,"#00FFFF"]];   \/\/ 2 \u0443\u0440\u043e\u0432\u0435\u043d\u044c  mapArray[1] = [ \t\t   [0,0,1000,0,180,0,2000,200,"#00FF00"], \t\t   [0,0,-1000,0,0,0,2000,200,"#00FF00"], \t\t   [1000,0,0,0,-90,0,2000,200,"#00FF00"], \t\t   [-1000,0,0,0,90,0,2000,200,"#00FF00"], \t\t   [0,100,0,90,0,0,2000,2000,"#666666"] ];  thingsArray[1] = [[900,50,-900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,-300,0,0,0,50,50,"#FFFF00"]]; \t\t\t   keysArray[1] = [[-100,50,600,0,0,0,50,50,"#FF0000"]];\t  startArray[1] = [[0,0,0,0,0]];  finishArray[1] = [[-900,50,900,0,0,0,50,50,"#00FFFF"]];  \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0443\u0440\u043e\u0432\u043d\u0435\u0439  var map = new Array(); var things = new Array(); var keys = new Array(); var start = new Array(); var finish = new Array();  \/\/ \u041d\u0430\u0436\u0430\u0442\u0430 \u043b\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0430 \u0438 \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043c\u044b\u0448\u044c?  var PressBack = 0; var PressForward = 0; var PressLeft = 0; var PressRight = 0; var PressUp = 0; var MouseX = 0; var MouseY = 0;  \/\/ \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  var lock = false; var onGround = false; var container = document.getElementById("container"); var world = document.getElementById("world"); var g = 0.1; var dx = dy = dz = 0; var canlock = false;   \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u0430  document.addEventListener("pointerlockchange", (event)=>{ \tlock = !lock; });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438  container.onclick = function(){ \tif (!lock && canlock) container.requestPointerLock(); };  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448  document.addEventListener("keydown", (event) =>{ \tif (event.key == "a"){ \t\tPressLeft = 1; \t} \tif (event.key == "w"){ \t\tPressForward = 1; \t} \tif (event.key == "d"){ \t\tPressRight = 1; \t} \tif (event.key == "s"){ \t\tPressBack = 1; \t} \tif (event.keyCode == 32){ \t\tPressUp = 1; \t} });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448  document.addEventListener("keyup", (event) =>{ \tif (event.key == "a"){ \t\tPressLeft = 0; \t} \tif (event.key == "w"){ \t\tPressForward = 0; \t} \tif (event.key == "d"){ \t\tPressRight = 0; \t} \tif (event.key == "s"){ \t\tPressBack = 0; \t} \tif (event.keyCode == 32){ \t\tPressUp = 0; \t} });  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438  document.addEventListener("mousemove", (event)=>{ \tMouseX = event.movementX; \tMouseY = event.movementY; });  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442  var pawn = new player(0,0,0,0,0);  function update(){ \t \t\/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \t \tdx =   ((PressRight - PressLeft)*Math.cos(pawn.ry*deg) - (PressForward - PressBack)*Math.sin(pawn.ry*deg))*pawn.vx; \tdz = ( -(PressForward - PressBack)*Math.cos(pawn.ry*deg) - (PressRight - PressLeft)*Math.sin(pawn.ry*deg))*pawn.vz; \tdy = dy + g; \tif (onGround){ \t\tdy = 0; \t\tif (PressUp){ \t\t\tdy = - PressUp*pawn.vy; \t\t\tonGround = false; \t\t} \t}; \tdrx = MouseY; \tdry = - MouseX; \t \t\/\/ \u041e\u0431\u043d\u0443\u043b\u0438\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438: \t \tMouseX = MouseY = 0; \t \t\/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u044e \u0441 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438 \t \tcollision(); \t \t\/\/ \u041f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \t \tpawn.x = pawn.x + dx; \tpawn.y = pawn.y + dy; \tpawn.z = pawn.z + dz; \t \t\/\/ \u0415\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0437\u0430\u0445\u0432\u0430\u0447\u0435\u043d, \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \t \tif (lock){ \t\tpawn.rx = pawn.rx + drx; \t\tpawn.ry = pawn.ry + dry; \t};  \t\/\/ \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u0438\u0440\u0430 (\u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f) \t \tworld.style.transform =  \t"translateZ(" + (600 - 0) + "px)" + \t"rotateX(" + (-pawn.rx) + "deg)" + \t"rotateY(" + (-pawn.ry) + "deg)" + \t"translate3d(" + (-pawn.x) + "px," + (-pawn.y) + "px," + (-pawn.z) + "px)"; \t };  function CreateNewWorld(map){ \tCreateSquares(map,"map"); }  function clearWorld(){ \tworld.innerHTML = ""; }  function collision(){ \t \tonGround = false; \t \tfor(let i = 0; i < map.length; i++){ \t\t \t\t\/\/ \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \t\t \t\tlet x0 = (pawn.x - map[i][0]); \t\tlet y0 = (pawn.y - map[i][1]); \t\tlet z0 = (pawn.z - map[i][2]); \t\t \t\tif ((x0**2 + y0**2 + z0**2 + dx**2 + dy**2 + dz**2) < (map[i][6]**2 + map[i][7]**2)){ \t\t \t\t\tlet x1 = x0 + dx; \t\t\tlet y1 = y0 + dy; \t\t\tlet z1 = z0 + dz; \t\t \t\t\tlet point0 = coorTransform(x0,y0,z0,map[i][3],map[i][4],map[i][5]); \t\t\tlet point1 = coorTransform(x1,y1,z1,map[i][3],map[i][4],map[i][5]); \t\t\tlet normal = coorReTransform(0,0,1,map[i][3],map[i][4],map[i][5]); \t\t \t\t\t\/\/ \u0423\u0441\u043b\u043e\u0432\u0438\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438 \u043d\u0435\u043c \t\t \t\t\tif (Math.abs(point1[0])<(map[i][6]+98)\/2 && Math.abs(point1[1])<(map[i][7]+98)\/2 && Math.abs(point1[2]) < 50){ \t\t\t\tpoint1[2] = Math.sign(point0[2])*50; \t\t\t\tlet point2 = coorReTransform(point1[0],point1[1],point1[2],map[i][3],map[i][4],map[i][5]); \t\t\t\tlet point3 = coorReTransform(point1[0],point1[1],0,map[i][3],map[i][4],map[i][5]); \t\t\t\tdx = point2[0] - x0; \t\t\t\tdy = point2[1] - y0; \t\t\t\tdz = point2[2] - z0; \t\t\t\tif (Math.abs(normal[1]) > 0.8){ \t\t\t\t\tif (point3[1] > point2[1]) onGround = true; \t\t\t\t} \t\t\t\telse dy = y1 - y0; \t\t\t} \t\t\t \t\t} \t}; }  function coorTransform(x0,y0,z0,rxc,ryc,rzc){ \tlet x1 =  x0; \tlet y1 =  y0*Math.cos(rxc*deg) + z0*Math.sin(rxc*deg); \tlet z1 = -y0*Math.sin(rxc*deg) + z0*Math.cos(rxc*deg); \tlet x2 =  x1*Math.cos(ryc*deg) - z1*Math.sin(ryc*deg); \tlet y2 =  y1; \tlet z2 =  x1*Math.sin(ryc*deg) + z1*Math.cos(ryc*deg); \tlet x3 =  x2*Math.cos(rzc*deg) + y2*Math.sin(rzc*deg);  \tlet y3 = -x2*Math.sin(rzc*deg) + y2*Math.cos(rzc*deg); \tlet z3 =  z2; \treturn [x3,y3,z3]; }  function coorReTransform(x3,y3,z3,rxc,ryc,rzc){ \tlet x2 =  x3*Math.cos(rzc*deg) - y3*Math.sin(rzc*deg); \tlet y2 =  x3*Math.sin(rzc*deg) + y3*Math.cos(rzc*deg); \tlet z2 =  z3 \tlet x1 =  x2*Math.cos(ryc*deg) + z2*Math.sin(ryc*deg); \tlet y1 =  y2; \tlet z1 = -x2*Math.sin(ryc*deg) + z2*Math.cos(ryc*deg); \tlet x0 =  x1; \tlet y0 =  y1*Math.cos(rxc*deg) - z1*Math.sin(rxc*deg); \tlet z0 =  y1*Math.sin(rxc*deg) + z1*Math.cos(rxc*deg); \treturn [x0,y0,z0]; };  function CreateSquares(squares,string){ \tfor (let i = 0; i < squares.length; i++){ \t\t \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438 \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u0435 \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \t\t \t\tlet newElement = document.createElement("div"); \t\tnewElement.className = string + " square"; \t\tnewElement.id = string + i; \t\tnewElement.style.width = squares[i][6] + "px"; \t\tnewElement.style.height = squares[i][7] + "px"; \t\tnewElement.style.background = squares[i][8]; \t\tnewElement.style.transform = "translate3d(" + \t\t(600 - squares[i][6]\/2 + squares[i][0]) + "px," + \t\t(400 - squares[i][7]\/2 + squares[i][1]) + "px," + \t\t(squares[i][2]) + "px)" + \t\t"rotateX(" + squares[i][3] + "deg)" + \t\t"rotateY(" + squares[i][4] + "deg)" + \t\t"rotateZ(" + squares[i][5] + "deg)"; \t\t \t\t\/\/ \u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 world \t\t \t\tworld.append(newElement); \t} } <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
                         menu.js<\/b>                         <\/p>\n
\n
\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  var menu1 = document.getElementById("menu1"); var menu2 = document.getElementById("menu2"); var menu3 = document.getElementById("menu3"); var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var button3 = document.getElementById("button3"); var button4 = document.getElementById("button4"); var m = [0]; var k = [0]; var f = [0]; var level = 0;  \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b  button1.onclick = function(){ \t \t\/\/ \u041f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435 \u043a\u043e\u043f\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \t \tmap = userSlice(mapArray[level]); \tthings = userSlice(thingsArray[level]); \tkeys = userSlice(keysArray[level]); \tstart = userSlice(startArray[level]); \tfinish = userSlice(finishArray[level]); \t \t\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0438\u0440\u0430 \u0438 \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432 \t \tmenu1.style.display = "none"; \tCreateNewWorld(map); \tpawn.x = start[0][0]; \tpawn.y = start[0][1]; \tpawn.z = start[0][2]; \tpawn.rx = start[0][3]; \tpawn.rx = start[0][4]; \tCreateSquares(things,"thing"); \tCreateSquares(keys,"key"); \tCreateSquares(finish,"finish"); \t \t\/\/ \u0417\u0430\u043f\u0443\u0441\u043a \u0438\u0433\u0440\u044b \t \tTimerGame = setInterval(repeatFunction,10); \tcanlock = true; }  button2.onclick = function(){ \tmenu1.style.display = "none"; \tmenu2.style.display = "block"; }  button3.onclick = function(){ \tmenu1.style.display = "block"; \tmenu2.style.display = "none"; }  button4.onclick = function(){ \tmenu1.style.display = "block"; \tmenu3.style.display = "none"; }  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f  function interact(objects,string,num){ \tfor (i = 0; i < objects.length; i++){ \t\tlet r = (objects[i][0] - pawn.x)**2 + (objects[i][1] - pawn.y)**2 + (objects[i][2] - pawn.z)**2; \t\tif(r < (objects[i][7]**2)){ \t\t\tdocument.getElementById(string + i).style.display = "none"; \t\t\tobjects[i][0] = 1000000; \t\t\tobjects[i][1] = 1000000; \t\t\tobjects[i][2] = 1000000; \t\t\tdocument.getElementById(string + i).style.transform =  \t\t\t"translate3d(1000000px,1000000px,1000000px)"; \t\t\tnum[0]++; \t\t}; \t}; }  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0444\u0438\u043d\u0438\u0448\u043e\u043c  function finishInteract(){ \tlet r = (finish[0][0] - pawn.x)**2 + (finish[0][1] - pawn.y)**2 + (finish[0][2] - pawn.z)**2; \tif(r < (finish[0][7]**2)){ \t\tif (k[0] == 0){ \t\t\tconsole.log("\u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u043b\u044e\u0447"); \t\t} \t\telse{ \t\t\tclearWorld(); \t\t\tclearInterval(TimerGame); \t\t\tdocument.exitPointerLock(); \t\t\tscore = score + m[0]; \t\t\tk[0] = 0; \t\t\tm[0] = 0; \t\t\tmenu1.style.display = "block"; \t\t\tlevel++; \t\t\tif(level >= 2){ \t\t\t\tlevel = 0; \t\t\t\tscore = 0; \t\t\t}; \t\t}; \t}; };  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0430\u044f\u0441\u044f \u0432 \u0438\u0433\u0440\u0435  function repeatFunction(){ \tupdate(); \tinteract(things,"thing",m); \tinteract(keys,"key",k); \tfinishInteract(); }   \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 slice  function userSlice(array){ \tlet NewArray = new Array(); \tfor (let i = 0; i < array.length; i++){ \t\tNewArray[i] = new Array(); \t\tfor (let j = 0; j < array[i].length; j++){ \t\t\tNewArray[i][j] = array[i][j]; \t\t} \t} \treturn NewArray; } <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  <\/p>\n
4. \u041e\u0444\u043e\u0440\u043c\u0438\u043c \u0438\u0433\u0440\u0443.<\/h3>\n
  <\/p>\n
4.1 \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0443\u0440\u043e\u0432\u043d\u0438<\/h4>\n
  \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u2013 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u0435. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u044d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u0443\u0440\u043e\u0432\u043d\u0435\u0439. \u0423 \u043d\u0430\u0441 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0447\u0438\u0441\u0435\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u0438\u0437 script.js \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0438\u0440. \u041c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0438\u0440\u043e\u0432, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b script.js \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043c \u0442\u0443\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u043e\u0432:<\/p>\n
                         \u041c\u0430\u0441\u0441\u0438\u0432\u044b \u0443\u0440\u043e\u0432\u043d\u0435\u0439<\/b>                         <\/p>\n
\n
\/\/ 1 \u0443\u0440\u043e\u0432\u0435\u043d\u044c  mapArray[0] = [ \t\t   \/\/\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \t\t   [0,0,1000,0,180,0,2000,200,"#F0C0FF"], \t\t   [0,0,-1000,0,0,0,2000,200,"#F0C0FF"], \t\t   [1000,0,0,0,-90,0,2000,200,"#F0C0FF"], \t\t   [-1000,0,0,0,90,0,2000,200,"#F0C0FF"], \t\t   [0,100,0,90,0,0,2000,2000,"#EEEEEE"], \t\t    \t\t   \/\/1 \t\t   [-700,0,-800,0,180,0,600,200,"#F0C0FF"], \t\t   [-700,0,-700,0,0,0,600,200,"#F0C0FF"], \t\t   [-400,0,-750,0,90,0,100,200,"#F0C0FF"], \t\t    \t\t   \/\/2 \t\t   [100,0,-800,0,180,0,600,200,"#F0C0FF"], \t\t   [50,0,-700,0,0,0,500,200,"#F0C0FF"], \t\t   [400,0,-550,0,90,0,500,200,"#F0C0FF"], \t\t   [-200,0,-750,0,-90,0,100,200,"#F0C0FF"], \t\t   [300,0,-500,0,-90,0,400,200,"#F0C0FF"], \t\t   [350,0,-300,0,0,0,100,200,"#F0C0FF"], \t\t    \t\t   \/\/3 \t\t   [700,0,-800,0,180,0,200,200,"#F0C0FF"], \t\t   [700,0,500,0,0,0,200,200,"#F0C0FF"], \t\t   [700,0,-150,0,90,0,1100,200,"#F0C0FF"], \t\t   [600,0,-150,0,-90,0,1300,200,"#F0C0FF"], \t\t   [800,0,-750,0,90,0,100,200,"#F0C0FF"], \t\t   [800,0,450,0,90,0,100,200,"#F0C0FF"], \t\t   [750,0,400,0,180,0,100,200,"#F0C0FF"], \t\t   [750,0,-700,0,0,0,100,200,"#F0C0FF"], \t\t    \t\t   \/\/4 \t\t   [850,0,-100,0,180,0,300,200,"#F0C0FF"], \t\t   [850,0,0,0,0,0,300,200,"#F0C0FF"], \t\t    \t\t   \/\/5 \t\t   [400,0,300,0,90,0,800,200,"#F0C0FF"], \t\t   [300,0,300,0,-90,0,800,200,"#F0C0FF"], \t\t   [350,0,-100,0,180,0,100,200,"#F0C0FF"], \t\t    \t\t   \/\/6 \t\t   [400,0,800,0,0,0,800,200,"#F0C0FF"], \t\t   [450,0,700,0,180,0,700,200,"#F0C0FF"], \t\t   [800,0,750,0,90,0,100,200,"#F0C0FF"], \t\t   [100,0,550,0,90,0,300,200,"#F0C0FF"], \t\t   [0,0,650,0,-90,0,300,200,"#F0C0FF"], \t\t   [-100,0,500,0,0,0,200,200,"#F0C0FF"], \t\t   [-100,0,400,0,180,0,400,200,"#F0C0FF"], \t\t   [-200,0,750,0,90,0,500,200,"#F0C0FF"], \t\t   [-300,0,700,0,-90,0,600,200,"#F0C0FF"], \t\t    \t\t   \/\/7 \t\t   [100,0,-250,0,90,0,900,200,"#F0C0FF"], \t\t   [0,0,-300,0,-90,0,800,200,"#F0C0FF"], \t\t   [-350,0,200,0,0,0,900,200,"#F0C0FF"], \t\t   [-350,0,100,0,180,0,700,200,"#F0C0FF"], \t\t   [-700,0,-50,0,90,0,300,200,"#F0C0FF"], \t\t   [-800,0,0,0,-90,0,400,200,"#F0C0FF"], \t\t   [-750,0,-200,0,180,0,100,200,"#F0C0FF"], \t\t    \t\t   \/\/8 \t\t   [-500,0,600,0,90,0,800,200,"#F0C0FF"], \t\t   [-600,0,600,0,-90,0,800,200,"#F0C0FF"], \t\t    \t\t   \/\/9 \t\t   [-600,0,-500,0,180,0,800,200,"#F0C0FF"], \t\t   [-650,0,-400,0,0,0,700,200,"#F0C0FF"], \t\t   [-200,0,-300,0,90,0,400,200,"#F0C0FF"], \t\t   [-300,0,-300,0,-90,0,200,200,"#F0C0FF"], \t\t   [-350,0,-100,0,0,0,300,200,"#F0C0FF"], \t\t   [-400,0,-200,0,180,0,200,200,"#F0C0FF"], \t\t   [-500,0,-150,0,-90,0,100,200,"#F0C0FF"], \t\t    \t\t   \/\/10 \t\t   [-900,0,500,0,0,0,200,200,"#F0C0FF"], \t\t   [-900,0,400,0,180,0,200,200,"#F0C0FF"], \t\t   [-800,0,450,0,90,0,100,200,"#F0C0FF"] \t\t   ];  thingsArray[0] = [[900,50,-900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,900,0,0,0,50,50,"#FFFF00"], \t\t\t  [-400,50,-300,0,0,0,50,50,"#FFFF00"]]; \t\t\t   keysArray[0] = [[-100,50,600,0,0,0,50,50,"#FF0000"]];\t  startArray[0] = [[-900,0,-900,0,0]];  finishArray[0] = [[-900,50,900,0,0,0,50,50,"#00FFFF"]];  \/\/ 2 \u0443\u0440\u043e\u0432\u0435\u043d\u044c  mapArray[1] = [ \t\t   \/\/\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \t\t   [0,0,1200,0,180,0,2400,200,"#C0FFE0"], \t\t   [0,0,-1200,0,0,0,2400,200,"#C0FFE0"], \t\t   [1200,0,0,0,-90,0,2400,200,"#C0FFE0"], \t\t   [-1200,0,0,0,90,0,2400,200,"#C0FFE0"], \t\t   [0,100,0,90,0,0,2400,2400,"#EEEEEE"], \t\t    \t\t   \/\/1 \t\t   [1100,0,-800,0,180,0,200,200,"#C0FFE0"], \t\t   [1000,0,-900,0,90,0,200,200,"#C0FFE0"], \t\t   [850,0,-1000,0,180,0,300,200,"#C0FFE0"], \t\t   [700,0,-950,0,-90,0,100,200,"#C0FFE0"], \t\t   [800,0,-900,0,0,0,200,200,"#C0FFE0"], \t\t   [900,0,-700,0,-90,0,400,200,"#C0FFE0"], \t\t   [750,0,-500,0,180,0,300,200,"#C0FFE0"], \t\t   [600,0,-450,0,-90,0,100,200,"#C0FFE0"], \t\t   [800,0,-400,0,0,0,400,200,"#C0FFE0"], \t\t   [1000,0,-550,0,90,0,300,200,"#C0FFE0"], \t\t   [1100,0,-700,0,0,0,200,200,"#C0FFE0"], \t\t    \t\t   \/\/2 \t\t   [800,0,-200,0,180,0,800,200,"#C0FFE0"], \t\t   [400,0,-300,0,90,0,200,200,"#C0FFE0"], \t\t   [300,0,-400,0,180,0,200,200,"#C0FFE0"], \t\t   [200,0,-700,0,90,0,600,200,"#C0FFE0"], \t\t   [50,0,-1000,0,180,0,300,200,"#C0FFE0"], \t\t   [-100,0,-950,0,-90,0,100,200,"#C0FFE0"], \t\t   [0,0,-900,0,0,0,200,200,"#C0FFE0"], \t\t   [100,0,-600,0,-90,0,600,200,"#C0FFE0"], \t\t   [200,0,-300,0,0,0,200,200,"#C0FFE0"], \t\t   [300,0,-200,0,-90,0,200,200,"#C0FFE0"], \t\t   [750,0,-100,0,0,0,900,200,"#C0FFE0"], \t\t    \t\t   \/\/3 \t\t   [500,0,-950,0,90,0,500,200,"#C0FFE0"], \t\t   [450,0,-700,0,0,0,100,200,"#C0FFE0"], \t\t   [400,0,-950,0,-90,0,500,200,"#C0FFE0"], \t\t    \t\t   \/\/4 \t\t   [-700,0,-600,0,0,0,1000,200,"#C0FFE0"], \t\t   [-200,0,-500,0,-90,0,200,200,"#C0FFE0"], \t\t   [-300,0,-400,0,180,0,200,200,"#C0FFE0"], \t\t   [-400,0,-250,0,-90,0,300,200,"#C0FFE0"], \t\t   [-350,0,-100,0,0,0,100,200,"#C0FFE0"], \t\t   [-300,0,-200,0,90,0,200,200,"#C0FFE0"], \t\t   [-200,0,-300,0,0,0,200,200,"#C0FFE0"], \t\t   [-100,0,-500,0,90,0,400,200,"#C0FFE0"], \t\t   [-650,0,-700,0,180,0,1100,200,"#C0FFE0"], \t\t    \t\t   \/\/5 \t\t   [-300,0,-850,0,90,0,300,200,"#C0FFE0"], \t\t   [-350,0,-1000,0,180,0,100,200,"#C0FFE0"], \t\t   [-400,0,-850,0,-90,0,300,200,"#C0FFE0"], \t\t    \t\t   \/\/6 \t\t   [-600,0,-1050,0,90,0,300,200,"#C0FFE0"], \t\t   [-650,0,-900,0,0,0,100,200,"#C0FFE0"], \t\t   [-700,0,-1050,0,-90,0,300,200,"#C0FFE0"], \t\t    \t\t   \/\/7 \t\t   [-900,0,-850,0,90,0,300,200,"#C0FFE0"], \t\t   [-950,0,-1000,0,180,0,100,200,"#C0FFE0"], \t\t   [-1000,0,-850,0,-90,0,300,200,"#C0FFE0"], \t\t    \t\t   \/\/8 \t\t   [-600,0,-250,0,90,0,700,200,"#C0FFE0"], \t\t   [-650,0,100,0,0,0,100,200,"#C0FFE0"], \t\t   [-700,0,-250,0,-90,0,700,200,"#C0FFE0"], \t\t    \t\t   \/\/9 \t\t   [-900,0,-150,0,90,0,900,200,"#C0FFE0"], \t\t   [-500,0,300,0,180,0,800,200,"#C0FFE0"], \t\t   [-100,0,650,0,90,0,700,200,"#C0FFE0"], \t\t   [-300,0,1000,0,0,0,400,200,"#C0FFE0"], \t\t   [-500,0,950,0,-90,0,100,200,"#C0FFE0"], \t\t   [-350,0,900,0,180,0,300,200,"#C0FFE0"], \t\t   [-200,0,650,0,-90,0,500,200,"#C0FFE0"], \t\t   [-600,0,400,0,0,0,800,200,"#C0FFE0"], \t\t   [-1000,0,-100,0,-90,0,1000,200,"#C0FFE0"], \t\t    \t\t   \/\/10 \t\t   [-300,0,200,0,90,0,200,200,"#C0FFE0"], \t\t   [-350,0,100,0,180,0,100,200,"#C0FFE0"], \t\t   [-400,0,200,0,-90,0,200,200,"#C0FFE0"], \t\t    \t\t   \/\/11 \t\t   [-800,0,600,0,180,0,800,200,"#C0FFE0"], \t\t   [-400,0,650,0,90,0,100,200,"#C0FFE0"], \t\t   [-800,0,700,0,0,0,800,200,"#C0FFE0"], \t\t    \t\t   \/\/12 \t\t   [-700,0,1050,0,90,0,300,200,"#C0FFE0"], \t\t   [-850,0,900,0,180,0,300,200,"#C0FFE0"], \t\t   [-1000,0,950,0,-90,0,100,200,"#C0FFE0"], \t\t   [-900,0,1000,0,0,0,200,200,"#C0FFE0"], \t\t   [-800,0,1100,0,-90,0,200,200,"#C0FFE0"], \t\t    \t\t   \/\/13 \t\t   [1050,0,700,0,180,0,300,200,"#C0FFE0"], \t\t   [900,0,800,0,-90,0,200,200,"#C0FFE0"], \t\t   [550,0,900,0,180,0,700,200,"#C0FFE0"], \t\t   [200,0,650,0,90,0,500,200,"#C0FFE0"], \t\t   [300,0,400,0,0,0,200,200,"#C0FFE0"], \t\t   [400,0,300,0,90,0,200,200,"#C0FFE0"], \t\t   [550,0,200,0,0,0,300,200,"#C0FFE0"], \t\t   [700,0,150,0,90,0,100,200,"#C0FFE0"], \t\t   [500,0,100,0,180,0,400,200,"#C0FFE0"], \t\t   [300,0,200,0,-90,0,200,200,"#C0FFE0"], \t\t   [200,0,300,0,180,0,200,200,"#C0FFE0"], \t\t   [100,0,650,0,-90,0,700,200,"#C0FFE0"], \t\t   [550,0,1000,0,0,0,900,200,"#C0FFE0"], \t\t   [1000,0,900,0,90,0,200,200,"#C0FFE0"], \t\t   [1100,0,800,0,0,0,200,200,"#C0FFE0"], \t\t    \t\t   \/\/14 \t\t   [700,0,700,0,90,0,400,200,"#C0FFE0"], \t\t   [850,0,500,0,0,0,300,200,"#C0FFE0"], \t\t   [1000,0,300,0,90,0,400,200,"#C0FFE0"], \t\t   [950,0,100,0,180,0,100,200,"#C0FFE0"], \t\t   [900,0,250,0,-90,0,300,200,"#C0FFE0"], \t\t   [750,0,400,0,180,0,300,200,"#C0FFE0"], \t\t   [600,0,650,0,-90,0,500,200,"#C0FFE0"], \t\t    \t\t   \/\/15 \t\t   [500,0,600,0,180,0,200,200,"#C0FFE0"], \t\t   [400,0,650,0,-90,0,100,200,"#C0FFE0"], \t\t   [500,0,700,0,0,0,200,200,"#C0FFE0"] \t\t   ];  thingsArray[1] = [[1100,50,900,0,0,0,50,50,"#FFFF00"], \t\t\t  [500,50,800,0,0,0,50,50,"#FFFF00"], \t\t\t  [-800,50,-500,0,0,0,50,50,"#FFFF00"], \t\t\t  [-900,50,1100,0,0,0,50,50,"#FFFF00"], \t\t\t  [-1100,50,-800,0,0,0,50,50,"#FFFF00"] \t\t\t  ]; \t\t\t   keysArray[1] = [[1100,50,-900,0,0,0,50,50,"#FF0000"]];\t  startArray[1] = [[0,0,0,0,0]];  finishArray[1] = [[-1100,50,-500,0,0,0,50,50,"#00FFFF"]]; <\/code><\/pre>\n
  <\/div>\n<\/p><\/div>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0432 \u0438\u0433\u0440\u0443. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443\u0440\u043e\u0432\u043d\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n
  <\/p>\n
  \u041e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u043c \u043c\u0438\u0440\u0435 \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e. \u041f\u043b\u044e\u0441 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0435\u043d\u043e\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0431\u0430\u0433\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430 \u0443\u0433\u043b\u0430\u0445 \u0441\u0442\u0435\u043d\u043e\u043a \u0438\u0433\u0440\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0441\u0442\u0440\u044f\u0442\u044c. \u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0432 collision(), \u0437\u0430\u043c\u0435\u043d\u0438\u0432 \u0447\u0438\u0441\u043b\u0430 98 \u043d\u0430 90:<\/p>\n
\/\/ \u0423\u0441\u043b\u043e\u0432\u0438\u0435 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438 \u043d\u0435\u043c \t\t \t\t\tif (Math.abs(point1[0])<(map[i][6]+90)\/2 && Math.abs(point1[1])<(map[i][7]+90)\/2 && Math.abs(point1[2]) < 50){ <\/code><\/pre>\n
  <\/p>\n
4.2 \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435<\/h4>\n
  \u0427\u0442\u043e\u0431\u044b \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0449\u0435, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0435 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 (\u0431\u0435\u0437 \u0442\u0435\u043d\u0435\u0439). \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0435\u043a\u0442\u043e\u0440 \u0441\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0441\u0432\u0435\u0442\u0430:<\/p>\n
var sun = [0.48,0.8,0.36]; <\/code><\/pre>\n
  \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c? \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043e\u043a:<\/p>\n
  <\/p>\n
  \u0415\u0441\u043b\u0438 \u0432\u0435\u043a\u0442\u043e\u0440 sun \u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0432\u0435\u043a\u0442\u043e\u0440\u0443 n, \u0442\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e. \u0418\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0443\u0433\u043b\u0430 \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0441\u0432\u0435\u0442\u0430 \u043d\u0430 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043b\u0443\u0447 \u0441\u0432\u0435\u0442\u0430 \u043f\u0430\u0434\u0430\u0435\u0442 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0439 \u0435\u0433\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0442\u043e \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u043d\u0435 \u043e\u0441\u0432\u0435\u0449\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0443\u0433\u043e\u043b \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043a\u0430\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f n*sun: \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0442\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044f \u0441\u043a\u0430\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u0430 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0442\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442. \u041e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u0438\u0440\u0430, \u0442\u043e \u0435\u0441\u0442\u044c, \u0432 CreateNewWorld(). \u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f CreateSquare(), \u0442\u043e \u0438 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0430\u043c. \u041d\u043e \u043e\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043c\u0438\u0440\u0443, \u043d\u043e \u043d\u0435 \u043a \u0432\u0435\u0449\u0430\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0443\u0434\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0434\u0430 \u0438 \u0441\u0430\u043c CreateSquare() \u0438\u0437\u043c\u0435\u043d\u0438\u043c:<\/p>\n
function CreateSquares(squares,string,havelight){ \tfor (let i = 0; i < squares.length; i++){ \t\t \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438 \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u0435 \u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \t\t \t\tlet newElement = document.createElement("div"); \t\tnewElement.className = string + " square"; \t\tnewElement.id = string + i; \t\tnewElement.style.width = squares[i][6] + "px"; \t\tnewElement.style.height = squares[i][7] + "px"; \t\tif (havelight){ \t\t\tlet normal = coorReTransform(0,0,1,squares[i][3],squares[i][4],squares[i][5]); \t\t\tlet light = -(normal[0]*sun[0] + normal[1]*sun[1] + normal[2]*sun[2]); \t\t\tif (light < 0){ \t\t\t\tlight = 0; \t\t\t}; \t\t\tnewElement.style.background = "linear-gradient(rgba(0,0,0," + (0.2 - light*0.2) + "),rgba(0,0,0," + (0.2 - light*0.2) + ")), " +  squares[i][8]; \t\t} \t\telse{ \t\t\tnewElement.style.background = squares[i][8]; \t\t} \t\tnewElement.style.transform = "translate3d(" + \t\t(600 - squares[i][6]\/2 + squares[i][0]) + "px," + \t\t(400 - squares[i][7]\/2 + squares[i][1]) + "px," + \t\t(squares[i][2]) + "px)" + \t\t"rotateX(" + squares[i][3] + "deg)" + \t\t"rotateY(" + squares[i][4] + "deg)" + \t\t"rotateZ(" + squares[i][5] + "deg)"; \t\t \t\t\/\/ \u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 world \t\t \t\tworld.append(newElement); \t} } <\/code><\/pre>\n
  \u0412\u043a\u043b\u044e\u0447\u0438\u043c \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u0438\u0440\u0430 \u0432 CreateNewWorld():<\/p>\n
function CreateNewWorld(map){ \tCreateSquares(map,"map",true); } <\/code><\/pre>\n
  \u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432 \u0432 button1.onclick (\u0432 CreateSquares \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0434\u043b\u044f \u043d\u0438\u0445 \u2014 false):<\/p>\n
\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0438\u0440\u0430 \u0438 \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432 \t \tmenu1.style.display = "none"; \tCreateNewWorld(map); \tpawn.x = start[0][0]; \tpawn.y = start[0][1]; \tpawn.z = start[0][2]; \tpawn.rx = start[0][3]; \tpawn.rx = start[0][4]; \tCreateSquares(things,"thing",false); \tCreateSquares(keys,"key",false); \tCreateSquares(finish,"finish",false); <\/code><\/pre>\n
  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0438\u0433\u0440\u0443 \u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043b\u043e \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u043c, \u0430 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435:<\/p>\n
  <\/p>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0433\u043e\u043b\u0443\u0431\u043e\u0435 \u043d\u0435\u0431\u043e. \u0417\u0430\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u043d \u0434\u043b\u044f #container \u0432 style.css:<\/p>\n
background-color:#C0FFFF; <\/code><\/pre>\n
  \u041d\u0435\u0431\u043e \u0441\u0442\u0430\u043b\u043e \u0433\u043e\u043b\u0443\u0431\u044b\u043c:<\/p>\n
  <\/p>\n
  \u041c\u044b \u043e\u0444\u043e\u0440\u043c\u0438\u043b\u0438 \u0443\u0440\u043e\u0432\u043d\u0438. \u041d\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b, \u0430 \u0438\u0433\u0440\u043e\u043a\u0443 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c.<\/p>\n
4.3 \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438 \u0441\u0432\u0435\u0442 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u0430\u043c<\/h4>\n
  \u0412 menu.js \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f:<\/p>\n
function rotate(objects,string,wy){ \tfor (i = 0; i < objects.length; i++){ \t\tobjects[i][4] = objects[i][4] + wy; \t\tdocument.getElementById(string + i).style.transform = "translate3d(" + \t\t(600 - objects[i][6]\/2 + objects[i][0]) + "px," + \t\t(400 - objects[i][7]\/2 + objects[i][1]) + "px," + \t\t(objects[i][2]) + "px)" + \t\t"rotateX(" + objects[i][3] + "deg)" + \t\t"rotateY(" + objects[i][4] + "deg)" + \t\t"rotateZ(" + objects[i][5] + "deg)"; \t}; } <\/code><\/pre>\n
  \u0410 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0437 repeatFunction():<\/p>\n
function repeatFunction(){ \tupdate(); \tinteract(things,"thing",m); \tinteract(keys,"key",k); \trotate(things,"thing",0.5); \trotate(keys,"key",0.5); \trotate(finish,"finish",0.5);         finishInteract(); } <\/code><\/pre>\n
  \u041f\u0440\u0430\u0432\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e rotate \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432, \u043d\u043e \u0438 \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f. \u0418\u0442\u0430\u043a, \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u0438 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0441\u0432\u0435\u0442\u044f\u0449\u0438\u043c\u0438\u0441\u044f, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0443\u043f\u0435\u0440. \u0417\u0430\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f \u043d\u0438\u0445 \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0432 style.css:<\/p>\n
.thing{ \tbox-shadow: 0 0 10px #FFFF00; } .key{ \tbox-shadow: 0 0 10px #FF0000; } .finish{ \tbox-shadow: 0 0 10px #00FFFF; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0433\u0440\u043e\u043a \u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u0441 \u044d\u0442\u0438\u043c\u0438 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c.<\/p>\n
4.4 \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u044b<\/h4>\n
  \u041e\u0431\u044b\u0447\u043d\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u043a\u043e\u0432, \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0447\u0438\u0441\u043b\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0423 \u043d\u0430\u0441 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u043d\u0435\u0442 (\u0436\u0435\u043b\u0442\u044b\u0445 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043e\u0432) \u0438 \u043a\u043b\u044e\u0447\u0435\u0439 (\u043a\u0440\u0430\u0441\u043d\u044b\u0445 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043e\u0432), \u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0437 javascript. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 html \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:<\/p>\n
<div id="container"> \t\t<div id="world"><\/div> \t\t<div id="pawn"><\/div> \t\t<div class = "widget" id = "widget1"><\/div> \t\t<div class = "widget" id = "widget2"><\/div>                 <div class = "widget" id = "widget3"><\/div> \t\t\u2026 <\/code><\/pre>\n
  \u0412 menu.js \u043f\u0440\u0438\u0432\u044f\u0436\u0435\u043c \u043a \u043d\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n
var widget1 = document.getElementById("widget1"); var widget2 = document.getElementById("widget2"); var widget3 = document.getElementById("widget3"); <\/code><\/pre>\n
  \u0410 \u0432\u043d\u0443\u0442\u0440\u0438 button1.onclick() \u043a \u043d\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u043a\u0441\u0442:<\/p>\n
widget1.innerHTML = "<p style='font-size:30px'>\u041c\u043e\u043d\u0435\u0442\u044b: 0 \u0438\u0437 0" <\/p>"; widget2.innerHTML = "<p style='font-size:30px'>\u041a\u043b\u044e\u0447\u0438:0<\/p>"; widget3.innerHTML = "<p style='font-size:40px'>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442!<\/p>"; <\/code><\/pre>\n
  \u0417\u0430\u0434\u0430\u0434\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0438\u0445 \u0432 style.css():<\/p>\n
\/* \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 *\/  .widget{ \tdisplay:none; \tposition:absolute; \tbackground-color:#FFF; \topacity:0.8; \tz-index:300; } #widget1{ \ttop:0px; \tleft:0px; \twidth:300px; \theight:100px; } #widget2{ \ttop:0px; \tright:0px; \twidth:300px; \theight:100px; } #widget3{ \tbottom:0px; \tleft:0px; \twidth:500px; \theight:200px; } <\/code><\/pre>\n
  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u043d\u0438 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438 \u043f\u0435\u0440\u0432\u044b\u0435 2 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u0432\u043d\u0443\u0442\u0440\u0438 button1.onclick:<\/p>\n
       \/\/ \u0412\u044b\u0432\u043e\u0434 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0438 \u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \t \twidget1.style.display = "block"; \twidget2.style.display = "block"; \twidget1.innerHTML = "<p style='font-size:30px'>\u041c\u043e\u043d\u0435\u0442\u044b: 0 \u0438\u0437 " + things.length + " <\/p>"; \twidget2.innerHTML = "<p style='font-size:30px'>\u041a\u043b\u044e\u0447\u0438:0<\/p>"; \twidget3.innerHTML = "<p style='font-size:40px'>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442!<\/p>"; <\/code><\/pre>\n
  \u0412\u0438\u0434\u0436\u0435\u0442\u044b \u0435\u0441\u0442\u044c, \u043d\u043e \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u0430\u043c\u0438 \u0435\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0411\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u0434\u043f\u0438\u0441\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 interact (\u0432\u043d\u0443\u0442\u0440\u0438 if(r < (objects[i][7]**2)){\u2026}):<\/p>\n
\t\t\twidget1.innerHTML = "<p style='font-size:30px'>\u041c\u043e\u043d\u0435\u0442\u044b: " + m[0] + " \u0438\u0437 " + things.length + " <\/p>"; \t\t\twidget2.innerHTML = "<p style='font-size:30px'>\u041a\u043b\u044e\u0447\u0438: " + k[0] + "<\/p>"; <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0432\u0437\u044f\u0442\u0438\u0438 \u043c\u043e\u043d\u0435\u0442 \u0438 \u043a\u043b\u044e\u0447\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u0445 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u041d\u043e \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0438\u0433\u0440\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u0421\u043a\u0440\u043e\u0438\u043c \u0438\u0445 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0438\u0433\u0440\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 finishInteract() \u0432\u043d\u0443\u0442\u0440\u044c else \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n
  widget1.style.display = \u00abnone\u00bb;
  widget2.style.display = \u00abnone\u00bb;
  widget3.style.display = \u00abnone\u00bb;<\/p>\n
  \u0412\u0438\u0434\u0436\u0435\u0442\u044b \u0441\u043a\u0440\u044b\u0442\u044b. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0438\u0442 \u0432\u0437\u044f\u0442\u044c \u043a\u043b\u044e\u0447 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0430 \u043a \u0444\u0438\u043d\u0438\u0448\u0443 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e. \u0412 finishInteract() \u0432\u043c\u0435\u0441\u0442\u043e console.log(\u00ab\u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u043b\u044e\u0447\u00bb) \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n
widget3.style.display = "block"; setTimeout(() => widget3.style.display = "none",5000); <\/code><\/pre>\n
  \u041f\u0440\u0438 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u044b \u043c\u044b, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 5 \u0441\u0435\u043a\u0443\u043d\u0434. \u041d\u0430\u0448\u0430 \u0438\u0433\u0440\u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n
  <\/p>\n
  <\/p>\n
4.5 \u041e\u0444\u043e\u0440\u043c\u0438\u043c \u0442\u0435\u043a\u0441\u0442.<\/h4>\n
  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043f\u0430\u043f\u043a\u0443 Fonts. \u0421\u043a\u0430\u0447\u0430\u0435\u043c \u043e\u0442\u0441\u044e\u0434\u0430 \u0444\u0430\u0439\u043b font1.woff<\/a> \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432 Fonts. \u0412 style.css \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n
\/* \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 *\/  p{ \tmargin:0px; \tfont-size:60px; \tposition:absolute; \tdisplay:block; \ttop:50%; \tleft:50%; \ttransform:translate(-50%,-50%); \tuser-select:none; \tfont-family:fontlab; }  @font-face{ \tfont-family:fontlab; \tsrc:url("Fonts\/font1.woff"); } <\/code><\/pre>\n
  \u041c\u0435\u043d\u044e \u0438 \u0438\u0433\u0440\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438\u0441\u044c:<\/p>\n
  <\/p>\n
  <\/p>\n
4.6 \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0432\u0443\u043a\u0438.<\/h4>\n
  \u0421\u043a\u0430\u0447\u0430\u0435\u043c \u043e\u0442\u0441\u044e\u0434\u0430 \u0430\u0440\u0445\u0438\u0432 \u0441\u043e \u0437\u0432\u0443\u043a\u0430\u043c\u0438 Sounds.zip<\/a>. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043f\u0430\u043f\u043a\u0443 Sounds \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0442\u0443\u0434\u0430 \u0437\u0432\u0443\u043a\u0438 (\u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 mp3). \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435-\u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u044d\u0442\u0438 \u0437\u0432\u0443\u043a\u0438:<\/p>\n
\/\/ \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0437\u0432\u0443\u043a\u043e\u0432  var clickSound = new Audio; clickSound.src = "Sounds\/click.mp3";  var keySound = new Audio; keySound.src = "Sounds\/key.mp3";  var mistakeSound = new Audio; mistakeSound.src = "Sounds\/mistake.mp3";  var thingSound = new Audio; thingSound.src = "Sounds\/thing.mp3";  var winSound = new Audio; winSound.src = "Sounds\/win.mp3"; <\/code><\/pre>\n
  \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 interact \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u0437\u0432\u0443\u043a\u0430 (soundObject.play()):<\/p>\n
function interact(objects,string,num,soundObject){ \tfor (i = 0; i < objects.length; i++){ \t\tlet r = (objects[i][0] - pawn.x)**2 + (objects[i][1] - pawn.y)**2 + (objects[i][2] - pawn.z)**2; \t\tif(r < (objects[i][7]**2)){ \t\t\tsoundObject.play(); \t\t\tdocument.getElementById(string + i).style.display = "none"; \t\t\tobjects[i][0] = 1000000; \t\t\tobjects[i][1] = 1000000; \t\t\tobjects[i][2] = 1000000; \t\t\tdocument.getElementById(string + i).style.transform =  \t\t\t"translate3d(1000000px,1000000px,1000000px)"; \t\t\tnum[0]++; \t\t\twidget1.innerHTML = "<p style='font-size:30px'>\u041c\u043e\u043d\u0435\u0442\u044b: " + m[0] + " \u0438\u0437 " + things.length + " <\/p>"; \t\t\twidget2.innerHTML = "<p style='font-size:30px'>\u041a\u043b\u044e\u0447\u0438: " + k[0] + "<\/p>"; \t\t}; \t}; } <\/code><\/pre>\n
  \u0412 repeatFunction() \u0438\u0437\u043c\u0435\u043d\u0438\u043c, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432\u044b\u0437\u043e\u0432\u044b \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n
interact(things,"thing",m,thingSound); interact(keys,"key",k,keySound); <\/code><\/pre>\n
  \u0410 \u0432 finishInteract() \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0432\u0443\u043a\u0438 mistakeSound \u0438 winSound:<\/p>\n
function finishInteract(){ \tlet r = (finish[0][0] - pawn.x)**2 + (finish[0][1] - pawn.y)**2 + (finish[0][2] - pawn.z)**2; \tif(r < (finish[0][7]**2)){ \t\tif (k[0] == 0){ \t\t\twidget3.style.display = "block"; \t\t\tsetTimeout(() => widget3.style.display = "none",5000); \t\t\tmistakeSound.play(); \t\t} \t\telse{ \t\t\tclearWorld(); \t\t\tclearInterval(TimerGame); \t\t\tdocument.exitPointerLock(); \t\t\tscore = score + m[0]; \t\t\tk[0] = 0; \t\t\tm[0] = 0; \t\t\tlevel++; \t\t\tmenu1.style.display = "block"; \t\t\twidget1.style.display = "none"; \t\t\twidget2.style.display = "none"; \t\t\twidget3.style.display = "none"; \t\t\twinSound.play(); \t\t\tif(level >= 2){ \t\t\t\tlevel = 0; \t\t\t\tscore = 0; \t\t\t}; \t\t}; \t}; }; <\/code><\/pre>\n
  \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043b\u044e\u0431\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u0435\u043c \u0437\u0432\u0443\u043a clickSound:<\/p>\n
button1.onclick = function(){ \t \tclickSound.play(); \t \t...  }  button2.onclick = function(){ \t \tclickSound.play(); \t \tmenu1.style.display = "none"; \tmenu2.style.display = "block"; }  button3.onclick = function(){ \t \tclickSound.play(); \t \tmenu1.style.display = "block"; \tmenu2.style.display = "none"; }  button4.onclick = function(){ \t \tclickSound.play(); \t \tmenu1.style.display = "block"; \tmenu3.style.display = "none"; } <\/code><\/pre>\n
  \u0418\u0433\u0440\u0430 \u0437\u0430\u0438\u0433\u0440\u0430\u043b\u0430 \u044f\u0440\u0447\u0435. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0443\u0440\u043e\u0432\u043d\u0435\u0439:<\/p>\n
4.7 \u0412\u044b\u0432\u043e\u0434 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432.<\/h4>\n
  \u0412 menu.js \u0432 finishInteract() \u0432\u043d\u0443\u0442\u0440\u044c if(level >= 2){\u2026} \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n
if(level >= 2){ menu1.style.display = "none"; \tmenu3.style.display = "block"; \tdocument.getElementById("result").innerHTML = "\u0412\u044b \u043d\u0430\u0431\u0440\u0430\u043b\u0438 " + score + " \u043e\u0447\u043a\u043e\u0432"; \tlevel = 0; \tscore = 0; }; <\/code><\/pre>\n
  \u041c\u044b \u0432\u0438\u0434\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0430\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043e\u0447\u043a\u043e\u0432 \u043f\u043e \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0445 \u0443\u0440\u043e\u0432\u043d\u0435\u0439.
  \u041a\u0441\u0442\u0430\u0442\u0438, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u044d\u0442\u0443 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n
canlock = false; <\/code><\/pre>\n
  \u0410 \u0442\u0430\u043a\u0436\u0435:<\/p>\n
button1.innerHTML = "<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c<\/p>"; <\/code><\/pre>\n
  \u0438<\/p>\n
button1.innerHTML = "<p>\u041d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0443<\/p>"; <\/code><\/pre>\n
  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435:<\/p>\n
function finishInteract(){ \tlet r = (finish[0][0] - pawn.x)**2 + (finish[0][1] - pawn.y)**2 + (finish[0][2] - pawn.z)**2; \tif(r < (finish[0][7]**2)){ \t\tif (k[0] == 0){ \t\t\t\u2026 \t\t} \t\telse{ \t\t\t\u2026 \t\t\tcanlock = false; \t\t\tbutton1.innerHTML = "<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c<\/p>"; \t\t\tif(level >= 2){ \t\t\t\tmenu1.style.display = "none"; \t\t\t\tmenu3.style.display = "block"; \t\t\t\tdocument.getElementById("result").innerHTML = "\u0412\u044b \u043d\u0430\u0431\u0440\u0430\u043b\u0438 " + score + " \u043e\u0447\u043a\u043e\u0432"; \t\t\t\tlevel = 0; \t\t\t\tscore = 0; \t\t\t\tbutton1.innerHTML = "<p>\u041d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0443<\/p>"; \t\t\t}; \t\t}; \t}; }; <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438\u0433\u0440\u044b \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0443\u0440\u043e\u0432\u043d\u0435\u0439. \u0422\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u043d\u0435\u043c \u201ccontainer\u201d \u0432 \u0446\u0435\u043d\u0442\u0440 \u043e\u043a\u043d\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n
top:50%; left:50%; transform: translate(-50%,-50%); <\/code><\/pre>\n
  \u0410 \u0432 body \u0443\u0431\u0435\u0440\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b:<\/p>\n
body{ \tmargin:0px; } <\/code><\/pre>\n
  \u0418\u0442\u0430\u043a, \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u0443\u044e \u0438\u0433\u0440\u0443 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0435\u0439 \u043c\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u044f\u0437\u044b\u043a\u0430 javascript, \u0443\u0437\u043d\u0430\u043b\u0438 \u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438. \u0410 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438\u0433\u0440\u0443\u0448\u043a\u0438 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u0430\u0436\u0435 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e. \u041f\u043e\u043b\u043d\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043e\u0442\u0441\u044e\u0434\u0430 (\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438.zip)<\/a>. \u0421\u0430\u043c\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0438\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435. <\/p>\n
  \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/511418\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u0443\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u0438\u0433\u0440\u0443 \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c html, css \u0438 javascript. \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 3-\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0438\u0440, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430 \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u044e, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0435 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 (\u0431\u0435\u0437 \u0442\u0435\u043d\u0435\u0439), \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0437\u0432\u0443\u043a\u0438 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0435\u043d\u044e. \u0423\u0432\u044b, \u043a\u0430\u043a \u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0434\u0435\u043c\u043e\u043a \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-307110","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/307110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=307110"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/307110\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=307110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=307110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=307110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}