@XOPEK_32
Я хорек из Брянска

Возможно ли изменить текст кода файла HTML через JS?

Суть вопроса состоит в следующем. Я делаю игру, арканоид. Мне нужно как-нибудь реализовать рекорд. Сейчас у меня появилось 2 вопроса.
1) Возможно ли задать значение переменной на JAVASCRIPT навсегда (даже звучит глупо, но вдруг)
2) Можно ли навсегда подкорректировать код HTML через JS-файл.
Код:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<canvas width="640" height="480" style="background-color: gray" id="gameField"></canvas>
<script src="script.js"></script>
Лучшее время (в секундах) <input readonly size = "1" id = "HS" value = "50"/>
</body>
</html>

И JS:
var gameField = document.getElementById("gameField");
var graphics = gameField.getContext("2d");
var ballR = 10;
var ballX = gameField.width/2;
var ballY = gameField.height/2+ballR*4;
var ballDx = ballR/4;
var ballDy = ballR/4;
var racketW = ballR*10;
var racketH = ballR*2;
var racketX = gameField.width/2-racketW/2;
var racketY = gameField.height - racketH;
var racketDx = racketW/10;
var racketDirection = 0;
//0 - stop //-1 - left //1 - right
var m = 1;
var s = 30;
var c = 3;
var b = 0;
var z;
var rowsCount=4;
var columsCount=5;
var bricksMargin=30;
var offsetX=100;
var offsetY=50;
var brickW=ballR*6;
var brickH=ballR*2;
var bricks=[];
var lives=3;
var newRec;

function countTimer1() {
    graphics.clearRect(200, 0, 60, 60);
    if (c === 1) {
        s = 59;
        m = m - 1;
        b = 2;
    }

    if (c === 3) {
        if ((s > 0) && (m >= 0)) {
            s = s - 1;
        }

        if ((s === 0) && (m > 0)) {
            c = 1;
                   }

        if ((s === 0) && (m === 0)) {
            z = 5;
            clearTimeout(tm);
        }
    }
    if (b === 2) {
        c = 3;
    }
}

tm = setInterval(countTimer1, 1000);

function drawTimer() {
    graphics.fillStyle = "#f6ff00";
    graphics.font = "20px Century Gothic";

    if (s >= 10) {
        graphics.fillText(m + ":" + s, 200, 20);
    }
    if (s < 10) {
        graphics.fillText(m + ":" + "0" + s, 200, 20);
    }
}
function createBricks() {
    var k=0;
    for (var i=0;i<rowsCount;i++)
    {
        for(var j=0;j<columsCount;j++)
        {
            bricks[k]=
                {
                  x:j*(brickW+bricksMargin)+offsetX,
                  y:i*(brickH+bricksMargin)+offsetY
                };
            k++;
        }
    }
}

function drawBall() {
    graphics.beginPath();
        graphics.arc(ballX, ballY, ballR, 0, Math.PI*2);
        graphics.fillStyle="#005fdd";
        graphics.fill();
    graphics.closePath();
}

function moveBall() {
    ballX+=ballDx;
    ballY+=ballDy;
}

function collisionBallWithBorder() {
    //down side
    if(ballY+ballR>=gameField.height) {
        ballDy*=-1;
        lives--;
    }
    //up side
    if(ballY-ballR<=0) {
        ballDy*=-1;
    }
    //left side
    if(ballX-ballR<=0) {
        ballDx*=-1;
    }
    //right side
    if(ballX+ballR>=gameField.width) {
        ballDx*=-1;
    }
}

function drawRacket() {
    graphics.beginPath();
        graphics.rect(racketX, racketY, racketW,racketH);
        graphics.fillStyle="#006ddd";
        graphics.fill();
    graphics.closePath();
}
function keyDownHandler(key) {
    if(key.keyCode===37){racketDirection=-1;}
    if(key.keyCode===39){racketDirection=1;}
}
function keyUpHandler(key) {
    if(key.keyCode===37){racketDirection=0;}
    if(key.keyCode===39){racketDirection=0;}
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function moveRacket(){
    if(racketDirection===1)
    {
        racketX+=racketDx;
        if(racketX+racketW>=gameField.width)
        {
            racketX = gameField.width - racketW;
        }
    }
    if(racketDirection===-1)
    {
        racketX-=racketDx;
        if(racketX<=0)
        {
            racketX = 0;
        }
    }
}
function collisionBallWithRacket() {
    if(ballX>=racketX && ballX<=racketX+racketW &&
    ballY+ballR>=racketY)
    {
        ballDy*=-1;
    }
}

function drawBricks() {
    for (var i=0;i<bricks.length;i++)
    {
        graphics.beginPath();
        graphics.rect(bricks[i].x, bricks[i].y, brickW,brickH);
        graphics.fillStyle="#0095DD";
        graphics.fill();
        graphics.closePath();
    }
}
function collisionBallWithBricks() {
    for (var i = 0; i < bricks.length; i++)
    {
        if(ballX>=bricks[i].x && ballX<=bricks[i].x+brickW &&
            ballY>=bricks[i].y && ballY<=bricks[i].y+brickH )
        {
            bricks.splice(i,1);
            ballDy=-ballDy;
            break;
        }
    }
}
function drawLives() {
    graphics.font="15px Verdana";
    graphics.fillStyle="red";
    graphics.fillText("Lives: "+lives, 10,30);
}
function gameOver() {
    newRec = 90 - (m * 60) - s;
    if(lives===0 || z === 5)
    {
        clearInterval(timer);
        clearInterval(tm);
        if(confirm("ТЫ слил. Нуб. Сыграешь ещё?")===true)
        {
            document.location.reload();
        }
    }
    if(bricks.length===0)
    {
        if ((90 - ( m * 60) - s) < 50) {
            alert ('Рекорд в студию! Ваше новое лучшее время - ' + newRec + ' секунд(ы)');
            document.getElementById("HS").value=newRec;
        }
        clearInterval(timer);
        clearInterval(tm);
        if(confirm("Надо же! Не слил! Сыграем ещё?")===true)
        {
            document.location.reload();
        }
    }
}

function updateGameField() {
    graphics.clearRect(0,0,gameField.width, gameField.height);
    drawBall();
    moveBall();
    collisionBallWithBorder();
    drawRacket();
    moveRacket();
    collisionBallWithRacket();
    drawBricks();
    collisionBallWithBricks();
    drawLives();
    gameOver();
    drawTimer();
}

createBricks();
timer = setInterval(updateGameField, 10);

Или же есть другой способ записи рекордов? Заранее спасибо.
  • Вопрос задан
  • 1301 просмотр
Решения вопроса 1
1) Возможно ли задать значение переменной на JAVASCRIPT навсегда (даже звучит глупо, но вдруг)

Возможно, достаточно использовать инструкцию const.
const a = "Hello";
a = "Bye"; // error


2) Можно ли навсегда подкорректировать код HTML через JS-файл.

Доступа к файловой системе из песочницы JavaScript в браузере - нет. Но вы можете использовать Local Storage.
localStorage.result= '...';
console.log(localStorage.result);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@BitRouter
не совсем понял цель задумки, но:
для сохранения "навсегда"
Вариант А: использовать cookie
Вариант В: занести переменную в window, тем самым можно будет обращаться к ней из любой точки скрипта
пример:
window.documentParam = true;
// or
window.documentParam = function(){ return true; }

Вариант С:
использовать хранилице на бэке

-----------

для изменения HTML
пример на jQuery
$('body').find('#myID')
.html( /* меняем значение */)
.append( /* установим в конец этого блока что угодно */)
// и т.д. - с DOM структурой можно делать что угодно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы