有人可以帮助我获得“游戏结束！”对话框工作？ [英] Can someone help me get the "Game Over!" dialogue box working?
问题描述
我一直试图让这个蛇游戏开始工作，但我唯一的问题是当蛇撞墙或碰到自己时，我希望它显示消息Game Over！你的分数是（无论分数是多少）
但由于某种原因，我无法弄明白。我错过了一些明显的东西吗？我刚刚开始学习如何编码，所以如果它是我错过的一些noobish，请不要给我太多废话，我是所有这一切的新手。
以下是我到目前为止：
< html lang =en>
< body background =blue.jpg>
< head>
< meta charset =UTF-8>
< title>简单蛇游戏< / title>
蛇游戏
canvas {
display：block;
position：absolute;
border： 1px solid＃000;
保证金：auto;
top：0;
bottom：0;
right ：0;
剩余：0;
}
< / head>
< form>
名字：< input type =textname =firstnameid =fn>
姓氏：< input type =textn ame =lastnameid =ln>
< / form>
使用箭头键导航你的蛇到美食！
< 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，
画布，
ctx，
keystate，
帧，
得分;
grid = {
宽度：null，
height：null，
_grid：null，
init：function（d，c ，r）{
this.width = c;
this.height = r;
这个。 _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）{
返回this._grid [x] [y] ;
}
}
snake = {
方向：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];
}，
删除：function（）{
返回this._queue.pop（）;
}
};
函数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）;
}
函数main（）{
canvas = document.createElement（canvas）;
canvas.width = COLS * 20;
canvas.height = ROWS * 20;
ctx = canvas.getContext（2d）;
document.body.appendChild（画布）;
< br $> b $ b
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（）;
}
函数init（）{
得分= 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（）;
}
函数循环（）{$ $
update（）;
draw（）;
window.requestAnimationFrame（loop，canvas）;
}
功能更新（）{
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;
开关（蛇。方向）{
案例左边：
nx--;
休息;
案例UP：
ny--;
休息;
案例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
）{
返回
;
}
if（grid.get（nx，ny）== =水果）{
得分++;
setFood（）;
}其他{
var tail = snake.remove（）;
grid.set（EMPTY，tail.x，tail.y）;
}
grid.set（SNAKE，nx，ny）;
snake.insert（nx，ny）;
}
}
功能抽奖（）{
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;
休息;
案例SNAKE：
ctx.fillStyle =＃0ff;
break;
case FRUIT：
ctx.fillStyle =＃ff0;
休息;
}
ctx.fillRect（x * tw，y * th，tw，th）;
}
}
ctx.fillStyle =＃000;
ctx.fillText（SCORE： +得分，10，canvas.height-10）;
}
main（）;
< / script>
< / body>
< / html>
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>
推荐答案
您好，我已用以下解决方案更新我的答案
1.游戏将询问第一个用户名然后开始
2.游戏只有在用户点击开始按钮时才开始
3.一旦游戏结束，它将显示Game Over （用户名）。你的分数是x
如果我给出了正确答案，请给我你的投票。
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);
//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>
这篇关于有人可以帮助我获得“游戏结束！”对话框工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
