我正在尝试使用 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/