Question

我的代码有问题，

// 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的新手。这是我的第一次Stack溢出，所以我很抱歉任何derps。

-lt1489

编辑：我的播放器现在出现在屏幕上，无法移动。链接：https://jsfiddle.net/5os0qrhp/2/

Answer 1

原始问题的答案如下：

由于在清除画布和绘制播放器之间不更改fillStyle，因此您将播放器绘制为白色。由于白色为白色，因此无法看到播放器。

关于第二个问题，请将>>> Please enter the year: 2013 Popular boy names in year 2013 are: Print boy names... >>>和document.addEventListener移至Player1Control之外。此外，update需要Player1Control作为参数，从而产生：

event

一些语法更改修复了代码。请参阅jsfiddle以查看概述的更改。

JavaScript中的Agario - 播放器不移动

1 个答案: