Вот сделал:
<html>
<head>
<script language="javascript">
function start() {
var string_start_x = document.person.style.left;
var string_start_y = document.person.style.top;
var start_x = Number(string_start_x.slice(0, string_start_x.length - 2));
var start_y = Number(string_start_y.slice(0, string_start_y.length - 2));
var end_x = Number(document.data.x.value);
var end_y = Number(document.data.y.value);
var x = start_x;
var y = start_y;
var inc_x = (start_x < end_x)? 1: -1;
var inc_y = (start_y < end_y)? 1: -1;
move(start_x, end_x, inc_x, start_y, end_y, inc_y);
}
function move(x, end_x, inc_x, y, end_y, inc_y) {
if ((x == end_x) && (y == end_y)) return;
if (x != end_x ) x += inc_x;
if (y != end_y ) y += inc_y;
document.person.style.left = x + "px";
document.person.style.top = y + "px";
setTimeout(move, 10, x, end_x, inc_x, y, end_y, inc_y);
}
</script>
</head>
<body>
<form name="data">
X:
<input type="text" name="x">
<br>
Y:
<input type="text" name="y">
<br>
<input type="button" value="Старт" onClick="start()">
</form>
<img id="person" style="position: absolute; top: 100px; left: 500px;" width=200 height=200 src="images/search.jpg">
</body>
</html>
Но проблема: картинка движется не по кратчайшему пути(сначало доходит до меньшего значения x или y, а потом движется уже только по 1 значению
Не вобщем вот картинка:
Потом я решил сделать это при помощи линейной функции y = kx + b,
только вот что-то не получается. Вот код:
<html>
<head>
<script language="javascript">
function start() {
var string_start_x = document.person.style.left;
var string_start_y = document.person.style.top;
var start_x = Number(string_start_x.slice(0, string_start_x.length - 2));
var start_y = Number(string_start_y.slice(0, string_start_y.length - 2));
var end_x = Number(document.data.x.value);
var end_y = Number(document.data.y.value);
var inc_x = (start_x < end_x)? 1: -1;
var inc_y = (start_y < end_y)? 1: -1;
var k = (end_y - start_y)/(end_x - start_x)
var b = (end_x*start_y - start_x*end_y)/(end_x - start_x)
move(start_x, end_x, inc_x, start_y, end_y, inc_y, k, b);
}
function move(x, end_x, inc_x, y, end_y, inc_y, k, b) {
if ((x == end_x) && (y == end_y)) return;
if (x != end_x ) {
var x += inc_x;
var y = k*x + b;
}
document.person.style.left = x + "px";
document.person.style.top = y + "px";
setTimeout(move, 10, x, end_x, inc_x, y, end_y, inc_y, k, b);
}
</script>
</head>
<body>
<form name="data">
X:
<input type="text" name="x">
<br>
Y:
<input type="text" name="y">
<br>
<input type="button" value="Старт" onClick="start()">
</form>
<img id="person" style="position: absolute; top: 100px; left: 500px;" width=200 height=200 src="images/search.jpg">
</body>
</html>
Помогите исправить ошибку во 2 коде, или доработать его! заранее спасибо
