+ Ответить в теме
Показано с 1 по 5 из 5

Тема: как сохранить результат игры

  1. #1
    Новичок konart на пути к лучшему Аватар для konart
    Регистрация
    01.09.2017
    Сообщений
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    как сохранить результат игры

    Есть код, типа "Крестики - нолики". Как сохранить результат игры чтобы и поля были закрашены (чтобы знать кто куда ходил) и подсказки работали в сохранённом файле?
    <!DOCTYPE html>

    <html>
    <head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    #myTBL td.DarkGreen, .ui-tooltip.DarkGreen
    {
    font:14px helvetica, arial, sans-serif;
    color : White;
    font-weight:800;
    background-color:DarkGreen;
    background: linear-gradient(180deg, DarkGreen 95%, Black 5%);
    box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
    border-radius: 5px 5px; -webkit-border-radius: 5px;
    z-index: 1;
    opacity:0.99;
    }


    #myTBL td.Indigo, .ui-tooltip.Indigo
    {
    font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/
    color : White; /*#ccc #666 #000 White*/
    font-weight:800;
    background-color:Indigo;
    background: linear-gradient(180deg, Indigo 95%, Black 5%);
    box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
    border-radius: 5px 5px; -webkit-border-radius: 5px;
    z-index: 1;
    opacity:0.99;
    }


    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>
    $(function() {
    var content = {
    DarkGreen: "ЭТО КРЕСТИК",
    Indigo: "ЭТО НОЛИК",

    };
    $("#myTBL").on("click", "td", function() {
    var target = this,
    rem = 0,
    len = $('[name="COLOR"]').each(function(indx, el) {
    el.checked && !target.classList.contains(el.value) ? $(target).addClass(el.value).attr("title", el.value).tooltip({
    //track: true,
    tooltipClass: el.value,
    content: content[el.value] || ""
    }).tooltip("open") : ($(target).removeClass(el.value), rem++)
    }).length;
    if (rem == len) $(target).tooltip("destroy").removeAttr("title")
    })
    });
    </script>
    </head>

    <body>
    <table width="100%" height="100%" id="myTBL" class="select">

    <tr>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>


    </tr>
    <tr>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>


    </tr>
    <tr>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>
    <td bgcolor="PaleGoldenrod">
    &nbsp;

    </td>


    </tr>

    </table>
    <input type="radio" name="COLOR" value="DarkGreen" checked="checked">
    <label for="DarkGreen">DarkGreen</label>
    <input type="radio" name="COLOR" value="Indigo" >
    <label for="Indigo">Indigo</label>


    <script type="text/javascript">
    function doSaveAs(){
    if (document.execCommand){
    document.execCommand("SaveAs")
    }
    else {
    alert("Save-feature available only in Internet Exlorer 5.x.")
    }
    }
    </script>
    <form>
    <input type="button" value="save" onClick="doSaveAs()"
    </form>

    <a href="javascript:void(0);"
    onclick="document.execCommand('SaveAs',true,'file.html');"
    >Save this page</a>
    </body>
    </html>

  2. #2
    Новичок konart на пути к лучшему Аватар для konart
    Регистрация
    01.09.2017
    Сообщений
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    скажу сразу что кнопки не работают, увы. Лучший результат - это нажав правую кнопку и далее "сохранить как", правда в этом случае заливка ячеек сохраняется корректно, а вот подсказки работать перестают???? В процессе игры подсказки имеют тот же стиль как и ячейка и надписи "ЭТО НОЛИК", "ЭТО КРЕСТИК" а после сохранения подсказка теряет стиль и пишет цвет ячейки. Как исправить ситуацию не меняя общую концепцию?

  3. #3
    Местный Degradator на пути к лучшему Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    1,810
    Thanks
    140
    Thanked 135 Times in 135 Posts
    Делай так

    <!DOCTYPE html>
    <html>
    <head>
    <style>td{width:15px;height:15px;border: 1px solid black;}</style>
    </head>
    <body>
    <script>
    (function(){
    var field = loadData();
    var isCross = true;
    var table = document.createElement('table');
    for(var i = 0; i < field.length; i++) {
    var tr = document.createElement('tr');
    for(var j = 0; j < field[i].length; j++) {
    var td = createCell(field[i][j], i, j);
    tr.appendChild(td);
    }
    table.appendChild(tr);
    }
    function createCell(value, i, j) {
    var cell = document.createElement('td');
    switch(value) {
    case 0:
    cell.innerHTML = 'O';
    break;
    case 1:
    cell.innerHTML = 'X';
    break;
    }
    cell.addEventListener('click', function(){
    updateField(cell, i, j);
    });
    return cell;
    }

    function updateField(cell, i, j) {
    if(field[i][j] !== -1) {
    return;
    }
    cell.innerHTML = isCross ? 'X' : 'O';
    field[i][j] = isCross ? 1 : 0;
    isCross = !isCross;
    isWin();
    }
    function isWin() {
    alert("is win function should check is player win or not");
    }
    function loadData() {
    return [
    [-1, -1, -1],
    [-1, -1, -1],
    [-1, -1, -1]
    ]
    }
    document.body.appendChild(table);
    })()
    </script>
    </body>
    </html>


    Тут у тебя есть функцтя loadData, которая может брать данные например с сервера и отдавать их в твой скрипт. Если ты будешь работать с данными, ты легко сможешь их сохранить, и загрузить. Тебе не надо сохранять всю страницу, достаточно только данные. Для этого ты можешь использовать localStorage или базу данных на сервере. Сохранять страницу в виде html на компьютере пользователя не стоит.
    Делаю игру http://kill-them.com/

  4. #4
    Новичок konart на пути к лучшему Аватар для konart
    Регистрация
    01.09.2017
    Сообщений
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Degradator спасибо за совет, НО, мне нужно чтобы была возможность сохранять именно в виде html и именно на компьютере пользователя!!!!

  5. #5
    Местный Degradator на пути к лучшему Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    1,810
    Thanks
    140
    Thanked 135 Times in 135 Posts
    именно в виде html и именно на компьютере пользователя

    В таком случае тебе надо иметь какой-то сервер. Это может быть совершенно тупой обработчик - ты посылаешь в него текст, и он его отдает как аттачмент-файл.

    Сомневаюсь что у тебя получитсья сделать это без сервера. Но если все-таки хочешь попытаться, то посмотри как работает window.open. Может быть туда можно как-то передать html (но это скорее всего не так) и задать чтобы он скачивался. Ну и ты не сможешь указать какую-то кастомную директорию. Это точно.
    Делаю игру http://kill-them.com/

+ Ответить в теме

Похожие темы

  1. Ответов: 3
    Последнее сообщение: 29.01.2014, 13:28
  2. Загрузка файла и результат
    от BoL4oNoK в разделе JavaScript
    Ответов: 9
    Последнее сообщение: 08.10.2012, 20:16
  3. Перелинковка - вида, способы, результат.
    от Liforte в разделе Технические вопросы
    Ответов: 1
    Последнее сообщение: 12.02.2012, 06:48
  4. результат скушал подвал
    от Salikhoff в разделе CSS
    Ответов: 2
    Последнее сообщение: 06.03.2011, 20:11
  5. Поиск и замена - результат квадратиками
    от lukish в разделе Программы-редакторы
    Ответов: 10
    Последнее сообщение: 04.07.2008, 13:25

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения

 

Html-форум Рейтинг@Mail.ru canlı tv film izle