Как сделать управление двумя игроками
Как сделать, чтобы два игрока могли двигаться одновременно?
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? |
| Часовой пояс GMT +3, время: 12:53. |