使用Jquery创建游戏,涉及一个对象'removing'另一个对象的巨大问题,我不知道如何解决



我正在尝试使用jQuery创建游戏,但是我确实有一个很大的问题,我很感谢您的帮助。

首先是我的代码。

html:

        <!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"><title>     Jquery spel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $(document).keydown(function(e){ 
    var spelLeftMax = $('#spelplan').width();
    var spelLeftMin = $('#box1').width();
    var spelTopMax = $('#spelplan').height();
    var spelTopMin = $('#box1').height();
    var x = $('#box1').position().left + $('#box1').width();
    var y = $('#box1').position().top + $('#box1').height();

    if (e.keyCode ==39){
        if (x < spelLeftMax) {
            $("#box1").animate({left: '+=20px'}, 0);
        }
    } 
    else if (e.keyCode ==37) {
        if (x > spelLeftMin) {
            $("#box1").animate({left: '-=20px'}, 0);
        }
    }
    else if (e.keyCode ==38) {
 if (y > spelLeftMin) {
    $("#box1").animate({top: '-=20px'}, 0);
    }
    }
    else if (e.keyCode ==40) {
  if (y < spelTopMax) {
    $("#box1").animate({top: '+=20px'}, 0)
 }
 }
    else if (e.keyCode ==38) 
        $("#box1").animate({top: '-=20px'}, 0);
    else if (e.keyCode ==40) 
        $("#box1").animate({top: '+=20px'}, 0); 
    });
setInterval(spawnrand,2250);
});
function spawnrand(){
var spelplanWidth = $('#spelplan').width();
var spelplanHeight = $('#spelplan').height();
var randPosY = Math.floor((Math.random()*spelplanHeight));
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = $("<div class='rand'></div>").css('left',randPosX).css('top',randPosY);
$("#spelplan").append(element);
}

</script>
</head>
<body>
<header class="col-12 col-m-12">
<h1>Titel</h1>
</header>
<button class="new_pos">New position</button>

<div id="spelplan">
<div id="box1"></div>
<div id="rand_pos" class="rand"></div>
<div id="pos_log" class="log">x: 0<br />y: 0</div>
<button class="new_pos">New position</button>
<br>
<p>Lives:</p>
<p>Score:</p>
</div>
</div>
</body>
</html>

CSS:

        *{
    box-sizing : border-box;
    margin:0;
    padding:0;
    }
body {
background-color: black;
}
header {
position:absolute;
top:50px;
color:white;
text-align:center;
}

#rand_pos{
position: absolute;
top:20%;
left: 30%;
z-index: 10;
}
#box1 {
background-color:red;
height:50px;
width:50px;
position:absolute;
left:30%;
top:150px;
}
p {
position:relative;
left:10px;
color:white;
}
#spelplan {
position:absolute;
left:25%;
top:20%;
height:600px;
width:600px;
background-color:blue;
border-style:double;
border-radius:40px;
}

.rand {
   background-color:green;
    height:15px;
    width:15px;
    position:absolute;
    z-index:3;
    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;
}




/* 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;
}
}

所以我需要帮助的部分是如何使您播放的对象作为"#box1"消耗小绿色球" rand"。如您所见,我不知道如何从这部分开始,所以我需要很多帮助。

再次感谢我能得到的任何帮助,谢谢!

顺便说一句,我向更改标题的建议开放,很难以一种很好的方式来言语。

您的游戏具有由密钥按下引起的循环。假设然后移动您的演员,您需要做的就是检查他的坐标(x,y(是否在敌人(x,y(的范围内,在这种情况下,他将超过一个。然后,这将发射一个功能(消耗(,该功能将在一个或两个精灵(敌人和演员(上运行动画,删除敌人,调整得分。如果敌人可以独立于演员循环移动,那么当您的游戏循环移动时,您将在此处运行相同的代码。

所以,简而言之。

  1. 创建一个用于消费的函数(这可以处理精灵的UI动画,声音和得分调整,删除敌方精灵(
  2. 创建一个函数,可以使用敌人在演员(x,y,w,h(周围的地图检查敌人是否在演员之下/越过。如果您获得命中率,请致电您的消费者功能,以通过敌人精灵和演员
  3. 当您移动精灵时,在游戏循环中的第2点中调用该功能。

为此,您最好以更基于对象的方式脚本编写游戏,可以重复使用代码。这个游戏的焦点是围绕精灵(玩家,敌人(,我编码了一个精灵类,该课程具有所有用于移动,动画和检测其他精灵碰撞的功能。

要创建播放器精灵,我们只会致电

var player = new sprite("box1", 200, 200, 50, 50, "player", game);

我们可以打电话给他的方法来做我们玩家需要做的事情:

player.up();
player.dowm();
player.destroy(); // removes from dom destroys instance.

我们现在可以在我们的运动场上添加敌人:

var alien = new sprite("alien", 400, 400, 20, 20, "spaceship", game);    

当我们移动外星人时,请检查他是否与我们的外星人相撞

alien.left();
if (alien.collidesWith(player)===true) //dosomething;

下一个技巧是将游戏精灵存储在缓存(数组(中,以便我们可以找到它们并访问其属性,方法

下面的代码是完成所有这些的重写。小提琴显示了一款工作游戏,当您消耗敌人时,得分会增加。

代码:

$(document).ready(function() {
  var sprites = [];
  var enemies = [];
  var game = $("#spelplan");
  var score = 0;
  var el_score = $("#score")

  //
  // First things first we all want to score points
  //
  function SCORE(pts) {
    score += pts
    el_score.text(score);
  }
  //
  // We spin up a simple sprite class that can be re-used, It's simple
  // params; id,x,y,w,h,class,area
  // The area is the realm where the sprite exists - in our case all in one div.
  // this would allow you to bind sprites into different realms - areas of your game.
  // methods: up, down, left,right - binding the sprite within the realms box x,y,w,h
  //
  // Exercise:
  // Modify, extend the sprite class so we can specify how much a sprite can move ie 20px or 10px.
  //
  var sprite = function(id, x, y, w, h, _class, view, collisionDetect) {
    this.view = view;
    this.id = id
    this.x = x + "px";
    this.y = y + "px";
    this.width = w;
    this.height = h;
    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);
      }

    };
    // returns back the x,y's and the z's of a sprites
    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]
      ];
    };
    // checks if any two positions are a collision
    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];
    };
    // returns true if the passed sprites collides with this sprite
    this.collidesWith = function(sprite) {
      var pos1 = this.getPos(),
        pos2 = sprite.getPos();
      return this.comparePos(pos1[0], pos2[0]) && this.comparePos(pos1[1], pos2[1]);
    };
    // add to our sprite object so we can reference.
    sprites.push(this);
  };
  //
  // Your existing spawn, now it just calls my sprite class with new and the params for our enemy.
  // My class will remember all the enemies within its own internal cache sprites, this now makes
  // it easier for us to detect what is going on since now we can ref any sprite on the screen
  // sprites[0].up() moves the first sprite up.
  //
  function spawnrand() {
    var spelplanWidth = game.width();
    var spelplanHeight = game.height();
    var randPosY = Math.floor((Math.random() * spelplanHeight));
    var randPosX = Math.floor((Math.random() * spelplanWidth));
    // create enemy, store him in array so we can find him,
    var enemy = new sprite("enemy" + sprites.length + 1, randPosY, randPosX, 15, 15, "rand", game);
    enemies.push(enemy);
  }
  // set score
  SCORE(0);

  var player = new sprite("box1", 200, 200, 50, 50, "player", game,
    function(sprite) {
      // detect if the player is over an enemy.
      sprites.forEach(function(sprite) {
        // primitive but ignores the plater sprite since he is not an enemy!
        if (sprite.id !== "box1" && player.collidesWith(sprite)) {
          //
          // Here is where the action happens, animate the destruction
          // of your enemy - add up the score
          // TODO:
          // Add a destroy method to our sprite class, removes him from dom
          // and from our sprite array!
          sprite.el.fadeOut();
          SCORE(100);
        }
      })

    });
  setInterval(spawnrand, 3000);
  $(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();
    }
  });



});

您的HTML和CSS有几个更改,主要是您不需要您的Box1和Rand敌人在您的RAW HTML中添加,如果您适合您。

这是游戏的小提琴 - 在Hi -Score上尽可能多地破坏敌人。

https://jsfiddle.net/erlv5rwb/3/

如果您添加了消除敌人或降低其食用时的价值的时间延迟,则会更令人上瘾,而您抓住它们的速度就越快,您得分就越多。通过在Sprite调用中添加PTS值并随着时间的推移将PTS值添加。

我希望这个原始但有用的见解能够帮助您制作出色的游戏。许多年前,像这样的简单代码为一两个售出的游戏提供了动力。

祝你好运!

相关内容

最新更新