add disable camera button
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user