Question

我正在制作一个带有画布的游戏，其中图像随机生成并存储到数组中。我希望用户能够保存他们的进度。到目前为止，只有他们的文字，例如玩家所在的那天以及玩家能够保存和重新加载的金币。我希望画布上的图像也可以保存。

player = {
    day: 1,
    gold: 1000,
    health: 100,
    hunger: 100,
    happy: 60,
    shop: [],
    shopItem: [], //the name of player.shop item
    shopPrice: [], //the price of player.shop item
    shopNumber: [], //the quantity of player.shop item
    shopStoreDate: [], //the store date of player.shop item
    storage: [], //the name of player.storage item
    storageNumber: [], //the quantity of player.storage item
    storageDay: [], //the store date of player.storage item
    storageImage: [], //the image of player.storage item
    feed: [],
};

function newGame() {
    player = {};
};

function reload() {
    player = {
        day: 1,
        gold: 1000,
        health: 100,
        hunger: 100,
        happy: 60,
        shop: [],
        shopItem: [], //the name of player.shop item
        shopPrice: [], //the price of player.shop item
        shopNumber: [], //the quantity of player.shop item
        shopStoreDate: [], //the store date of player.shop item
        storage: [], //the name of player.storage item
        storageNumber: [], //the quantity of player.storage item
        storageDay: [], //the store date of player.storage item
        storageImage: [], //the image of player.storage item
        feed: [],
    }

    $("#day").text("Day " + player.day);
    $("#gold").text("Gold: " + player.gold);

};

绘制图像

ctx.drawImage(player.shop[0], box01_x + 10, box01_y + 10, food_width, food_height);
ctx.drawImage(player.shop[1], box02_x + 10, box02_y + 10, food_width, food_height);
ctx.drawImage(player.shop[2], box03_x + 10, box03_y + 10, food_width, food_height);
ctx.drawImage(player.shop[3], box04_x + 10, box04_y + 10, food_width, food_height);
ctx.drawImage(player.shop[4], box05_x + 10, box05_y + 10, food_width, food_height);
ctx.drawImage(player.shop[5], box06_x + 10, box06_y + 10, food_width, food_height);

此处商店中的商品是随机生成的

for (var i=0; i<6; i++) {
    var rand = parseInt(Math.random() * 100);       //0-99

    if (rand<13) {
        player.shop[i] = foodImage1; 
    } else if (rand<26) {
        player.shop[i] = foodImage2;
    } else if (rand<39) {
        player.shop[i] = foodImage3;
    } else if (rand<52) {
        player.shop[i] = foodImage4;
    } else if (rand<59) {
        player.shop[i] = foodImage5;
    } else if (rand<66) {
        player.shop[i] = foodImage6;
    } else if (rand<73) {
        player.shop[i] = foodImage7;
    } else if (rand<80) {
        player.shop[i] = foodImage8;
    } else if (rand<87) {
        player.shop[i] = foodImage9;
    } else if (rand<94) {
        player.shop[i] = foodImage10;
    } else if (rand<96) {
        player.shop[i] = foodImage11;
    } else if (rand<98) {
        player.shop[i] = foodImage12;
    } else if (rand<100) {
        player.shop[i] = foodImage13;
    }
}

我能够获得之前页面上的日期编号和金币，但图像不会重绘

 `function save() {
    var save = {
        player1 : player,
    }

    localStorage.setItem("save", JSON.stringify(save));
};

function load() {

    var savegame = JSON.parse(localStorage.getItem("save"));
    if(savegame != null && savegame != undefined){
        player = savegame.player1;
    }
    var canvas = document.getElementById('shopCanvas');
    var ctx = canvas.getContext('2d');  

    $("#day").text("Day " + player.day); //this works
    $("#gold").text("Gold: " + player.gold); // this works
    ctx.drawImage(player.shop[0],70,40,100,100); // this doesn't work   

};`

这是我的游戏http://students.bcitdev.com/A00999050/HungryPets5/MonsterCollection.html

这是我的堆栈溢出。代码与上面的链接完全相同，但由于某种原因它在堆栈溢出中不起作用https://jsfiddle.net/693xLyqp/2/

我如何进行字符串化然后解析图像数组？

0 个答案: