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