JavaScriptのスネークゲーム - どのようにリンゴを移動するには？

Question

私はこの単純なスネークゲームを書いています - あなたがリンゴ（赤い丸）を食べるためにヘビをナビゲートするために矢印を使う場所です。現在、蛇がリンゴを食べる（交差する）ときに、その蛇のサイズが1ブロック（10ピクセル）増加します。 私がしたいのは、蛇がリンゴを食べるたびに - >蛇のサイズを大きくする - >キャンバス内の別の位置にリンゴを移動することです。

if (!this.objectCollide(myApple)){ 
     this.segments.pop(); 
    } else { 
     alert("COLLISION!!")) 
    }; 

：私はリンゴを移動するためのコードが行くべきだと思いますが、私は実装し、何がそのための実際のコードになるかわからない部分をマークしたコード内の

var gameField = document.getElementById('gameField'); 
var ctx = gameField.getContext("2d"); 
var blockSize = 10; 
columnCt = gameField.width/blockSize; 
rowsCt = gameField.height/blockSize; 

var block = function(x, y) { 
    this.x = x; 
    this.y = y; 
} 

block.prototype.drawBlock = function() { 
    ctx.fillStyle = "blue"; 
    ctx.fillRect(this.x * blockSize, this.y * blockSize, blockSize, 
    blockSize); 
}; 

block.prototype.drawApple = function() { 
    ctx.fillStyle = "red"; 
    ctx.textBaseline = "bottom"; 
    ctx.arc(this.x, this.y, 6, 2 * Math.PI, false); 
    ctx.fill(); 
} 

var Snake = function() { 
    this.segments = [new block(20, 20), new block(19, 20), new block(18, 20), new block(17, 20), 
    new block(16, 20), new block(15, 20), new block(14, 20), new block(13, 20), new block(12, 20), 
    new block(11, 20), new block(10, 20) 
    ]; 
    this.direction = "right"; 
} 

Snake.prototype.drawSnake = function() { 
    for (i = 0; i < this.segments.length; i++) { 
    this.segments[i].drawBlock(); 
    } 
} 

Snake.prototype.setDirection = function(dir) { 
    if (this.direction == "left" && dir == "right" || this.direction == "right" && dir == "left" || this.direction == "up" && dir == "down" || 
    this.direction == "down" && dir == "up") { 
    return 
    } else { 
    this.direction = dir; 
    }; 
}; 

Snake.prototype.objectCollide = function(obj) { 
    if (this.segments[0].x == Math.round(obj.x/blockSize) && this.segments[0].y == Math.round(obj.y/blockSize)) { 
    return true 
    } else { 
    return false 
    } 
}; 

Snake.prototype.move = function() { 
    var head = this.segments[0]; 
    var newHead; 

    switch (this.direction) { 
    case "right": 
     newHead = new block(head.x + 1, head.y); 
     break; 
    case "left": 
     newHead = new block(head.x - 1, head.y) 
     break; 
    case "down": 
     newHead = new block(head.x, head.y + 1) 
     break; 
    case "up": 
     newHead = new block(head.x, head.y - 1) 
     break; 
    } 

    this.segments.unshift(newHead); 

    if (!this.objectCollide(myApple)) { 
    this.segments.pop(); 
    } else { 
    alert("COLLISION!!!") 
    }; 
    var collision = newHead.x >= columnCt || newHead.x <= -1 || 
    newHead.y >= rowsCt || newHead.y <= -1; 

    for (i = 1; i < this.segments.length; i++) { 
    if (this.segments[i].x == newHead.x && this.segments[i].y == newHead.y) { 
     collision = true; 
     break; 
    }; 
    }; 

    if (collision) { 
    clearInterval(myFun); 
    }; 

}; 

var mySnake = new Snake() 
mySnake.drawSnake(); 
var myApple = new block(Math.floor(Math.random() * gameField.width), 
    Math.floor(Math.random() * gameField.height)); 
var myFun = setInterval(function() { 
    ctx.clearRect(0, 0, gameField.width, gameField.height); 
    mySnake.move(); 
    mySnake.drawSnake(); 
    myApple.drawApple(); 
}, 100) 

var directions = { 
    37: "left", 
    38: "up", 
    39: "right", 
    40: "down" 
}; 

document.onkeydown = function(event) { 
    var newDirection = directions[event.keyCode] 
    if (newDirection != undefined) { 
    mySnake.setDirection(newDirection); 
    }; 
}; 

そして例JSFiddle上：

ここで完全なJavascriptのコードですhttps://jsfiddle.net/x9ztn3vs/

Answer 1

代わりのalert("COLLISION!!!");を使用してちょうどこれら二つ行います物事：

ただ、最後に配列に別の要素を追加ヘビ

のサイズを大きく：

リンゴ

do { 
    myApple.x = Math.floor(Math.random() * gameField.width); 
    myApple.y = Math.floor(Math.random() * gameField.height); 
    var colliding = this.segments.find((v) => v.x == Math.round(myApple.x/blockSize) && v.y == Math.round(myApple.y/blockSize));  
} while (colliding); 

免責事項を中心に移動

this.segments.push(this.segments[this.segments.length-1]); 

：それはないです効率的。衝突の確率のためにヘビの長さが増えるので遅れます。