wlecome
我有这个代码用箭头键移动（太空飞船）
我需要从顶部制造Mines，并且玩家必须避免它吗？
有人可以帮我完成这个游戏吗？小提示
这是我的代码
$(document).keydown(function(e){
switch (e.which){
case 37: //left arrow key
$(".box").finish().animate({
left: "-=50"
});
break;
case 38: //up arrow key
$(".box").finish().animate({
top: "-=50"
});
break;
case 39: //right arrow key
$(".box").finish().animate({
left: "+=50"
});
break;
case 40: //bottom arrow key
$(".box").finish().animate({
top: "+=50"
});
break;
}
}）;
答案 0 :(得分：0)
为了实现所有目标，你需要制作游戏。您需要更多代码才能创建玩家太空飞船和一堆坠落的地雷。
最重要的是某种精灵类可以在游戏区域产生，精灵是玩家和地雷。它们需要是可移动的，并且需要能够检测到碰撞。
基础知识是当你移动某些东西时检查它是否有东西。在像你这样的简单CSS游戏中，碰撞检测是通过边界矩形完成的。 IE是另一个内部的矩形。
为了解释如何完成规划等游戏，我们需要一本迷你书。值得庆幸的是，我们有js小提琴，谢天谢地，我已经组织了一个非常简单的演示，你想要做什么。
$(document).ready(function() {
var sprites = [];
var enemies = [];
var game = $("#spelplan");
var STOP;
// random numbers ints from min-max, use for points system
function RND(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//
// 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, options) {
this.view = view;
this.id = id
this.x = x + "px";
this.y = y + "px";
this.width = w;
this.height = h;
//
// Now we can pass in custom attributes for our sprites like PTS
//
this.options = options;
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);
} else {
return true;
}
};
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);
}
this.destroy = function() {
// remove from dom
this.el.remove();
// remove sprite from sprites
for (var i = 0; i < sprites.length; i++) {
if (data[i].id == this.id) {
sprites.splice(i, 1);
break;
}
}
}
};
// 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) {
//
// Ignore any sprites that are "destroying" themselves!
//
if (sprite.destroyed === true) return;
var pos1 = this.getPos(),
pos2 = sprite.getPos();
return this.comparePos(pos1[0], pos2[0]) && this.comparePos(pos1[1], pos2[1]);
};
// Calls custom init cb, this allows custom code when the sprite is
// created.
if (this.options && this.options.init) this.options.init(this);
// 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() {
//
// Some game logic - a max of 99 enemies in our game, this prevents constant spawning.
// STOP is when the game is over.
if (sprites.length > 100 || STOP===true) return
var points = [50, 100, 200, 300, 400, 500];
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,
// extend with free fall code;
//
var enemy = new sprite("enemy" + sprites.length + 1, randPosY, 0, 15, 15, "rand", game,
//
// passed in collide detect
//
function(sprite) {
if (sprite.collidesWith(player) === true) {
// here its game over, mark plater as destroying
STOP = true;
player.destroyed = true;
alert("GAME OVER");
player.el.fadeOut(100, function() {
player.destroy();
});
}
}, {
init: function(sprite) {
//
// Very simple free fall code, if down returns true the sprite is off screen so stop free fall
//
function freeFall() {
if (sprite.down() === true) return sprite.destroy();
setTimeout(freeFall, 200);
}
freeFall();
}
});
enemies.push(enemy);
}
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!
//
// This flag tells the game engine that this sprite is destroyed, since u will want it to animate
// or play some sort of death animation, while it is doing this we dont want it interacting with
// our player, we use a flag so the sprite collision engine can avoid it.
sprite.destroyed = true;
// Stops the spawn from self destructing!
clearTimeout(sprite.selfDestruct);
sprite.el.fadeOut(100, function() {
sprite.destroy();
});
SCORE(sprite.options.PTS);
}
})
});
setInterval(spawnrand, 250);
$(document).keydown(function(e) {
// is game over player cant move.
if (STOP===true) return;
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();
}
});
});
这是小提琴：
https://jsfiddle.net/erLv5rwb/7/
它是原始的，但它展示了我们如何通过调用我们的精灵类来轻松地制造地雷，以及我们如何轻易地在它们击中我们时检测到地雷上的碰撞。
要创建精灵，我们调用
var player = new sprite(id, x, y, w, h, cssClass, realm,onMoveCB,options)
Id：精灵的元素ID x，y，w，h：px中sprite的位置和大小 cssClass：要应用于我们的元素以创建精灵形状的任何css 真实的：作为比赛场地的div onMove：一个在精灵移动时调用的回调，这里我们可以进行碰撞检测 选项：允许我们传递其他内容，如得分，生活等
我们可以通过
移动精灵sprite.down（）; //向上或向右
我们可以检查是否有什么东西，即玩家
if（sprite.collidesWith（player）=== true）//让玩家爆炸产生一个新的
它是原始的，但它应该给你一些关于如何制作简单游戏的指示。