Question

我参加了蛇形游戏的教程，而我正试图让它更好地用于一个小小的项目。我有一个开始屏幕，用户可以按开始开始游戏。

我试图在用户死亡时添加一个结束屏幕，它会显示他们的分数，并添加一个播放按钮，以便用户可以在不刷新浏览器的情况下进行游戏。

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

})

})

http://jsfiddle.net/LsGW4/

Answer 1

有几件事。删除第39行的init()。这将阻止蛇游戏从开始直到准备好。（将init()添加到点击回调中。

然后添加一个与点击回调相反的功能，以显示带有开始按钮的第一个屏幕。在最后的游戏部分而不是init中调用它。

然后，您可以添加一些内容更改以显示分数。

这是一个更新的JS Fiddle，显示了这一点。

function endGame() {
    $("#canvasArea").hide();
    $("#score").text(score);
    $(".FinishScreen").show();
}

将结束屏幕添加到Canvas和基于jQuery的游戏中

1 个答案: