движение в границах поля
Angelinasen,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
height: 100%;
}
body.gradient{
background-image:radial-gradient(red,yellow);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.image{
--color: #FF0000;
width: 50px;
height: 50px;
background-image: linear-gradient(to right, var(--color), black);
}
.image:nth-child(2){
--color: #008000;
width: 10px;
height: 10px;
}
.field {
width: 300px;
height: 300px;
margin: 70px auto;
box-sizing: border-box;
background-color: #808080;
}
.image.freedom{
--color: #00FFFF;
}
</style>
</head>
<body>
<div class="field" >
<div class="image" ></div>
<div class="image" ></div>
</div>
<script>
const pressedKeys = new Set();
addEventListener("keydown", event => {
pressedKeys.add(event.code);
});
addEventListener("keyup", event => {
pressedKeys.delete(event.code);
});
let dt, lastT = performance.now();
const image = document.querySelectorAll(".image");
const box = document.querySelector(".field");
const userKeys = [
[
["KeyW", -.1],
["KeyS", .1],
["KeyD", .1],
["KeyA", -.1]
],
[
["ArrowUp", -.1],
["ArrowDown", .1],
["ArrowRight", .1],
["ArrowLeft", -.1]
]
]
const users = userKeys.map((keys, i) => ({
matrix : new DOMMatrix([1, 0, 0, 1, 100 + 100 * i, 100 + 100 * i]),
user: image[i],
keys
}));
const checkCollision = users => {
const [{user : one}, {user : two}] = users;
let {top : a, left : c, height : h, width : w} = one.getBoundingClientRect();
let {top : b, left : d, height : hh, width : ww} = two.getBoundingClientRect();
a -= b;
c -= d;
h -= hh;
w -= ww;
return a <= 0 || a >= -h || c < 0 || c >= -w
}
(function loop(t) {
dt = t - lastT;
lastT = t;
users.forEach(({matrix, user, keys}) => {
keys.forEach(([key, delta], i) => {
let vector = i < 2 ? [0, delta * dt] : [delta * dt, 0];
if (pressedKeys.has(key)) matrix.translateSelf(...vector);
user.style.transform = matrix;
const collision = checkCollision([{user}, {user : box}])
if(collision) {
vector = vector.map(a => a * -1);
matrix.translateSelf(...vector);
}
})
})
requestAnimationFrame(loop);
})(lastT);
</script>
</body>
</html>
|
спасибо большое за помощь! Если вопрос по jQuery, сюда же писать?
При клике на кнопку "профиль" (.profile-top-header) я вешаю на меню (.profile-top-header__menu) класс эктив и показываю его, при повторном клике или по клике на любое место страницы по идее класс эктив должен убираться и меню должно скрываться. Но при клике на кнопку не скрывается, только при клике на страницу(( но без второго скрипта (обработки события mouseup) кнопка работает. как сделать чтобы меню сркрывалось по клике на кнопку и по клике на любое место страницы. (кроме самого меню конечно же)
$('.profile-top-header').click(function(event) {
event.preventDefault();
$('.profile-top-header__menu').toggleClass('active');
});
$(document).mouseup(function(e) {
let container = $('.profile-top-header__menu.active');
if (container.has(e.target).length === 0) {
container.removeClass('active');
}
|
Цитата:
но можно и тут ...
$(function() {
const menu = ('.profile-top-header__menu');
$('.profile-top-header').click(function(event) {
event.preventDefault();
menu.toggleClass('active');
});
$(document).click(function(event) {
if ($(event.target).closest('.profile-top-header__menu, .profile-top-header').length) return;
menu.removeClass('active')
});
});
|
Цитата:
|
увпвкеоевлеаловр
ЧТо Вы тут делаете)) Вы по-моему все знаете))С такими знаниями можно все)))
|
Angelinasen,
живу я здесь))) |
jquery слайдер
заметно))) спасибо вам))))
|
Цитата:
|
| Часовой пояс GMT +3, время: 15:08. |