速度越來越快怎么辦？
<!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>Canvas</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto; ">
當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器
</canvas>
</body>
<script>
var ball = {x:512, y:100, r:20, g:2, vx:-4, vy:0, color:"#005588" }
var timer = null;
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 1024;
canvas.height = 768;
if(canvas.getContext){
var context = canvas.getContext("2d");
}
timer = setInterval(
function(){
render(context);
update();
},50
)
}
function update(){
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
if( ball.y >= 768-ball.r ){
ball.y = 768-ball.r;
ball.vy = -ball.vy
}
if( ball.y <= ball.r ){
ball.y = ball.r;
ball.vy = -ball.vy
}
if( ball.x <= ball.r ){
ball.x = ball.r;
ball.vx = -ball.vx;
}
if( ball.x >= 1024-ball.r ){
ball.x = 1024-ball.r;
ball.vx = -ball.vx;
}
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
cxt.fillStyle = ball.color;
cxt.beginPath();
cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
</script>
</html>
2018-07-25
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
小球的速度沒有任何的減損 ，隨著時間的增長小球的速度自然越來越快