相当于标题所说的内容。控制台被我的设备所有者阻止。无法绕过它。我将在代码中留下关于问题的注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Penalty Shootout</title>
<link rel="stylesheet" href="all-docs.css">
</head>
<body>
<canvas id="game" width="500" height="500" style="border:1px solid #000000;position:absolute;top:10px;left:10%">
</canvas>
<script>
var c = document.getElementById("game");
var ctx = c.getContext("2d");
var ballX;
var ballY;
var ballZ;
var ballXVel;
var ballYVel;
var ballZVel;
var mx=0;
var my=0;
var oldx;
var oldy;
var kick = 0;
document.addEventListener('mousedown', onMouseUpdate, false);
function onMouseUpdate(e) {
if (!kick){
kick = !kick
mx = e.pageX;
my = e.pageY;
ballXVel = (mx-250)/20;
ballYVel = (my-380)/20;
ballZVel = -2;
renderWorld();
ballLoop();
}
}
function renderWorld(){
ctx.fillStyle = "#3355FF";
ctx.fillRect(0,0,500,380);
ctx.strokeRect(50,100,400,300);
ctx.fillStyle = "#00DD00";
ctx.fillRect(0,380,500,120);
}
function renderBall(){
ctx.beginPath();
ctx.arc(ballX,ballY,ballZ,0,2*Math.PI);
ctx.fillStyle = "#FFFFFF";
ctx.fill();
ctx.stroke();
ctx.closePath();
}
function reset(){
ballX=250;
ballY=380;
ballZ=40;
ballXVel=0;
ballYVel=0;
ballZVel=0;
}
function detectKick(){
oldx=mx;
oldy=my;
loopDetectKick();
}
function loopDetectKick(){
if(oldx==mx&&oldy==my){
setTimeout(loopDetectKick(),100);
}else{
renderWorld();
setUpPhysics();
}
}
function setUpPhysics(){
var ballXVel;
var ballYVel;
var ballZVel;
}
applyPhysics和ballLoop有什么不对。我试图让它慢慢移动，我虽然用这个代码实现了，但是它似乎运行了所有代码，并且稍后更新了画布。
function applyPhysics(){
ballX = ballX + ballXVel;
ballY = ballY + ballYVel;
ballZ = ballZ + ballZVel;
ballXVel = ballXVel * 0.9;
ballYVel = ballYVel * 0.9;
ballZVel = ballZVel * 0.9;
renderWorld();
renderBall();
if(ballZ>10){
setTimeout(ballLoop(), 100)
}else{
}
}
function ballLoop(){
applyPhysics();
}
renderWorld();
reset();
renderBall();
detectKick();
</script>
</body>
</html>