-1
我已经参加了一个贪吃蛇游戏的教程，并且我正在尝试使其更适合当前的一个小项目。我有一个开始屏幕，用户可以按开始启动游戏。添加结束画面到基于Canvas和jQuery的游戏
我试图在用户死亡时添加一个结束画面，以显示他们的得分是什么，并添加一个播放按钮，以便用户可以在不刷新浏览器的情况下点击播放。
作为jQuery和Canvas的新手，我一直在努力，并尝试了许多不同的方式来做到这一点。我想知道什么是最好的方式去加入这个结束屏幕英寸
我还包括一个JS小提琴来显示我想要做的事情。
HTML：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/game.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="SplashScreen">
<h1>Snake</h1>
<input class="StartButton" type="button" value="Start" />
</div>
<canvas id="canvasArea" width="600" height="450" style="display:none;"></canvas>
</div>
</body>
</html>
的jQuery：
$(document).ready(function(){
$(".StartButton").click(function() {
$(".SplashScreen").hide();
$("#canvasArea").show();
});
//Canvas stuff
var canvas = $("#canvasArea")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvasArea").width();
var h = $("#canvasArea").height();
//Lets save the cell width in a variable for easy control
var sw = 15;
var direction;
var nd;
var food;
var score;
//Lets create the snake now
var snake_array; //an array of cells to make up the snake
function init() {
direction = "right"; //default direction
nd = [];
create_snake();
create_food(); //Now we can see the food particle
//finally lets display the score
score = 0;
//Lets move the snake now using a timer which will trigger the paint function
//every 60ms
if(typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}
init();
function create_snake() {
var length = 5; //Length of the snake
snake_array = []; //Empty array to start with
for(var i = length-1; i>=0; i--)
{
//This will create a horizontal snake starting from the top left
snake_array.push({x: i, y:0});
}
}
//Lets create the food now
function create_food() {
food = {
x: Math.round(Math.random()*(w-sw)/sw),
y: Math.round(Math.random()*(h-sw)/sw),
};
//This will create a cell with x/y between 0-44
//Because there are 45(450/10) positions accross the rows and columns
}
//Lets paint the snake now
function paint() {
if (nd.length) {
direction = nd.shift();
}
//To avoid the snake trail we need to paint the BG on every frame
//Lets paint the canvas now
ctx.fillStyle = "#8db370";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//The movement code for the snake to come here.
//The logic is simple
//Pop out the tail cell and place it infront of the head cell
var nx = snake_array[0].x;
var ny = snake_array[0].y;
//These were the position of the head cell.
//We will increment it to get the new head position
//Lets add proper direction based movement now
if(direction == "right") nx++;
else if(direction == "left") nx--;
else if(direction == "up") ny--;
else if(direction == "down") ny++;
//Lets add the game over clauses now
//This will restart the game if the snake hits the wall
//Lets add the code for body collision
//Now if the head of the snake bumps into its body, the game will restart
if(nx == -1 || nx == w/sw || ny == -1 || ny == h/sw || check_collision(nx, ny, snake_array))
{
//restart game
init();
//Lets organize the code a bit now.
return;
}
//Lets write the code to make the snake eat the food
//The logic is simple
//If the new head position matches with that of the food,
//Create a new head instead of moving the tail
if(nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//Create new food
create_food();
}
else
{
var tail = snake_array.pop(); //pops out the last cell
tail.x = nx; tail.y = ny;
}
//The snake can now eat the food.
snake_array.unshift(tail); //puts back the tail as the first cell
for(var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
//Lets paint 10px wide cells
paint_cell(c.x, c.y);
}
//Lets paint the food
paint_cell(food.x, food.y);
//Lets paint the score
var score_text = "Score: " + score;
ctx.fillStyle = "black";
ctx.fillText(score_text, 5, h-5);
//Set the font and font size
ctx.font = '12pt Arial';
//position of the fill text counter
ctx.fillText(itemCounter, 10, 10);
}
//Lets first create a generic function to paint cells
function paint_cell(x, y)
{
ctx.fillStyle = "#5c7f3d";
ctx.fillRect(x*sw, y*sw, sw, sw);
}
function check_collision(x, y, array)
{
//This function will check if the provided x/y coordinates exist
//in an array of cells or not
for(var i = 0; i < array.length; i++)
{
if(array[i].x == x && array[i].y == y)
return true;
}
return false;
}
//Lets add the keyboard controls now
$(document).keydown(function(e){
var key = e.which;
var td;
if (nd.length) {
var td = nd[nd.length - 1];
} else {
td = direction;
}
//We will add another clause to prevent reverse gear
if(key == "37" && td != "right") nd.push("left");
else if(key == "38" && td != "down") nd.push("up");
else if(key == "39" && td != "left") nd.push("right");
else if(key == "40" && td != "up") nd.push("down");
//The snake is now keyboard controllable
})
})
太棒了！感谢您的帮助，真的很感激它，帆布很难入门。 – user3080577