Я новичок в программировании, поэтому уверен что в коде много ошибок, но вроде работает .... вопрос в рисовании canvas, не могу затереть старые линии!!! <html> <head> <title> SOS </title> <meta charset="UTF-8"> <style> body{ background:#c0d3ff; } #frame{ width: 100%; height: 100%; background:#cacfff; } #man{ position: absolute; /* */ width: 100px; height: 100px; background:#FFEB9B; border-radius: 50%; } #meal{ position: absolute; /* */ width: 50px; height: 50px; left: 100px; top: 500px; background:#3e55ff; border-radius: 50%; } #Time{ float: right; } #Can_a{ position: absolute; /* */ } </style> </head> <body> <button onclick="GO()">GO</button> <div id="frame" onmousedown="Eda()"> <canvas id="Can_a" width="1400" height="760"></canvas> <div id="Time"></div> <div id="man"> <div id="Posit"></div> <div id="Pos_man_T"></div> <div id="Pos_man_L"></div> <div id="Tomatch"></div> </div> <div id="meal" about="Мясо"><div id="Pos_m_T"></div><div id="Pos_m_L"></div></div> </div> <script> function Convas(x,y,x1,y1){ var a_canvas = document.getElementById("Can_a"); var a_context = a_canvas.getContext("2d"); // Думаю что сюда нужно добавить функцию очистки canvas то что нашел в интернете не помогает!!! // a_context.clearRect(0,0, a_canvas.width, canvas.height); // a_context.clear(); // a_context.beginPath(); a_context.moveTo(x, y); a_context.lineTo(x1, y1); a_context.strokeStyle = "#1c23ee"; a_context.stroke(); } //Convas(100,100,600,300); function walk(mnoj,x,y){ var vrem, vrem_y, vrem_x; if(pos_man_top>y) {vrem_y = pos_man_top-y;} else {vrem_y = y-pos_man_top;} if(pos_man_left>x) {vrem_x = pos_man_left-x;} else {vrem_x = x-pos_man_left;} if(vrem_y>vrem_x) {vrem = vrem_y;} else {vrem = vrem_x;} var vr = document.getElementById("Time"); vr.innerHTML="vrem_x = "+vrem_x+"/n vrem_y = "+vrem_y+"/n vrem = "+vrem; if(pos_man_top+mnoj<y) {pos_man_top+=mnoj;} else if(pos_man_top-mnoj>y) {pos_man_top-=mnoj;} if(pos_man_left+mnoj<x) {pos_man_left+=mnoj;} else if(pos_man_left-mnoj>x) {pos_man_left-=mnoj;} } var meat = document.getElementById("meal"); var pos_M_L = document.getElementById("Pos_m_L"); var pos_M_T = document.getElementById("Pos_m_T"); var pos_m_top = meat.offsetTop; var pos_m_left = meat.offsetLeft; pos_M_T.innerHTML=pos_m_top; pos_M_L.innerHTML=pos_m_left; var Golod=document.getElementById("Tomatch"); var man = document.getElementById("man"); var pos_Man_L = document.getElementById("Pos_man_L"); var pos_Man_T = document.getElementById("Pos_man_T"); var pos_man_top = man.offsetTop; var pos_man_left = man.offsetLeft; pos_Man_T.innerHTML=pos_man_top; pos_Man_L.innerHTML=pos_man_left; function GO(){ var Food = 1000; setInterval(fu, 10); function fu(){ var pos_m_top = meat.offsetTop; var pos_m_left = meat.offsetLeft; pos_Man_T.innerHTML=pos_man_top; pos_Man_L.innerHTML=pos_man_left; Golod.innerHTML=Food; Convas(pos_man_left,pos_man_top,pos_m_left,pos_m_top); if(Food>=1000){ Food--; }else if(Food<1000 && Food>=900){ if(Food>0) Food--; walk(1,pos_m_left,pos_m_top); man.style.top = pos_man_top + 'px'; man.style.left = pos_man_left + 'px'; if(pos>=500) pos = 10; } else if (Food<900 && Food>=0){ if(Food>0) Food--; walk(2,pos_m_left,pos_m_top); man.style.top = pos_man_top + 'px'; man.style.left = pos_man_left + 'px'; } } } function Eda(){ var x = event.clientX; var y = event.clientY; pos_M_T.innerHTML=x; pos_M_L.innerHTML=y; meat.style.top = y + 'px'; meat.style.left = x + 'px'; } </script> </body> </html>