经典贪吃蛇游戏 - 在线玩 - 常规

<html>
  <head>
    <title>经典贪吃蛇游戏 - 在线玩</title>
  </head>
  <body>
    <canvas id="snakeCanvas" width="400" height="400"></canvas>
    <script type="text/javascript">
      // Create the canvas
      var canvas = document.getElementById("snakeCanvas");
      var ctx = canvas.getContext("2d");
      // Create the snake
      var snakeSize = 10;
      var snake;
      var snakeLength;
      // Create the food
      var food;
      // Create the score
      var score;
<pre><code>  // Initialize the game
  function init() {
    createSnake();
    createFood();
    score = 0;

    // If the snake hits the wall it will restart
    if (checkCollision(snakeHead.x, snakeHead.y, canvas.width, canvas.height)) {
        // Restart the game
        init();
    }

    // Call the main loop every 60 fps
    if (typeof game_loop != &quot;undefined&quot;) clearInterval(game_loop);
    game_loop = setInterval(paint, 60);
  }

  // Create the snake
  function createSnake() {
    var length = 5;
    snake = [];
    for (var i = length - 1; i &gt;= 0; i--) {
        snake.push({ x: i, y: 0 });
    }
  }

  // Create the food
  function createFood() {
    food = {
      x: Math.round(Math.random() * (canvas.width - snakeSize) / snakeSize),
      y: Math.round(Math.random() * (canvas.height - snakeSize) / snakeSize),
    };
  }

  // Check for collision
  function checkCollision(x, y, w, h) {
    if (x &lt; 0 || x &gt; w || y &lt; 0 || y &gt; h) return true;
    return false;
  }

  // Paint the snake
  function paint() {
    // Paint the canvas
    ctx.fillStyle = &quot;white&quot;;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = &quot;black&quot;;
    ctx.strokeRect(0, 0, canvas.width, canvas.height);

    // Make the snake move
    var snakeX = snake[0].x;
    var snakeY = snake[0].y;

    // Change the snake direction
    if (direction == &quot;right&quot;) snakeX++;
    else if (direction == &quot;left&quot;) snakeX--;
    else if (direction == &quot;up&quot;) snakeY--;
    else if (direction == &quot;down&quot;) snakeY++;

    // If the snake eats food it will grow
    if (snakeX == food.x &amp;&amp; snakeY == food.y) {
      var tail = { x: snakeX, y: snakeY };
      score++;

      // Create new food
      createFood();
    } else {
      var tail = snake.pop();
      tail.x = snakeX;
      tail.y = snakeY;
    }

    // Put the tail as the first cell
    snake.unshift(tail);

    // Paint the snake
    for (var i = 0; i &lt; snake.length; i++) {
      var c = snake[i];
      // Paint the food
      paintCell(food.x, food.y);
      // Paint the snake
      paintCell(c.x, c.y);
    }

    // Paint the score
    var scoreText = &quot;Score: &quot; + score;
    ctx.fillText(scoreText, 5, canvas.height - 5);
  }

  // Paint a cell
  function paintCell(x, y) {
    ctx.fillStyle = &quot;blue&quot;;
    ctx.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
    ctx.strokeStyle = &quot;white&quot;;
    ctx.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
  }

  // Handle keyboard controls
  var direction;
  document.onkeydown = function (e) {
    var key = e.which;
    if (key == &quot;37&quot; &amp;&amp; direction != &quot;right&quot;) direction = &quot;left&quot;;
    else if (key == &quot;38&quot; &amp;&amp; direction != &quot;down&quot;) direction = &quot;up&quot;;
    else if (key == &quot;39&quot; &amp;&amp; direction != &quot;left&quot;) direction = &quot;right&quot;;
    else if (key == &quot;40&quot; &amp;&amp; direction != &quot;up&quot;) direction = &quot;down&quot;;
  };

  // Start the game
  init();
&lt;/script&gt;
</code></pre>
  </body>
</html>