提问者:小点点

纯Javascript贴图冲突检测


我正在制作一个传统方法的基于瓷砖的游戏(两个循环),我正在尝试写碰撞检测,但没有任何工作。我想让蓝色的方块留在屏幕中,在你点击开始后在瓷砖的顶部。我遇到了一个病毒在寻找解决方案。请帮我堆栈溢出社区。

代码:

null

const context = document.getElementById("canvas").getContext('2d');
const person = new rectangle(100,100,20,20,'blue');
setInterval(update_all,10);
var next_block_x = 0;
var next_block_y = 0;
var block_size = 50;
var moving = false;
const tile_map = [
    [0,0,0,0,0,0],
    [0,0,0,0,0,0],
    [1,0,0,0,0,0],
    [1,1,0,0,0,0],
    [1,1,1,0,0,0],
    [1,1,1,1,1,1]
];
function rectangle(x,y,w,h,col){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.col = col;
    this.update = function(){
        context.fillStyle = this.col;
        context.fillRect(this.x,this.y,this.w,this.h);
        context.stroke();
    }
}
function block(x,y,col){
    this.x = x;
    this.y = y;
    this.col = col;
    context.fillStyle = this.col;
    context.fillRect(this.x,this.y,block_size,block_size);
    context.stroke();
}
function update_tile_map(){
    for(i=0;i<tile_map.length;i++){
        for(var j=0;j<tile_map[i].length;j++){
            if(tile_map[i][j] == 1){
                new block(next_block_x,next_block_y,'red');
            }
            next_block_x += block_size;
        }
        next_block_x = 0;
        next_block_y += block_size
    }
    next_block_x = 0;
    next_block_y = 0;
}
function clear(){
    context.clearRect(0,0,300,300);
}
function start(){
    moving = true;
}
function stop(){
    moving = false;
}
function update_all(){
    clear();
    update_tile_map();
    person.update();
    if(moving != false){
        person.y ++;
    }
}
#canvas{
    background-color:lightgrey;
    border: 4px solid grey;
}
<button onclick='start()'>START</button>
<button onclick='stop()'>STOP</button>
<canvas id="canvas" width='300' height='300'></canvas>

null


共1个答案

匿名用户

您可以添加一个if语句来检查块是否撞上了墙:

if (person.y<300) person.y ++; else person.y = 0

null

const context = document.getElementById("canvas").getContext('2d');
const person = new rectangle(100,100,20,20,'blue');
setInterval(update_all,10);

var block_size = 50;
var moving = false;
const tile_map = [
    [1,1,1,1,1,1],
    [1,0,0,0,0,1],
    [1,0,0,0,0,1],
    [1,0,0,0,0,1],
    [1,0,0,0,0,1],
    [1,1,1,1,1,1]
];
function rectangle(x,y,w,h,col){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.col = col;
    this.update = function(){
        context.fillStyle = this.col;
        context.fillRect(this.x,this.y,this.w,this.h);
        context.stroke();
    }
}


function clear(){
    context.clearRect(0,0,300,300);
}
function start(){
    moving = true;
}
function stop(){
    moving = false;
}
function update_all(){
    clear();

    person.update();
    if(moving != false){
        if (person.y<300) person.y ++; else person.y = 0
    }
}
#canvas{
    background-color:lightgrey;
    border: 4px solid grey;
}
<button onclick='start()'>START</button>
<button onclick='stop()'>STOP</button>
<canvas id="canvas" width='300' height='300'></canvas>