Space...sector 1 canvas 100 by 100, grid 10 sections number 0 to 9 each section has 10 subsections 10 times.arrow buttons and entre ,back button to navagat sectors's game

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

No:46867

136

←

Prev Next

→

Space...sector 1 canvas 100 by 100, grid 10 sectio..ALL
Developer User18896｜Date and time 24/2/26 11:51:40
Build time 6.966 sec｜Game capacity 2.611KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Space Sector Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="1000" height="1000"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        let currentSector = 1;
        let currentPosition = 0;

drawSector(currentSector, currentPosition);

function drawSector(sector, position) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = '20px Arial';
            ctx.fillText(`Sector: ${sector} Position: ${position}`, 10, 50);

// Draw grid
            for(let i = 0; i < 10; i++) {
                for(let j = 0; j < 10; j++) {
                    ctx.strokeRect(i * 100, j * 100, 100, 100);
                    ctx.fillText(`${i},${j}`, i * 100 + 10, j * 100 + 20);
                }
            }

// Add arrow buttons
            const upButton = document.createElement('button');
            upButton.innerText = '▲';
            upButton.addEventListener('click', () => {
                if(position > 0) {
                    currentPosition--;
                    drawSector(currentSector, currentPosition);
                }
            });
            document.body.appendChild(upButton);

const downButton = document.createElement('button');
            downButton.innerText = '▼';
            downButton.addEventListener('click', () => {
                if(position < 99) {
                    currentPosition++;
                    drawSector(currentSector, currentPosition);
                }
            });
            document.body.appendChild(downButton);

const leftButton = document.createElement('button');
            leftButton.innerText = '◄';
            leftButton.addEventListener('click', () => {
                if(sector > 1) {
                    currentSector--;
                    drawSector(currentSector, currentPosition);
                }
            });
            document.body.appendChild(leftButton);

const rightButton = document.createElement('button');
            rightButton.innerText = '►';
            rightButton.addEventListener('click', () => {
                if(sector < 10) {
                    currentSector++;
                    drawSector(currentSector, currentPosition);
                }
            });
            document.body.appendChild(rightButton);
        }
    </script>
</body>
</html>