带有移动按钮控件的贪吃蛇游戏

Question

在这个贪吃蛇游戏中，我需要像方向键一样控制贪吃蛇的按钮。 这将允许在移动设备上玩游戏。 你可以看到我在那里有按钮的代码，但它们不能正常工作并且不能控制蛇的运动。

任何使按钮工作的建议将不胜感激！ 谢谢！

HTML

<section class="game" id="share">

<div class="container">

    <div class="columns twelve borders center">

        <div class="game-container">

            <div class="container">

                <div class="SplashScreen">
                    <h1>
                        Snake
                    </h1>
                    <h2>
                        Click To Start.
                    </h2>
                    <input class="StartButton" type="button" value="Start" />
                </div>

                <div class="FinishScreen" style="display:none">
                    <h1>
                        Game Over
                    </h1>
                    <p>
                        Your score was: <span id="score"></span>
                    </p>
                    <input class="StartButton" type="button" value="Restart" />
                </div>

                <canvas id="canvasArea" height="300" width="300" style="display:none;"></canvas>

            </div>

            <div class="button-pad">
                <div class="btn-up">
                    <input type="image" src="http://aaronblomberg.com/sites/ez/images/btn-up.png" alt="Up" class="button up-btn" />
                </div>

                <div class="btn-right">
                    <input type="image" src="http://aaronblomberg.com/sites/ez/images/btn-right.png" alt="Right" class="button right-btn" />
                </div>

                <div class="btn-down">
                    <input type="image" src="http://aaronblomberg.com/sites/ez/images/btn-down.png" alt="Down" class="button down-btn" />
                </div>

                <div class="btn-left">
                    <input type="image" src="http://aaronblomberg.com/sites/ez/images/btn-left.png" alt="Left" class="button left-btn" />
                </div>
            </div>

        </div>

    </div>

</div>

</section>

爪哇脚本

( function( $ ) {

    $( function() {

        $(document).ready(function () {

            $(".StartButton").click(function () {
                $(".SplashScreen").hide();
                $(".FinishScreen").hide();
                $("#canvasArea").show();
                init();
            });

            //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 = 10;
            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 endGame() {
                $("#canvasArea").hide();
                $("#score").text(score);
                $(".FinishScreen").show();
            }

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

            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 = "#0056a0";
                ctx.fillRect(0, 0, w, h);
                ctx.strokeStyle = "#ffffff";
                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)) {
                    //end game
                    return endGame();
                }

                //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 = "#ffffff";
                ctx.fillText(score_text, 5, h - 5);

                //Set the font and font size
                ctx.font = '12px 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 = "#d8d8d8";
                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 prevent the default browser action with arrow key usage
            var keys = {};
            window.addEventListener("keydown",
                function(e){
                    keys[e.keyCode] = true;
                    switch(e.keyCode){
                        case 37: case 39: case 38:  case 40: // Arrow keys
                        case 32: e.preventDefault(); break; // Space
                        default: break; // do not block other keys
                    }
                },
            false);
            window.addEventListener('keyup',
                function(e){
                    keys[e.keyCode] = false;
                },
            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

            });

        });


        $(document).on('click', '.button-pad > button', function(e) {
            if ($(this).hasClass('left-btn')) {
                e = 37;
            }
            else if ($(this).hasClass('up-btn')) {
                e = 38;
            }
            else if ($(this).hasClass('right-btn')) {
                e = 39;
            }
            else if ($(this).hasClass('down-btn')) {
                e = 40;
            }
            $.Event("keydown", {keyCode: e});
        }); 

    });

})( jQuery );

小提琴

Answer 1

和时间

所以基本上你有一些错误。 你的第一个是你的造型。 你真的需要让你的样式更灵活，但这将解决我遇到的右键问题。

.button-pad > div {
    z-index: 9999;
    width: 50px;
}

http://jsfiddle.net/34oeacnm/8/

 $(document).on('click', '.button-pad .button', function(e) {
     var e = jQuery.Event("keydown");
     if ($(this).hasClass('left-btn')) {
        e.which = 37;
     }
     else if ($(this).hasClass('up-btn')) {
        e.which = 38;
     }
     else if ($(this).hasClass('right-btn')) {
         e.which = 39;
     }
     else if ($(this).hasClass('down-btn')) {
        e.which = 40;
     }
     $(document).trigger(e);
}); 

您关闭了一些选择器。 我窃取了一些关于如何从Definitive 方式触发以使用 jQuery 触发按键事件的信息。

Answer 2

这是为蛇游戏添加moile控制的代码； （如果你想要蛇游戏的完整代码，请评论）；

//Here is javascript;

// left key
  function l() {
    if(snake.dx === 0) {
      snake.dx = -grid;
      snake.dy = 0;
    }
  }

  // up key
  function u() {
    if(snake.dy === 0) {
      snake.dy = -grid;
      snake.dx = 0;
    }
  }

  // right key 
  function r() {
    if(snake.dx === 0) {
      snake.dx = grid;
      snake.dy = 0;
    }
  }
  // down key 
  function d() {
    if(snake.dy === 0) {
      snake.dy = grid;
      snake.dx = 0;
    }
  }

这是 HTML；

<div>
  <button onclick="u()" type="button" id="U">U</button>
  <button onclick="l()" type="button" id="L">L</button>
  <button onclick="r()" type="button" id="R">R</button>
  <button onclick="d()" type="button" id="D">D</button>
</div>

描述：我只是在 html 页面中添加了四个按钮，在 js 中创建了四个函数，它们会移动蛇，因为它应该向不同的方向移动，并将它们分别添加到不同按钮的“onclick”属性中。