學習js/jquery試圖創建一個開始按鈕

-2

在js/jquery上取得一個類並且遊戲正常運行，但是您必須刷新頁面才能重新啓動它。我試圖創建一個按鈕並讓它「重新開始遊戲」，但我無法實現它。學習js/jquery試圖創建一個開始按鈕

任何幫助/資源/建議，將不勝感激謝謝！

的index.html：

<!DOCTYPE html> 
<html lang='en'> 
<head> 
    <meta charset='UTF-8'> 
    <meta name='viewport' content="width=device-width, initial-scale=1.0"> 
    <title>Snake Game</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src='https://code.jquery.com/jquery-2.1.3.js'></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script src='js/script.js'></script> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="row-md-6 row-md-offset-3"> 
      <h1>The Snake Game!!</h1> 
      <canvas class='snake-game' width ='600px' height='500px'></canvas> 
      <button type='button' class='start'>Start Game</button> 
      </div> 
     </div> 
    </div> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

</body> 
</html>

JS/jQuery的

jQuery(document).ready(function(){ 
    var snakeCanvas = $('canvas.snake-game')[0], 
    context = snakeCanvas.getContext('2d'), 
    width = snakeCanvas.width, 
    height = snakeCanvas.height, 
    snakeSize = 10, 
    snake = [ 
     { 'x': 0,'y': 0 }, 
     { 'x': 1, 'y': 0 }, 
     { 'x': 2, 'y': 0 }, 
     { 'x': 3, 'y': 0 }, 
     { 'x': 4, 'y': 0 }, 
     ], 
     direction = 'right', 
     gameSpeed = 50, 
     score = 0; 

    var foodX, 
     foodY, 
     gameLoop 

    start(); 

    $('.start')on('click', function(){ 
     start(); 
    }) 
    function createNewFood(){ 
     foodX = parseInt(Math.random() * width/snakeSize); 
     foodY = parseInt(Math.random() * yeah itheight/snakeSize); 
    } 

    function checkCollision(snakeArrayInput, foodXinput, foodYinput){ 
     var collision = 'nothing'; 

     snakeArrayInput.every(function(element){ 
      if(element.x == foodXinput && element.y == foodYinput){ 
      collision = "food"; 
      return false; 
      }else if(element.x == -1 || 
        element.y == -1 || 
        element.x == width/snakeSize || 
        element.y == height/snakeSize){ 
      collision = "wall"; 
      return false; 
      }else{ 
      return true; 
      } 
     }); 

     return collision; 
    } 

    paint(0, 0, width, height, 'white', 'black'); 

    function start(){ 
     createNewFood(); 
     gameLoop = setInterval(reDraw, gameSpeed);  
    } 

    function stop(){ 
     clearInterval(gameLoop); 
    } 



    function reDraw(){ 
     drawBg(); 
     drawSnake(snake); 
     drawFood(); 
     drawScore(); 
     //checkCollision(snakeArrayInput, foodXinput, foodYinput); 
     var collisionStatus = checkCollision(snake, foodX, foodY); 
     if(collisionStatus == 'food'){ 
      score ++; 
      createNewFood(); 
      snake.unshift(updateDirection(snake, direction)); 
     } else if (collisionStatus == 'wall'){ 
      stop(); 
      alert('Your score was: ' + score); 
      score = 0; 

     } 
    }; 

    function drawFood(){ 
     paint(foodX*snakeSize, foodY*snakeSize, snakeSize, snakeSize, 'green', 'black'); 
    } 

    function drawScore(){ 
     context.fillStyle = 'grey'; 
     context.fillText('Score: ' + score, width-596, height-6); 
    } 

    function drawBg(){ 
     paint(0,0,width, height, 'white', 'black'); 
    } 

    function drawSnake(snakeInput){ 
     updateSnake(snakeInput); 
     snakeInput.forEach(function(element){ 
      paint(element.x*10, element.y*10, snakeSize, snakeSize, 'orange', 'black'); 
     }); 

    } 

    function paint(x, y, w, h, bgColor, borderColor){ 
     context.fillStyle = bgColor; 
     context.fillRect(x, y, w, h); 
     context.strokeStyle = borderColor; 
     context.strokeRect(x, y, w, h); 
    } 

    function updateSnake(snakeInput){ 
    snakeInput.shift(); 
    snakeInput.push(updateDirection(snakeInput, direction)); 
    } 

    function updateDirection(snakeInput, direction){ 
     var cellX = snakeInput[snakeInput.length-1].x; 
     var cellY = snakeInput[snakeInput.length-1].y; 

     if(direction == 'right'){ 
      cellX = cellX + 1; 
     } else if (direction == 'left') { 
      cellX = cellX - 1; 
     } else if (direction == 'top') { 
      cellY = cellY - 1; 
     } else if (direction == 'bottom') { 
      cellY = cellY + 1; 
     } 

     return {'x':cellX, 'y':cellY}; 
    } 

    $(document).on('keydown', function(e){ 
     if(e.which == '37' && direction != 'right'){ // left keydown 
      direction = 'left'; 
     }else if(e.which == '38' && direction != 'bottom'){ // top keydown 
      direction = 'top'; 
     }else if(e.which == '39' && direction != 'left'){ // right keydown 
      direction = 'right'; 
     }else if(e.which == '40' && direction != 'top'){ // bottom keydown 
      direction = 'bottom'; 
     } 
    }); 
});

來源

2015-06-20 boomer1204

$('.start')on('click', function(){ 
     start(); 
    })

漏點，改變$('.start').on('click', function(){

function createNewFood(){ 
     foodX = parseInt(Math.random() * width/snakeSize); 
     foodY = parseInt(Math.random() * yeah itheight/snakeSize); 
    }

變化foodY = parseInt(Math.random() * yeah itheight/snakeSize);到 foodY = parseInt(Math.random() * height/snakeSize);

編輯：所以，如果你想開始遊戲設置爲可播放的狀態下，你需要重新初始化你的遊戲參數，這裏的變化：

function start(){ 
    // Set init states. 
    snakeSize = 10, 
    snake = [ 
    { 'x': 0,'y': 0 }, 
    { 'x': 1, 'y': 0 }, 
    { 'x': 2, 'y': 0 }, 
    { 'x': 3, 'y': 0 }, 
    { 'x': 4, 'y': 0 }, 
    ], 
    direction = 'right', 
    gameSpeed = 50, 
    score = 0; 
    createNewFood(); 
    gameLoop = setInterval(reDraw, gameSpeed);  
}

固定它，這樣的作品，並開始遊戲重新開始一個可玩的遊戲。

JsFiddle

來源

2015-06-20 18:53:14 fuyushimoya

謝謝你。不幸的是，當你點擊開始按鈕時，蛇不會重置遊戲，只是馬上他就會跑到牆上。這是我遇到的最初的問題，即使在你的jsfiddle鏈接中，它仍然存在。 – boomer1204

修復它，請檢查。 – fuyushimoya

沒關係我看到你創建的啓動函數。非常感謝！！！！ – boomer1204

學習js/jquery試圖創建一個開始按鈕

回答

相關問題