@watamochi517221posted at 2024-01-29

画面スクロールがうまくいかない。

Q&A

Closed

解決したいこと

プレイヤーがrangeYが一定より下の場合、画面スクロール（ｙ方向）を行いたい。

javascriptでRPGを作っています。
マップループがあまり好きではないので、仮想画面（screen）の表示範囲rangeXとrangeYが画面の端に行ったらマップスクロールをしないようにしています。
その管理をpxとpyがしています。

発生している問題・エラー

問題としては、rangeXの半分のときのマスより右に行ったときにはしっかりマップスクロールしてくれます。しかし、rangeYの半分より下に行ったときマップスクロールがY方向ではなくX方向に回転してしまいます。

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
    body {
      margin: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  
    canvas {
      image-rendering: crisp-edges;
      image-rendering: pixelated;
    }
  </style>
</head>
<body style="margin:0px; overflow:hidden;">
<canvas id="can"></canvas>

<script>
let ImgMap;
let screen;
let size = 32

let playerX = 0;
let playerY = 0;

let TileCow = 2;
let TileRow = 2;
let mapW = 20;
let mapH = 20;

let rangeX = 17;
let rangeY = 11;

let height;

const Map = [
    1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
]

function DrawMain(){

    const sctx = screen.getContext("2d");

    let px = 0;
    let py = 0;

    let cameraX = Math.floor(rangeX / 2) * size;
    let cameraY = Math.floor(rangeY / 2) * size;

    if(playerX > cameraX){
        px += ( playerX - cameraX ) / size;
    }

    if(playerY > cameraY){
        py += ( playerY - cameraY ) / size;
    }

    for(let y = 0; y < rangeY; y++){
        for(let x = 0; x < rangeX; x++){
            DrawTile(sctx,x *size,y*size,Map[(y+py) * mapW +(x+px)])
        }
    }

    sctx.fillRect(playerX,playerY,size,size)

    const can = document.getElementById("can");
    const ctx = can.getContext("2d");

    ctx.drawImage(screen,0,0,screen.width,screen.height,0,0,can.width,can.height);

}

function DrawTile(sctx,x,y,idx){
    let ix = ( idx % TileCow ) * size;
    let iy = Math.floor( idx / TileCow) * size;
    sctx.drawImage( ImgMap, ix,iy,size,size,x, y,size,size)
}

let Key = new Array(100);

let moveX = 0;
let moveY = 0;

function MoveKey(){

    if(moveX != 0 || moveY != 0){}

    else if( Key[87]){
        moveY = -size;
    }

    else if( Key[83]){
        moveY = size;
    }

    else if( Key[68]){
        moveX = size;
    }

    else if( Key[65]){
        moveX = -size;
    }

    playerX += Math.sign(moveX) * 2;
    playerY += Math.sign(moveY) * 2;
    moveX -= Math.sign(moveX) * 2;
    moveY -= Math.sign(moveY) * 2;

}


document.addEventListener('keydown', function(event) {
    let c = event.keyCode;

    Key[c] = 1
});

document.addEventListener('keyup', function(event) {
    let c = event.keyCode;

    Key[c] = 0
});

function Timer(){

    height = innerHeight - innerHeight / 5;

    can.height = height;
    can.width = height + (height / 10) * (rangeX - rangeY);

    DrawMain();
    MoveKey();
   
}

window.onload = function()
{
    ImgMap = new Image(); ImgMap.src = "Map.png";

    screen = document.createElement("canvas");
    screen.width  = rangeX * size;
    screen.height = rangeY * size;

    setInterval(function(){Timer()},33);

   
}
</script>

</body>
</html>

自分で試したこと

片っ端からpyの位置を変えたり、ｙに直接入れたりしようとしましたがうまくいきません。

Are you sure you want to delete the question?