Как сделать стены для движущейся точки?

Question

Делаю квадратик, двигающийся по нажатию клавиш WASD. Как мне сделать так, чтобы квадратик не мог залезать за границу, и, если я нарисую стены внутри самого канваса, чтоб он не мог пройти сквозь них?

window.addEventListener('load',main,false);
function main()
{
  // Задание канваса и переменных
	var ctx = canvas_example.getContext("2d");
	var w = canvas_example.width;
	var h = canvas_example.height;
  
	var fps = 60;
	r = 25; // r - половина длины стороны квадрата.
	ctx.fillStyle = 'black';
	ctx.strokeStyle = 'black';
	var x = w/2;
	var y = h/2;
	var v = 50;
	var dt = 0.1;
  
  // Движение по нажатию кнопок
  document.onkeydown = function (event) {
	console.log(event);
  if ((event.key == 's')||(event.key == 'ы')||(event.key == 'S')||(event.key == 'Ы')){
		y = y + v*dt;
		console.log(y);
	}
	if ((event.key == 'd')||(event.key == 'в')||(event.key == 'D')||(event.key == 'В')){
		x = x + v*dt;
	}
	if ((event.key == 'w')||(event.key == 'ц')||(event.key == 'W')||(event.key == 'Ц')){
		y = y - v*dt;
	}
	if ((event.key == 'a')||(event.key == 'ф')||(event.key == 'A')||(event.key == 'Ф')){
		x = x - v*dt;
	}
	}
  
  // Движение квадратика
  function draw() {
		ctx.clearRect(0,0,w,h); 
		ctx.beginPath();
		ctx.fillRect(x, y, r, r);
		ctx.fill();
	}
	
function control() {
		draw();
	}
	setInterval(control, 1000/fps)
}

<!DOCTYPE html>
<!--Комментарий -->
<html> <!--Открытие-->
	<head>
		<title>Hello world!</title>
		<script src='alpha.js'></script>
	</head>
	<body>
		<canvas id="canvas_example" width=500 height=500 style='border: 1px solid #000000;'></canvas>
	</body>
</html>

Answer 1

Добавил комментариев для понимания:

    window.addEventListener('load',main,false);
    let doc = document.getElementById('canvas_example').getBoundingClientRect(); // получаем координаты canvas
    let xz = doc.x - 5; // Получаем левую сторону 5 это отступ border
    let yz = doc.y - 5; // Получаем верхнюю сторону 5 это отступ border
    let downx = xz + doc.width - 5 - 25; // получаем правую сторону 5 это отступ border 25 это ширина самого квадрата
    let downy = yz + doc.height - 5 - 25; // Получем нижнюю сторону 5 это отступ border 25 это ширина самого квадрата
    function main() {
        // Задание канваса и переменных
        var ctx = canvas_example.getContext("2d");
        var w = canvas_example.width;
        var h = canvas_example.height;

        var fps = 60;
        r = 25; // r - половина длины стороны квадрата.
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'black';
        var x = w/2;
        var y = h/2;
        var v = 50;
        var dt = 0.1;

        // Движение по нажатию кнопок
        document.onkeydown = function (event) {
            console.log(event);
            if ((event.key == 's')||(event.key == 'ы')||(event.key == 'S')||(event.key == 'Ы')){
                if (y<downy) {
                    y = y + v * dt;
                }
            }
            if ((event.key == 'd')||(event.key == 'в')||(event.key == 'D')||(event.key == 'В')){
                if(x<downx) {
                    x = x + v * dt;
                }
            }
            if ((event.key == 'w')||(event.key == 'ц')||(event.key == 'W')||(event.key == 'Ц')){
                if(y>yz) {
                    y = y - v * dt;
                }
            }
            if ((event.key == 'a')||(event.key == 'ф')||(event.key == 'A')||(event.key == 'Ф')){
                if(x>xz) {
                    x = x - v * dt;
                }
            }
        };

        // Движение квадратика
        function draw() {
            ctx.clearRect(0,0,w,h);
            ctx.beginPath();
            ctx.fillRect(x, y, r, r);
            ctx.fill();
        }

        function control() {
            draw();
        }
        setInterval(control, 1000/fps)
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<!--Комментарий -->
<html> <!--Открытие-->
<head>
    <title>Hello world!</title>
    <script src='alpha.js'></script>
</head>
<body>
<canvas id="canvas_example" width=500 height=500 style='border: 1px solid #000000;'></canvas>
</body>
</html>

БЛОГ НА HUSL

Как сделать стены для движущейся точки?

Ответы (1 шт):