来自p5.js的loadImage（）无法加载图像，本地服务器不起作用，图像托管站点不起作用，站点仅显示“正在加载...”

时间：2018-10-26 20:06:44

标签： javascript processing p5.js

我试图创建有效的扫雷器，直到尝试实现图像（炸弹和旗帜）为止。现在，它只是说“正在加载...”，从我发现的一切正常来看，它应该一直存在，直到preload()执行完毕（我的工作是这样）后，我通过将console.log()放在最后，该过程会立即执行，但仍会显示“正在加载...”消息，尽管控制台中没有错误，但仍表明存在问题。

当我不使用preload()功能时，该站点将正常工作，但是图像将无法加载。我到处搜索以寻找解决方案，却发现许多解决方案都无法解决我的问题。我尝试过托管一个本地服务器，首先是一个简单的Python服务器，然后使用XAMPP，然后使用Node.js，以及将我的图像上传到Dropbox，并使用直接链接而不是文件的相对路径，但都没有工作。

这是我的代码：

function playerBoardConv(x, y, board)
{
    return board[x][y].toString();
}

function randint(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

function main()
{
    var playAgain = true;
    var newName = "";
    var newScore = 0;
    var i = 0;
    var j = 0;

    var width = parseInt(prompt("Enter the width you'd like for your board to be."));
    var height = parseInt(prompt("Enter the height you'd like for your board to be."));
    var inputDifficulty = parseInt(prompt("Enter your difficulty (1 - 5 -- easiest 1, hardest 5)"));

    var difficulty = 0;
    difficulty = (Math.pow(inputDifficulty, 2) + inputDifficulty + 4);
    difficulty /= 40;

    var playerX = 0;
    var playerY = 0;
    var playerMode = 0;
    var randX = 0;
    var randY = 0;
    var bombs = parseInt(Math.floor(difficulty * (width * height)).toString());
    var bombsLeft = 0;
    bombsLeft += bombs;
    var bombsCounter = 0;
    var squaresChecked = 0;
    var finished = false;
    var dead = false;
    var endText = "";
    var promptText = "";

    var board = [];
    var playerBoard = [];
    var tile = [];

    for (i = 0; i < width; i++)
        {
        board.push([]);
        playerBoard.push([]);
        for (j = 0; j < height; j++)
            {
                board[i].push(0);
                playerBoard[i].push("_");
            }
        }

    for (var bomb = 0; bomb < bombs; bomb++)
    {
        randX = randint(0,width);
        randY = randint(0,height);
        if (board[randX][randY] == -1)
        {
            bomb--;
            continue;
        }
        board[randX][randY] = -1;
    }

    for (var row = 0; row < height; row++)
    {
        for (var column = 0; column < height; column++)
        {
            if (board[row][column] == -1) { continue; }

            tile = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            for (var hOffset = -1; hOffset <= 1; hOffset++)
            {
                for (var vOffset = -1; vOffset <= 1; vOffset++)
                {
                    if (hOffset == 0 && vOffset == 0)
                    {
                        continue;
                    }
                    try
                    {
                        tile[hOffset + (3 * vOffset) + 4] = board[row + vOffset][column + hOffset];
                    }
                    catch(err)
                    {
                        continue;
                    }
                }
            }
            bombsCounter = 0;
            for (i = 0; i < tile.length; i++)
            {
                if (tile[i] == -1)
                {
                    bombsCounter++;
                }
            }
            board[row][column] = bombsCounter;
        }
    }

    return board;
}



var board = main();

var mineH = board.length;
var mineW = board[0].length;

var pixH = 2/3 * window.innerHeight;
var pixW = 2/3 * window.innerWidth;

var border = 50 / Math.min(mineH,mineW);

var borderHPix = (mineH + 1) * border;
var borderWPix = (mineW + 1) * border;

var minePix = Math.min((pixH-borderHPix)/mineH,(pixW-borderWPix)/mineW);

var textPx = minePix/4;

var mines = [];
var displayValues = [];

var rightClick = false;

var flag;
var bomb;



function resetBoard()
{
    board = main();

    mineH = board.length;
    mineW = board[0].length;

    borderHPix = (mineH + 1) * border;
    borderWPix = (mineW + 1) * border;

    minePix = Math.min((pixH-borderHPix)/mineH,(pixW-borderWPix)/mineW);
    textPx = minePix/3;
    border = minePix/20;

    mines = [];
    displayValues = [];
}   



function Mine(x,y,posX,posY,mineP)
{
    this.x = x;
    this.y = y;

    this.mineP = mineP;

    this.posX = posX;
    this.posY = posY;

    this.col = color(100);

    this.flagged = false;
    this.checked = false;

    this.value = board[posY][posX];

    this.display = function() 
    {
        fill(this.col);
        rect(this.x,this.y,this.mineP, this.mineP);
    }

    this.clicked = function()
    {
        if (mouseY >= this.y && mouseY <= this.y + this.mineP && mouseX >= this.x && mouseX <= this.x + this.mineP && mouseIsPressed && mouseButton == LEFT)
        {
            if (!this.flagged) 
            {
                this.col = color(0,0);
                this.checked = true;
            }
        }
    }

    this.rClick = function()
    {
        if (mouseY >= this.y && mouseY <= this.y + this.mineP && mouseX >= this.x && mouseX <= this.x + this.mineP && rightClick && !this.checked)
        {
            if (!this.flagged)
            {
                this.col = color(255,0,0);
                this.flagged = true;
            }
            else
            {
                this.col = color(100);
                this.flagged = false;
            }
            rightClick = false;
        }
    }
}



function Text(x,y,posX,posY,string)
{
    this.x = x;
    this.y = y;

    this.posX = posX;
    this.posY = posY;

    this.string = string;

    this.display = function()
    {
        textSize(textPx);
        text(this.string, this.x, this.y);
    }
}



function Image(x,y,posX,posY,size,img)
{
    this.x = x;
    this.y = y;

    this.posX = posX;
    this.posY = posY;

    this.img = img;

    this.size = size;

    this.display = function()
    {
        image(this.img,this.x,this.y,this.size,this.size);
    }
}



function preload()
{
flag = loadImage('https://i.imgur.com/srVDVYw.png');
bomb = loadImage('https://i.imgur.com/D1m758U.png');
rBomb = loadImage('https://i.imgur.com/gAdVac0.png');
}



function setup() 
{   
    createCanvas(mineW * minePix + borderWPix, mineH * minePix + borderHPix);

    for (var row = 0; row < mineH; row++)
    {
        for (var col = 0; col < mineW; col++)
            {
                mines.push(new Mine(col * (minePix + border) + border, row * (minePix + border) + border, col, row, minePix));
            }
    }
    mines.push(new Mine(0,0,0,0,0));

    for (var row = 0; row < mineH; row++)
    {
        for (var col = 0; col < mineW; col++)
            {
                if (board[row][col] == -1)
                {
                    console.log(bomb);
                    newItem = new Image(col * (minePix + border) + border, row * (minePix + border) + border, col, row, minePix, bomb);
                }
                else if (board[row][col] === 0)
                {
                    newItem = new Text(col * (minePix + border) + border + minePix/2 - textPx/4, row * (minePix + border) + border + minePix/2 + textPx/4, col, row, "");
                }
                else
                {
                    newItem = new Text(col * (minePix + border) + border + minePix/2 - textPx/4, row * (minePix + border) + border + minePix/2 + textPx/4, col, row, board[row][col]);
                }
                displayValues.push(newItem);
            }
    }
}



function mousePressed()
{
    rightClick = boolean(mouseButton == "right");
}



function draw()
{  
    background(200);
    for (var dispVal of displayValues)
    {
        dispVal.display();
    }

    for (var mine of mines)
    {
        mine.clicked();
        mine.rClick();
        mine.display();
    }
}

尽管唯一值得一看的部分是底部，包括preload()，setup()和draw()：

function preload()
{
    flag = loadImage('https://i.imgur.com/srVDVYw.png');
    bomb = loadImage('https://i.imgur.com/D1m758U.png');
    rBomb = loadImage('https://i.imgur.com/gAdVac0.png');
}

function setup() 
{   
    createCanvas(mineW * minePix + borderWPix, mineH * minePix + borderHPix);

    for (var row = 0; row < mineH; row++)
    {
        for (var col = 0; col < mineW; col++)
            {
                mines.push(new Mine(col * (minePix + border) + border, row * (minePix + border) + border, col, row, minePix));
            }
    }
    mines.push(new Mine(0,0,0,0,0));

    for (var row = 0; row < mineH; row++)
    {
        for (var col = 0; col < mineW; col++)
            {
                if (board[row][col] == -1)
                {
                    console.log(bomb);
                    newItem = new Image(col * (minePix + border) + border, row * (minePix + border) + border, col, row, minePix, bomb);
                }
                else if (board[row][col] === 0)
                {
                    newItem = new Text(col * (minePix + border) + border + minePix/2 - textPx/4, row * (minePix + border) + border + minePix/2 + textPx/4, col, row, "");
                }
                else
                {
                    newItem = new Text(col * (minePix + border) + border + minePix/2 - textPx/4, row * (minePix + border) + border + minePix/2 + textPx/4, col, row, board[row][col]);
                }
                displayValues.push(newItem);
            }
    }
}

function draw()
{  
    background(200);
    for (var dispVal of displayValues)
    {
        dispVal.display();
    }

    for (var mine of mines)
    {
        mine.clicked();
        mine.rClick();
        mine.display();
    }
}

Here's my file structure

这里是Index.html：

<!DOCTYPE html>

<html>
    <head>
        <title>Minesweeper</title>
        <script language="javascript" src="sketch.js"></script>
        <script language="javascript" src="Scripts/p5.js"></script>
        <script language="javascript" src="Scripts/p5.dom.js"></script>
        <script language="javascript" src="Scripts/jquery-3.3.1.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body oncontextmenu="return false;">
    </body>
</html>

还有style.css：

body
{
    background-color: #424242;
    display: flex;
    justify-content: center;
    align-items: center;
}

在你问之前，是的，我使用了正确的相对路径，我检查了很多次。

感谢您的帮助。

编辑1：我正在研究一个最小，完整和可验证的示例。另外，将Dropbox链接更改为Imgur链接，因为Dropbox在隔离时不起作用，尽管在完整解决方案中无法解决。

编辑2：找到了一个最小，完整和可验证的示例，这也使我有可能发现断点，并将p5.Image对象传递给函数。在image()中使用setup()函数之前，现在我已经定义了自己的“ Image”对象，然后将它们传递到draw中，现在它产生了同样的“ Loading ...”问题，但我仍然不知道为什么会发生这种情况。

Once again, the file structure

Index.html：

<!DOCTYPE html>

<html>
<head>
    <title>Minesweeper</title>
    <script language="javascript" src="Scripts/p5.js"></script>
    <script language="javascript" src="Scripts/p5.dom.js"></script>
    <script language="javascript" src="Scripts/jquery-3.3.1.js"></script>
    <script language="javascript" src="sketch.js"></script>
</head>
</body>
</html>

sketch.js 

function Image(x,y,posX,posY,size,img)
{
    this.x = x;
    this.y = y;

    this.posX = posX;
    this.posY = posY;

    this.img = img;

    this.size = size;

    this.display = function()
    {
        image(this.img,this.x,this.y,this.size,this.size);
    }
}

var flag;
var bomb;
var rBomb;
var flagObj;
var bombObj;
var rBombObj;

function preload()
{
    flag = loadImage('https://i.imgur.com/srVDVYw.png');
    bomb = loadImage('https://i.imgur.com/D1m758U.png');
    rBomb = loadImage('https://i.imgur.com/gAdVac0.png');
}

function setup() 
{   
    createCanvas(700,700)
    flagObj = new Image(0,0,0,0,100,flag)
    bombObj = new Image(100,0,1,0,100,bomb)
    rBombObj = new Image(200,0,2,0,rBomb)
}

function draw()
{
    background(200)
    for (var obj of [flagObj,bombObj,rBombObj])
    {
        obj.display()
    }
}

1 个答案:

答案 0 :(得分：0)

我找到了解决方案，我认为它是由我的Image()函数引起的，因为我认为这已经是一个函数。这的确让我感到震惊，但是我认为这不会引起问题。现在一切正常。

相关问题
最新问题