add disable camera button

This commit is contained in:
2026-05-05 12:11:08 +09:00
parent 3b019607ec
commit 085e2b4134
4 changed files with 46 additions and 8 deletions

View File

@@ -3,6 +3,7 @@
initCameraControl, initCameraControl,
updateCameraControl, updateCameraControl,
cameraInput, cameraInput,
resetCameraInput
} from "./game/cameraControl.js"; } from "./game/cameraControl.js";
let videoContainer; let videoContainer;
@@ -34,6 +35,20 @@
} }
} }
function disableCamera() {
if (videoContainer) {
const video = videoContainer.querySelector("video");
if (video && video.srcObject) {
const tracks = video.srcObject.getTracks();
tracks.forEach((track) => track.stop());
}
videoContainer.innerHTML = "";
}
enabled = false;
resetCameraInput();
}
async function updateLoop() { async function updateLoop() {
if (!enabled) return; if (!enabled) return;
@@ -65,6 +80,11 @@
<div class:active={zone === "right"}>GO RIGHT</div> <div class:active={zone === "right"}>GO RIGHT</div>
</div> </div>
</div> </div>
{#if enabled}
<button class="disable-btn" onclick={disableCamera}>
Disable camera control
</button>
{/if}
{#if error} {#if error}
<p class="error">{error}</p> <p class="error">{error}</p>
@@ -83,7 +103,7 @@
padding: 16px; padding: 16px;
color: white; color: white;
width: 320px; width: 320px;
height: 340px; height: 380px;
} }
.camera-view { .camera-view {
@@ -108,7 +128,7 @@
transform: scaleX(-1); transform: scaleX(-1);
} }
button { .camera-view button {
position: absolute; position: absolute;
inset: 50% auto auto 50%; inset: 50% auto auto 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@@ -144,4 +164,13 @@
color: #ffb3b3; color: #ffb3b3;
font-size: 13px; font-size: 13px;
} }
.disable-btn {
margin-top: 15px;
padding: 8px 14px;
border: none;
border-radius: 999px;
cursor: pointer;
font-weight: bold;
}
</style> </style>

View File

@@ -11,7 +11,7 @@ let video;
let faceLandmarker; let faceLandmarker;
let lastTime = 0; let lastTime = 0;
const DETECTION_INTERVAL = 60; const DETECTION_INTERVAL = 80;
export async function initCameraControl() { export async function initCameraControl() {
if (cameraInput.active) if (cameraInput.active)
@@ -86,4 +86,15 @@ export function updateCameraControl() {
cameraInput.right = false; cameraInput.right = false;
cameraInput.zone = 'center'; cameraInput.zone = 'center';
} }
}
export function resetCameraInput() {
cameraInput.left = false;
cameraInput.right = false;
cameraInput.active = false;
cameraInput.zone = 'center';
video = null;
faceLandmarker = null;
lastTime = 0;
} }

View File

@@ -1,4 +1,4 @@
import { updatePlayerPosition, createPlayer } from './player.js'; import { createPlayer, movePlayer } from './player.js';
import { initPlatforms, moveWorld } from './platforms.js'; import { initPlatforms, moveWorld } from './platforms.js';
import { GAME_COLORS, PLATFORMS_GAP } from './constants.js'; import { GAME_COLORS, PLATFORMS_GAP } from './constants.js';
@@ -37,7 +37,7 @@ export function updateGame() {
return; return;
} }
pendingWorldMove += updatePlayerPosition(player, platforms); pendingWorldMove += movePlayer(player, platforms);
player.rotation = player.vel.x * 1.5; player.rotation = player.vel.x * 1.5;
if (pendingWorldMove > PLATFORMS_GAP) { if (pendingWorldMove > PLATFORMS_GAP) {

View File

@@ -42,7 +42,7 @@ function handleJump(player, platform) {
return elevationGain; return elevationGain;
} }
export function updatePlayerPosition(player, platforms) { export function movePlayer(player, platforms) {
// Controls // Controls
player.vel.x = 0; player.vel.x = 0;
@@ -50,8 +50,6 @@ export function updatePlayerPosition(player, platforms) {
player.vel.x = -5; player.vel.x = -5;
} else if (keyIsDown(RIGHT_ARROW) || cameraInput.right) { } else if (keyIsDown(RIGHT_ARROW) || cameraInput.right) {
player.vel.x = 5; player.vel.x = 5;
} else {
player.vel.x *= 0.5;
} }