如何使用新输入绘制新射弹？

Question

你正在寻找的是一个对象。您需要将初始字符串拆分为数组，然后将其从数组中转换为对象。我会这样做：const str = 'a="https://google.com/" b="Johnny Bravo" c="1" d="2" charset="z"';// Split using RegExconst arr = str.match(/\w+=(?:"[^"]*"|\d*|true|false)/g);// Create a new object.const obj = {};// Loop through the array.arr.forEach(it => {  // Split on equals and get both the property and value.  it = it.split("=");  // Parse it because it may be a valid JSON, like a number or string for now.  // Also, I used JSON.parse() because it's safer than exec().  obj[it[0]] = JSON.parse(it[1]);});// Obj is done.console.log(obj);展开片段上面给了我：{  "a": "https://google.com/",  "b": "Johnny Bravo",  "c": "1",  "d": "2",  "charset": "z"}您可以使用类似obj.charsetand 的东西，这会为您z或obj.b为您提供Johnny Bravo。对于正则表达式，这里是演示。

Answer 1

简短的回答：替换

var b=document.getElementById('angle').value;
var o=document.getElementById('vel').value;

和

var b=document.getElementById('angle');
var o=document.getElementById('vel');

和b和o和b.value和o.value

更长的答案：JavaScript中有两种数据类型：原始数据类型和引用数据类型。当您编写a=b时，如果b是基本类型（数字、字符串、布尔值、null 或未定义），则您将获得b的精确副本，但如果b是引用类型（数组、函数或对象），则您将获得 b 的精确副本。 a只是与b相同的对象的链接，修改一个对象也会修改另一个对象。您可以将其视为购买书籍与购买在线课程的订阅。如果课程内容发生变化，您的书将不会反映它，但如果您有指向它的链接，您将能够看到更新。相当于买一本书，同时会给你一个 DOM 对象的链接。var b=document.getElementById('angle').value;var b=document.getElementById('angle');

var b=document.getElementById('angle');

            var o=document.getElementById('vel');

            var pro = {

                x:50,

                y:380,

                r:15,

                v:o.value,

                theta:b.value,

                };              

                var canvas = document.getElementById('surface');

                var ctx = canvas.getContext('2d');              

                var frameCount = 0;

                var v0x = pro.v * Math.cos(pro.theta * Math.PI/180);

                var v0y = pro.v * Math.sin(pro.theta * Math.PI/180);

                var startX = pro.x;

                var startY = pro.y;

                var g = 9.8;

                setInterval(function()

                {

                    ctx.save();

                        ctx.fillStyle = "rgba(256, 256, 256, .3)";

                        ctx.fillRect(0, 0, canvas.width, canvas.height);

                    ctx.restore();                  

                    if(pro.y<canvas.height - pro.r && pro.x < canvas.width - pro.r)

                    {

                        pro.y = startY - ( v0y * frameCount - (1/2 * g * Math.pow(frameCount,2)) );

                        pro.x = startX + v0x * frameCount;

                    }                       

                    ctx.save();

                        ctx.beginPath();

                        ctx.fillStyle = "rgba(200, 0, 0, 0.9)";

                        ctx.arc(pro.x,pro.y,pro.r,0,Math.PI*2,true);

                        ctx.fill();

                        ctx.stroke();

                        ctx.closePath();

                    ctx.restore();

                    frameCount+=.1;                     

                }, 1000 / 77);              

            function start()

            {

                pro.x = 50;

                pro.y = 380;

                pro.v = o.value;

                pro.theta = b.value;

                frameCount = 0;

                v0x = pro.v * Math.cos(pro.theta * Math.PI/180);

                v0y = pro.v * Math.sin(pro.theta * Math.PI/180);

            }

<canvas id="surface" width="800" height="400"></canvas>         

        <nav> 

            <label for="angle">Angle</label> 

            <input name="angle" type="text" id="angle" value="45" placeholder="angle" oninput="start()"/> 

            <label for="velocity">Speed</label> 

            <input type="text" name="velocity" id="vel" value="45" placeholder="velocity" oninput="start()"/> 

            <input type="reset" value="Launch" onclick="start()">

        </nav>