Agario在JavaScript中 - 球員不動

我有問題，我的代碼，Agario在JavaScript中 - 球員不動

// JavaScript Document 
var canvas = document.getElementById("PlayingArea"); 
var ctx = canvas.getContext("2d"); 

var canvasWidth = canvas.width; 
var canvasHeight = canvas.height; 
var foodArray = []; 
var size = 10; 
var food; 


var player1 = {x:150, y:150}; 

//create Player1 
ctx.beginPath(); 
ctx.arc(150, 150, size, 0, Math.PI * 2); 
ctx.fillStyle = "black"; 
ctx.fill(); 

function update() { 
    "use strict"; 

    //BG Refresh 
    ctx.fillStyle = "white"; 
    ctx.fillRect(0,0,canvasWidth,canvasHeight); 
    ctx.strokeStyle = "black"; 
    ctx.strokeRect(0,0,canvasWidth,canvasHeight); 


    document.addEventListener("keydown", Player1Control); 
    function Player1Control(){ 
     if(event.keyCode === 38) { 
      player1.y--; 
     } 
     if(event.keyCode === 40) { 
      player1.y++; 
     } 
     if(event.keyCode === 39) { 
      player1.x++; 
     } 
     if(event.keyCode === 37) { 
      player1.x--; 
     } 
    } 

    if (player1.x >= canvasWidth) { 
     player1.x = canvasWidth; 
    } else if (player1.x <= 5) { 
     player1.x = 5; 
    } 

    if (player1.y > canvasHeight) { 
     player1.y = canvasHeight; 
    } else if (player1.y <= 5) { 
     player1.y = 5; 
    } 

    //Player Show 
    ctx.beginPath(); 
    ctx.arc(player1.x, player1.y, size, 0, Math.PI * 2); 
    ctx.fillStyle = "black"; 
    ctx.fill(); 

    //Food Show 
    for(var i=foodArray.length; i>0; i--){ 
     ctx.beginPath(); 
     ctx.arc({x:foodArray[i].x},{y:foodArray[i].y} , size, 0, Math.PI * 2); 
     ctx.fill(); 
    } 


    setTimeout(update, 10); 
} 

function foodGen(){ 
    "use strict"; 
    food = {x:Math.round(Math.random()*(canvasWidth)), 
    y:Math.round(Math.random()*(canvasHeight))}; 
    ctx.beginPath(); 
    ctx.arc(food.x, food.y, 5, 0, Math.PI * 2); 
    ctx.fillStyle = "black"; 
    ctx.fill(); 
    foodArray.push({x:1,y:1}); 
    setTimeout(foodGen, 1000); 
} 


update(); 
foodGen(0,750);

球員在我的代碼沒有顯示，我不知道爲什麼我的球員是不動的。我在JavaScript和HTML/CSS方面很新穎。這是我第一次堆棧溢出，所以我很抱歉任何derps。

-lt1489

編輯：現在我的球員出現在屏幕上，無法移動。鏈接：https://jsfiddle.net/5os0qrhp/2/

來源

2015-09-13 lt1489

由於在清除畫布和繪製播放器之間不更改'fillStyle'，因此您正在將播放器繪製爲白色。由於它是白色的白色，你不能看到玩家。 –

@keizom非常感謝，但我剛剛遇到另一個問題。玩家不移動。 – lt1489

原來的問題得到的回答是這樣的評論：

既然你不清空畫布和繪圖玩家之間改變填充樣式，您繪製的球員白色。由於它是白色的白色，你不能看到玩家。

關於第二個問題，移動document.addEventListener和Player1Control外update。此外，需要Player1Controlevent作爲參數，從而產生：

document.addEventListener("keydown", Player1Control); 
function Player1Control(event) { ... } 
function update() { ... }

幾個語法變化固定的代碼。請參閱jsfiddle以查看所列的更改。

來源

2015-09-13 04:01:39

https://jsfiddle.net/5os0qrhp/2/希望這會有所幫助 – lt1489

請參閱編輯請@ lt1489 –

Agario在JavaScript中 - 球員不動

回答

相關問題