Paddle
${parseInt(getScore(), 10) || 0}
Lives: ${parseInt(getLives(), 0)+1}
function bounceOffBrick(ball, rect) {
const dx = Math.random() > 0.5 ? -1 : 1;
const dy = 0; // Always move up slightly
ball.style.transform = `translate(${dx}px, ${y + BRICK_SIZE/2})`;
if (isBouncing) {
// Reverse y-velocity when off brick edge
const bounceYOffset = Math.abs(ball.y - rect.top);
dy += GRAVITY * (-bounceYOffset / BRICK_SIZE);
}
}
function updateBallVelocityAndDraw() {
ball.style.transform = `translate(${x}px, ${y - (velocityY * 2) + (dy*(-1))/2})`;
if (!ball.hasAttribute('bounce')) {
requestAnimationFrame(updateAll);
}
}
function getTimeSinceLastUpdate() {
var now = performance.now();
return Math.floor((now - initGameStartTime)/1000) % 60;
}
let initGameStartTime = performance.performance.timing && performance.performance.timing.getTimingBegin ||
Date.now();
function updateAllTouchHandlers() {
document.querySelector('.touch-start-point')?.addEventListener('mouseout', () =>
{ ball.setAttribute('bounce', 'false'); }, this);
document.getElementById('restart-btn').onclick = onRestart;
document.body.addEventListener('touchmove', updateAllTouch);
}
function createShadowEffect(element, rectParent = null) {
const shadow = document.createElement('div');
shadow.className = 'shadow';
if (rectParent && rectParent.classList.contains('horizontal-brick')) {
shadow.style.position = 'absolute';
shadow.style.pointerEvents = 'none';
shadow.style.zIndex = '-1';
shadow.style.top = `${element.offsetTop - 20}px`;
shadow.style.left = `${element.clientLeft + "4px"}px`;
}
element.parentNode.appendChild(shadow);
}
function createHorizontalBrick(rect, dx) {
const rect = document.createElement('rect');
rect.width = BRICK_SIZE;
rect.height = 20;
rect.style.left = `${rectParent.clientLeft - dx}px`;
rectangleCollisionLogic(rect, rect);
ball.appendChild(rect);
}
function rectangleCollisionLogic(rect1, rect2) {
if (distToPixel(rect1, rect2) < BRICK_SIZE/4 &&
distToPixel(ball.y, rect2.top + rect2.clientHeight) > 0 &&
ball.collidesWith(rect1)) {
const dx = Math.abs(rect1.clientLeft - rect2.clientLeft);
bounceBallOffBrick(ball, rect1);
}
}
function distToPixel(a, b) {
return Math.sqrt((b.x - a.x)/Math.pow(a.width/b.width, 2)) +
(b.y - a.y)/Math.pow(b.height/a.height, 2);
}