0
충돌 감지 기능이있는 미로 유형의 첫 번째 게임을 만듭니다. 나는 현재 'tool'div를 연속 동작 (여전히 버그가 있음)으로 이동시키고 충돌을 확인하고 있습니다.충돌 감지/정의되지 않은 'defaultView'속성을 읽을 수 없습니다.
코드의 하단에 충돌 항목을 전달할 때 '정의되지 않은 속성'defaultView '을 읽을 수 없습니다.'오류가 발생합니다.
main.js
$(document).ready(() => {
console.log('DOMContentLoaded on app');
//----------------------------------------------
//Build walls
const tx = 100;
const bx = 600;
const ly = 10;
const my = 650;
const ry = 750;
const $main = $('main');
const thick = 10;
const goal = 100;
let wallArray = [];
//outline walls
$main.append(buildWalls(tx, ly, thick, my - ly - goal));
$main.append(buildWalls(tx, my, thick, ry - my));
$main.append(buildWalls(tx, ry, bx - tx + thick, thick));
$main.append(buildWalls(bx, ly, thick, ry - ly));
$main.append(buildWalls(tx, ly, bx - tx, thick));
// inside walls
$main.append(buildWalls(200, 300, 75, thick));
$main.append(buildWalls(400, 500, thick, 75));
$main.append(buildWalls(500, 150, 75, thick));
});
// build walls with inputs
function buildWalls(top1, left1, height1, width1) {
const wall = $('<div>', {
class: 'wall',
})
.css({
top: top1,
left: left1,
height: height1,
width: width1,
});
return wall;
}
//----------------------------------------------
// tool, prize, and goal
const bPx = 600;
const bPy = 150;
const speed = 5;
const time = 100;
const tool = createTool();
const prize = createPrize();
const moveFunctions = moving(tool, bPy, bPx, speed);
function createTool() {
return $('<div>')
.addClass('tool black')
.attr('id', 'tool')
.css({ left: bPx, top: bPy })
.appendTo($('main'));
}
function createPrize() {
return $('<div>')
.addClass('prize')
.attr('id', 'prize')
.css({ left: 50, top: 550 })
.appendTo($('main'));
}
//_________________________________________
// for moving the tool around
function moving($el, bPy, bPx, speed) {
let drag = 0;
return {
moveUp() {
bPy -= speed;
drag = drag *= -1;
// $el.css('top', bPy);
// console.log($el);
},
moveLeft() {
bPx -= speed;
drag = -1;
},
moveDown() {
bPy += speed;
drag = 1;
},
moveRight() {
bPx += speed;
drag = 1;
},
looper() {
$el.css({
left: bPx += drag,
top: bPy += drag,
});
},
};
}
// };
setInterval(moveFunctions.looper, time);
// key controls
$(document).keydown((event) => {
console.log(event.keyCode);
const key = event.which;
switch (key) {
// let keepMoving = 0;
// move object left
case 37:
moveFunctions.moveLeft();
checkCollisions();
break;
// move object right
case 39:
moveFunctions.moveRight();
checkCollisions();
break;
// move object up
case 38:
moveFunctions.moveUp();
console.log('{tool} up');
checkCbreak; llisions();
break;
// move object down
case 40:
moveFunctions.moveDown();
checkCollisions();
break;
// stop movement... used for when collision happens
case 32:
alert('stop');
break;
}
});
// get blocks corners .. wall, tool, item
function getPositions(block) {
const $block = $(block);
const pos = $block.position();
const width = $block.width();
const height = $block.height();
return [[pos.left, pos.left + width], [pos.top, pos.top + height]];
}
// compare if they have overlaping coordinates
function comparePositions(p1, p2) {
const x1 = p1[0] < p2[0] ? p1 : p2;
const x2 = p1[0] < p2[0] ? p2 : p1;
return !!(x1[1] > x2[0] || x1[0] === x2[0]);
}
function checkCollisions() {
const block = $('.wall')[0];
const pos = getPositions(block);
console.log(this);
const pos2 = getPositions(this);
const horizontalMatch = comparePositions(pos[0], pos2[0]);
const verticalMatch = comparePositions(pos[1], pos2[1]);
const match = horizontalMatch && verticalMatch;
if (match) { alert('COLLISION!!! Finally !!!'); }
}
있는 style.css
body{
margin: auto;
text-align: center;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
.tool {
border: 2px solid black;
border-radius: 2px;
width: 20px;
height: 20px;
background-color: green;
position: absolute;
z-index: 300;
}
.wall {
background-color: black;
position: absolute;
}
.goal {
background-color: gold;
position: absolute;
}
.prize {
border: 2px solid black;
border-radius: 2px;
width: 20px;
height: 20px;
background-color: gold;
position: absolute;
z-index: 299;
}
index.html을
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Maze</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
<main>
</main>
<script src="main.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>
어떤 도움 주셔서 감사합니다!
'checkCollisions'에서'this'는 여러분이 생각하는 것과 다릅니다. 컨텍스트없이 호출하면 'checkCollisions()'만 호출합니다. 그래도 문제는 이미 알고 있어야합니다. 왜냐하면'this'가 전달 된 줄 바로 위에 console.log가 있기 때문입니다. – Teemu