gronod/Pacman-Source-Code
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

added mobile controls debugging and fixes

Browse Source
This commit is contained in:
gronod
2026-02-02 16:59:20 +00:00
parent d5bd5a83df
commit 4bb2ea6860
1 changed files with 52 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
pacman.html
View File

@@ -23,6 +23,7 @@
.dpad-center { width: 50px; height: 50px; top: 50px; left: 50px; background: rgba(255, 255, 0, 0.1); }
.mobile-space-btn { position: fixed; bottom: 180px; left: 50%; transform: translateX(-50%); background: rgba(0, 255, 255, 0.3); border: 2px solid #0ff; border-radius: 10px; color: #0ff; font-size: 16px; font-weight: bold; padding: 10px 20px; cursor: pointer; user-select: none; -webkit-user-select: none; z-index: 1000; }
.mobile-space-btn:active { background: rgba(0, 255, 255, 0.6); }
.debug-info { position: fixed; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); color: #0ff; font-size: 12px; padding: 5px; border: 1px solid #0ff; z-index: 1001; }
@media (max-width: 768px) {
body { padding: 10px; }
#gameCanvas { max-width: 100%; height: auto; }
@@ -63,6 +64,13 @@
<!-- Mobile Space Button -->
<button id="mobileSpaceBtn" class="mobile-space-btn" style="display: none;">SPACE</button>
<!-- Debug Info -->
<div id="debugInfo" class="debug-info">
<div>Mobile: <span id="isMobileStatus">No</span></div>
<div>State: <span id="gameStateStatus">START</span></div>
<div>Controls: <span id="controlsStatus">Hidden</span></div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
@@ -73,11 +81,25 @@
const startScreenElement = document.getElementById('startScreen');
const mobileControlsElement = document.getElementById('mobileControls');
const mobileSpaceBtnElement = document.getElementById('mobileSpaceBtn');
const debugInfoElement = document.getElementById('debugInfo');
const isMobileStatusElement = document.getElementById('isMobileStatus');
const gameStateStatusElement = document.getElementById('gameStateStatus');
const controlsStatusElement = document.getElementById('controlsStatus');
// Mobile detection
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
(window.innerWidth <= 768 && 'ontouchstart' in window);
// Update debug info
function updateDebugInfo() {
if (isMobileStatusElement) isMobileStatusElement.textContent = isMobile ? 'Yes' : 'No';
if (gameStateStatusElement) gameStateStatusElement.textContent = gameState;
if (controlsStatusElement) {
const isVisible = mobileControlsElement.classList.contains('active');
controlsStatusElement.textContent = isVisible ? 'Visible' : 'Hidden';
}
}
// Show mobile controls if on mobile device
if (isMobile) {
mobileControlsElement.classList.add('active');
@@ -86,7 +108,15 @@
const scale = Math.min(window.innerWidth / 500, 1);
canvas.style.width = (448 * scale) + 'px';
canvas.style.height = (560 * scale) + 'px';
} else {
// Also show mobile controls on desktop for testing and smaller screens
if (window.innerWidth <= 768) {
mobileControlsElement.classList.add('active');
mobileSpaceBtnElement.style.display = 'block';
}
}
updateDebugInfo();
const CELL_SIZE = 14;
const MAZE_WIDTH = 32;
@@ -613,6 +643,7 @@
checkCollisions();
animationFrame++;
updateDebugInfo();
// Auto-start game after attract mode timeout
if (attractModeTimer > 600) { // 10 seconds at 60fps
@@ -625,6 +656,7 @@
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawTitleScreen();
animationFrame++;
updateDebugInfo();
} else if (gameState === 'READY') {
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -639,6 +671,7 @@
soundSystem.play('ready');
}
animationFrame++;
updateDebugInfo();
} else if (gameState === 'INTERMISSION') {
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -652,6 +685,7 @@
readyTimer = 180;
}
animationFrame++;
updateDebugInfo();
} else if (gameState === 'PLAYING') {
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -678,6 +712,7 @@
}
animationFrame++;
updateDebugInfo();
// Auto-switch to attract mode after inactivity
if (animationFrame % 3600 === 0) { // 1 minute of inactivity
@@ -731,25 +766,32 @@
// Mobile touch controls
function setupMobileControls() {
console.log('Setting up mobile controls...');
const dpadButtons = document.querySelectorAll('.dpad-btn');
dpadButtons.forEach(button => {
const direction = button.dataset.direction;
if (!direction) return; // Skip center button
console.log('Setting up button for direction:', direction);
// Touch start
button.addEventListener('touchstart', (e) => {
e.preventDefault();
console.log('Touch start for direction:', direction, 'Game state:', gameState);
if (gameState === 'PLAYING') {
pacman.nextDirection = direction;
console.log('Set pacman direction to:', direction);
}
});
// Mouse down (for testing on desktop)
button.addEventListener('mousedown', (e) => {
e.preventDefault();
console.log('Mouse down for direction:', direction, 'Game state:', gameState);
if (gameState === 'PLAYING') {
pacman.nextDirection = direction;
console.log('Set pacman direction to:', direction);
}
});
@@ -767,26 +809,34 @@
// Mobile space button
mobileSpaceBtnElement.addEventListener('touchstart', (e) => {
e.preventDefault();
console.log('Mobile space button touched');
handleSpaceButton();
});
mobileSpaceBtnElement.addEventListener('mousedown', (e) => {
e.preventDefault();
console.log('Mobile space button clicked');
handleSpaceButton();
});
console.log('Mobile controls setup complete');
}
function handleSpaceButton() {
console.log('Space button pressed, current game state:', gameState);
if (gameState === 'ATTRACT') {
gameState = 'START';
attractModeTimer = 0;
soundSystem.play('ready');
console.log('Switched to START state');
} else if (gameState === 'START') {
gameState = 'READY';
readyTimer = 180;
startScreenElement.style.display = 'none';
resetPositions();
soundSystem.play('ready');
console.log('Switched to READY state');
} else if (gameState === 'GAME_OVER') {
gameState = 'START';
gameOverElement.style.display = 'none';
@@ -797,11 +847,12 @@
updateLives();
maze = JSON.parse(JSON.stringify(mazeLayout));
soundSystem.play('ready');
console.log('Restarted game');
}
}
// Initialize mobile controls if needed
if (isMobile) {
if (isMobile || window.innerWidth <= 768) {
setupMobileControls();
}