プログラミング 【React】迷路に合わせて床の大きさを自動で調整する
迷路のサイズと Cube の大きさに合わせて迷路の床の大きさを調整する。
App.tsx
import React from 'react';
import { Canvas } from '@react-three/fibe...
TypeScript
プログラミング プログラミング 【React】迷路を生成する
CubeとPlaneを用いて、迷路を生成する。
App.tsx
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { ...
プログラミング 【React】オブジェクトを複製する
同じジオメトリとマテリアルから作成したメッシュをシーンに追加することでオブジェクトを複製する。
App.tsx
import React from 'react'
import { Canvas } from '@react-...
プログラミング 【React】オブジェクトの位置を変更する
positionやrotationプロパティでオブジェクトの位置を変更する。
App.tsx
import React from 'react'
import { Canvas } from '@react-three/fib...
プログラミング 【React】オブジェクトを生成する
ジオメトリとマテリアルから作成したメッシュをシーンに追加する。
App.tsx
import React from 'react'
import { Canvas } from '@react-three/fiber';
im...
まとめ 【まとめ】TypeScriptで迷路
これまでに書いた記事の中から、「TypeScriptで迷路」というテーマで書いた記事をまとめてみました。
...
プログラミング 【React】クリア画面を表示する
プレイヤーがゴールに到達したら「Game Clear!!」を出力する。
Canvas.tsx
import React, { useEffect } from 'react';
import p5 from 'p5';
imp...
プログラミング 【React】十字キーから入力を受け取る
十字キーから入力を受け取り、迷路を移動できるようにする。
Canvas.tsx
import React, { useEffect } from 'react';
import p5 from 'p5';
import Maz...
プログラミング 【React】迷路を描画する
Canvasに迷路を描画する。
Canvas.tsx
import React, { useEffect } from 'react';
import p5 from 'p5';
import Maze from './maz...
プログラミング 【React】楕円を描画する
ellipse関数でCanvasに楕円を描画する。
import React, { useEffect } from 'react';
import p5 from 'p5';
const sketch = (p: p5) => ...