Can someone help me get the "Game Over!" dialogue box working?

Question

1.00/5 (3 votes)

See more:

Ive been trying to get this snake game to work but my only problem is when the snake hits a wall or runs into itself, I want it to display the message "Game Over! Your Score is (whatever the score is)"

But for some reason I just cant figure it out. Am I missing something obvious with this? Ive just recently started learning how to code so if it is something noobish that I missed, please dont give me too much crap for it, Im new to all of this.

Here is what I have so far:

<html lang="en">
<body background="blue.jpg">
<head>
<meta charset="UTF-8">
<title>Simple Snake Game</title>

Snake Game

canvas {
display: block;
position: absolute;
border: 1px solid #000;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

</head>

<form>
First name: <input type="text" name="firstname" id="fn">
Last name: <input type="text" name="lastname" id="ln">
</form>

Use the arrow keys to navigate your snake to the food!

<body>
<script>
var

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.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();
loop();
}

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();
window.requestAnimationFrame(loop, canvas);
}

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
) {
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);
}

main();

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

Posted 6-May-14 14:51pm

Member 10799836

Add a Solution

Comments

Sunasara Imdadhusen 7-May-14 6:56am

Nice and interesting game using java script. i will try to solve your problem. Can you please let me know is this game developed by you :)

Member 10799836 7-May-14 7:23am

Unfortunately no, we were asked to find a guide online and if we needed to, find a tutorial. However the game over box I want to implement is not in either so I am completely lost!

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sunasara Imdadhusen · Answer 1 · 2014-05-07T02:15:00

Hello, I have update my answer with following solutions
1. Game will ask first user name and then start
2. Game will only start when user click on "Start" button
3. Once game is over it will display "Game Over (username). Your score is x"
Please give me your vote if i have give correct answer.

HTML

<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>