试图在 javascript 游戏蛇游戏中放置一个开始按钮

Question

I have tried to put a start button to my game or a start menu , but every time I try something my game stops working , I have tried a lot of stuffs that I have found online but every time it do-sent work and my game just disappear.

My game is a Snake game in javascript ,that I am trying to insert in my web page, I have found the script online I am not very good in coding. I have just started. I know some things and I am learning every day but I still consider my self a noob.

So this is the script i wana put the start button in front of the game

my script begin by // body onload="init()" the body onload , i dont have see it in the examples that i had see online

function init() {

    var ctx;
    var turn = [];
    var xV = [-1, 0, 1, 0];
    var yV = [0, -1, 0, 1];
    var queue = [];
    var elements = 1;
    var map = [];
    var X = 5 + (Math.random() * (45 - 10)) | 0;
    var Y = 5 + (Math.random() * (30 - 10)) | 0;
    var direction = Math.random() * 3 | 0;
    var interval = 0;
    var score = 0;
    var inc_score = 50;
    var sum = 0, easy = 0;
    var i, dir;
    var canvas = document.createElement('canvas');





    for (i = 0; i < 45; i++) {
        map[i] = [];
    }




    canvas.setAttribute('width', 45 * 10);
    canvas.setAttribute('height', 30 * 10);
    ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);
    function placeFood() {
        var x, y;
        do {
            x = Math.random() * 45 | 0;
            y = Math.random() * 30 | 0;
        } while (map[x][y]);
        map[x][y] = 1;
        ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2);
    }
    placeFood();
    function clock() {
        if (easy) {
            X = (X + 45) % 45;
            Y = (Y + 30) % 30;
        }
        --inc_score;
        if (turn.length) {
            dir = turn.pop();
            if ((dir % 2) !== (direction % 2)) {
                direction = dir;
            }
        }
        if (
            (easy || (0 <= X && 0 <= Y && X < 45 && Y < 30))
            && 2 !== map[X][Y]) {
            if (1 === map[X][Y]) {
                score += Math.max(5, inc_score);
                inc_score = 50;
                placeFood();
                elements++;
            }
            ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1);
            map[X][Y] = 2;
            queue.unshift([X, Y]);
            X += xV[direction];
            Y += yV[direction];
            if (elements < queue.length) {
                dir = queue.pop()
                map[dir[0]][dir[1]] = 0;
                ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
            }
        } else if (!turn.length) {
            if (confirm("nice try,keep winning satoshis ! Play again? Your Score is " + score)) {
                ctx.clearRect(0, 0, 450, 300);
                queue = [];
                elements = 1;
                map = [];
                X = 5 + (Math.random() * (45 - 10)) | 0;
                Y = 5 + (Math.random() * (30 - 10)) | 0;
                direction = Math.random() * 3 | 0;
                score = 0;
                inc_score = 50;
                for (i = 0; i < 45; i++) {
                    map[i] = [];
                }
                placeFood();
            } else {
                window.clearInterval(interval);
                window.location = "/projects/";
            }
        }
    }
    interval = window.setInterval(clock, 60);
    document.onkeydown = function (e) {
        var code = e.keyCode - 37;
        /*
            * 0: left
            * 1: up
            * 2: right
            * 3: down
            **/
        if (0 <= code && code < 4 && code !== turn[0]) {
            turn.unshift(code);
        } else if (-5 == code) {
            if (interval) {
                window.clearInterval(interval);
                interval = null;
            } else {
                interval = window.setInterval(clock, 60);
            }
        } else { // O.o
            dir = sum + code;
            if (dir == 44 || dir == 94 || dir == 126 || dir == 171) {
                sum += code
            } else if (dir === 218) easy = 1;
        }
    }
}

Answer 1

Is this good?

 <head> <title></title> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <style> canvas { border: 1px solid; } #btn { position: absolute; right: 0; } </style> </head> <body> <input type="button" value="Start" onclick="init()" id="btn" /> <script> function init() { var ctx; var turn = []; var xV = [-1, 0, 1, 0]; var yV = [0, -1, 0, 1]; var queue = []; var elements = 1; var map = []; var X = 5 + (Math.random() * (45 - 10)) | 0; var Y = 5 + (Math.random() * (30 - 10)) | 0; var direction = Math.random() * 3 | 0; var interval = 0; var score = 0; var inc_score = 50; var sum = 0, easy = 0; var i, dir; var canvas = document.createElement('canvas'); for (i = 0; i < 45; i++) { map[i] = []; } canvas.setAttribute('width', 45 * 10); canvas.setAttribute('height', 30 * 10); ctx = canvas.getContext('2d'); document.body.appendChild(canvas); function placeFood() { var x, y; do { x = Math.random() * 45 | 0; y = Math.random() * 30 | 0; } while (map[x][y]); map[x][y] = 1; ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2); } placeFood(); function clock() { if (easy) { X = (X + 45) % 45; Y = (Y + 30) % 30; } --inc_score; if (turn.length) { dir = turn.pop(); if ((dir % 2) !== (direction % 2)) { direction = dir; } } if ( (easy || (0 <= X && 0 <= Y && X < 45 && Y < 30)) && 2 !== map[X][Y]) { if (1 === map[X][Y]) { score += Math.max(5, inc_score); inc_score = 50; placeFood(); elements++; } ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1); map[X][Y] = 2; queue.unshift([X, Y]); X += xV[direction]; Y += yV[direction]; if (elements < queue.length) { dir = queue.pop() map[dir[0]][dir[1]] = 0; ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10); } } else if (!turn.length) { if (confirm("nice try,keep winning satoshis ! Play again? Your Score is " + score)) { ctx.clearRect(0, 0, 450, 300); queue = []; elements = 1; map = []; X = 5 + (Math.random() * (45 - 10)) | 0; Y = 5 + (Math.random() * (30 - 10)) | 0; direction = Math.random() * 3 | 0; score = 0; inc_score = 50; for (i = 0; i < 45; i++) { map[i] = []; } placeFood(); } else { window.clearInterval(interval); window.location = "/projects/"; } } } interval = window.setInterval(clock, 60); document.onkeydown = function (e) { var code = e.keyCode - 37; if (0 <= code && code < 4 && code !== turn[0]) { turn.unshift(code); } else if (-5 == code) { if (interval) { window.clearInterval(interval); interval = null; } else { interval = window.setInterval(clock, 60); } } else { // Oo dir = sum + code; if (dir == 44 || dir == 94 || dir == 126 || dir == 171) { sum += code } else if (dir === 218) easy = 1; } } } </script> </body>