javascript - 使用 Jquery 创建游戏，涉及对象 'removing' 的巨大问题是另一个我不知道如何修复的问题-6ren

javascript - 使用 Jquery 创建游戏，涉及对象 'removing' 的巨大问题是另一个我不知道如何修复的问题

转载作者：行者123 更新时间：2023-11-28 03:56:18

我正在尝试使用 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”。如您所见，我什至不知道如何从这部分开始，所以我需要很多帮助。

我再次感谢能得到的任何帮助，提前致谢!

顺便说一下，我对更改标题的建议持开放态度，但很难尝试用一种好的方式来表达它。

最佳答案

您的游戏有一个循环，由按键引起。假设你的 Actor 然后被移动，你需要做的就是检查他的坐标 (x,y) 是否在敌人的 (x,y) 的范围内，在这种情况下他会超过一个。然后这将触发一个函数(消耗)，该函数将在一个或两个 Sprite (敌人和 Actor )上运行动画移除敌人，调整你的分数。如果敌人可以独立于 actors 循环移动，那么当他们被游戏循环移动时，您将在此处运行相同的代码。

所以，简而言之。

创建一个消费函数(处理 Sprite 的 UI 动画、声音和分数调整，移除敌人 Sprite )
创建一个循环敌人的函数，使用围绕他们的 Sprite (x,y,w,h) 的贴图检查他们是否在 Actor 下方/上方。如果你命中，调用你的消费者函数来传递敌人的 Sprite 和 Actor
当您移动 Sprite 时，在您的游戏循环中调用第 2 点中的函数。

要做到这一点，您最好以更加基于对象的方式编写您的游戏脚本，这样代码可以重复使用。这个游戏的重点是 Sprite (玩家、敌人)我已经编写了一个 Sprite 类，它具有所有内置的功能来移动、动画和检测与其他 Sprite 的碰撞。

创建我们刚刚调用的玩家 Sprite

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;

下一个技巧是将游戏 Sprite 存储在缓存(数组)中，以便我们可以找到它们并访问它们的属性、方法

下面的代码是重写的，可以完成所有这些工作。 fiddle 显示了一个有效的游戏，随着你消耗敌人，分数会增加。

代码:

$(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 enemy，如果你需要，游戏会添加它们。

这是游戏的一个 fiddle - 尽可能多地消灭敌人以获得高分。

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

如果你添加一个时间延迟来移除敌人或在他们被吃掉时降低他们的值(value)，你会更容易上瘾，你越快捕获他们，你的得分就越高。这很容易通过向 Sprite 调用添加一个 pts 值并随着时间的推移减少它来实现。

我希望这种原始但有用的见解能帮助您构建出色的游戏。许多年前，像这样的简单代码为一两款销量百万的游戏提供了动力。

祝你好运!

关于javascript - 使用 Jquery 创建游戏，涉及对象 'removing' 的巨大问题是另一个我不知道如何修复的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43432835/

文章推荐： jquery - 子菜单不会在鼠标悬停时突出显示为全宽

文章推荐： HTML 打印 - 不同的纸张尺寸

文章推荐： html - 如何将每个

换行？

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
javascript - 使用 Storybook 创建 React App 创建 webpack 问题
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是，当我们尝试运行或构建应用程序时，我们不断遇
javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误
遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。我正在尝试编写指令来清理代码，但在 {{}} 附近插入值时出现解析错误。刚接触 Angular ，无法确定我错过了什么。请帮忙。
java - 创建 JAX-RS 提供程序以从 InputStream 创建 Java Image
我正在尝试创建一个 image/jpeg jax-rs 提供程序类，它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容，最简单的测试方法是什么？ @POST
c - 当我使用 FILE 创建 txt 文件时，Dev C++ 创建 test.txt
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ，而我给出了其他名称。请帮助解决它。下面
ios - 为什么我们不遵循使用 xib 创建 customTableViewCell 的相同过程，就像使用 xib 创建 customView 一样？
当我们创建自定义 View 时，我们将 View 文件的所有者设置为自定义类，并使用 initWithFrame 或 initWithCode 对其进行实例化。当我们创建 customUITable
创建 Pthreads
我正在尝试为函数 * Producer 创建一个线程，但用于创建线程的行显示错误。我为这句话加了星标，但我无法弄清楚它出了什么问题...... #include #include #include
创建、调用JavaScript对象的方法集锦
今天在做项目时，遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章，看后跟着打了一遍代码。感觉方法挺好的，在这里与大家分享一下。 &
python - 创建 StringToSign
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档，但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
c# - 创建、不等待和确保任务完成的正确方法
前言:我对 C# 中任务的底层实现不太了解，只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它？”这个问题，我找不到一个好的答案。在 C# 中。更具体地说，即使任
linq - 创建 ILookups
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中，姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。首
WIX bundle 创建
我试图创建一个 MSI，其中包含和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
Yii 创建、更新具有不同字段的表单
在 Yii 中，Create 和 Update 通常使用相同的形式。因此，如果我在创建期间有电子邮件、密码、...other_fields...等字段，但我不想在更新期间专门显示电子邮件和密码字段，但
qt - 创建 QModelIndex
上周我一直在努力创建一个给定一行和一列的 QModelIndex。或者，我会满足于在已经存在的 QModelIndex 中更改 row() 的值。任何帮助，将不胜感激。编辑: QModelInd
C: 创建、传递和访问指向常量字符串的常量指针数组
出于某种原因，这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
r - 创建 "other"字段
现在，我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
vim - 创建〜/.vimrc后错误打开文件
在今天之前，我使用/etc/vim/vimrc来配置我的vim设置。今天，我想到了创建.vimrc文件。所以，我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
iPhone:创建 MKAnnotation
我可以创建一个 MKAnnotation，还是只读的？我有坐标，但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。想法？最佳答案 MKAnnotation
iphone - 创建 NSDictionary
在以下代码中，第一个日志语句按预期显示小数，但第二个日志语句记录 NULL。我做错了什么？ NSDictionary *entry = [[NSDictionary alloc] initWithOb
php - 创建/添加多维数组值时的未定义偏移
我正在使用与此类似的代码动态添加到数组； $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Jquery 创建游戏，涉及对象 'removing' 的巨大问题是另一个我不知道如何修复的问题