javascript - 正在进行的游戏无法运行

Question

我试图设计一个在线版本的 pacman，但是我为对象检测编写的代码不起作用。大多数时候，当没有墙壁并进入空白区域时，它就会停止。我相信我已经正确编写了代码，但它们可能是错误的，因为我刚刚开始学习 javascript。

    <canvas id="gc" width="400", height="400"></canvas>

    <script>
    window.onload = function() {
        canv=document.getElementById("gc");
	    ctx=canv.getContext("2d");
        document.addEventListener("keydown",keyPush);
	    setInterval(game,1000/2);
    }

    var px=4
	var py=5;
    var xv=0
	var yv=0;
	var cx=5;
	var cy=17;
	//1 = wall, 0 = biscuit, 2 = nothing
    var map=[[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
		    [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
		    [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1],
		    [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1],
		    [1,0,1,1,0,1,0,1,0,1,1,0,1,0,1,0,1,1,0,1],
		    [1,0,0,0,0,1,0,1,0,0,0,0,1,0,1,0,0,0,0,1],
		    [1,0,1,1,0,1,0,0,1,0,1,1,0,0,1,0,1,1,0,1],
		    [1,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1],
		    [1,0,0,0,1,0,1,0,1,1,0,1,0,1,0,1,0,0,0,1],
		    [1,0,1,1,1,0,0,0,1,2,2,1,0,0,0,1,1,1,0,1],
		    [1,0,0,0,0,0,1,0,1,2,2,1,0,1,0,0,0,0,0,1],
		    [1,0,1,1,0,1,1,0,1,2,2,1,0,1,1,0,1,1,0,1],
		    [1,0,0,0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,1],
		    [1,1,1,1,0,1,1,0,0,0,0,0,0,1,1,0,1,1,1,1],
		    [1,0,0,0,0,1,0,0,1,1,0,1,0,0,1,0,0,0,0,1],
		    [1,0,1,1,0,1,0,1,0,0,0,0,1,0,1,0,1,1,0,1],
		    [1,0,1,0,0,0,0,1,0,1,1,0,1,0,0,0,0,1,0,1],
		    [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1],
		    [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
		    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];
    point=0;
    gs=tc=20;

    function game() {
		// got to check if can move
		
		var x = px + xv;
		var y = py + yv;

		if (map[x][y] != 1) {
			px = x;
			py = y;
		}

        ctx.fillStyle="black";
    	ctx.fillRect(0,0,canv.width,canv.height);

		for (var i=0; i<map.length;i++) {
			for (var s=0; s<map[i].length;s++) {
				if (map[i][s] == 1) {
					ctx.fillStyle="blue";
    				ctx.fillRect(s*gs,i*gs,gs,gs);
				}
				if (map[i][s] == 0) {
					ctx.fillStyle="white";
    				ctx.fillRect(s*gs+5,i*gs+5,gs-10,gs-10);
				}
			}
		}

		ctx.fillStyle="red";
    	ctx.fillRect(cx*gs+5,cy*gs+5,gs-10,gs-10);		

        ctx.fillStyle="yellow";
    	ctx.fillRect(px*gs+2.5,py*gs+2.5,gs-5,gs-5);

    }

    function keyPush(evt) {
        switch(evt.keyCode) {
		case 37:
			xv=-1;yv=0;
			break;
		case 38:
			xv=0;yv=-1;
			break;
		case 39:
			xv=1;yv=0;
			break;
		case 40:
			xv=0;yv=1;
			break;
	}
    }
</script>

请帮助我。

Answer 1

您的脚本没问题，您只是在碰撞检查中混淆了 y 和 x。
使用 if (map[y][x] != 1) 修复代码:

window.onload = function() {
    canv=document.getElementById("gc");
    ctx=canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game,1000/2);
}

var px=4
var py=5;
var xv=0
var yv=0;
var cx=5;
var cy=17;
//1 = wall, 0 = biscuit, 2 = nothing
var map=[[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
        [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
        [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1],
        [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1],
        [1,0,1,1,0,1,0,1,0,1,1,0,1,0,1,0,1,1,0,1],
        [1,0,0,0,0,1,0,1,0,0,0,0,1,0,1,0,0,0,0,1],
        [1,0,1,1,0,1,0,0,1,0,1,1,0,0,1,0,1,1,0,1],
        [1,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1],
        [1,0,0,0,1,0,1,0,1,1,0,1,0,1,0,1,0,0,0,1],
        [1,0,1,1,1,0,0,0,1,2,2,1,0,0,0,1,1,1,0,1],
        [1,0,0,0,0,0,1,0,1,2,2,1,0,1,0,0,0,0,0,1],
        [1,0,1,1,0,1,1,0,1,2,2,1,0,1,1,0,1,1,0,1],
        [1,0,0,0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,1],
        [1,1,1,1,0,1,1,0,0,0,0,0,0,1,1,0,1,1,1,1],
        [1,0,0,0,0,1,0,0,1,1,0,1,0,0,1,0,0,0,0,1],
        [1,0,1,1,0,1,0,1,0,0,0,0,1,0,1,0,1,1,0,1],
        [1,0,1,0,0,0,0,1,0,1,1,0,1,0,0,0,0,1,0,1],
        [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1],
        [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];
point=0;
gs=tc=20;

function game() {
    // got to check if can move

    var x = px + xv;
    var y = py + yv;

    if (map[y][x] != 1) {
        px = x;
        py = y;
    }

    ctx.fillStyle="black";
    ctx.fillRect(0,0,canv.width,canv.height);

    for (var i=0; i<map.length;i++) {
        for (var s=0; s<map[i].length;s++) {
            if (map[i][s] == 1) {
                ctx.fillStyle="blue";
                ctx.fillRect(s*gs,i*gs,gs,gs);
            }
            if (map[i][s] == 0) {
                ctx.fillStyle="white";
                ctx.fillRect(s*gs+5,i*gs+5,gs-10,gs-10);
            }
        }
    }

    ctx.fillStyle="red";
    ctx.fillRect(cx*gs+5,cy*gs+5,gs-10,gs-10);      

    ctx.fillStyle="yellow";
    ctx.fillRect(px*gs+2.5,py*gs+2.5,gs-5,gs-5);

}

function keyPush(evt) {
    switch(evt.keyCode) {
    case 37:
        xv=-1;yv=0;
        break;
    case 38:
        xv=0;yv=-1;
        break;
    case 39:
        xv=1;yv=0;
        break;
    case 40:
        xv=0;yv=1;
        break;
}
}

<canvas id="gc" width="400" height="400"></canvas>