canvas+JS編寫二維彈球
阿新 • • 發佈：2018-12-20
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>二維彈球</title> <style> body{ background: mediumaquamarine; margin: 0; overflow:hidden; } button:hover{ background: firebrick } button:visited{ background: firebrick } .difficulty{ color: cyan; background:black; display: flex; flex-flow: column,wrap; } </style> </head> <body> <div class="difficulty">遊戲難度 <button onclick="loop1()">易</button> <button onclick="loop2()">中</button> <button onclick="loop3()">難</button> </div> <canvas class="mycanvas" height="650px" width="800px" > </canvas> <script> var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; var rightPressed;//判斷右鍵 var leftPressed;//判斷左鍵 var balls = [];//用於儲存球的數量 //事件監聽 function keyDownHandler(e) { if(e.keyCode == 39) { rightPressed = true; } else if(e.keyCode == 37) { leftPressed = true; } } document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); function keyUpHandler(e) { if(e.keyCode == 39) { rightPressed = false; } else if(e.keyCode == 37) { leftPressed = false; } } //滑塊屬性 var paddleHeight = 20; var paddleWidth = 125; var paddleX = (canvas.width-paddleWidth)/2; //隨機函式 function random(min, max) { var num = Math.ceil(Math.random() * (max - min )) + min; return num; } ; //繪製滑塊 function drawPaddle() { ctx.fillStyle = "white"; ctx.fillRect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); }; //圓物件 function Ball(x, y, velX, velY, color, size) { this.x = x; this.y = y; this.velX = velX; this.velY = velY; this.color = color; this.size = size; } //畫圓 Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); ctx.fill(); } //球的運動規則 Ball.prototype.update = function() { 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+50) { this.velY = 0; } if ((this.y - this.size) <= 0) { this.velY = -(this.velY); } if(this.y+this.velY > canvas.height-this.size-paddleHeight) { if(this.x+this.velX > paddleX && this.x+this.velX < paddleX + paddleWidth) { this.velY= -(this.velY); this.color='rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')'; } } if(this.y+this.size > canvas.height+10) { alert("GAME OVER"); location.reload(); } this.x += this.velX; this.y += this.velY; } //易 function loop1() { //背景 ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); drawPaddle(); if(rightPressed && paddleX < canvas.width-paddleWidth) { paddleX += 10; } else if(leftPressed && paddleX > 0) { paddleX -= 10; } //判斷圓的個數,定義圓的屬性 while(balls.length<1){ var ball = new Ball( random(25,width), random(25,150), 2,//X方向速度 2,//Y方向速度 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25)//半徑 ); balls.push(ball); } for (var i = 0; i < balls.length; i++) { balls[i].draw(); balls[i].update(); } requestAnimationFrame(loop1); } //中 function loop2() { //背景 ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); if(rightPressed && paddleX < canvas.width-paddleWidth) { paddleX +=15; } else if(leftPressed && paddleX > 0) { paddleX -= 15; } //滑塊 drawPaddle(); //定義圓的個數,定義圓的屬性 while (balls.length < 2) { var ball = new Ball( random(25,width), random(25,100), 3,//X方向速度 3,//Y方向速度 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25) ); balls.push(ball); } let i=0; while ( i< balls.length ) { balls[i].draw(); balls[i].update(); i++; } requestAnimationFrame(loop2) ; } //難 function loop3() { //背景 ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); if(rightPressed && paddleX < canvas.width-paddleWidth) { paddleX += 20; } else if(leftPressed && paddleX > 0) { paddleX -= 20; } drawPaddle(); //定義圓的個數,定義圓的屬性 switch (balls.length){ case 0: var ball1 = new Ball( 25, 150, 4, 4, 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25) ); var ball2= new Ball( 500, 100, 6,//X方向速度 6,//Y方向速度 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25) ); var ball3= new Ball( 240, 200, 3,//X方向速度 3,//Y方向速度 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25) ); balls.push(ball1); balls.push(ball2); balls.push(ball3); break; case 1: var ball1 = new Ball( 25,30,3, 3, 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25) ); var ball2= new Ball( 500, 50, 3,//X方向速度 3,//Y方向速度 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25) ); balls.push(ball1); balls.push(ball2); break; case 2: var ball1 = new Ball( 25,50,3, 3, 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',//顏色 random(10,25) ); balls.push(ball1); break; } for (var i = 0; i < balls.length; i++) { balls[i].draw(); balls[i].update(); } //動畫 requestAnimationFrame(loop3); //console.log(balls[2].velX ,balls[2].velY) } </script> </body> </html>