"use strict"; let canva, c, w, h, countBounce = 0, maxCount = 0; const restarts = ['ready for restart?', 'for play tap okay', 'don\'t give up!', 'nice game, one more?'] const g = 0.1; const frc = 0.996; const { PI, floor, random, abs } = Math; window.onload = () => { canva = document.getElementById('canva'); canva.width = w = 340; canva.height = h = 400; c = canva.getContext('2d'); draw(); }; function Ball(x, y, dx, dy, radius) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.color = '#008b00'; } function Drop(x, y, dx, dy) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; } let ball = new Ball(20, 20, 1, 1, 10); let drop = new Drop(100, 90, 3, 1); let drop2 = new Drop(0, 380, 1, 1); function draw() { c.clearRect(0, 0, w, h); c.beginPath(); c.strokeStyle = '#00ff00'; c.lineWidth = 0.25; for (let i = 0; i <= w; i+= 10) { c.beginPath(); c.moveTo(i, 0); c.lineTo(i, h); c.lineWidth = (i % 50 === 0) ? 0.5 : 0.25; c.stroke(); } for (let i = 0; i <= h; i+=10) { c.beginPath(); c.moveTo(0, i); c.lineTo(w, i); c.lineWidth = (i % 50 === 0) ? 0.5 : 0.25; c.stroke(); } c.closePath(); c.beginPath(); c.fillStyle = ball.color; updateBall(); updateDrop(); c.arc(ball.x, ball.y, ball.radius, PI * 2, false); c.fillRect(drop.x, drop.y, 50, 10); c.fillRect(drop2.x, drop2.y, 60, 10); c.stroke(); c.fill(); c.closePath; scoreShow(); requestAnimationFrame(draw); } function updateBall() { if (~~(ball.x + ball.radius) >= w || ~~(ball.x - ball.radius) <= 0) { ball.dx = -(ball.dx); } if (~~(ball.y - ball.radius) <= 0) { ball.dy = -ball.dy; } if (~~(ball.y + ball.radius) <= ~~(drop2.y + 10) && ~~(ball.y + ball.radius) >= ~~(drop2.y) && ~~(ball.x) >= ~~(drop2.x) && ~~(ball.x) <= ~~(drop2.x + 60)) { ball.dy = -(ball.dy + g); countBounce++; } if (~~(ball.y - ball.radius) <= ~~(drop.y + 10) && ~~(ball.y - ball.radius) >= ~~(drop.y) && ~~(ball.x) >= ~~(drop.x) && ~~(ball.x) <= ~~(drop.x + 50)) { ball.dy = -(ball.dy + g); } if (ball.y + ball.radius >= h) { if (maxCount < countBounce) { maxCount = countBounce; } countBounce = 0; alert(restarts[floor(random()*4)]); ball = new Ball( drop2.x, 20, 1, 1, 10); } if (ball.y >= 0) { ball.dy += g; // gravity } if (ball.y <= 0) { ball.dy *= frc; // friction } ball.x += ball.dx; ball.y += ball.dy; } function updateDrop() { if (drop.x >= 0){ drop.dx = -drop.dx; } if (drop.x + 40 <= canva.width) { drop.dx = -drop.dx; } drop.x += drop.dx; } function left() { if (drop2.x >= 0) { drop2.x -= 30; } } function right() { if (drop2.x + 60 <= w) { drop2.x += 30; } } function scoreShow() { let score = document.getElementById('count'); score.innerHTML = 'touch: ' + countBounce + ' ** max: ' + maxCount + ''; }

BallBounce