个人中心
gpt4 book ai didi

javascript - 蛇游戏弹出窗口改进和移动使用 javascript

转载 作者：行者123 更新时间：2023-11-28 02:28:03 25 4
gpt4 key购买 nike

最近做了这个游戏，想请教如何改进。我在游戏结束时在 javascript 中创建了一个警告框。它有效，但它并不漂亮。所以我想问一下如何更改警告框顶部的颜色和消息？现在已经写了一个网页消息。我想补充一点，它可以通过手机播放，例如箭头按钮。我找到了一些用于 java 但没有用于 javascript 的东西，想知道它是否可能以及我该怎么做？这是代码:

<html>
 <head>
  <meta charset='utf-8'/>
  	<link rel="stylesheet" href="css/style.css">
<h1> <p align="left"><font color="rebeccapurple"> Snake developed by agente00mcm </font></p> </h1>
 </head>
 <body>
  <div class= 'game'>
  <div id = 'home'>
    <canvas id='mycanvas' width='800' height='800'>
    </canvas>
    </div>
    <p>Press start to start the game!</p>
    <button id='btn'>START</button>
  </div>

  <script>
  var mycanvas = document.getElementById('mycanvas');
  var ctx = mycanvas.getContext('2d');
  var snakeSize = 10;
  var w = 800;
  var h = 800;
  var score = 0;
  var snake;
  var snakeSize = 10;
  var food;
  var drawModule = (function () {

  var bodySnake = function(x, y) {
        ctx.fillStyle = 'green';
        ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
        ctx.strokeStyle = 'darkgreen';
        ctx.strokeRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
  }

  var pizza = function(x, y) {
        ctx.fillStyle = 'yellow';
        ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
        ctx.fillStyle = 'red';
        ctx.fillRect(x*snakeSize+1, y*snakeSize+1, snakeSize-2, snakeSize-2);
  }

  var scoreText = function() {
    var score_text = "Score: " + score;
    ctx.fillStyle = 'blue';
    ctx.fillText(score_text, 145, h-5);
  }

  var drawSnake = function() {
      var length = 4;
      snake = [];
      for (var i = length-1; i>=0; i--) {
          snake.push({x:i, y:0});
      }
  }

  var paint = function(){
      ctx.fillStyle = 'lightgray';
      ctx.fillRect(0, 0, w, h);
      ctx.strokeStyle = 'black';
      ctx.strokeRect(0, 0, w, h);

      btn.setAttribute('disabled', true);

      var snakeX = snake[0].x;
      var snakeY = snake[0].y;

      if (direction == 'right') {
        snakeX++; }
      else if (direction == 'left') {
        snakeX--; }
      else if (direction == 'up') {
        snakeY--;
      } else if(direction == 'down') {
        snakeY++; }

      if (snakeX == -1 || snakeX == w/snakeSize || snakeY == -1 || snakeY == h/snakeSize || checkCollision(snakeX, snakeY, snake)) {
          //restart game

            alert("Game Over \nYour Score: "+score);
            document.location.reload();
          btn.removeAttribute('disabled', true);

          ctx.clearRect(0,0,w,h);
          gameloop = clearInterval(gameloop);
          return;
        }

        if(snakeX == food.x && snakeY == food.y) {
          var tail = {x: snakeX, y: snakeY}; //Create a new head instead of moving the tail
          score ++;

          createFood(); //Create new food
        } else {
          var tail = snake.pop(); //pops out the last cell
          tail.x = snakeX;
          tail.y = snakeY;
        }
        //The snake can now eat the food.
        snake.unshift(tail); //puts back the tail as the first cell

        for(var i = 0; i < snake.length; i++) {
          bodySnake(snake[i].x, snake[i].y);
        }

        pizza(food.x, food.y);
        scoreText();
  }

  var createFood = function() {
      food = {
        x: Math.floor((Math.random() * 30) + 1),
        y: Math.floor((Math.random() * 30) + 1)
      }

      for (var i=0; i>snake.length; i++) {
        var snakeX = snake[i].x;
        var snakeY = snake[i].y;

        if (food.x===snakeX && food.y === snakeY || food.y === snakeY && food.x===snakeX) {
          food.x = Math.floor((Math.random() * 30) + 1);
          food.y = Math.floor((Math.random() * 30) + 1);
        }
      }
  }

  var checkCollision = function(x, y, array) {
      for(var i = 0; i < array.length; i++) {
        if(array[i].x === x && array[i].y === y)
        return true;
      }
      return false;
  }

  var init = function(){
      direction = 'down';
      drawSnake();
      createFood();
      gameloop = setInterval(paint, 80);
  }


    return {
      init : init
    };


}());
(function (window, document, drawModule, undefined) {

var btn = document.getElementById('btn');
btn.addEventListener("click", function(){ drawModule.init();});

	document.onkeydown = function(event) {

        keyCode = window.event.keyCode;
        keyCode = event.keyCode;

        switch(keyCode) {

        case 37:
          if (direction != 'right') {
            direction = 'left';
          }
          console.log('left');
          break;

        case 39:
          if (direction != 'left') {
          direction = 'right';
          console.log('right');
          }
          break;

        case 38:
          if (direction != 'down') {
          direction = 'up';
          console.log('up');
          }
          break;

        case 40:
          if (direction != 'up') {
          direction = 'down';
          console.log('down');
          }
          break;
          }
      }


})(window, document, drawModule);
  </script>
 </body>

</html>
除了这个问题，我还想问问你们是怎么找到它的，以及除了警告框样式之外是否需要任何改进。感谢您的支持!

最佳答案

警告框是一个系统对象，不能用 css 设置样式。如果要设置样式，您需要在页面中创建一个元素来复制警报的行为。您可以找到很多执行此操作的库，例如:

玩得开心开发游戏:)

关于javascript - 蛇游戏弹出窗口改进和移动使用 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52680503/

25 4 0
文章推荐： php - td Rowspan 之后的 html，下一列数据转到下一行
文章推荐： JavaScript 文件路径问题/错误
文章推荐： javascript - 如何在 Javascript 中为服务器的 AjaxCall 编写测试方法？
文章推荐： html - 如何更改空 span 标签的颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com