Question

我正在尝试使用Jquery创建游戏但是在尝试使网页响应时我遇到了问题。问题是我无法让我的游戏板"spelplan"响应，我知道发生这种情况的原因是因为我的脚本部分连接到游戏板的“宽度”所以当我删除“width”并将其替换为<div id="spelplan" class="col-6 col-m-6">这些部分完全搞砸了。所以我需要帮助的是我如何使我的游戏板"spelplan"响应，我真的很感激我能得到的任何帮助。

function updateClock() {
  var currentTime = new Date();
  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  var currentSeconds = currentTime.getSeconds();
  currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
  currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
  var timeOfDay = (currentHours < 12) ? "AM" : "PM";
  currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
  currentHours = (currentHours == 0) ? 12 : currentHours;
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

header {
  position: absolute;
  top: 50px;
  color: white;
  text-align: center;
}

#clock {
  font-size: 25px;
  position: absolute;
  color: white;
}

#rand_pos {
  position: absolute;
  top: 20%;
  left: 30%;
  z-index: 10;
}

.player {
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 100;
}

p {
  position: relative;
  left: 10px;
  color: white;
}

#spelplan {
  position: relative;
  left: 35%;
  top: 200px;
  height: 600px;
  width: 600px;
  background-color: blue;
  border-style: double;
  border-radius: 40px;
}

.rand {
  background-color: green;
  height: 15px;
  width: 15px;
  position: absolute;
  left: 30%;
  top: 150px;
  z-index: 3;
}

.new_pos {
  background: #ccc;
  border: 1px solid #000;
  padding: 5px;
  box-shadow: 0 0 20px #555;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.new_pos:hover {
  background: #bbb;
  box-shadow: 0 0 20px #222;
}

.new_pos:active {
  box-shadow: 0 0 20px #000;
  background: #aaa;
}

*:focus {
  outline: none;
}

.new_pos {
  position: fixed;
  left: 0;
  bottom: 0;
  cursor: pointer;
}

#footer {
  position: absolute;
  top: 80vh;
  color: white;
  text-align: center;
}


/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }
  img {
    width: 80%;
    height: auto;
  }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  img {
    width: 100%;
    height: auto;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style20.css">
  <script type='text/javascript' src='eventjavascript6.js'></script>
  <title>Jquery spel</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var sprites = [];
      var enemies = [];
      var game = $("#spelplan");
      var score = 0;
      var el_score = $("#score")

      function SCORE(pts) {
        score += pts
        el_score.text(score);
      }

      function RND(min, max) {
        return parseInt(Math.random() * (max - min) + min);
      }

      var sprite = function(id, x, y, w, h, _class, view, collisionDetect, options) {
        this.view = view;
        this.id = id
        this.x = x + "px";
        this.y = y + "px";
        this.width = w;
        this.height = h;
        this.options = options;
        this.el = $("<div id='" + this.id + "' class='" + _class + "'></div>").css('left', this.x).css('top', this.y);
        view.append(this.el);

        this.x = function() {
          return this.el.position().left;
        }

        this.y = function() {
          return this.el.position().top;
        }

        this.up = function() {
          if (this.y() > 0) {
            this.el.animate({
              top: '-=25px'
            }, 0);
            if (collisionDetect) collisionDetect(this);
          }
        };

        this.down = function() {
          if (this.y() < this.view.height() - this.height) {
            this.el.animate({
              top: '+=25px'
            }, 0);
            if (collisionDetect) collisionDetect(this);
          }
        };

        this.left = function() {
          if (this.x() > 0) {

            this.el.animate({
              left: '-=25px'
            }, 0);
            if (collisionDetect) collisionDetect(this);
          }
        };

        this.right = function() {
          if (this.x() + this.width < this.view.width()) {
            this.el.animate({
              left: '+=25px'
            }, 0);
            if (collisionDetect) collisionDetect(this);
          }
          this.destroy = function() {
            this.el.remove();
            for (var i = 0; i < sprites.length; i++) {
              if (data[i].id == this.id) {
                sprites.splice(i, 1);
                break;
              }
            }
          }
        };
        this.getPos = function() {
          var pos, width, height;
          pos = this.el.position();
          width = this.el.width();
          height = this.el.height();
          return [
            [pos.left, pos.left + width],
            [pos.top, pos.top + height]
          ];
        };
        this.comparePos = function(p1, p2) {
          var r1, r2;
          r1 = p1[0] < p2[0] ? p1 : p2;
          r2 = p1[0] < p2[0] ? p2 : p1;
          return r1[1] > r2[0] || r1[0] === r2[0];
        };
        this.collidesWith = function(sprite) {
          if (sprite.destroyed === true) return;

          var pos1 = this.getPos(),
            pos2 = sprite.getPos();
          return this.comparePos(pos1[0], pos2[0]) && this.comparePos(pos1[1], pos2[1]);
        };

        if (this.options && this.options.init) this.options.init(this);
        sprites.push(this);
      };

      function spawnrand() {
        if (sprites.length > 100) return
        var points = [50, 100, 200, 300, 400, 500];
        var spelplanWidth = game.width();
        var spelplanHeight = game.height();
        var randPosY = Math.floor((Math.random() * spelplanHeight));
        var randPosX = Math.floor((Math.random() * spelplanWidth));

        var enemy = new sprite("enemy" + sprites.length + 1, randPosY, randPosX, 15, 15, "rand", game, null, {
          PTS: points[RND(0, 5)],
          init: function(sprite) {
            sprite.selfDestruct = setTimeout(function() {

              sprite.el.fadeOut(1000, function() {});

            }, 5000);
          }
        });
        enemies.push(enemy);
      }

      SCORE(0);
      var player = new sprite("box1", 200, 200, 50, 50, "player", game,
        function(sprite) {

          sprites.forEach(function(sprite) {
            if (sprite.id !== "box1" && player.collidesWith(sprite)) {

              sprite.destroyed = true;
              clearTimeout(sprite.selfDestruct);

              sprite.el.fadeOut(100, function() {});
              SCORE(sprite.options.PTS);
            }

          })
        });
      setInterval(spawnrand, 250);

      $(document).keydown(function(e) {

        if (e.keyCode == 37) {
          player.left();
        } else if (e.keyCode == 39) {
          player.right();
        } else if (e.keyCode == 38) {
          player.up();
        } else if (e.keyCode == 40) {
          player.down();
        }
      });
    });
  </script>
</head>

<body onload="updateClock(); setInterval('updateClock()', 1000 )">
  <span id="clock">&nbsp;</span>
  <header class="col-12 col-m-12">
    <h1>Samla så mycket poäng du hinner genom att ta de gröna bollarna innan de försvinner</h1>
  </header>

  <div id="spelplan" class="col-6 col-m-6">
    <div>
      <p>Score:<span id="score"></span></p>
    </div>
  </div>
  <section id="footer" class="col-12 col-m-12">
    <h1>Använd piltangenterna för att styra den röda kuben </h1>
  </section>
</body>

</html>

所以我需要帮助的是让游戏主板"spelplan"响应，感谢任何帮助！

如何让我的jquery游戏的游戏板响应？

0 个答案: