27.09.2018, 15:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от drakulawz
|
|
Так если у меня координаты дробными получаются, разве не лучше применить Math.ceil
|
если нужно применяйте, не понимаю как связано ограничение движения блока в пределах canvas и точность позиционирования |
|
27.09.2018, 15:36
|
 |
Профессор
|
|
Регистрация: 08.11.2017
Сообщений: 642
|
|
Ладно, тогда, последний "не работающий" пример... ))
<html>
<head>
<style>
#hero {
position: fixed;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: burlywood;
border: 1px dashed #cccccc;
}
</style>
</head>
<body>
<textarea id="keys"></textarea>
<textarea id="previous_keys"></textarea>
<div id="hero"></div>
<script>
const keys = [37, 39, 38, 40]
const speed = 5
const keyPressed = {}
const previousKeyPressed = {}
const currentPosition = {
x: 100,
y: 100
}
keys.forEach(key => keyPressed[key] = previousKeyPressed[key] = false)
const hero = document.getElementById('hero')
document.addEventListener('keydown', function (e) {
e.preventDefault()
if (keys.includes(e.keyCode)) {
keyPressed[e.keyCode] = true
}
})
document.addEventListener('keyup', function (e) {
e.preventDefault()
if (keys.includes(e.keyCode)) {
keyPressed[e.keyCode] = false
}
})
setInterval(() => {
document.getElementById('keys').value = JSON.stringify(keyPressed)
document.getElementById('previous_keys').value = JSON.stringify(previousKeyPressed)
update()
}, 100)
update = () => {
if (keyPressed[38] && !previousKeyPressed[38]) currentPosition.y -= speed
if (keyPressed[40] && !previousKeyPressed[40]) currentPosition.y += speed
if (keyPressed[37] && !previousKeyPressed[37]) currentPosition.x -= speed
if (keyPressed[39] && !previousKeyPressed[39]) currentPosition.x += speed
hero.style.top = `${currentPosition.y}px`
hero.style.left = `${currentPosition.x}px`
Object.keys(keyPressed).forEach(key => previousKeyPressed[key] = keyPressed[key])
}
</script>
</body>
</html>
Последний раз редактировалось SuperZen, 27.09.2018 в 15:38.
|
|
27.09.2018, 15:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
drakulawz,
если очень хочется, замените строку
ctx.fillRect(this.x, this.y, this.width, this.height);
на
ctx.fillRect(Math.ceil(this.x), Math.ceil(this.y), this.width, this.height);
но по моему это что-то бесполезное в данном случае
|
|
27.09.2018, 15:40
|
|
Аспирант
|
|
Регистрация: 13.08.2018
Сообщений: 79
|
|
эх....это фигню какую-то написал, ща я так попробую, а потом целый скрипт выложу, а то наглядности не получиться, только вопросы неправильно заданные - понимаю, что хочу спросить, а спросить не могу.  ) |
|
27.09.2018, 16:11
|
|
Аспирант
|
|
Регистрация: 13.08.2018
Сообщений: 79
|
|
SuperZen, этот работает, только от этого он мне знакомее не становится. 
Кстати, а почему прямоугольник в место того, что бы двигаться в верх и вниз уменьшается и увеличивается? 
|
|
27.09.2018, 16:22
|
|
Профессор
|
|
Регистрация: 08.11.2017
Сообщений: 642
|
|
|
хз, проверял только в chrome на макпуке
может быть такой стиль нужен,
html,
body {
height: 100%;
}
хотя ) div position: fixed, и все должно быть как надо...
|
|
27.09.2018, 16:43
|
|
Аспирант
|
|
Регистрация: 13.08.2018
Сообщений: 79
|
|
SuperZen, а с канвасом не работаете? Интересная штука. CSS вообще не нужен. 
Как и HTML, в прочем.
|
|
27.09.2018, 17:11
|
|
Аспирант
|
|
Регистрация: 13.08.2018
Сообщений: 79
|
|
SuperZen, для такого нуба как я ещё рановато библиотеки изучать . Хочу сперва нормально изучить сам канвас.
|
|
27.09.2018, 18:26
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Сообщение от SuperZen
|
|
"не работающий" пример
|
А не работает оно, само собой, в IE |
|
|
|
