Question

** 注意：我已编辑下面的javascript并链接到一个新的JSFiddle，但仍然没有按钮来控制蛇的运动，如键盘上的箭头键 **

我正在尝试为项目创建一个真正简单的蛇游戏，但需要它有按钮，以便游戏可以在移动设备上运行。这几乎就在那里，除了我需要按钮控制蛇在屏幕上的移动：

HTML：

END

jQuery的：

<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" width="450" height="450" style="display:none;"></canvas>

</div>

<div class="button-pad">

    <div class="btn-up">
        <button type="submit" class="up">
            <img src="http://aaronblomberg.com/sites/ez/images/btn-up.png" />
        </button>
    </div>

    <div class="btn-right">
        <button type="submit" class="right">
            <img src="http://aaronblomberg.com/sites/ez/images/btn-right.png" />
        </button>
    </div>

    <div class="btn-down">
        <button type="submit" class="down">
            <img src="http://aaronblomberg.com/sites/ez/images/btn-down.png" />
        </button>
    </div>

    <div class="btn-left">
        <button type="submit" class="left">
            <img src="http://aaronblomberg.com/sites/ez/images/btn-left.png" />
        </button>
    </div>

</div>

JSFiddle

http://jsfiddle.net/aaronblomberg/9w3gk3ma/3/

这几乎是我需要它的地方，但我需要上，下，左，右箭头按钮来控制蛇......

任何帮助都将非常感激。

Answer 1

你冷酷的做出这样的事情：

var isMobile;
checkMobile = function() {
    if ($(window).width() <= 766) {
        isMobile = true;
    }
    else {
        isMobile = false;
    }
}


$(window).resize(checkMobile());
$(document).ready(checkMobile());    

if (isMobile) {
    $('.button-pad').show();
}
else {
    $('.button-pad').hide();
}

.button焊盘：

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

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”属性中不同的按钮。

带游戏控制器按钮的蛇游戏更新

2 个答案:

带游戏控制器按钮的蛇游戏**更新**

2 个答案:

带游戏控制器按钮的蛇游戏更新