未捕获的TypeError：$（...）。collision不是函数

Question

在黑色和绿色的div发生碰撞后，如何为分数添加分数？将黑色div向上，向下，向左，向右移动后，它与绿色div相交，我想在List<myObject>Objects div中的分数上添加一个点。我使用了碰撞功能，这给了我标题错误。

如果您有其他建议，可以重写代码。我将不胜感激。

#score

var pane = $('#pane'),
    box = $('#box'),
    boxGreen=$('#box-green'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return n < 0 ? 0 : n > w ? w : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newv(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
}, 20);

var randomNumberAppearGreenBox=Math.floor(Math.random() * 10000);

// make position sensitive to size and document's width
var divsize = ((Math.random()*100) + 20).toFixed();
var posx = (Math.random() * (pane.width() - divsize)).toFixed();
var posy = (Math.random() * (pane.height() - divsize)).toFixed();
 
setInterval(function() {
    boxGreen.css({
        'left':posx+'px',
        'top':posy+'px',
        'display':'block'
    });
}, randomNumberAppearGreenBox);

 hit_div = $("#box").collision("#box-green");
  if (hit_div.length != 0) {
      alert("welcome Earthling!");
 }
     

#pane {
    position:relative;
    width:300px; height:300px;
    border:2px solid red;
}
    
#box {
    position:absolute; top:140px; left:140px;
    width:20px; height:20px;          
    background-color:black;
}

#box-green{
    position:absolute;
    width:20px; height:20px; 
    display:none;
    background-color:green;
}

.score{
  font-size:25px;
  font-weight:bold;
}

.score span{
  display:inline-block;
 }

#score{
  display:inline-block;
}

https://codepen.io/andreighervan/pen/rPZgoZ