간단한 그리드 기반 이동
1.) 초기 파일 설정
2.) 스프라이트 생성 및 표시
HTML
<body>
<div id="sprite"></div>
</body>
CSS
#sprite {
background-color: black;
height: 20px;
width: 20px;
position: absolute;
/* Initial coordinates of sprite */
left: 100px;
bottom: 500px;
}
3.) keydown 이벤트에 대한 addEventListener 추가
// set equal to sprite's initial cooridinates
let position = {
x: 100,
y: 500
};
// dimensions of the sprite
size = 20;
document.addEventListener('keydown', (event) => chooseDirection(event));
function chooseDirection(event) {
// if key pressed = an arrow key --> change position
switch(event.key) {
case 'ArrowRight':
position.x += size;
sprite.style.left = position.x + 'px';
break;
case 'ArrowLeft':
position.x -= size;
sprite.style.left = position.x + 'px';
break;
case 'ArrowUp':
position.y += size;
sprite.style.bottom = position.y + 'px';
break;
case 'ArrowDown':
position.y -= size;
sprite.style.bottom = position.y + 'px';
break;
}
}
그게 다야! 이제 화살표 키(또는 원하는 키)를 사용하여 화면 전체에서 스프라이트를 이동할 수 있습니다.
엑스트라!
- 창 크기에 따라 변경
window.addEventListener('resize', displaySprite)
function displaySprite() {
// remove any previous sprite
document.querySelector('body').innerHTML = '';
const sprite = document.createElement('div');
sprite.id = 'sprite';
document.querySelector('body').append(sprite);
sprite.style.height = size + 'vmin';
sprite.style.width = size + 'vmin';
sprite.style.left = position.x + 'vmin';
sprite.style.bottom = position.y + 'vmin';
}
px 단위에서 vmin 단위로 변경하면 스프라이트의 크기를 동적으로 변경할 수 있습니다.예를 들어:
sprite.style.bottom = position.y + 'px' --> sprite.style.bottom = position.y + 'vmin'
- 그리드 추가
function displayGrid() {
const grid = document.createElement('div');
grid.id = 'grid';
document.querySelector('body').append(grid);
let cellClass = 'darkerTile';
let isDark = true;
for(let i = 0; i < gridSize; i++) {
const column = document.createElement('div');
column.className = 'column';
grid.append(column);
for(let i = 0; i < gridSize; i++) {
(isDark) ? cellClass = 'darkerTile' : cellClass = 'lighterTile';
isDark = !isDark;
const cell = document.createElement('div');
cell.className = cellClass;
cell.style.height = size + 'vmin';
cell.style.width = size + 'vmin';
column.append(cell);
}
}
}
CSS를 잊지 마세요!
#grid {
display: flex;
position: relative;
width: fit-content;
border: 2vmin solid darkgreen;
}
.darkerTile {
background-color: green;
}
.lighterTile {
background-color: lightgreen;
}
스프라이트가 그리드에 정렬되는 데 문제가 있는 경우:
- 스프라이트를 포함하기 위해 테두리 충돌 추가
const bounds = {
min: 0,
max: (gridSize - 1) * size
};
function chooseDirection(event) {
switch(event.key) {
case 'ArrowRight':
isAtBorder('x', 'max') ? null : move('x', 'left', true);
break;
case 'ArrowLeft':
isAtBorder('x', 'min') ? null : move('x', 'left', false);
break;
case 'ArrowUp':
isAtBorder('y', 'max') ? null : move('y', 'bottom', true);
break;
case 'ArrowDown':
isAtBorder('y', 'min') ? null : move('y', 'bottom', false);
break;
}
}
function isAtBorder(axis, boundary) {
return (position[axis] === bounds[boundary]) ? true : false;
}
function move(spriteAxis, windowAxis, moveMaxy) {
(moveMaxy === true)
? position[spriteAxis] += size
: position[spriteAxis] -= size;
sprite.style[windowAxis] = position[spriteAxis] + 'vmin';
}
- 스프라이트 모양 변경
div 대신 스프라이트를 img로 변경하고 다른 소스를 뒤섞습니다.
최종 제품
Reference
이 문제에 관하여(간단한 그리드 기반 이동), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/asherscott/simple-grid-based-movement-2li텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
