Galaxy map.canvas 320×320 grid 32 sectors.arrow buttoms to navigate the map ener putton to enter section back button to exit section.'s game

Click here for free DL of the app version that can save data.

No:46032

←

Prev Next

→

Galaxy map.canvas 320×320 grid 32 sectors.arrow bu..ALL
Developer User18896｜Date and time 24/2/22 21:22:56
Build time 6.531 sec｜Game capacity 1.837KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Galaxy Map Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="galaxyMap" width="320" height="320"></canvas>
    <br>
    <button onclick="moveUp()">Up</button>
    <button onclick="moveLeft()">Left</button>
    <button onclick="moveRight()">Right</button>
    <button onclick="moveDown()">Down</button>
    <button onclick="enterSector()">Enter Sector</button>
    <button onclick="exitSector()">Exit Sector</button>

function drawMap() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'black';
            ctx.fillRect(currentSector.x * 32, currentSector.y * 32, 32, 32);
        }

function moveUp() {
            if (currentSector.y > 0) {
                currentSector.y--;
                drawMap();
            }
        }

function moveLeft() {
            if (currentSector.x > 0) {
                currentSector.x--;
                drawMap();
            }
        }

function moveRight() {
            if (currentSector.x < 9) {
                currentSector.x++;
                drawMap();
            }
        }

function moveDown() {
            if (currentSector.y < 9) {
                currentSector.y++;
                drawMap();
            }
        }

function enterSector() {
            alert(`Entered Sector: (${currentSector.x}, ${currentSector.y})`);
        }

function exitSector() {
            alert(`Exited Sector: (${currentSector.x}, ${currentSector.y})`);
        }

drawMap();
    </script>
</body>
</html>