我正在尝试重新创建游戏RushHour
这两个矩形不能相互穿过。
垂直碰撞检测有效，而水平碰撞无效。
另外，底部矩形不能水平移动，顶部矩形也不能垂直移动。
有没有办法将sizex和sizey变量合并到检测中？
var row = 6
var column = 6
var actualx = []
var actualy = []
var actualsizex = []
var actualsizey = []
var rx = [4,4]
var ry = [4,5]
var sizex = [1,1]
var sizey = [1,1]
var canmovehori = [1,0]
var canmovevert = [0,1]
var clicked = []
var steps
var objects=1
function setup() {
createCanvas(500, 500);
console.log(rx);
console.log(ry);
console.log(sizey);
console.log(sizex)
console.log(rx.length)
steps = height/row
}
function draw() {
background(0);
for (var x = 0; x < width; x += width / column) {
for (var y = 0; y < height; y += height / row) {
stroke(255);
strokeWeight(1);
line(x, 0, x, height);
line(0, y, width, y);
}
for (i=0; i < rx.length; i++){
actualx[i] = steps*rx[i] - steps
actualy[i] = steps*ry[i] - steps
actualsizex[i] = sizex[i]*steps
actualsizey[i] = sizey[i]*steps
if(clicked[i]==1){
fill(255,0,0)
}else{
fill(255)
}
rect(actualx[i], actualy[i], actualsizex[i], actualsizey[i])
}
}
}
function mousePressed(){
for (i=0; i < rx.length; i++){
x = actualx[i]
y = actualy[i]
w = actualsizex[i]
h = actualsizey[i]
if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h){
console.log('Click')
for (n=0; n <= objects; n++){
clicked[n] = 0
}
clicked[i] = 1
console.log(clicked)
}
}
}
function keyPressed() {
selected = clicked.indexOf(1)
console.log(selected)
if (keyCode === LEFT_ARROW) {
console.log('Left')
if (rx[selected] != 1 && canmovehori[selected] == 1){
rx[selected]--
colision('L', selected)
}
}
if (keyCode === RIGHT_ARROW) {
console.log('right')
if (rx[selected]+sizex[selected]-1 != 6 && canmovehori[selected] == 1){
rx[selected]++
console.log('Passed')
colision('R', selected)
}
}
if (keyCode === UP_ARROW) {
console.log('up')
if (ry[selected] != 1 && canmovevert[selected] == 1){
ry[selected]--
console.log('Passed')
colision('U', selected)
}
}
if (keyCode === DOWN_ARROW) {
console.log('Down')
if (ry[selected] +sizey[selected] -1 != 6 && canmovevert[selected] == 1){
ry[selected]++
console.log('Passed')
colision('D', selected)
}
}
}
function colision(n,s){
mx=rx[s]
my=ry[s]
collidex = rx.indexOf(mx) +1
collidey = ry.indexOf(my) +1
console.log(s)
console.log(collidey)
console.log(collidex)
if (collidex != s+1 && collidey != s+1){
if(n == 'U'){
ry[s]++
}
if(n == 'D'){
ry[s]--
}
if(n == 'L'){
rx[s]++
}
if(n == 'R'){
rx[s]--
}
console.log('Collis')
}else{console.log('All good')}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
答案 0 :(得分：0)
为使您的代码更像RushHour游戏，我们可以将游戏的某些规则封装到Vehicle对象中。车辆可以跟踪其在网格上的位置及其自身的选定状态。这样一来，我们的阵列就更少了，总体来说，使游戏的思考变得更加简单。
此代码不是完整的RushHour游戏，但确实可以使您更接近解决方案。
var rows = 6
var columns = 6
var vehicles = [];
var selectedVehicle;
var vehicleIds = 0;
var vehicleSize;
var Vehicle = function( row, col, direction){
this.row = row;
this.col = col;
this.vehicleId = vehicleIds++;
this.selectedState = false;
this.direction = direction;
this.xPos = col * vehicleSize;
this.yPos = row * vehicleSize;
};
function setup() {
createCanvas(500, 500);
vehicleSize = width/columns;
vehicles.push(new Vehicle(3,3, "horz"));
vehicles.push(new Vehicle(4,3, "vert"));
}
function draw() {
background(0);
for (var x = 0; x < width; x += width / columns) {
for (var y = 0; y < height; y += height / rows) {
stroke(255);
strokeWeight(1);
line(x, 0, x, height);
line(0, y, width, y);
}
for (i=0; i < vehicles.length; i++){
let vehicle = vehicles[i];
if(vehicle.selectedState){
fill(255,0,0)
}else{
fill(255)
}
rect(vehicle.col * vehicleSize, vehicle.row * vehicleSize, vehicleSize, vehicleSize)
}
}
}
function mousePressed(){
for (i=0; i < vehicles.length; i++){
let vehicle = vehicles[i];
x = vehicle.xPos;
y = vehicle.yPos;
w = vehicleSize;
h = vehicleSize;
vehicle.selectedState = false;
if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h){
selectedVehicle = vehicle;
selectedVehicle.selectedState = true;
}
}
}
function keyPressed() {
if (keyCode === LEFT_ARROW) {
if (canMoveLeft(selectedVehicle)){
selectedVehicle.col--;
selectedVehicle.xPos -= vehicleSize;
}
}
if (keyCode === RIGHT_ARROW) {
if (canMoveRight(selectedVehicle)){
selectedVehicle.col++;
selectedVehicle.xPos += vehicleSize;
}
}
if (keyCode === UP_ARROW) {
if (canMoveUp(selectedVehicle)){
selectedVehicle.row--;
selectedVehicle.yPos -= vehicleSize;
}
}
if (keyCode === DOWN_ARROW) {
if (canMoveDown(selectedVehicle)){
selectedVehicle.row++;
selectedVehicle.yPos += vehicleSize;
}
}
}
function canMoveLeft(vehicle){
if (vehicle.col > 0 && vehicle.direction === "horz"){
for (let i = 0; i < vehicles.length; i++){
let otherVehicle = vehicles[i];
if (otherVehicle.row === vehicle.row && otherVehicle.col === vehicle.col - 1){
return false;
}
}
} else {
return false;
}
return true;
}
function canMoveRight(vehicle){
if (vehicle.col < columns - 1 && vehicle.direction === "horz"){
for (let i = 0; i < vehicles.length; i++){
let otherVehicle = vehicles[i];
if (otherVehicle.row === vehicle.row && otherVehicle.col === vehicle.col + 1){
return false;
}
}
} else {
return false;
}
return true;
}
function canMoveDown(vehicle){
if (vehicle.row < rows - 1 && vehicle.direction === "vert"){
for (let i = 0; i < vehicles.length; i++){
let otherVehicle = vehicles[i];
if (otherVehicle.col === vehicle.col && otherVehicle.row === vehicle.row + 1){
return false;
}
}
} else {
return false;
}
return true;
}
function canMoveUp(vehicle){
if (vehicle.row > 0 && vehicle.direction === "vert"){
for (let i = 0; i < vehicles.length; i++){
let otherVehicle = vehicles[i];
if (otherVehicle.col === vehicle.col && otherVehicle.row === vehicle.row - 1){
return false;
}
}
} else {
return false;
}
return true;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
要完成游戏，您需要将代码扩展为：