I was trying to design a version of pacman online, but the code I have written for object detection does not work. Most of the time it stop when there isn't a wall and runs into blank space. I believe I have written the code correctly but they may be mistakes as I just begun learning 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>Please help me.
Your script is ok, you had just mixed up y and x in the collision check.
Fixed code with 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>