Как сделать управление двумя игроками
Как сделать, чтобы два игрока могли двигаться одновременно?
window.addEventListener('keydown', function(e){
if(e.keyCode == 38){
let goUp = firstSquare.offsetTop;
firstSquare.style.top = goUp - 10 + "px";
}
if(e.keyCode == 40){
let goDown = firstSquare.offsetTop
firstSquare.style.top = goDown + 10 + "px"
}
if(e.keyCode == 37){
let goLeft = firstSquare.offsetLeft
firstSquare.style.left = goLeft - 10 + "px"
}
if(e.keyCode == 39){
let goRight = firstSquare.offsetLeft
firstSquare.style.left = goRight + 10 + "px"
}
if(e.keyCode == 87){
let moveUp = secondSquare.offsetTop;
secondSquare.style.top = moveUp - 10 + "px";
}
if(e.keyCode == 83){
let moveDown = secondSquare.offsetTop
secondSquare.style.top = moveDown + 10 + "px"
}
if(e.keyCode == 65){
let moveLeft = secondSquare.offsetLeft
secondSquare.style.left = moveLeft - 10 + "px"
}
if(e.keyCode == 68){
let moveRight = secondSquare.offsetLeft
secondSquare.style.left = moveRight + 10 + "px"
}
})
|
|
Цитата:
|
Rise,
а по коду выше, если продублировать на второго игрока, вроде не прерывает... |
нажатие клавиш, два игрока одновременно.
:write:
по мотивам кода от Malleys, кликнуть по полю, 1 игрок WSDA, 2 игрок стрелки. тестировать лучше на отдельной странице.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="image" style="width: 50px; height: 25px; background: linear-gradient(to right, red, black);"></div>
<div class="image" style="width: 50px; height: 25px; background: linear-gradient(to right, #008000, black);"></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 userKeys = [
[
["KeyW", .1],
["KeyS", -.1],
["KeyD", .2],
["KeyA", -.2]
],
[
["ArrowUp", .1],
["ArrowDown", -.1],
["ArrowRight", .2],
["ArrowLeft", -.2]
]
]
const users = userKeys.map((keys, i) => ({
matrix : new DOMMatrix(),
user: image[i],
keys
}));
(function loop(t) {
requestAnimationFrame(loop);
dt = t - lastT;
lastT = t;
users.forEach(({matrix, user, keys}) => {
keys.forEach(([key, delta], i) => {
let method = i < 2 ? "translateSelf" : "rotateSelf";
if (pressedKeys.has(key)) matrix[method](delta * dt);
})
user.style.transform = matrix;
})
})(lastT);
</script>
</body>
</html>
|
Цитата:
let vector = i < 2 ? [0, delta * -dt] : [delta * dt, 0]; if (pressedKeys.has(key)) matrix.translateSelf(...vector); |
Angelinasen,
#7 проверяли? |
Как сделать чтобы два игрока двигались одновременно
все отлично)) сразу не дошло))спасибо!!
|
столкновение блоков
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;
}
</style>
</head>
<body>
<div class="image" ></div>
<div class="image" ></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 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} = one.getBoundingClientRect();
let {top : b, left : d} = two.getBoundingClientRect();
a -= b;
c -= d;
return a >= -50 && a <= 10 && c >= -50 && c <= 10
}
(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;
})
document.body.classList.toggle('gradient', checkCollision(users));
requestAnimationFrame(loop);
})(lastT);
</script>
</body>
</html>
|
Angelinasen,
что такое ширина1 и ширина2? |
Angelinasen,
:-? |
движение в границах поля
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, время: 05:34. |