来自p5.js的loadImage（）没有加载图片，本地服务器没有工作，图片托管网站没有工作，网站只显示“正在加载...”[关闭]

问题描述 投票：1回答：1

我正在尝试创建扫雷，它起作用，直到我试图实现图像（用于炸弹和旗帜）。现在它只是说“加载......”，从我发现的一切都是正常的，它应该在那里直到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：我正在研究一个最小，完整和可验证的例子。此外，更改了Imgur链接的Dropbox链接，因为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()
    }
}
javascript processing p5.js
1个回答
0
投票

我找到了解决方案，我认为这是我的Image()功能，因为我认为这已经是一个功能。这确实让我想到了，但我认为这不会引起问题。现在一切正常。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.