0
Ich erstelle mein erstes Spiel, einen Labyrinthtyp, mit Kollisionserkennung. Ich verschiebe derzeit das 'Werkzeug' div mit kontinuierlicher Bewegung (hat immer noch ein paar Bugs) und überprüfe auf Kollisionen.Kollisionserkennung/Eigenschaft 'defaultView' von undefined nicht lesen
Als ich meine Kollisionselemente in die Prüfung, am Ende des Codes, übergebe, erhalte ich eine Fehlermeldung 'Eigenschaft' defaultView 'von undefined nicht lesen'.
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>
Vielen Dank für jede Hilfe!
'this' in' checkCollisions' ist nicht, was Sie denken, dass es ist. Sie rufen es ohne den Kontext auf, nur 'checkCollisions()'. Sie sollten sich des Problems jedoch bereits bewusst sein, da sich ein console.log direkt über der Zeile befindet, an der 'this' übergeben wird. – Teemu