heyday-marketing-gmbh/kaltaquise-gamification
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pong mobile

Browse Source
This commit is contained in:
verboomp
2026-04-21 15:45:14 +02:00
parent 82befd2be7
commit 01997290a6
1 changed files with 53 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
thiola-pong/game.js
View File

@@ -252,6 +252,47 @@
mouseY = (e.clientY - rect.top) * (H / rect.height);
});
// Each touch is tracked by identifier so two fingers work independently (PvP tablet).
// Side is decided at touchstart: in PvP left half → player 1, right half → player 2.
// In CPU mode every touch controls player 1.
const activeTouches = new Map();
function getTouchSide(clientX) {
return (gameMode !== 'pvp' || clientX < window.innerWidth / 2) ? 'left' : 'right';
}
document.addEventListener('touchstart', e => {
// No preventDefault here — keeps tap→click working for buttons/popups/flash
if (!running) return;
for (const t of e.changedTouches) {
activeTouches.set(t.identifier, { side: getTouchSide(t.clientX), prevClientY: t.clientY });
}
}, { passive: false });
document.addEventListener('touchmove', e => {
if (!running) return;
e.preventDefault(); // Prevent page scroll while dragging during gameplay
const scaleY = H / canvas.getBoundingClientRect().height;
for (const t of e.changedTouches) {
const touch = activeTouches.get(t.identifier);
if (!touch) continue;
const dy = (t.clientY - touch.prevClientY) * scaleY;
if (touch.side === 'left') playerY = Math.max(0, Math.min(H - PADDLE_H, playerY + dy));
else cpuY = Math.max(0, Math.min(H - PADDLE_H, cpuY + dy));
touch.prevClientY = t.clientY;
}
}, { passive: false });
document.addEventListener('touchend', e => {
for (const t of e.changedTouches) activeTouches.delete(t.identifier);
if (activeTouches.size === 0) mouseY = null;
});
document.addEventListener('touchcancel', e => {
for (const t of e.changedTouches) activeTouches.delete(t.identifier);
if (activeTouches.size === 0) mouseY = null;
});
// ─── Update ───
function update() {
if (!running || paused) return;
@@ -260,13 +301,14 @@
const prevPlayerY = playerY;
const prevCpuY = cpuY;
// Player 1 (left) — PvP: W/S only; CPU mode: mouse OR W/S
if (gameMode === 'pvp') {
if (keyW) playerY -= 6;
if (keyS) playerY += 6;
} else {
// Player 1 (left) — touch drag takes priority, then mouse, then keys
const leftTouched = [...activeTouches.values()].some(t => t.side === 'left');
if (!leftTouched) {
if (mouseY !== null) {
playerY += (mouseY - PADDLE_H/2 - playerY) * 0.15;
} else if (gameMode === 'pvp') {
if (keyW) playerY -= 6;
if (keyS) playerY += 6;
} else {
if (keyUp || keyW) playerY -= 6;
if (keyDown || keyS) playerY += 6;
@@ -274,10 +316,13 @@
}
playerY = Math.max(0, Math.min(H - PADDLE_H, playerY));
// Player 2 / CPU (right)
// Player 2 / CPU (right) — touch drag takes priority, then keys / CPU AI
const rightTouched = [...activeTouches.values()].some(t => t.side === 'right');
if (gameMode === 'pvp') {
if (keyUp) cpuY -= 6;
if (keyDown) cpuY += 6;
if (!rightTouched) {
if (keyUp) cpuY -= 6;
if (keyDown) cpuY += 6;
}
} else {
const diff = ballY - (cpuY + PADDLE_H/2);
if (Math.abs(diff) > 10) cpuY += Math.sign(diff) * Math.min(cpuSpeed, Math.abs(diff) * 0.07);