Цитата:
|
Ладно, тогда, последний "не работающий" пример... ))
<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>
|
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); но по моему это что-то бесполезное в данном случае |
эх....это фигню какую-то написал, ща я так попробую, а потом целый скрипт выложу, а то наглядности не получиться, только вопросы неправильно заданные - понимаю, что хочу спросить, а спросить не могу. :))
|
SuperZen, этот работает, только от этого он мне знакомее не становится.:(
Кстати, а почему прямоугольник в место того, что бы двигаться в верх и вниз уменьшается и увеличивается?:-? |
хз, проверял только в chrome на макпуке
может быть такой стиль нужен, html, body { height: 100%; } хотя ) div position: fixed, и все должно быть как надо... |
SuperZen, а с канвасом не работаете? Интересная штука. CSS вообще не нужен. :D
Как и HTML, в прочем. |
почему-то для конвы эта библа запала в душу https://konvajs.github.io/
юзал несколько раз, остался доволен, и есть биндинги для реакта ) еще вот эту штуку юзал, она конечно серьезнее конвы, тоже остался доволен, https://www.babylonjs.com/ еще есть такая http://www.pixijs.com/ - но эту не юзал |
SuperZen, для такого нуба как я ещё рановато библиотеки изучать :). Хочу сперва нормально изучить сам канвас.
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:52. |