Javascript 如何在JS中删除数组中的向量_Javascript_Arrays

Javascript 如何在JS中删除数组中的向量

javascript arrays

Javascript 如何在JS中删除数组中的向量,javascript,arrays,Javascript,Arrays,我目前正在尝试用JS创建我自己的蛇游戏，很难找到一个真正简单问题的解决方案。所以，如果我惹恼了某人，我想提前道歉我希望所说的蛇有一条不超过可变“长度”的尾巴。如果它是数组中的最后一个向量（存储尾部的位置），则应删除它-也就是最早的向量。以下是更新的代码： ////Snake Class////// function Snake() { var scl = 20; this.tail = []; this.length = 5;

我目前正在尝试用JS创建我自己的蛇游戏，很难找到一个真正简单问题的解决方案。所以，如果我惹恼了某人，我想提前道歉

我希望所说的蛇有一条不超过可变“长度”的尾巴。如果它是数组中的最后一个向量（存储尾部的位置），则应删除它-也就是最早的向量。以下是更新的代码：

////Snake Class//////
    function Snake() {
        var scl = 20;
        this.tail = [];
        this.length = 5;

        this.x = 0;
        this.y = cnv.height / 2;
        this.xspeed = 1;
        this.yspeed = 0;

        this.move = function (x, y) {
            this.xspeed =  x;
            this.yspeed =  y;
        }

        this.update = function () {
            this.x = this.x + this.xspeed * scl;
            this.y = this.y + this.yspeed * scl;        

            this.tail.unshift(createVector(this.x, this.y));

            if(this.tail.length > this.length) {
                this.tail.pop();
            }
        }

        this.show = function (){
            for (var i = 0; i < this.tail.length; i++) {
                rect(this.tail[i].x, this.tail[i].y, scl, scl);
            }
        }
    }


//////////Main Class///////////

function setup() {
    cnv = createCanvas(windowWidth, windowHeight);
    cnv.style('display','block');
    background(249,49,119);

    frameRate(10);
    s = new Snake();
}

function draw() {
    s.update();
    s.show();
}

function keyPressed() {
    if (keyCode == UP_ARROW) {
        console.log("UP");
        s.move(0, -1);
    }else if (keyCode == DOWN_ARROW){
        s.move(0,1);
    } else if (keyCode == LEFT_ARROW){
        s.move(-1, 0);
    }else if (keyCode == RIGHT_ARROW){
        s.move(1, 0);
    }
}

/////Html///////

<html>
    <head>
        <script 
        src="https://cdnjs.cloudflare.com
        /ajax/libs/p5.js/0.7.1/p5.min.js"> 
        </script>
        <script 
        src="https://cdnjs.cloudflare.com/ajax/
        libs/p5.js/0.7.1/addons/p5.dom.min.js"> 
        </script>
        <script 
        src="https://cdnjs.cloudflare.com/ajax/
        libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>

   <link rel = "stylesheet" href = "style.css" type = "text/css">
   </head>
   <body>
        <script src = "Main.js"></script>
        <script src = "Snake.js"></script>
    </body>
    </html>


///CSS///
html, body {
    background-color: #919191;

    height: 100%;
}

body {
    margin: 0;
    display: flex;

    /*Centers the Game horizontally*/
    justify-content: center;

    /*Centers the Game vertically*/
    align-items: center;
}

///Snake类//////
函数Snake（）{
var-scl=20；
this.tail=[]；
这个长度=5；
这个.x=0；
此.y=cnv高度/2；
this.xspeed=1；
这个.yspeed=0；
this.move=函数（x，y）{
this.xspeed=x；
这个.yspeed=y；
}
this.update=函数（）{
this.x=this.x+this.xspeed*scl；
this.y=this.y+this.yspeed*scl；
this.tail.unshift（createVector（this.x，this.y））；
如果（this.tail.length>this.length）{
this.tail.pop（）；
}
}
this.show=函数（）{
for（var i=0；i

在this.update（）中，您希望删除数组中的第一个元素，但有两种正常机制
if (this.tail.length > this.length) {
    this.tail.pop();  // removes the oldest snake section.
}

然而
我提到的两个机制是：
每次都重新绘制世界
重新绘制蛇的更新。（即，通过在尾部绘制空白来擦除尾部。）
你必须做出选择，第一，我不知道你现在在做什么
要删除它，请在第0个元素上绘制。如果每次都绘制整个世界，那么从阵列中移除就足够了。因为它只会绘制数组中的内容
有一个update（）和show（）-许多框架都会调用这些函数update（）和draw（），update（）通常负责数学/数据操作（例如更新蛇斑），draw（）根据数据绘制世界。看来这就是你想要的
您将遇到的问题是在弹出第0个元素之后-当您开始绘制/显示（）时，它将不存在。因此，我建议，如果要保留此功能，您每次都要绘制整个世界，否则，您将被迫在更新功能中绘制。
听起来像是您正在寻找的。删除第一个项目（）以及从数组中的任何给定点删除一个或多个项目（）的其他方法可能很好，请您也共享HTML以便我们可以完全测试代码吗？是的，添加了HTML、Css和主类-似乎在删除数组的最后一个对象（或绘制它）时遗漏了一些内容-但我不确定