let can; let c; let grid; let pacMan; let CELLSIZE; let ghosts; document.addEventListener("keydown", function (e) { e.preventDefault(); if (e.keyCode === 37) { pacMan.goLeft(); } else if (e.keyCode === 38) { pacMan.goUp(); } else if (e.keyCode === 39) { pacMan.goRight(); } else if (e.keyCode === 40) { pacMan.goDown(); } }); let touchstart; let touchend; document.addEventListener("touchstart", function (e) { e.preventDefault(); touchstart = [e.touches[0].clientX, e.touches[0].clientY]; }); document.addEventListener("touchmove", function (e) { e.preventDefault(); touchend = [e.touches[0].clientX, e.touches[0].clientY]; }); document.addEventListener("touchend", function (e) { e.preventDefault(); if(Math.hypot(touchend[0] - touchstart[0], touchend[1] - touchstart[1]) > 5){ let diffX = touchend[0] - touchstart[0]; let diffY = touchend[1] - touchstart[1]; if(Math.abs(diffX) > Math.abs(diffY)){ if(diffX < 0){ pacMan.goLeft(); }else{ pacMan.goRight(); } }else{ if(diffY < 0){ pacMan.goUp(); }else{ pacMan.goDown(); } } } }); function reset(){ let grid_ = [ "2222222222222222222222222222", "2400004000004224000004000042", "2022220222220220222220222202", "2122220222220220222220222212", "2022220222220220222220222202", "2400004004004004004004000042", "2022220220222222220220222202", "2022220220222222220220222202", "2400004224004224004224000042", "2222220222223223222220222222", "2222220222223223222220222222", "2222220224334444334220222222", "2222220223222442223220222222", "2222220223222442223220222222", "3333334334244444424334333333", "2222220223222222223220222222", "2222220223222222223220222222", "2222220224333333334220222222", "2222220223222222223220222222", "2222220223222222223220222222", "2400004004004224004004000042", "2022220222220220222220222202", "2022220222220220222220222202", "2404224004004004004004224042", "2220220220222222220220220222", "2220220220222222220220220222", "2404004224004224004224004042", "2022222222220220222222222202", "2400000000004004000000000042", "2222222222222222222222222222" ] grid = []; CELLSIZE = Math.min(can.width / grid_[0].length, can.height / grid_.length); for (let i = 0; i < grid_.length; i++) { let row = []; for (let j = 0; j < grid_[i].length; j++) { row.push(new Cell(j, i, parseInt(grid_[i][j]), CELLSIZE)); } grid.push(row); } pacMan = new PacMan(grid[0].length / 2, grid.length / 2 + 8.5, CELLSIZE / 2); ghosts = [ new Ghost(grid[0].length / 2 - 2, grid.length / 2, 0), new Ghost(grid[0].length / 2 - 1, grid.length / 2 - 1, 1), new Ghost(grid[0].length / 2, grid.length / 2 - 1, 2), new Ghost(grid[0].length / 2 + 1, grid.length / 2, 3), ]; for(let i=0;i<4;i++){ ghosts.push(new Ghost(grid[0].length / 2 - 2 + i, grid.length / 2 - 1, i, CELLSIZE)); } } window.onload = function () { can = document.getElementById("can"); can.width = Math.min(window.innerWidth, window.innerHeight) - 20; can.height = Math.min(window.innerWidth, window.innerHeight) - 20; c = can.getContext("2d"); c.fillRect(0, 0, can.width, can.height); reset(); loop(); }; function loop() { c.fillStyle = "#000000"; c.fillRect(0, 0, can.width, can.height); for (let i = 0; i < grid.length; i++) { for (let j = 0; j < grid[i].length; j++) { grid[i][j].show(c); } } for(let i=0;i 0) { if (grid[i][j - 1].isSolid()) { this.x = j + 0.5; this.y = i + 0.5; } } else { if (this.x < 0) { this.x += grid[0].length; } } this.y = i + 0.5; try{ grid[i][j].collect(); }catch(Exception){ } } else if (this.goingUp()) { let i = Math.ceil(this.y - 0.5); let j = Math.ceil(this.x - 0.5); if (grid[i - 1][j].isSolid()) { this.x = j + 0.5; this.y = i + 0.5; } this.x = j + 0.5; try{ grid[i][j].collect(); }catch(Exception){ } } else if (this.goingRight()) { let i = Math.floor(this.y - 0.5); let j = Math.floor(this.x - 0.5); if (j < grid[0].length - 1) { if (grid[i][j + 1].isSolid()) { this.x = j + 0.5; this.y = i + 0.5; } } else { if (this.x >= grid[0].length) { this.x -= grid[0].length; } } this.y = i + 0.5; try{ grid[i][j].collect(); }catch(Exception){ } } else { let i = Math.floor(this.y - 0.5); let j = Math.floor(this.x - 0.5); if (grid[i + 1][j].isSolid()) { this.x = j + 0.5; this.y = i + 0.5; } this.x = j + 0.5; try{ grid[i][j].collect(); }catch(Exception){ } } } this.show = function (c) { c.fillStyle = "#FFFF00"; c.beginPath(); c.arc(this.x * this.r * 2, this.y * this.r * 2, this.r * 0.75, 0, 2 * Math.PI); c.fill(); } this.goLeft = function () { if (this.goingUp()) { this.x = Math.floor(this.x - 0.5) + 0.5; this.y = Math.floor(this.y - 0.5) + 0.5; } else if (this.goingDown()) { this.x = Math.ceil(this.x - 0.5) + 0.5; this.y = Math.ceil(this.y - 0.5) + 0.5; } this.xSpeed = -this.maxSpeed; this.ySpeed = 0; } this.goUp = function () { if (this.goingLeft()) { this.x = Math.floor(this.x - 0.5) + 0.5; this.y = Math.floor(this.y - 0.5) + 0.5; } else if (this.goingRight()) { this.x = Math.ceil(this.x - 0.5) + 0.5; this.y = Math.ceil(this.y - 0.5) + 0.5; } this.xSpeed = 0; this.ySpeed = -this.maxSpeed; } this.goRight = function () { if (this.goingUp()) { this.x = Math.floor(this.x - 0.5) + 0.5; this.y = Math.floor(this.y - 0.5) + 0.5; } else if (this.goingDown()) { this.x = Math.ceil(this.x - 0.5) + 0.5; this.y = Math.ceil(this.y - 0.5) + 0.5; } this.xSpeed = this.maxSpeed; this.ySpeed = 0; } this.goDown = function () { if (this.goingLeft()) { this.x = Math.floor(this.x - 0.5) + 0.5; this.y = Math.floor(this.y - 0.5) + 0.5; } else if (this.goingRight()) { this.x = Math.ceil(this.x - 0.5) + 0.5; this.y = Math.ceil(this.y - 0.5) + 0.5; } this.xSpeed = 0; this.ySpeed = this.maxSpeed; } this.goingLeft = function () { return this.xSpeed < 0; } this.goingUp = function () { return this.ySpeed < 0; } this.goingRight = function () { return this.xSpeed > 0; } this.goingDown = function () { return this.ySpeed > 0; } this.getInCell = function (ghostRequesting, grid, normal) { if(normal === 1){ return [Math.floor(this.x - 0.5), Math.floor(this.y - 0.5)]; } if(ghostRequesting.type === 0){ let x = Math.floor(this.x - 0.5); let y = Math.floor(this.y - 0.5); if(this.goingLeft()){ return [Math.min(grid[0].length-1, x + 4), y]; }else if(this.goingUp()){ return [x, Math.min(grid.length-1, y + 4)]; }else if(this.goingRight()){ return [Math.max(0, x - 4), y]; }else{ return [x, Math.max(0, y - 4)]; } }else if(ghostRequesting.type === 1){ if(Math.hypot(this.x - ghostRequesting.x, this.y - ghostRequesting.y) < 6){ return [grid[0].length - 2, grid.length - 2]; }else { return [Math.floor(this.x - 0.5), Math.floor(this.y - 0.5)]; } }else if(ghostRequesting.type === 2){ let x = Math.floor(this.x - 0.5); let y = Math.floor(this.y - 0.5); if(this.goingLeft()){ return [Math.max(0, x - 4), y]; }else if(this.goingUp()){ return [x, Math.max(0, y - 4)]; }else if(this.goingRight()){ return [Math.min(grid[0].length-1, x + 4), y]; }else{ return [x, Math.min(grid.length-1, y + 4)]; } }else { return [Math.floor(this.x - 0.5), Math.floor(this.y - 0.5)]; } } } function Cell(x, y, type, cellWidth) { this.x = x; this.y = y; this.type = type; this.cellWidth = cellWidth; this.visited = false; this.visitedBy = [this.x, this.y]; this.show = function (c) { if (this.type == 2) { c.fillStyle = "#0000FF"; c.fillRect(this.x * this.cellWidth, this.y * this.cellWidth, this.cellWidth * 0.9, this.cellWidth * 0.9); } else if (this.type == 1) { c.fillStyle = "#FFFF00"; c.beginPath(); c.arc((this.x + 0.5) * this.cellWidth, (this.y + 0.5) * this.cellWidth, this.cellWidth / 4, 0, 2 * Math.PI); c.fill(); } else if (this.type == 0) { c.fillStyle = "#FFFF00"; c.beginPath(); c.arc((this.x + 0.5) * this.cellWidth, (this.y + 0.5) * this.cellWidth, this.cellWidth / 8, 0, 2 * Math.PI); c.fill(); } } this.isCorner = function(){ return this.type === 4; } this.isSolid = function () { return this.type === 2; } this.collect = function () { if (this.type === 0) { this.type = 3; } else if (this.type === 1) { this.type = 3; } } this.assignPathTo = function(grid, destination, calledBy, li){ if(this.visited){ return; } if(this.x === destination[0] && this.y === destination[1]){ this.visited = true; this.visitedBy = calledBy; }else{ this.visited = true; this.visitedBy = calledBy; if(!this.isSolid()){ if(this.x !== 0){ li.push([grid[this.y][this.x-1], [this.x, this.y]]); } if(this.y !== 0){ li.push([grid[this.y-1][this.x], [this.x, this.y]]); } if(this.x < grid[0].length-1){ li.push([grid[this.y][this.x+1], [this.x, this.y]]); } if(this.y < grid.length-1){ li.push([grid[this.y+1][this.x], [this.x, this.y]]); } } } } } function Ghost(x, y, type, cellWidth) { this.x = x; this.y = y; this.type = type; this.cellWidth = cellWidth; this.xSpeed = 0; this.ySpeed = 0; this.maxSpeed = 1 / Math.pow(2, 4); this.update = function (grid, pacMan) { for (let i = 0; i < grid.length; i++) { for (let j = 0; j < grid[i].length; j++) { grid[i][j].visited = false; } } let destination = pacMan.getInCell(this, grid, 0); let start; if (this.goingLeft() || this.goingUp()) { start = [Math.ceil(this.x), Math.ceil(this.y)]; } else { start = [Math.round(this.x - 0.5), Math.round(this.y - 0.5)]; } let queue = [[grid[start[1]][start[0]], start]]; let startCell = grid[start[1]][start[0]]; let endCell = grid[destination[1]][destination[0]]; if(Math.hypot(pacMan.x - this.x, pacMan.y - this.y) <= 1){ reset(); } try{ if(!startCell.isCorner() || this.x % 1 != 0 || this.y % 1 != 0){ this.x += this.xSpeed; this.y += this.ySpeed; if(this.x < 0){ this.x += grid[0].length; } if(this.x >= grid[0].length){ this.x -= grid[0].length; } return; } }catch(Exception){ this.x += this.xSpeed; this.y += this.ySpeed; return; } try { if(endCell.isSolid()){ endCell = grid[grid.length-2][grid[0].length-2]; } while (!endCell.visited) { let front = queue.splice(0, 1)[0]; front[0].assignPathTo(grid, destination, front[1], queue); } } catch (Exception) { return; } while (endCell.visitedBy[0] !== startCell.x || endCell.visitedBy[1] !== startCell.y) { //c.strokeStyle = "#FFFFFF"; //c.moveTo(endCell.x * this.cellWidth, endCell.y * this.cellWidth); endCell = grid[endCell.visitedBy[1]][endCell.visitedBy[0]]; //c.lineTo(endCell.x * this.cellWidth, endCell.y * this.cellWidth); //c.stroke() } if (startCell.x < endCell.x) { this.xSpeed = this.maxSpeed; this.ySpeed = 0; this.x = Math.round(this.x - 0.5); this.y = Math.round(this.y - 0.5); } else if (startCell.x > endCell.x) { this.xSpeed = -this.maxSpeed; this.ySpeed = 0; this.x = Math.round(this.x - 0.5); this.y = Math.round(this.y - 0.5); } else if (startCell.y < endCell.y) { this.xSpeed = 0; this.ySpeed = this.maxSpeed; this.x = Math.round(this.x - 0.5); this.y = Math.round(this.y - 0.5); } else if (startCell.y > endCell.y) { this.xSpeed = 0; this.ySpeed = -this.maxSpeed; this.x = Math.round(this.x - 0.5); this.y = Math.round(this.y - 0.5); } this.x += this.xSpeed; this.y += this.ySpeed; if (this.goingLeft()) { let i = Math.round(this.y - 0.5); let j = Math.round(this.x - 0.5); if (j > 0) { if (grid[i][j - 1].isSolid()) { this.x = j; this.y = i; } } else { if (this.x < 0) { this.x += grid[0].length; } } this.y = i; } else if (this.goingUp()) { let i = Math.round(this.y - 0.5); let j = Math.round(this.x - 0.5); if (grid[i - 1][j].isSolid()) { this.x = j; this.y = i; } this.x = j; } else if (this.goingRight()) { let i = Math.round(this.y - 0.5); let j = Math.round(this.x - 0.5); if (j < grid[0].length - 1) { if (grid[i][j + 1].isSolid()) { this.x = j; this.y = i; } } else { if (this.x >= grid[0].length) { this.x -= grid[0].length; } } this.y = i; } else { let i = Math.round(this.y - 0.5); let j = Math.round(this.x - 0.5); if (grid[i + 1][j].isSolid()) { this.x = j; this.y = i; } this.x = j; } } this.show = function (c) { if (this.type === 0) { c.fillStyle = "#00FF00"; } else if (this.type === 1) { c.fillStyle = "#FF0000"; } else if (this.type === 2) { c.fillStyle = "#00FFFF"; } else { c.fillStyle = "#FF00FF"; } c.fillRect((this.x) * this.cellWidth, (this.y) * this.cellWidth, this.cellWidth * 0.9, this.cellWidth * 0.9); } this.goingLeft = function () { return this.xSpeed < 0; } this.goingUp = function () { return this.ySpeed < 0; } this.goingRight = function () { return this.xSpeed > 0; } this.goingDown = function () { return this.ySpeed > 0; } }

pacman || unfinished