[英]Creating a game using Jquery, huge issue involving an object 'removing' another that I don't know how to fix
我正在尝试使用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)的范围内,在这种情况下他将超过一个。 然后,这将触发一个函数(消耗),该函数将在一个或两个精灵(敌人和演员)上运行动画,以消除敌人,调整得分。 如果敌人可以独立于角色循环移动,则当他们被游戏循环移动时,您将在此处运行相同的代码。
简而言之。
为此,最好以一种基于对象的方式编写游戏脚本,从而可以重复使用代码。 游戏的重点是精灵(玩家,敌人),我编写了一个精灵类,该类具有内置的所有功能来移动,设置动画和检测与其他精灵的碰撞。
要创建玩家精灵,我们只需调用
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.