简单 Javascript 碰撞检测？
Simple Javascript collision detection?
我正在尝试使用 jquery、javascript、html 和 css 制作一个简单的游戏。我一直卡在碰撞检测上。
代码：
var map = [
[0,1,0,0,0,1,0,0,],
[0,1,0,0,0,1,0,0,],
[0,1,0,0,0,1,0,0,],
[0,1,1,1,0,1,0,0,],
[0,0,0,0,0,0,0,2,]
];
function DrawMap() {
for(var i=0; i < map.length; i++){
for(var j=0; j < map[i].length; j++){
if(parseInt(map[i][j]) == 0){
$("#container").append("<div class='air'></div>");
}
if(parseInt(map[i][j]) == 1){
$("#container").append("<div class='block'></div>");
}
if(parseInt(map[i][j]) == 2){
$("#container").append("<div class='spike'></div>");
}
}
}
}
window.onload=function() {
DrawMap();
}
更多代码：
var guy=document.getElementById('guy');
var up = 0;
var guyLeft = 0;
var health = 100;
function anim(e){
if(e.keyCode==83){
up +=10;
guy.style.top = up + 'px';
if(up >=400){
up -=10;
}
}
if(e.keyCode==87){
up -=10;
guy.style.top = up + 'px';
if(up <=0){
up +=10;
}
}
if(e.keyCode==68){
guyLeft +=10;
guy.style.left = guyLeft + 'px';
if(guyLeft >= 700){
guyLeft -= 10;
}d
}
if(e.keyCode==65){
guyLeft -=10;
guy.style.left = guyLeft + 'px';
if(guyLeft <= 0){
guyLeft += 10;
}
}
}
document.onkeydown=anim;im;
简答：使用document.elementFromPoint(x,y);检测哪个元素在玩家的位置。
长答案：看看下面的代码片段。
现在，我意识到我对您的代码做了很多更改，包括不必要的功能更改。抱歉，这是因为最初我只是为了自己玩，但现在它起作用了，它可能对某些人有用。
（使用的一些语法你可能不知道，一些解释见我的post底部。）
碰撞部分在function checkCollision()和if子句在$(document).keydown:
- 在 keydown 中 if-clauses
checkCollision() 被调用：else {tile = checkCollision(...);.
- 基本上我会检查玩家的前方（顶视图）是否会在即将到来的位置发生碰撞：
(for (var i=corner1; i<corner2; ++i) {...})。
- 基于碰撞图块（'spike' 或 'block'），我生成警报 (
console.log)，或者我 return checkTile到调用 checkCollision(). 的 if 子句
- 如果
tile被return编辑，tile的位置用于确定player的位置：
$(player).css("left",(tile?$(tile).offset().left+$(tile).width():x));.
代码片段：
//DOCUMENT-READY==========================
$(document).ready(function() {
//VARS----------------------------------
var step = 10;
var health = 100;
//MAP-----------------------------------
var map = [
[0,1,0,0,0,1,0,0],
[0,1,0,0,0,1,0,0],
[0,1,0,0,0,1,0,0],
[0,1,1,1,0,1,0,0],
[0,0,0,0,0,0,0,2]
];
//DRAW MAP------------------------------
(function() {
var tile = "";
for (var y=0,county=map.length; y<county; ++y) {
$("#canvas").append('<div class="tile-row" id="row_'+(y+1)+'"></div>');
for (var x=0,countx=map[y].length; x<countx; ++x) {
switch (parseInt(map[y][x])) {
case 0: tile="air"; break;
case 1: tile="block"; break;
case 2: tile="spike"; break;
default: tile="error";
}
$("#row_"+(y+1)).append('<div class="tile '+tile+'"></div>');
}
}
})();
//SET BOUNDARIES------------------------
var xMin=$("#canvas").offset().left, xMax=xMin+$("#canvas").width()-$("#player").width();
var yMin=$("#canvas").offset().top, yMax=yMin+$("#canvas").height()-$("#player").height();
//PLACE PLAYER--------------------------
$("#player").css("left",xMin).css("top",yMin);
//MOVE PLAYER---------------------------
$(document).keydown(function(e){
var player=document.getElementById("player"), tile=null;
var x=$(player).offset().left, playerLeft=x, playerRight=playerLeft+$(player).width();
var y=$(player).offset().top, playerTop=y, playerBottom=playerTop+$(player).height();
function checkCollision(playerCorner1x, playerCorner1y, playerCorner2x, playerCorner2y) {
var collisionTiles=["block","spike"];
//check if the front of the player is colliding with the environment
var front = (playerCorner1x==playerCorner2x?playerCorner1x:playerCorner1y);
var corner1 = (front==playerCorner1x?playerCorner1y:playerCorner1x);
var corner2 = (front==playerCorner1x?playerCorner2y:playerCorner2x);
//check every pixel along the front for collision
for (var i=corner1; i<corner2; ++i) {
var checkTile = document.elementFromPoint((front==playerCorner1x?front:i), (front==playerCorner1y?front:i));
if (collisionTiles.indexOf(checkTile.className.split(" ")[1]) != -1) {
if ($(checkTile).hasClass("spike")) {console.log("YOU DEAD!");}
else if ($(checkTile).hasClass("block")) {return checkTile;}
break;
}
}
}
if(e.which==37 || e.which==65){ //LEFT,A
x -= step;
if (x <= xMin) {x = xMin;}
else {tile = checkCollision(playerLeft-step,playerTop, playerLeft-step,playerBottom);}
$(player).css("left",(tile?$(tile).offset().left+$(tile).width():x));
}
if(e.which==39 || e.which==68){ //RIGHT,D
x += step;
if (x >= xMax) {x = xMax;}
else {tile = checkCollision(playerRight+step,playerTop, playerRight+step,playerBottom);}
$(player).css("left",(tile?$(tile).offset().left-$(player).width():x));
}
if(e.which==38 || e.which==87){ //UP,W
y -= step;
if (y <= yMin) {y = yMin;}
else {tile = checkCollision(playerLeft,playerTop-step, playerRight,playerTop-step);}
$(player).css("top",(tile?$(tile).offset().top+$(tile).height():y));
}
if(e.which==40 || e.which==83){ //DOWN,S
y += step;
if (y >= yMax) {y = yMax;}
else {tile = checkCollision(playerLeft,playerBottom+step, playerRight,playerBottom+step);}
$(player).css("top",(tile?$(tile).offset().top-$(player).height():y));
}
});
});
div {margin:0; padding:0; border-style:none; box-sizing:border-box; overflow:hidden;}
/*CANVAS================*/
#canvas {display:inline-block;}
/*TILES=================*/
.tile-row {width:100%; height:40px;}
.tile {float:left; width:40px; height:100%;}
.tile.air {background-color:skyblue;}
.tile.block {background-color:sienna;}
.tile.spike {background-color:gray;}
.tile.error {background-color:red;}
/*PLAYER================*/
#player {position:absolute; width:15px; height:15px; background-color:black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="canvas"></div>
<div id="player"></div>
jsfiddle: https://jsfiddle.net/Lqw9w06z/11/
Explanations/Comments:
(function(){...})();是一个IIFE (Immediately Invoked Function Expression)，是一个自动执行的函数。front==playerCorner1x?playerCorner1y:playerCorner1x 称为 Conditional (ternary) Operator，它基本上是一个紧凑的 if 子句。- 图块的大小设置在CSS:
.tile-row {width:100%; height:40px;} 和 .tile {width:40px; height:100%;}.
这就决定了整个canvas/gameboard. 的大小
- 我更改了你的
for-loop，这样一排的所有图块都包裹在包含 div. 中
旁注：
出于某种原因，没有在某一特定位置记录碰撞（见下文）。
如果有人能向我解释为什么会在这个特定的地方发生这种情况，我会很高兴！
我正在尝试使用 jquery、javascript、html 和 css 制作一个简单的游戏。我一直卡在碰撞检测上。
代码：
var map = [
[0,1,0,0,0,1,0,0,],
[0,1,0,0,0,1,0,0,],
[0,1,0,0,0,1,0,0,],
[0,1,1,1,0,1,0,0,],
[0,0,0,0,0,0,0,2,]
];
function DrawMap() {
for(var i=0; i < map.length; i++){
for(var j=0; j < map[i].length; j++){
if(parseInt(map[i][j]) == 0){
$("#container").append("<div class='air'></div>");
}
if(parseInt(map[i][j]) == 1){
$("#container").append("<div class='block'></div>");
}
if(parseInt(map[i][j]) == 2){
$("#container").append("<div class='spike'></div>");
}
}
}
}
window.onload=function() {
DrawMap();
}
更多代码：
var guy=document.getElementById('guy');
var up = 0;
var guyLeft = 0;
var health = 100;
function anim(e){
if(e.keyCode==83){
up +=10;
guy.style.top = up + 'px';
if(up >=400){
up -=10;
}
}
if(e.keyCode==87){
up -=10;
guy.style.top = up + 'px';
if(up <=0){
up +=10;
}
}
if(e.keyCode==68){
guyLeft +=10;
guy.style.left = guyLeft + 'px';
if(guyLeft >= 700){
guyLeft -= 10;
}d
}
if(e.keyCode==65){
guyLeft -=10;
guy.style.left = guyLeft + 'px';
if(guyLeft <= 0){
guyLeft += 10;
}
}
}
document.onkeydown=anim;im;
简答：使用document.elementFromPoint(x,y);检测哪个元素在玩家的位置。
长答案：看看下面的代码片段。
现在，我意识到我对您的代码做了很多更改，包括不必要的功能更改。抱歉，这是因为最初我只是为了自己玩，但现在它起作用了，它可能对某些人有用。
（使用的一些语法你可能不知道，一些解释见我的post底部。）
碰撞部分在function checkCollision()和if子句在$(document).keydown:
- 在 keydown 中 if-clauses
checkCollision()被调用：else {tile = checkCollision(...);. - 基本上我会检查玩家的前方（顶视图）是否会在即将到来的位置发生碰撞：
(for (var i=corner1; i<corner2; ++i) {...})。- 基于碰撞图块（'spike' 或 'block'），我生成警报 (
console.log)，或者我 returncheckTile到调用checkCollision(). 的 if 子句
- 基于碰撞图块（'spike' 或 'block'），我生成警报 (
- 如果
tile被return编辑，tile的位置用于确定player的位置：
$(player).css("left",(tile?$(tile).offset().left+$(tile).width():x));.
代码片段：
//DOCUMENT-READY==========================
$(document).ready(function() {
//VARS----------------------------------
var step = 10;
var health = 100;
//MAP-----------------------------------
var map = [
[0,1,0,0,0,1,0,0],
[0,1,0,0,0,1,0,0],
[0,1,0,0,0,1,0,0],
[0,1,1,1,0,1,0,0],
[0,0,0,0,0,0,0,2]
];
//DRAW MAP------------------------------
(function() {
var tile = "";
for (var y=0,county=map.length; y<county; ++y) {
$("#canvas").append('<div class="tile-row" id="row_'+(y+1)+'"></div>');
for (var x=0,countx=map[y].length; x<countx; ++x) {
switch (parseInt(map[y][x])) {
case 0: tile="air"; break;
case 1: tile="block"; break;
case 2: tile="spike"; break;
default: tile="error";
}
$("#row_"+(y+1)).append('<div class="tile '+tile+'"></div>');
}
}
})();
//SET BOUNDARIES------------------------
var xMin=$("#canvas").offset().left, xMax=xMin+$("#canvas").width()-$("#player").width();
var yMin=$("#canvas").offset().top, yMax=yMin+$("#canvas").height()-$("#player").height();
//PLACE PLAYER--------------------------
$("#player").css("left",xMin).css("top",yMin);
//MOVE PLAYER---------------------------
$(document).keydown(function(e){
var player=document.getElementById("player"), tile=null;
var x=$(player).offset().left, playerLeft=x, playerRight=playerLeft+$(player).width();
var y=$(player).offset().top, playerTop=y, playerBottom=playerTop+$(player).height();
function checkCollision(playerCorner1x, playerCorner1y, playerCorner2x, playerCorner2y) {
var collisionTiles=["block","spike"];
//check if the front of the player is colliding with the environment
var front = (playerCorner1x==playerCorner2x?playerCorner1x:playerCorner1y);
var corner1 = (front==playerCorner1x?playerCorner1y:playerCorner1x);
var corner2 = (front==playerCorner1x?playerCorner2y:playerCorner2x);
//check every pixel along the front for collision
for (var i=corner1; i<corner2; ++i) {
var checkTile = document.elementFromPoint((front==playerCorner1x?front:i), (front==playerCorner1y?front:i));
if (collisionTiles.indexOf(checkTile.className.split(" ")[1]) != -1) {
if ($(checkTile).hasClass("spike")) {console.log("YOU DEAD!");}
else if ($(checkTile).hasClass("block")) {return checkTile;}
break;
}
}
}
if(e.which==37 || e.which==65){ //LEFT,A
x -= step;
if (x <= xMin) {x = xMin;}
else {tile = checkCollision(playerLeft-step,playerTop, playerLeft-step,playerBottom);}
$(player).css("left",(tile?$(tile).offset().left+$(tile).width():x));
}
if(e.which==39 || e.which==68){ //RIGHT,D
x += step;
if (x >= xMax) {x = xMax;}
else {tile = checkCollision(playerRight+step,playerTop, playerRight+step,playerBottom);}
$(player).css("left",(tile?$(tile).offset().left-$(player).width():x));
}
if(e.which==38 || e.which==87){ //UP,W
y -= step;
if (y <= yMin) {y = yMin;}
else {tile = checkCollision(playerLeft,playerTop-step, playerRight,playerTop-step);}
$(player).css("top",(tile?$(tile).offset().top+$(tile).height():y));
}
if(e.which==40 || e.which==83){ //DOWN,S
y += step;
if (y >= yMax) {y = yMax;}
else {tile = checkCollision(playerLeft,playerBottom+step, playerRight,playerBottom+step);}
$(player).css("top",(tile?$(tile).offset().top-$(player).height():y));
}
});
});
div {margin:0; padding:0; border-style:none; box-sizing:border-box; overflow:hidden;}
/*CANVAS================*/
#canvas {display:inline-block;}
/*TILES=================*/
.tile-row {width:100%; height:40px;}
.tile {float:left; width:40px; height:100%;}
.tile.air {background-color:skyblue;}
.tile.block {background-color:sienna;}
.tile.spike {background-color:gray;}
.tile.error {background-color:red;}
/*PLAYER================*/
#player {position:absolute; width:15px; height:15px; background-color:black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="canvas"></div>
<div id="player"></div>
Explanations/Comments:
(function(){...})();是一个IIFE (Immediately Invoked Function Expression)，是一个自动执行的函数。front==playerCorner1x?playerCorner1y:playerCorner1x称为 Conditional (ternary) Operator，它基本上是一个紧凑的 if 子句。- 图块的大小设置在CSS:
.tile-row {width:100%; height:40px;}和.tile {width:40px; height:100%;}.
这就决定了整个canvas/gameboard. 的大小
- 我更改了你的
for-loop，这样一排的所有图块都包裹在包含div. 中
旁注：
出于某种原因，没有在某一特定位置记录碰撞（见下文）。
如果有人能向我解释为什么会在这个特定的地方发生这种情况，我会很高兴！