window.onload = function(){ const c = document.querySelector('canvas'); const ctx = c.getContext('2d'); const width = c.width; const height = c.height; let num = document.getElementById('num').firstChild; const btn = document.getElementById('btn'); //random tools function random(min,max){ return Math.round(Math.random()*(max-min) + min); } function randomColor(){ return 'rgb('+ random(0,255) + ','+ random(0,255) + ','+ random(0,255) + ')'; } class Shape { constructor(...args){ this.x = args[0]; this.y = args[1]; this.velX = args[2]; this.velY = args[3]; this.exists = args[4]; } } /*测试Shape实例const s1 = new Shape( 5,5,10,10,1); console.log(s1.x);*/ //specify Ball object 继承Shape构造器 class Ball extends Shape { constructor(...args){ super(...args); this.color = args[5]; this.size = args[6]; } draw(){ ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2*Math.PI); ctx.fill(); } update(){ if( (this.x + this.size) >= width ){ this.velX = -(this.velX); } if((this.x - this.size) < 0 ){ this.velX = -(this.velX); } if((this.y + this.size) >= height){ this.velY = -(this.velY); } if((this.y - this.size) < 0 ){ this.velY = -(this.velY); } this.x += this.velX; this.y += this.velY; } collisionDetect(){ for(let j = 0 ; j < balls.length; j++){ if(this !== balls[j] && balls[j].exists == 1){ const dx = this.x - balls[j].x; const dy = this.y - balls[j].y; const distance = Math.sqrt(dx*dx + dy*dy); if (distance < (this.size + balls[j].size)){ balls[j].color = this.color = randomColor(); } } } } } /*测试Ball实例 const testball = new Ball(10,10,5,5,1,'Blue',5); testball.draw();*/ class EvilCircle extends Shape{ //继承部分属性 constructor(x,y,exists){ super(x,y,20,20,exists); this.color = 'white'; this.size = 10; } draw(){ ctx.beginPath(); ctx.strokeStyle = this.color; ctx.lineWidth = 3; ctx.arc(this.x, this.y, this.size, 0, 2*Math.PI); ctx.stroke(); } checkBounds(){ if( (this.x + this.size) >= width ){ this.x -= this.size; } if((this.x - this.size) < 0 ){ this.x += this.size; } if((this.y + this.size) >= height){ this.y -= this.size; } if((this.y - this.size) < 0 ){ this.y = this.size; } } setControls(){ //移动恶魔 window.onkeydown = e => { switch(e.key) { case 'a': this.x -= this.velX; break; case 'd': this.x += this.velX; break; case 'w': this.y -= this.velY; break; case 's': this.y += this.velY; break; } }; } collisionDetect(){ for(let j = 0 ; j < balls.length; j++){ if( balls[j].exists ){ const dx = this.x - balls[j].x; const dy = this.y - balls[j].y; const distance = Math.sqrt(dx*dx + dy*dy); if (distance < (this.size + balls[j].size)){ balls[j].exists = 0; balls.splice(j,1); balls.length-=1; } } } } } const evil = new EvilCircle(100,100,1); evil.setControls(); //balls const balls = []; while( balls.length < 66){ let size = random(0,20); let ball = new Ball( random( 0+ size , width - size), random( 0+ size , height - size), random(-3,3), random(-3,3), true, randomColor(), 10 ); balls.push(ball); } function loop(){ ctx.fillStyle = 'rgb(0,0,0,0.25)'; ctx.fillRect(0,0,width,height); for(let i = 0; i< balls.length; i++){ if(balls[i]){ balls[i].draw(); balls[i].update(); balls[i].collisionDetect(); } } evil.draw(); evil.checkBounds(); evil.collisionDetect(); num.textContent= balls.length; requestAnimationFrame(loop); } loop(); //check if game ends (function checkend(){ if(balls.length === 0 ) return confirm('you win!ฅ ˘ฅ'); })(); btn.onclick = function (){ //add more balls while( balls.length < 66){ let size = random(0,20); let ball = new Ball( random( 0+ size , width - size), random( 0+ size , height - size), random(-3,3), random(-3,3), true, randomColor(), 10 ); balls.push(ball); } if(num.textContent!== 0 ) alert('remain balls need to be cleaned !'); } }

object practice