0
\$\begingroup\$

I was messing around with some maze stuff. I was wondering if its possible to add a character to what i have even though Im not using canvas.How do you position an html element representing your player on your page so it aligns with a position in the maze.

my html:

<head>
<title>Maze</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="mazegenerator.js"></script>
<script type="text/javascript" src="Maze.js"></script>
<style type="text/css">
#maze {
    border-collapse: collapse;
}
#maze td {
    width: 20px;
    height: 20px;
}
canvas {
position: absolute;
}
</style>
</head>
<body>

<table id="maze">
<tbody></tbody>
</table>


<script>
    var disp = newMaze(20,20);
    for (var i = 0; i < disp.length; i++) {
        $('#maze > tbody').append("<tr>");
        for (var j = 0; j < disp[i].length; j++) {
            var selector = i+"-"+j;
            $('#maze > tbody').append("<td id='"+selector+"'>&nbsp;</td>");
            if (disp[i][j][0] == 0) { $('#'+selector).css('border-top', '2px solid black'); }
            if (disp[i][j][1] == 0) { $('#'+selector).css('border-right', '2px solid black'); }
            if (disp[i][j][2] == 0) { $('#'+selector).css('border-bottom', '2px solid black'); }
            if (disp[i][j][3] == 0) { $('#'+selector).css('border-left', '2px solid black'); }
        }
        $('#maze > tbody').append("<tr>");
    }
</script>
    <br>
    <span id="mazeComplete">Maze complete &nbsp;&nbsp;&nbsp;&nbsp; <button id="resetMaze" onclick="mazeReset()">New Maze</button> </span>
    &nbsp;&nbsp;&nbsp;&nbsp; Completed&nbsp;&nbsp;<span id="mazeCompletions">0</span>
<script type="text/javascript" src="Maze.js"></script>
</body>
</html>

my javascript:


    // Establish variables and starting grid
    var totalCells = x*y;
    var cells = new Array();
    var unvis = new Array();
    for (var i = 0; i < y; i++) {
        cells[i] = new Array();
        unvis[i] = new Array();
        for (var j = 0; j < x; j++) {
            cells[i][j] = [0,0,0,0];
            unvis[i][j] = true;
        }
    }

    // Set a random position to start from
    var currentCell = [Math.floor(Math.random()*y), Math.floor(Math.random()*x)];
    var path = [currentCell];
    unvis[currentCell[0]][currentCell[1]] = false;
    var visited = 1;

    // Loop through all available cell positions
    while (visited < totalCells) {
        // Determine neighboring cells
        var pot = [[currentCell[0]-1, currentCell[1], 0, 2],
                [currentCell[0], currentCell[1]+1, 1, 3],
                [currentCell[0]+1, currentCell[1], 2, 0],
                [currentCell[0], currentCell[1]-1, 3, 1]];
        var neighbors = new Array();

        // Determine if each neighboring cell is in game grid, and whether it has already been checked
        for (var l = 0; l < 4; l++) {
            if (pot[l][0] > -1 && pot[l][0] < y && pot[l][1] > -1 && pot[l][1] < x && unvis[pot[l][0]][pot[l][1]]) { neighbors.push(pot[l]); }
        }

        // If at least one active neighboring cell has been found
        if (neighbors.length) {
            // Choose one of the neighbors at random
            next = neighbors[Math.floor(Math.random()*neighbors.length)];

            // Remove the wall between the current cell and the chosen neighboring cell
            cells[currentCell[0]][currentCell[1]][next[2]] = 1;
            cells[next[0]][next[1]][next[3]] = 1;

            // Mark the neighbor as visited, and set it as the current cell
            unvis[next[0]][next[1]] = false;
            visited++;
            currentCell = [next[0], next[1]];
            path.push(currentCell);
        }
        // Otherwise go back up a step and keep going
        else {
            currentCell = path.pop();
        }
    }
    return cells;
}

function mazeReset(){
   document.location.reload() 
}









var gameComplete = false;
var mazeComplete = document.getElementById("mazeComplete");


function checkGameFinished() {

  if (gameComplete === false) {
    mazeComplete.style.visibility = 'visible'
  } else if (gameComplete === true) {
    mazeComplete.style.visibility = 'visible'

  }
}

checkGameFinished();

I expect a way to put a movable object in the top left corner then a sort of goal in the bottom right corner. at the moment Im not sure how to accomplish this.

\$\endgroup\$
  • 1
    \$\begingroup\$ It looks like you might be a little too early in your learning journey to make good use of this site. We do best with questions where the asker already understands the fundamentals of game development, and just needs help with the particulars of a design or implementation problem. Here it doesn't look like you have any game loop or player input at all. That's a lot to expect a stranger to walk you through from scratch, so you may find it takes a while before someone willing comes along. You might get the insight you need faster by following JS tutorials or checking out sample games online. \$\endgroup\$ – DMGregory Oct 14 '19 at 13:56
  • \$\begingroup\$ yes im new on this subject but i have made several idle game. Dont you just need to make 1 function that will display a dot or square or what ever in a position then make 4-5 move functions tied to event.key that control how you move on button press. then i wanted a final dot or square for the end goal that on reaching you win. Ive gotten more help on here then 1 single function to make a player object meh. ill look elsewhere for help. This is something im not use to doing. do you recommend i make a game canvas first? \$\endgroup\$ – tmanrocks994 Oct 14 '19 at 14:24
  • \$\begingroup\$ It sounds like you have a plan of attack. Want to show us how you've attempted to put that plan into action? This site is usually much better (and faster) at completing/fixing a partial solution than building one from scratch. I'd assume you know how to position an html element representing your player avatar or goal on your page so it aligns with their position in the maze? If not, ask that. One narrow question at a time usually gets the best results. \$\endgroup\$ – DMGregory Oct 14 '19 at 14:28
  • \$\begingroup\$ Thats the main question i had. i dont really know how to do that. how do I position a html element like that. \$\endgroup\$ – tmanrocks994 Oct 14 '19 at 14:33
  • \$\begingroup\$ I recommend removing the question about moving it then. Presumably you can figure out how to adjust your x & y positions based on key/button presses. Or if you can't, that's a separate question with different answers. \$\endgroup\$ – DMGregory Oct 14 '19 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.