Fatal编程技术网
  • javascript/
  • 在Javascript中通过滑块设置值

在Javascript中通过滑块设置值

javascript

在Javascript中通过滑块设置值,javascript,slider,Javascript,Slider,我是javascript新手，目前正在开发一款乒乓球游戏。 快完成了，我唯一想添加的是一个滑块，它可以改变机器人的移动速度，但是由于某种原因，当我将机器人的速度值设置为滑块的值时，机器人就消失了。 我对机器人击球的角度做了同样的处理，效果很好，所以我不知道为什么另一个滑块不起作用。 代码处于“左拨”功能中 CSS/HTML body{ width: 100vw; height: 100vh; } <body onresize="resizeCanvas()">

我是javascript新手，目前正在开发一款乒乓球游戏。 快完成了，我唯一想添加的是一个滑块，它可以改变机器人的移动速度，但是由于某种原因，当我将机器人的速度值设置为滑块的值时，机器人就消失了。 我对机器人击球的角度做了同样的处理，效果很好，所以我不知道为什么另一个滑块不起作用。 代码处于“左拨”功能中

CSS/HTML

body{
     width: 100vw;
     height: 100vh;
}

<body onresize="resizeCanvas()">
    Bot speed<input type="range" min="0" max="5" step="0.5" value="2.5" id="botSpeed">
    <canvas id="canvas"></canvas>
    <script>
    </script>
</body>

正文{
宽度：100vw；
高度：100vh；
}
机器人速度
JavaScript

var canvas, context;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

var ballRadius;
var ballRadiusValue = .000005; // Radius of ball
var ballSpeed = 2.5; // Speed the ball moves with
var ballSpeedX;
var ballSpeedY;
var ballX;
var ballY;

var paddleWidth;
var paddleWidthValue = .01; // Width of paddles
var paddleHeight;
var paddleHeightValue = .125; // Height of paddles
var paddleMargin = .01; // Margin the paddles have from the wall

var paddleLeftX;
var paddleLeftY;
var angle = 5; // Angle the bot hits the ball with (lower number == higher difficulty)
var speed = 2.5; // Speed the bot follows the ball with (higher number == higher difficulty)

// Main function
window.onload = function() {
    resizeCanvas();
    startGame();

    setInterval(drawCanvas, 1);
};

// Resizes the canvas depending on the screen resolution
function resizeCanvas() {
    // Sets the canvas width and height to the users viewport
    context.canvas.width = document.body.clientWidth;
    context.canvas.height = document.body.clientHeight;
    // Ball
    ballRadius = (canvas.width * canvas.height) * ballRadiusValue;
    ballX = (canvas.width / 2) - (ballRadius / 2); // Center of canvas width
    ballY = (canvas.height / 2) - (ballRadius / 2); // center of canvas height
    // Paddle
    paddleWidth = canvas.width * paddleWidthValue;
    paddleHeight = canvas.height * paddleHeightValue;
    paddleLeftX = canvas.width * paddleMargin;
    paddleLeftY = (canvas.height / 2) - (paddleHeight / 2); // Centers, center of paddle to height of canvas
}
// Draws everything that's displayed on the canvas
function drawCanvas() {
    background();
    paddleLeft();
    ball();
    ballMovement();
 }
 function background() {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.fillStyle = "transparent";
     context.fillRect(0, 0, canvas.width, canvas.height);
 }
 // Bot
 function paddleLeft() {
     context.fillStyle = "red";
     context.fillRect(paddleLeftX, paddleLeftY, paddleWidth, paddleHeight);

     var botSpeed = document.getElementById("botSpeed");

     speed = 2.5; // This works

     speed = botSpeed.value; // This doesn't work, even though "botSpeed.value" is the same value

     var paddleLeftCenter = paddleLeftY + (paddleHeight / 2);
     // How fast and at what angle the bot follows the ball
     if (paddleLeftCenter < ballY - (paddleHeight / angle) && (paddleLeftY + paddleHeight) <= canvas.height) // Paddle is above ball
     {
         paddleLeftY += speed; // Moves the paddle down
     }
     else if (paddleLeftCenter > ballY + (paddleHeight / angle) && paddleLeftY >= 0) // Paddle is below ball
     {
         paddleLeftY -= speed; // Moves the paddle up
     }
 }
 // Initial speed
 function ballMovement() {
     ballX += ballSpeedX;
     ballY += ballSpeedY;
  }
  function ball() {
      context.fillStyle = "black";
      context.beginPath();
      context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2, true);
      context.fill();

      // Collision with border
      if (ballX + ballRadius <= 0 ) // Left side
      {
          resetBall();
      }
      if (ballY - ballRadius <= 0) // Top
      {
          ballSpeedY = -ballSpeedY;
      }
      else if (ballY + ballRadius >= canvas.height) // Bottom
      {
          ballSpeedY = -ballSpeedY;
      }
  }
  // Moves the ball in a random direction on game start
  function startGame() {
      ballSpeedX = -ballSpeed;
      ballSpeedY = ballSpeed;

      var random = Math.random();

      if (random <= .5) // Moves ball down
      {
          ballSpeedY = ballSpeedY;
      }
      else if (random <= 1) // Moves ball up
      {
          ballSpeedY = -ballSpeedY;
      }
  }
  // Resets the ball to its original position
  function resetBall() {
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
      startGame();
  }

var画布，上下文；
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
var球半径；
var ballRadiusValue=.000005；//球的半径
var ballSpeed=2.5；//球移动的速度
var-ballSpeedX；
var-ballSpeedY；
var-ballX；
巴利变种；
宽度；
变量值=.01；//桨叶宽度
高度；
var PappelHeightValue=.125；//桨叶高度
var paddleMargin=.01；//将桨叶与墙隔开
var-leftx；
左撇子；
变量角度=5；//机器人击球角度（数字越低=难度越高）
var速度=2.5；//机器人跟随球的速度（更高的数字=更高的难度）
//主要功能
window.onload=函数（）{
调整画布的大小（）；
startGame（）；
设置间隔（drawCanvas，1）；
};
//根据屏幕分辨率调整画布大小
函数resizeCanvas（）{
//设置“用户”视口的画布宽度和高度
context.canvas.width=document.body.clientWidth；
context.canvas.height=document.body.clientHeight；
//球
ballRadius=（canvas.width*canvas.height）*ballRadiusValue；
ballX=（canvas.width/2）-（ballRadius/2）；//画布宽度的中心
ballY=（canvas.height/2）-（ballRadius/2）；//画布高度的中心
//划桨
桨叶宽度=canvas.width*桨叶宽度值；
桨叶高度=canvas.height*桨叶高度值；
PappelLeftX=canvas.width*PapperMargin；
桨左=（canvas.height/2）-（桨高/2）；//中心，桨中心到画布高度
}
//绘制画布上显示的所有内容
函数drawCanvas（）{
背景（）；
左（）；
ball（）；
球运动（）；
}
函数背景（）{
clearRect（0，0，canvas.width，canvas.height）；
context.fillStyle=“透明”；
context.fillRect（0,0，canvas.width，canvas.height）；
}
//机器人
函数左（）{
context.fillStyle=“红色”；
fillRect（paileleftx、pailelefty、pailewidth、paileheight）；
var botSpeed=document.getElementById（“botSpeed”）；
速度=2.5；//这是可行的
speed=botSpeed.value；//这不起作用，即使“botSpeed.value”是相同的值
var BALLETLEFTCENTER=BALLETLEFTY+（桨叶高度/2）；
//机器人跟踪球的速度和角度有多快
如果（桨叶左中<球-（桨叶高度/角度）&&（桨叶左中+桨叶高度）球+（桨叶高度/角度）&&桨叶左中>=0）//桨叶位于球下方
{
桨左-=速度；//将桨向上移动
}
}
//初速度
函数ballMovement（）{
ballX+=ballSpeedX；
ballY+=ballY；
}
函数球（）{
context.fillStyle=“黑色”；
context.beginPath（）；
弧（ballX，ballY，ballRadius，0，Math.PI*2，true）；
context.fill（）；
//与边界的碰撞
如果（ballX+ballRadius正常，我就让它工作了。
由于某些原因，我不能只设置新值，我必须减去/添加它们

这是新代码


var isMovingSlider = false; // Slider function will only get fired once on change
if (!isMovingSlider)
{
    // Sets the "botSpeed" value
    botSpeed.addEventListener("change", function () {
        isMovingSlider = true;
        if (botSpeed.value < 2.5)
        {
            // For every step the slider gets moved below 2.5, subtract 0.5 from "speed"
            speed = 2.5;
            speed -= (2.5 - botSpeed.value);
        }
        else if (botSpeed.value > 2.5)
        {
            // For every step the slider gets moved aboce 2.5, add 0.5 to "speed"
            speed = 2.5;
            speed += (botSpeed.value - 2.5);
        }
        else if (botSpeed.value == 2.5)
        {
            speed = 2.5;
        }
    });
    isMovingSlider = false;
}
botSpeedValue.innerHTML = botSpeed.value; // Displays the value of "botSpeed"



var isMovingSlider=false；//Slider函数仅在发生更改时触发一次
如果（！isMovingSlider）
{
//设置“机器人速度”值
botSpeed.addEventListener（“更改”，函数（）{
isMovingSlider=true；
如果（速度值<2.5）
{
//滑块每移动一步低于2.5，从“速度”中减去0.5
速度=2.5；
速度-=（2.5-机器人速度值）；
}
否则如果（botSpeed.value>2.5）
{
//滑块每移动2.5步，将“速度”增加0.5
速度=2.5；
速度+=（机器人速度值-2.5）；
}
否则如果（botSpeed.value==2.5）
{
速度=2.5；
}
});
isMovingSlider=false；
}
botSpeedValue.innerHTML=botSpeed.value；//显示“botSpeed”的值
<代码> >“BOT刚刚消失”——你在控制台中有什么错误吗？BTW，JSFiddle不适合我，所以考虑把代码本身作为问题。