<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid grey"></canvas>
<br>
<div style="position:absolute;left:600px;top:0px;">
Направление
<br>
<select id="direction">
<option value="up">вверх</option>
<option value="down">вниз</option>
<option value="left">влево</option>
<option value="right">вправо</option>
</select>
<br>
Скорость
<br>
<input type="text" id="speed" value="10">
<br>
координаты x
<div id="my_x"></div>
координаты y
<div id="my_y"></div>
<br>
</div>
<div style="position:absolute;left:800px;top:0px;">
<br>
координаты x
<br>
<input type="text" id="robot_x" value="250">
<br>
координаты y
<br>
<input type="text" id="robot_y" value="250">
<br>
<input type="button" onclick="my_coordinate()" value="задать координаты">
<br>
</div>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
let x = 0;
let y = 0;
let timerId = setInterval(function(){
let selection = document.getElementById("direction");
let selectedOption = selection.selectedIndex;
let speed = Number(document.getElementById("speed").value);
document.getElementById("my_x").innerHTML = x;
document.getElementById("my_y").innerHTML = y;
if (selectedOption == 0 && y > 0){
y = y - speed;
}
if (selectedOption == 1 && y < 450){
y = y + speed;
}
if (selectedOption == 2 && x > 0){
x = x - speed;
}
if (selectedOption == 3 && x < 450){
x = x + speed;
}
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.rect(x,y,50,50);
ctx.stroke();
}, 100);
function my_coordinate(){
x = Number(document.getElementById("robot_x").value);
y = Number(document.getElementById("robot_y").value);
}
</script>
</body>
</html>
| 