Javascript 返回的输入未定义且不适用于x&；画布上的y位置_Javascript_Html_Html5 Canvas

Javascript 返回的输入未定义且不适用于x&；画布上的y位置

javascript html html5-canvas

Javascript 返回的输入未定义且不适用于x&；画布上的y位置,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我正在开发一个程序，它可以让一个球在画布上以用户通过两个输入（x速度和y速度）确定的速度反弹。它返回未定义的用户值，即使我正在将字符串转换为一个整数以用于balls位置。在过去的几天里，我一直在努力解决这个问题，我相信它确实很容易修复。任何帮助都将不胜感激 <script type="text/javascript"> window.onload= function() { document.getElementById("c

我正在开发一个程序，它可以让一个球在画布上以用户通过两个输入（x速度和y速度）确定的速度反弹。它返回未定义的用户值，即使我正在将字符串转换为一个整数以用于balls位置。在过去的几天里，我一直在努力解决这个问题，我相信它确实很容易修复。任何帮助都将不胜感激

    <script type="text/javascript"> 
    window.onload= function()
        {
            document.getElementById("changeButton").onclick = draw;
        }

    function draw(){
        //alert("Hey you made it!" + "\n" + "dx: " + dx + "\n" + "dy: " + dy); //alert which returns dx and dy for following stack    commented out when not in use otherwise alert happens every 10 ms

    //variables
        var hVel = parseInt(document.getElementById("hVelocityBox").value, 10); //gets value for x movement and converts from string to int
        var vVel = parseInt(document.getElementById("vVelocityBox").value, 10); //gets value for y movement and converts from string to int
        var dx= hVel;
        var dy= vVel;
        var y=150; //default x position
        var x=150; //default y posiiton
        var context = myCanvas.getContext('2d');

     //refreshes the canvas
        context.clearRect(0,0,300,300);

    //draws circle
        context.beginPath();
        context.fillStyle="#0000ff";
        context.arc(x,y,20,0,Math.PI*2,true);
        context.closePath();
        context.fill();

    //code for movement
        if( x<0 || x>300) //position limiter in x
            dx=-dx; //reverses x movement
        if( y<0 || y>300) //position limiter in y
            dy=-dy; //reverses y movement

        x+=dx; //
        y+=dy;
    }//close draw
    setInterval(draw,10); //runs draw every 10 ms 
</script>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 Bouncing Ball</title>
</head>
<body>
    <h1>Bouncing a Ball Around with HTML5 and JavaScript</h1>
    <div id="container">
        <canvas id="myCanvas" width="300" height="300" style="border: 1px solid black"></canvas><br/>

    <!--Textfields for x and y velocities, values defaulted to 4 -->
        Horizontal Velocity <input id="hVelocityBox" type="text" value="4"/><br />
        Vertical Velocity <input id="vVelocityBox" type="text" value="4"/><br />

        <button id="changeButton">Change</button>
    </div>
</body>
</html>


window.onload=function（）
{
document.getElementById（“changeButton”）.onclick=draw；
}
函数绘图（）{
//警报（“嘿，你成功了！”+“\n”+“dx:”+dx+“\n”+“dy:”+dy）；//警报在不使用时返回注释掉的以下堆栈的dx和dy，否则警报每10毫秒发生一次
//变数
var hVel=parseInt（document.getElementById（“hVelocityBox”）.value，10）；//获取x移动的值，并从字符串转换为int
var vVel=parseInt（document.getElementById（“vVelocityBox”）.value，10）；//获取y移动的值，并从字符串转换为int
var dx=hVel；
var-dy=vVel；
变量y=150；//默认的x位置
var x=150；//默认y位置
var context=myCanvas.getContext（'2d'）；
//刷新画布
clearRect（0,0300）；
//画圈
context.beginPath（）；
context.fillStyle=“#0000ff”；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
//运动代码
if（x300）//x中的位置限制器
dx=-dx；//反转x移动
if（y300）//y方向的位置限制器
dy=-dy；//反转y移动
x+=dx//
y+=dy；
}//平局
设置间隔（抽签，10）//每10毫秒运行一次
HTML5弹跳球
用HTML5和JavaScript玩球


水平速度

垂直速度

改变

这里有一些问题。每次函数运行时，基本上都会重新设置位置和速度。我将它们的声明和初始化移出了draw函数。我还添加了一个更新函数来绑定到按钮。这允许您在不干扰绘图功能的情况下进行更新。你可能想考虑一个更有保证的方法来保持球在盒子里面（我在一些评论中包括）。< /P> 这里有一个可以正常工作的小提琴：

document.getElementById（“changeButton”）.onclick=update；
变量y=150//默认x位置
var x=150//默认y位置
var dx=parseInt（document.getElementById（“hVelocityBox”）.value，10）//获取x移动的值，并将其从字符串转换为int
var dy=parseInt（document.getElementById（“vVelocityBox”）.value，10）//获取y移动的值，并将其从字符串转换为int
函数更新（）{
x=150；
y=150；
dx=parseInt（document.getElementById（“hVelocityBox”）.value，10）；//获取x移动的值，并将其从字符串转换为int
dy=parseInt（document.getElementById（“vVelocityBox”）.value，10）；//获取y移动的值，并将其从字符串转换为int
}
函数绘图（）{
var context=myCanvas.getContext（'2d'）；
//刷新画布
clearRect（0,0300）；
//画圈
context.beginPath（）；
context.fillStyle=“#0000ff”；
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
//运动代码
if（x300）//x中的位置限制器
{
//这些可能有助于防止意外逃逸
//如果（x300）x=300；
dx=-dx；//反转x移动
}
if（y300）//y方向的位置限制器
{
//这些可能有助于防止意外逃逸
//如果（y300）y=300；
dy=-dy；//反转y移动
}
x+=dx；
y+=dy；
};//平局
设置间隔（抽签，10）//每10毫秒运行一次

+1好的解决方案。你可能想用

if（x280）

和

if（y280）

调整球的半径，这样球就不会从墙上弹起。多亏了你的帮助，我终于让它工作了！我最终遇到的主要问题是没有真正意识到没有等到html完全加载后才运行Js。使用window.onload=function（）似乎不起作用，因此我的解决方案是在JS之前编写HTML。这是一个不错的修复还是一个amature修复？您可以挂接画布本身的onload事件，或者拉入jQuery并使用其document.ready。此外，如果您查看pagespeed推荐之类的内容，非必要的JS无论如何都应该位于折叠内容下方。

document.getElementById("changeButton").onclick = update;
var y=150; //default x position
var x=150; //default y posiiton
var dx = parseInt(document.getElementById("hVelocityBox").value, 10); //gets value for x movement and converts from string to int
var dy = parseInt(document.getElementById("vVelocityBox").value, 10); //gets value for y movement and converts from string to int

function update(){
    x = 150;
    y = 150;
    dx = parseInt(document.getElementById("hVelocityBox").value, 10); //gets value for x movement and converts from string to int
    dy = parseInt(document.getElementById("vVelocityBox").value, 10); //gets value for y movement and converts from string to int
}

function draw(){
    var context = myCanvas.getContext('2d');

    //refreshes the canvas
    context.clearRect(0,0,300,300);

    //draws circle
    context.beginPath();
    context.fillStyle="#0000ff";
    context.arc(x,y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();

    //code for movement
    if( x<0 || x>300) //position limiter in x
    {
       //these may help prevent accidental escapes
       //if (x<0) x = 0;
       //if (x>300) x = 300;
        dx=-dx; //reverses x movement
    }
    if( y<0 || y>300) //position limiter in y
    {
        //these may help prevent accidental escapes
        //if (y<0) y = 0;
        //if (y>300) y = 300;
        dy=-dy; //reverses y movement
    }
    x+=dx; 
    y+=dy;
};//close draw

setInterval(draw,10); //runs draw every 10 ms