JavaScript - LocalStorage

JavaScript - LocalStorage
2019-03-25T19:18:18+01:00
2019-03-26T17:15:55+01:00
2022-08-11T11:15:29+02:00
GYBY
Van egy Snake játékom, és csináltam bele egy "record"-ot. GYBY - Snake Game



Ezt kéne elmenteni valahogy esetleg LocalStorage-al.

Valami megoldást tudna valaki ajánlani?

Válaszokat előre is köszönöm!

-GYBY
Mutasd a teljes hozzászólást!
Kb.
let rekord = Math.max(score, localStorage.getItem("rekord")); document.getElementById("record").innerHTML = rekord; localStorage.setItem("rekord", rekord);
Mondjuk érdemes lenne már a futás elején megjeleníteni a rekordot.
Mutasd a teljes hozzászólást!

  • Mutasd a teljes hozzászólást!
  • Hali!

    Mutasd – forráskóddal –, hogy eddig mivel, hogyan próbálkoztál, meddig jutottál el, mi nem megy, miben/hol akadtál el! Nem először kérem már ezt. 

    Mutasd a teljes hozzászólást!
  • netangel: A kérdező adott linket a kígyóhoz, abban benne van a forrás...

    GYBY: Ha esetleg sütiben (cookie) tárolnád?
    Néhány észrevétel:
    - Lehet, hogy ez JS, vagy böngésző sajátosság, de jelentős késés van a billentyű leütés és a reakció között, ez egy picikét zavaró
    - A következő csillag pozíciójának a kalkulálásakor figyelj arra, hogy hol van a kígyó teste. Elég fura volt, amikor a kígyó belsejében jelent meg... Persze ez is lehet koncepció, de nem szokványos.

    Gábor
    Mutasd a teljes hozzászólást!
  • Hali!

    A kérdező adott linket a kígyóhoz, abban benne van a forrás...

    1. Mi biztosítja, hogy az a link 1 hét/hónap/év/stb. múlva is élő lesz?
    2. Hol van abban a forrásban az a rész, amiben látható, miként próbálta a LocalStorage-be mentést?

    Mutasd a teljes hozzászólást!
  • Igazad van, beismerem. Ne haragudj, azt hittem, csak nem vetted észre...
    Mutasd a teljes hozzászólást!
  • Ha benne hagytam volna a forráskódba amit próbálkoztam akkor nem működne a játék.

    Olyanra is gondoltam, hogy pl.: console.log-ba kiirni a recordot és ha frissül az oldal akkor a consol log-ban lévő utolsó szám legyen egyenlő a recordal.

    Előző kérdéseimben előjött egy probléma egy "Jegyzetek" oldalammal.

    2* mentette el a jegyzetet, később kiderült hogy kétszer hívtam be a script-et..de ott egy JSON-megoldást csináltam, igazából egy Template-et szedtem le és formáztam meg a saját elképzelésemre, itt a jegyzetet el lehet menteni de csak azona gépen ahol írod, ez kicsit zavaró esetleg ha valaki tud erre valamit akkor megköszönöm. www.gyby.webtelek.hu/note/index.html

    Próbáltam kiszedni a "Jegyzetek" JS-ből és átírni a Snake-be a mentést de sehogy se akart menni.
    Mutasd a teljes hozzászólást!
  • <html> <head> <link rel="icon" href="icon.png"> <title>GYBY - Snake Game</title> <style> canvas{ display: block; margin: 0 auto; } </style> </head> <canvas id="snake" width="608" height="608"></canvas> <script src="snake.js"></script> <h1 id="scores">Record: </h1> <h1 id="record"></h1> <style> #record{ font-size: 50px; font-family:cursive; color: red; margin: 0 195; margin-top: -67; } #scores{ font-size: 50px; font-family:cursive; margin: auto; } </style> </html>
    const cvs = document.getElementById("snake");
    const ctx = cvs.getContext("2d");

    // 32px box
    const box = 32;

    // kĂŠpek betĂśltĂŠse

    const ground = new Image();
    ground.src = "img/ground.png";

    const foodImg = new Image();
    foodImg.src = "img/food.png";

    // hangok betĂśltĂŠse

    let dead = new Audio();
    let eat = new Audio();
    let up = new Audio();
    let right = new Audio();
    let left = new Audio();
    let down = new Audio();

    dead.src = "audio/dead.mp3";
    eat.src = "audio/eat.mp3";
    up.src = "audio/up.mp3";
    right.src = "audio/right.mp3";
    left.src = "audio/left.mp3";
    down.src = "audio/down.mp3";

    // kĂ­gyĂł elkĂŠszĂ­tĂŠse

    let snake = [];

    snake[0] = {
    x: 9 * box,
    y: 10 * box
    };

    // kaja elkĂŠszĂ­tĂŠse

    let food = {
    x: Math.floor(Math.random() * 17 + 1) * box,
    y: Math.floor(Math.random() * 15 + 3) * box
    }

    // pont lĂŠtrehozĂĄsa

    let score = 0;

    // snake irĂĄnyĂ­tĂĄsa

    let d;

    document.addEventListener("keydown", direction);

    function direction(event) {
    let key = event.keyCode;
    if (key == 37 && d != "RIGHT") {
    left.play();
    d = "LEFT";
    } else if (key == 38 && d != "DOWN") {
    d = "UP";
    up.play();
    } else if (key == 39 && d != "LEFT") {
    d = "RIGHT";
    right.play();
    } else if (key == 40 && d != "UP") {
    d = "DOWN";
    down.play();
    }
    }


    function collision(head, array) {
    for (let i = 0; i < array.length; i++) {
    if (head.x == array.x && head.y == array.y) {
    return true;
    }
    }
    return false;
    }



    function draw() {

    ctx.drawImage(ground, 0, 0);

    for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = (i == 0) ? "red" : "green";
    ctx.fillRect(snake.x, snake.y, box, box);

    ctx.strokeStyle = "black";
    ctx.strokeRect(snake.x, snake.y, box, box);
    }

    ctx.drawImage(foodImg, food.x, food.y);

    // fej pozĂ­ciĂłja
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;

    //irĂĄnyĂ­tĂĄs
    if (d == "LEFT") snakeX -= box;
    if (d == "UP") snakeY -= box;
    if (d == "RIGHT") snakeX += box;
    if (d == "DOWN") snakeY += box;

    // rekord pont eltĂĄrolĂĄsa

    let record = score;
    document.getElementById("record").innerHTML = record;


    // ha a kĂ­gyĂł megeszi a kajĂĄt
    if (snakeX == food.x && snakeY == food.y) {
    score++;
    eat.play();
    food = {
    x: Math.floor(Math.random() * 17 + 1) * box,
    y: Math.floor(Math.random() * 15 + 3) * box
    }

    } else {

    snake.pop();
    }

    // Ăşj fej hozzĂĄdĂĄsa

    let newHead = {
    x: snakeX,
    y: snakeY
    }

    // jĂĄtĂŠk vĂŠge

    if (snakeX < box || snakeX > 17 * box || snakeY < 3 * box || snakeY > 17 * box || collision(newHead, snake)) {
    clearInterval(game);
    dead.play();
    }

    snake.unshift(newHead);

    ctx.fillStyle = "white";
    ctx.font = "45px Changa one";
    ctx.fillText(score, 2 * box, 1.6 * box);
    }

    // előhívni a draw funkciót 150ms-enként

    let game = setInterval(draw, 150);
    Mutasd a teljes hozzászólást!
  • bocsánat, most mi a kérdés?

    a "record" nyilvántartására nézd meg az ajánlott 2.linken ( Window localStorage Property ), alul, a "klikkelős" példát...
    Mutasd a teljes hozzászólást!
  • Kb.
    let rekord = Math.max(score, localStorage.getItem("rekord")); document.getElementById("record").innerHTML = rekord; localStorage.setItem("rekord", rekord);
    Mondjuk érdemes lenne már a futás elején megjeleníteni a rekordot.
    Mutasd a teljes hozzászólást!
  • Működik, köszönöm!
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd