堆棧內存溢出
  簡體   English   中英

使用Jquery創建游戲，涉及對象“刪除”另一個我不知道如何解決的巨大問題

[英]Creating a game using Jquery, huge issue involving an object 'removing' another that I don't know how to fix

 原文  2017-04-16 01:31:06  8   1    javascript/ jquery/ html/ css/ css3

問題描述

我正在嘗試使用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”。 如您所見，我不知道如何開始這一部分，因此我需要很多幫助。

再次感謝您能提供的任何幫助！

順便說一下，我樂於接受有關更改標題的建議，很難用一種好的方式來寫它。

1 個解決方案

解決方案1
 0 已采納  2017-04-16 02:48:18

您的游戲有一個循環，由按鍵引起。 假設您的演員隨后被移動，您所要做的就是檢查他的坐標（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有幾處更改，主要是您不需要在原始HTML中添加box1和rand敵人，游戲會根據需要添加它們。

這是游戲的提琴演奏-消滅盡可能多的敵人以獲得高分。

https://jsfiddle.net/erLv5rwb/3/

如果您添加了一個延遲時間來消除敵人或使其被食用時降低其價值，那么上癮會更容易上癮，捕獲它們的速度越快，得分就越高。 可以通過將pts值添加到sprite調用並隨時間減少它來輕松實現。

我希望這種原始但有用的見解將幫助您構建出色的游戲。 許多年前，像這樣的簡單代碼推動了一兩款銷量達到一百萬的游戲。

祝好運！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我不知道如何解決我的反向數組/字符串 我不知道如何解決事件問題？ 我不知道如何修復 javascript func 中的這個錯誤 Email go 垃圾郵件我不知道如何解決 我不知道如何解決成績計算器功能 Javascript / CSS幻燈片：使用透明膠片突出了我不知道如何解決的缺陷 JQuery Quickfix：我不知道如何調用它 javascript 我不知道如何使用 getItem 獲取特定對象 我確實知道如何解決語言/音頻問題，但是我不知道如何將其作為代碼組合在一起 我正在嘗試使用我在 this.then() function 中獲得的返回值。我不知道如何修復它
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM