Javascript 弹跳球不'；不要出现在第页上
我想指出，我是这方面的初学者。所以，我希望你不介意我对你的解决方案提出问题 我在这里试图构建的是一个图形动画，一个球从一个高度落在地上，然后在随后的几次反弹之后，慢慢地，球只是在画布的底部滚动Javascript 弹跳球不'；不要出现在第页上,javascript,html,canvas,Javascript,Html,Canvas,我想指出，我是这方面的初学者。所以，我希望你不介意我对你的解决方案提出问题 我在这里试图构建的是一个图形动画，一个球从一个高度落在地上，然后在随后的几次反弹之后，慢慢地，球只是在画布的底部滚动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JavaScript examples</title> <!-- As a sh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JavaScript examples</title>
<!-- As a shortcut, I included style information here rather than a separate file -->
<style>
canvas {
border: 1px solid gray;
}
</style>
<!-- incorporate jQuery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- now my written script -->
<script>
$(function(){
// initialise canvas and context
var canvas = document.getElementById('canvas');
// physical variables
var g = 0.1; // gravity
var fac = 0.8; // velocity reduction factor per bounce
var radius = 20; // ball radius
var color = "#0000ff"; // ball color
var intervalId
function initBall() {
// initialise position and velocity of ball
var x = 50;
var y = 50;
var horizontalvelocity = 2;
var verticalvelocity = 0;
}
function drawBall() {
with (context){
clearRect(0, 0, canvas.width, canvas.height); // clear canvas
fillStyle = color;
beginPath();
arc(x, y, radius, 0, 2*Math.PI, true);
closePath();
fill();
};
};
function render() {
// update velocity
verticalvelocity += g; // gravity
// update position
x += horizontalvelocity;
y += verticalvelocity;
// handle bouncing
if (y > canvas.height - radius){
y = canvas.height - radius;
verticalvelocity *= -fac;
}
// wrap around
if (x > canvas.width + radius){
x = -radius;
}
// update the ball
drawBall();
};
function init() {
<!-- get the rendering area for the canvas -->
context = $('#canvas')[0].getContext("2d");
WIDTH = $('#canvas').width();
HEIGHT = $('#canvas').height();
setInterval(update, 1000/60); // 60 frames per second
initBall();
<!-- start animation -->
intervalId = setInterval(render, 10);
}
$(document).ready(init);
</script>
</head>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
</body>
</html>
JavaScript示例
画布{
边框：1px纯色灰色；
}
$（函数（）{
//初始化画布和上下文
var canvas=document.getElementById（'canvas'）；
//物理变量
var g=0.1；//重力
var fac=0.8；//每次反弹的速度折减系数
var radius=20；//球半径
var color=“#0000ff”//球的颜色
var有效期
函数initBall（）{
//初始化球的位置和速度
var x=50；
变量y=50；
var水平速度=2；
var verticalvelocity=0；
}
函数{
（上下文）{
clearRect（0，0，canvas.width，canvas.height）；//清除画布
填充样式=颜色；
beginPath（）；
圆弧（x，y，半径，0，2*Math.PI，真）；
closePath（）；
填充（）；
};
};
函数render（）{
//更新速度
垂直加速度+=g；//重力
//更新位置
x+=水平速度；
y+=垂直性；
//手柄弹跳
如果（y>画布高度-半径）{
y=画布高度-半径；
垂直性*=-fac；
}
//环绕
如果（x>画布宽度+半径）{
x=半径；
}
//更新球
牵引杆（）；
};
函数init（）{
context=$（'#canvas'）[0].getContext（“2d”）；
宽度=$（“#画布”）.WIDTH（）；
高度=$（“#画布”）.HEIGHT（）；
setInterval（更新，1000/60）；//每秒60帧
initBall（）；
intervalId=setInterval（渲染，10）；
}
$（文件）.ready（初始化）；
我似乎无法发现我犯的错误。非常感谢您的想法和解决方案。：）您的问题与范围问题有关：您在所有代码中使用x，y变量，因此它们应该是全局变量。但您的问题是1）您没有将它们声明为全局变量，2）在initBall中初始化x，y时，您声明了2个局部变量，即x，y，这将隐藏x，y全局变量 -->添加全局范围：
var x,y ;
var horizontalvelocity = 2;
var verticalvelocity = 0;
function initBall() {
// initialise position and velocity of ball
x = 50;
y = 50;
horizontalvelocity = 2;
verticalvelocity = 0;
}
您的问题与范围问题有关：您在所有代码中都使用了x，y变量，因此它们应该是全局变量。但您的问题是1）您没有将它们声明为全局变量，2）当您在initBall中初始化x，y时，您声明了2个局部变量，即x，y，这将隐藏x，y全局变量 -->添加全局范围：
var x,y ;
var horizontalvelocity = 2;
var verticalvelocity = 0;
function initBall() {
// initialise position and velocity of ball
x = 50;
y = 50;
horizontalvelocity = 2;
verticalvelocity = 0;
}
您的问题与范围问题有关：您在所有代码中都使用了x，y变量，因此它们应该是全局变量。但您的问题是1）您没有将它们声明为全局变量，2）当您在initBall中初始化x，y时，您声明了2个局部变量，即x，y，这将隐藏x，y全局变量 -->添加全局范围：
var x,y ;
var horizontalvelocity = 2;
var verticalvelocity = 0;
function initBall() {
// initialise position and velocity of ball
x = 50;
y = 50;
horizontalvelocity = 2;
verticalvelocity = 0;
}
您的问题与范围问题有关：您在所有代码中都使用了x，y变量，因此它们应该是全局变量。但您的问题是1）您没有将它们声明为全局变量，2）当您在initBall中初始化x，y时，您声明了2个局部变量，即x，y，这将隐藏x，y全局变量 -->添加全局范围：
var x,y ;
var horizontalvelocity = 2;
var verticalvelocity = 0;
function initBall() {
// initialise position and velocity of ball
x = 50;
y = 50;
horizontalvelocity = 2;
verticalvelocity = 0;
}
在浏览器中查看页面时按F12键-这将在大多数浏览器中打开开发人员控制台。那么，您的大多数错误应该是显而易见的。尝试从web开发人员控制台解决问题，但没有成功。@TISON更新您的问题，以显示您迄今为止所做的工作。您还应该能够创建您可以使用一个或多个代码来演示当前的问题。以下是工作版本：如何将其附加到HTML代码中？我知道您可以将代码保存为.js文件，但我只是想知道如何在不需要链接单独文件的情况下实现这一点。当我将代码放在
之间时>