Member 10799836 Ответов: 1

Может ли кто-нибудь помочь мне заставить работать диалоговое окно "Игра окончена!"?


Я пытался заставить эту змеиную игру работать, но моя единственная проблема заключается в том, что когда змея ударяется о стену или врезается в себя, я хочу, чтобы она отображала сообщение "Игра окончена! Ваш счет (независимо от того, что это за счет)"

Но по какой-то причине я просто не могу понять этого. Может быть, я упускаю что-то очевидное из этого? Я только недавно начал учиться кодировать, так что если это что-то нубишное, что я пропустил, пожалуйста, не давайте мне слишком много дерьма за это, я новичок во всем этом.

Вот что у меня есть до сих пор:


<html lang="en">
<body background="blue.jpg">
<голова>
<meta charset="UTF-8">
в <название&ГТ;простая игра Змейка будет</название&ГТ;

Игра Змейка



холст {
дисплей: блок;
положение: абсолютное;
граница: 1px solid #000;
маржа: авто;
топ: 0;
дно: 0;
справа: 0;
слева: 0;
}





</head>

<форма>
Имя: <input type="text" name="firstname" id="fn">
Фамилия: <input type="text" name="lastname" id="ln">
</форма>

Используйте клавиши со стрелками, чтобы переместить вашу змею к еде!

<тело>
<скрипт>
вар


COLS = 26,
Строк = 26,

Пусто = 0,
Змея = 1,
Фрукты = 2,

Слева = 0,
ВВЕРХ = 1,
Справа = 2,
Вниз = 3,

KEY_LEFT = 37,
KEY_UP = 38,
KEY_RIGHT = 39,
KEY_DOWN = 40,


холст,
СТХ,
keystate,
кадры,
счет;

сетка = {

ширина: null,
высота: ноль,
Оболочки: нуль,


init: функция(d, c, r) {
этот.ширина = c;
этот.высота = r;

эта сетка = [];
для (var x=0; x < c; x++) {
это.Оболочки.толчок([]);
для (var y=0; y < r; y++) {
это.Оболочки[х].толчок(д);
}
}
},


набор: функция(val, x, y) {
это._grid[x][y] = val;
},

get: функция(x, y) {
верните это._grid[x][y];
}
}

змея = {

направление: ноль,
последнее: null,
_queue: нуль,


init: функция(d, x, y) {
это.направление = д;

этот._очередь = [];
это.вставить(Х, Y);
},

вставка: функция(x, y) {
этот._очередь.unshift({x:x, y:y});
этот.последнее = это._queue[0];
},


удалить: функция() {

верни это._queue.поп();
}
};


функция setFood() {
var пустой = [];

для (var x=0; x < grid.width; x++) {
для (var y=0; y < grid.height; y++) {
если (грид.получим(х, г) === пусто) {
пусто.push({x:x, y:y});
}
}
}

var randpos = empty[Math.round(Math.random()*(empty.длина - 1))];
сетки.набор(фрукты, randpos.х, randpos.г);
}

функция main() {
canvas = document.createElement("холст");
canvas.width = COLS*20;
canvas.height = ROWS*20;
СТХ = холст.метода getcontext("2D с");

document.body.appendChild(холст);


ctx.font = "12px Helvetica";

кадры = 0;
keystate = {};

document.addEventListener("keydown", функция(evt) {
keystate[evt.keyCode] = true;
});
document.addEventListener("keyup", функция(evt) {
удалить keystate[evt.keyCode];
});


в этом();
петля();
}


функция init() {
результат = 0;

grid.init(пусто, COLS, строки);

var sp = {x:Math.floor(COLS/2), y:строки-1};
змея.метод init(до, СП.х, СП.г);
grid.set(змея, sp.x, sp.y);

setFood();
}

функция циклической () {
обновление();
рисовать();
окна.метод requestAnimationFrame(петли, полотно);
}


обновление функций() {
рамки++;

if (keystate[KEY_LEFT] && snake.direction !== вправо) {
змея.направление = влево;
}
if (keystate[KEY_UP] && snake.direction !== вниз) {
змея.направление = вверх;
}
if (keystate[KEY_RIGHT] && snake.direction !== влево) {
змея.направление = вправо;
}
if (keystate[KEY_DOWN] && snake.direction !== UP) {
змея.направление = "вниз";
}


если (кадры%5 === 0) {

ВАР ПХ = змея.последние.х;
ВАР Нью-Йорк = змея.последние.г;


переключатель (змейка.направление) {
дело осталось:
в NX--;
перерыв;
дело:
НЙ--;
перерыв;
дело правое:
в NX++;
перерыв;
дело закрыто:
Йорк++;
перерыв;
}


if (0 > nx || nx > grid.width-1 ||
0 &ГТ; Нью-Йорк || Нью-Йорк &ГТ; решетки.высота-1 ||
grid.get(nx, ny) === змея
) {
вернуть
;
}


if (grid.get(nx, ny) === фрукты) {

счет++;
setFood();
} еще {

ВАР хвост = змея.удалить();
grid.set(пустой, tail.x, tail.y);
}

grid.set(SNAKE, nx, ny);
змея.вставка(ПХ, ПУ);
}
}





функция draw() {

ВАР tст = холст.ширина/сетки.ширина;
ВАР че = холст.высота/сетки.высота;

для (var x=0; x < grid.width; x++) {
для (var y=0; y < grid.height; y++) {

переключатель (грид.получим(Х, Y)) {
дело пустое:
СТХ.свойства fillstyle = "#ФФФ";
перерыв;
чехол змеиная:
ctx.fillStyle = "#0ff";
перерыв;
случае фрукты:
ctx.fillStyle = "#ff0";
перерыв;
}
СТХ.fillRect(х*TW, по г*е, Вт, е);
}
}

ctx.fillStyle = "#000";
ctx.fillText("SCORE:" + score, 10, canvas.height-10);
}



главный();


</script>
</body>
</html>

Sunasara Imdadhusen

Приятная и интересная игра с использованием java-скрипта. я постараюсь решить вашу проблему. Не могли бы вы, пожалуйста, сообщить мне, что эта игра разработана вами :)

Member 10799836

К сожалению, нет, нас попросили найти руководство в интернете, а если понадобится, то и учебник. Однако коробка game over, которую я хочу реализовать, не находится ни в том, ни в другом, так что я полностью потерян!

1 Ответов

Рейтинг:
0

Sunasara Imdadhusen

Здравствуйте, я обновил свой ответ следующими решениями
1. игра сначала спросит имя пользователя, а затем запустится
2. Игра начнется только тогда, когда пользователь нажмет на кнопку "Пуск" .
3. Как только игра закончится, на экране появится надпись "Game Over (username). Ваша оценка х"
Пожалуйста, дайте мне свой голос, если я дам правильный ответ.

<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Simple Snake Game</title>
    <style type="text/css">
        .gmaeWrapper {
            border: solid 1px lightgray;
            width: 540px;
            padding: 4px;
        }
        canvas {
            display: block;
            border: 1px solid red;
            margin: auto;
        }
        h4{
            text-align: center;
        }
    </style>
    </head>
    <body>
        <div id="gameContainer" class="gmaeWrapper">
            First name: <input type="text" name="firstname" id="txtFirstName">
            Last name: <input type="text" name="lastname" id="txtLastName">
            <input type="button" value="Start Game" onclick="startGame();">
            <h4>Use the arrow keys to navigate your snake to the food!</h4>
            <script language="JavaScript">
                var userName = '', requestId = 1, SPEED = 20, COLS = 26,ROWS = 26, EMPTY = 0,SNAKE = 1,FRUIT = 2, LEFT = 0,UP = 1,RIGHT = 2,DOWN = 3, KEY_LEFT = 37,KEY_UP = 38,KEY_RIGHT = 39,KEY_DOWN = 40, canvas,ctx,keystate,frames,score;
                grid = {
                    width: null,
                    height: null,
                    _grid: null,
                    init: function(d, c, r) {
                        this.width = c;
                        this.height = r;
                        this._grid = [];
                        for (var x=0; x < c; x++) {
                            this._grid.push([]);
                            for (var y=0; y < r; y++) {
                                this._grid[x].push(d);
                            }
                        }
                    },
                    set: function(val, x, y) {
                        this._grid[x][y] = val;
                    },
                    get: function(x, y) {
                        return this._grid[x][y];
                    }
                }
                snake = {
                    direction: null,
                    last: null,
                    _queue: null,
                    init: function(d, x, y) {
                        this.direction = d;
                        this._queue = [];
                        this.insert(x, y);
                    },
                    insert: function(x, y) {
                        this._queue.unshift({x:x, y:y});
                        this.last = this._queue[0];
                    },
                    remove: function() {
                        return this._queue.pop();
                    }
                };
                function setFood() {
                    var empty = [];
                    for (var x=0; x < grid.width; x++) {
                        for (var y=0; y < grid.height; y++) {
                            if (grid.get(x, y) === EMPTY) {
                                empty.push({x:x, y:y});
                            }
                        }
                    }
                var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
                grid.set(FRUIT, randpos.x, randpos.y);
                }
                function main() {
                    canvas = document.createElement("canvas");
                    canvas.width = COLS*20;
                    canvas.height = ROWS*20;
                    ctx = canvas.getContext("2d");
                    document.getElementById('gameContainer').appendChild(canvas);
                    //document.body.appendChild(canvas);
                    ctx.font = "12px Helvetica";
                    frames = 0;
                    keystate = {};
                    document.addEventListener("keydown", function(evt) {
                        keystate[evt.keyCode] = true;
                    });
                    document.addEventListener("keyup", function(evt) {
                        delete keystate[evt.keyCode];
                    });
                    init();
                    requestId = window.setInterval(loop, SPEED);
                }
                function init() {
                    score = 0;
                    grid.init(EMPTY, COLS, ROWS);
                    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
                    snake.init(UP, sp.x, sp.y);
                    grid.set(SNAKE, sp.x, sp.y);
                    setFood();
                }
                function loop() {
                    update();
                    draw();
                }
                function update() {
                    frames++;
                    if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
                        snake.direction = LEFT;
                    }
                    if (keystate[KEY_UP] && snake.direction !== DOWN) {
                        snake.direction = UP;
                    }
                    if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
                        snake.direction = RIGHT;
                    }
                    if (keystate[KEY_DOWN] && snake.direction !== UP) {
                        snake.direction = DOWN;
                    }
                    if (frames%5 === 0) {
                        var nx = snake.last.x;
                        var ny = snake.last.y;
                        switch (snake.direction) {
                            case LEFT:
                                nx--;
                                break;
                            case UP:
                                ny--;
                                break;
                            case RIGHT:
                                nx++;
                                break;
                            case DOWN:
                                ny++;
                                break;
                        }
                        if (0 > nx || nx > grid.width-1 || 0 > ny || ny > grid.height-1 || grid.get(nx, ny) === SNAKE ) {
                            clearInterval(requestId);
                            alert('Game Over '+ userName +'! Your Score is ' + score);
                            return;
                        }
                        if (grid.get(nx, ny) === FRUIT) {
                            score++;
                            setFood();
                        }
                        else {
                            var tail = snake.remove();
                            grid.set(EMPTY, tail.x, tail.y);
                        }
                        grid.set(SNAKE, nx, ny);
                        snake.insert(nx, ny);
                    }
                }
                function draw() {
                    var tw = canvas.width/grid.width;
                    var th = canvas.height/grid.height;
                    for (var x=0; x < grid.width; x++) {
                        for (var y=0; y < grid.height; y++) {
                            switch (grid.get(x, y)) {
                                case EMPTY:
                                    ctx.fillStyle = "#fff";
                                    break;
                                case SNAKE:
                                    ctx.fillStyle = "#0ff";
                                    break;
                                case FRUIT:
                                    ctx.fillStyle = "#ff0";
                                    break;
                            }
                        ctx.fillRect(x*tw, y*th, tw, th);
                        }
                    }
                    ctx.fillStyle = "#000";
                    ctx.fillText("SCORE: " + score, 10, canvas.height-10);
                }
                function startGame(){
                    var fname = document.getElementById('txtFirstName').value.trim();
                    var lname = document.getElementById('txtLastName').value.trim();
                    if(fname.length == 0 || lname.length == 0 ){
                        alert('Please enter First and Last name');
                    }
                    else {
                        userName = fname + ' ' + lname;
                        main();
                    }
                }
            </script>
        </div>
    </body>
</html> 


Sunasara Imdadhusen

Пожалуйста, дайте мне знать, что ваша проблема все еще сохраняется.

Member 10799836

Не могли бы вы (или кто-нибудь еще) объяснить мне, что именно вы сделали? Как я уже сказал, Я очень новичок в кодировании, поэтому не могу понять, что произошло, глядя на него.

Что я делаю не так?

Sunasara Imdadhusen

Прежде чем перейти к объяснению, не могли бы вы дать мне знать, решило ли это вашу проблему или нет

Member 10799836

Да, похоже, это работает. Не могли бы вы сказать мне, что именно я делал не так?

Member 10799836

Не могли бы вы также помочь мне с другой проблемой, которая у меня возникла? Я хочу, чтобы пользователь мог поместить свое имя в предоставленные текстовые поля, поэтому в конце игры он говорит: "Игра окончена (имя пользователя). Ваша оценка х"

Я заметил, что теперь моя проблема заключается в том, что вы не можете ввести свое имя, а затем начать игру. Змея умрет, прежде чем вы закончите печатать, и вам придется обновить страницу.

Есть ли способ сделать так, чтобы змея не двигалась автоматически при загрузке страницы? Может быть, дать возможность пробела, чтобы начать игру, чтобы они могли ввести свое имя в коробку первым?

Ashishbhatt007

Хороший ответ, Имдад.

Member 10799836

Я ненавижу беспокоить людей, но не мог бы кто-нибудь объяснить, как работает этот раздел кода?

}
функция циклической () {
обновление();
рисовать();
}

Это просто говорит о том, что он собирается навсегда запустить функцию обновления и рисования?

Sunasara Imdadhusen

Эй, ваше требование-это больше... Я не могу помочь для вашей проблемы, потому что это займет время, чтобы реализовать все вещи. но я обязательно помогу Вам решить все эти вопросы. Пожалуйста, сделайте ответ, чтобы принять его, он действительно решил вашу проблему.

Sunasara Imdadhusen

Здравствуйте, я обновил свой ответ следующими решениями
1. игра сначала спросит имя пользователя, а затем запустится
2. Игра начнется только тогда, когда пользователь нажмет на кнопку "Пуск" .
3. Как только игра закончится, на экране появится надпись "Game Over (username). Ваша оценка х"
Пожалуйста, дайте мне свой голос, если я дам правильный ответ.