自分専用のメモです、使いたい方はサンプルコード等を使用しても構いません すいません、まとめたのはここで let cam; let cellSize = 200; // 1: 壁, 0: 通路, 2: スタート地点 const map = [ [1, 1, 1, 1, 1, 1, 1, 1], [1, 2, 0, 0, 1, 0, 0, 1], [1, 1, 1, 0, 1, 0, 1, 1], [1, 0, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 1, 1, 0, 1], [1, 0, 0, 0, 0, 1, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1] ]; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); cam = createCamera(); // 初期位置をマップの「2」の場所に設定 cam.setPosition(-400, 0, -200); // 画面クリックでマウスを固定（FPS操作） requestPointerLock(); } function draw() { background(5); // ほぼ真っ暗な背景 // 1. 視点操作 (マウスの移動量で回転) if (p5.prototype._isPointerLocked) { cam.pan(-movedX * 0.002); cam.tilt(movedY * 0.002); } // 2. 移動操作 (WASD) let moveSpeed = 4; if (keyIsDown(87)) cam.move(0, 0, -moveSpeed); // W if (keyIsDown(83)) cam.move(0, 0, moveSpeed); // S if (keyIsDown(65)) cam.move(-moveSpeed, 0, 0); // A if (keyIsDown(68)) cam.move(moveSpeed, 0, 0); // D // 3. 懐中電灯（カメラの位置から正面を照らす） // 向きを計算：(centerX - eyeX, ...) let lx = cam.centerX - cam.eyeX; let ly = cam.centerY - cam.eyeY; let lz = cam.centerZ - cam.eyeZ; spotLight(255, 255, 220, cam.eyeX, cam.eyeY, cam.eyeZ, lx, ly, lz, PI / 3, 10); pointLight(20, 20, 20, cam.eyeX, cam.eyeY, cam.eyeZ); // 足元のわずかな明かり // 4. マップ（壁）の描画 noStroke(); for (let y = 0; y < map.length; y++) { for (let x = 0; x < map[y].length; x++) { if (map[y][x] === 1) { push(); translate(x * cellSize - 600, 0, y * cellSize - 600); fill(60); // 壁の色 box(cellSize, cellSize * 1.5, cellSize); pop(); } } } // 5. 地面の描画 push(); translate(-200, cellSize / 1.5, -200); rotateX(HALF_PI); fill(30); plane(2000, 2000); pop(); } // 画面クリックで操作開始 function mousePressed() { requestPointerLock(); }
JavaScript でとりあえずホラゲー 第一とりあえず 3dなど 擬似3dで決定？ 第一迷路のコードから let cam; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); cam = createCamera(); } function draw() { background(0); // 真っ暗な背景 // マウス移動による視点回転（movedX, movedYを使用） cam.pan(-movedX * 0.002); cam.tilt(movedY * 0.002); // キー入力による前後左右の移動 if (keyIsDown(87)) cam.move(0, 0, -5); // Wキー if (keyIsDown(83)) cam.move(0, 0, 5); // Sキー // 懐中電灯のシミュレート spotLight(255, 255, 255, cam.eyeX, cam.eyeY, cam.eyeZ, cam.centerX - cam.eyeX, cam.centerY - cam.eyeY, cam.centerZ - cam.eyeZ, PI/4); // 地面や壁の描画 push(); translate(0, 100, 0); rotateX(HALF_PI); plane(2000, 2000); // 地面 pop(); } まあこんな感じ これはスクラッチしかやったことない人はきついね簡潔に自分が説明すると Let=変数 const =初期値から変わらない数 Key down() これは（）なかに割り振られてるキーの数 入れるとこのキーが押されたか検知できる まあもっとコードあるけど 省略しまーす fuction 自分の好きな名前の関数？スクラッチで言うと定義みたいなもの マップ用コード const map = [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1] ]; const cellSize = 200; // 壁のサイズ あと function drawMap() { for (let y = 0; y < map.length; y++) { for (let x = 0; x < map[y].length; x++) { if (map[y][x] === 1) { push(); // セルの位置に合わせて移動 translate(x * cellSize - (map[0].length * cellSize) / 2, 0, y * cellSize - (map.length * cellSize) / 2); fill(50); // 壁の色（暗め） box(cellSize, cellSize * 2, cellSize); // 高さを出して壁にする pop(); } } } }
