- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一款游戏,我想知道为什么“螃蟹”(一个实体)不能像“怪物”(也是一个实体)一样被杀死。我的意思是,如果我触摸妖精怪物,我就会得到一分,但我只是走过螃蟹。我尝试添加一个 if..else,但随后玩家每秒获得数千分。我做错了什么?
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function() {
bgReady = true;
};
bgImage.src = "images/background.png";
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function() {
heroReady = true;
};
heroImage.src = "images/hero.png";
// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function() {
monsterReady = true;
};
monsterImage.src = "images/monster.png";
// Crab image
var crabReady = false;
var crabImage = new Image();
crabImage.onload = function() {
crabReady = true;
};
crabImage.src = "images/old/hero.png";
// Game objects
var hero = {
speed: 300 // movement in pixels per second
};
var monster = {};
var crab = {};
var monstersCaught = 0;
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function(e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function(e) {
delete keysDown[e.keyCode];
}, false);
// Reset the game when the player catches a monster
var reset = function() {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
// Throw the crab somewhere on the screen randomly
crab.x = 32 + (Math.random() * (canvas.width - 64));
crab.y = 32 + (Math.random() * (canvas.height - 64));
};
// Update game objects
var update = function(modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
// Are they touching?
if (
hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
// Draw everything
var render = function() {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
if (crabReady) {
ctx.drawImage(crabImage, crab.x, crab.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Mobs killed: " + monstersCaught, 32, 32);
};
// The main game loop
var main = function() {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
var then = Date.now();
reset();
main();
<!DOCTYPE html>
<html>
<head>
<title>Underbound</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="game">
<script src="js/game.js"></script>
</div>
</body>
</html>
最佳答案
因为你只是检查英雄是否与怪物
发生碰撞。
hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32)
相反,您可能应该创建一个函数来检查它们是否发生冲突:
function isColliding(a, b) {
return a.x <= (b.x + 32) && b.x <= (a.x + 32) &&
a.y <= (b.y + 32) && b.y <= (a.y + 32);
}
if (isColliding(hero, monster)) { ...
然后还可以检查它们是否与crab
发生碰撞。
if (isColliding(hero, crab)) { ...
如果你将所有“怪物”放入一个数组中,然后检查数组中的每个怪物,那么它会更可持续(直到你有很多怪物)。
至于快速获得大量积分的问题:你必须将怪物(或螃蟹)从游戏区域中移走,并在更新
阶段停止检查碰撞,否则玩家将继续与螃蟹碰撞并获得积分。
对此的一个解决方案是为你的怪物提供一个active
(或类似的属性)。默认情况下,这是 true,但是当玩家与它们碰撞时,这将是 false。然后,您只需绘制它们并在 active
为 true 时检查碰撞。
关于javascript - 为什么 "crab"(一个实体)不像 "monster"(也是一个实体)那样可触摸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35161046/
我试图通过仅更改代码的最后一行来使代码正常工作。但在我到达那部分之前它就给了我一个错误。 Monster munster= new Monster(“Herman”);
我已经集成了apply with monster在我的应用程序中 问题 在特别申请REQUEST交付方式后,我没有收到怪物的回复 注意 它适用于 EMAIL 传送方式 请求传递方法的脚本 如有任
我正在使用 AndEngine 及其 BOX2D 扩展开发 2D 横版 Android 游戏。 我有玩家的 body ,有 2 个传感器用于“脚”和“头”,所以我可能确切地知道玩家的哪一侧接触了不同的
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 12 年前。 Improve th
感谢 diff 人们愿意分享他们的帮助的大量帮助,我已经能够读取图 block map 并将我的播放器开始添加到图 block map for (int x = 0; x monsters = ne
就目前而言,控制台允许我编译,但不允许运行它,它说: “错误:无法找到或加载主类 MonsterFight” 代码如下: class Fight { Random rand= new Rand
我正在尝试在 C++ 中采用 Marco Monster 的物理演示(文档:http://www.asawicki.info/Mirror/Car%20Physics%20for%20Games/Ca
我正在开发一款游戏,我想知道为什么“螃蟹”(一个实体)不能像“怪物”(也是一个实体)一样被杀死。我的意思是,如果我触摸妖精怪物,我就会得到一分,但我只是走过螃蟹。我尝试添加一个 if..else,但随
我尝试使用 JBOSS EAP 6.4 掌握 Red Hat Ticket Monster 2.7 教程。我无法掌握第28.1章“添加ShrinkWrap解析器”。第一段与 POM.XML 提取不匹配
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
所以我从教程中得到了这段代码: func didBeginContact(contact: SKPhysicsContact) { // 1 var firstBody: SKPhys
我一直在尝试使用 ncurses 库为 C++ 创建我的 roguelike 类型的游戏。在学习了许多不同的教程之后,我能够创建玩家角色、 map 、防止玩家穿墙的代码以及怪物角色的随机移动。 我遇到
我正在努力按照文档使用 join-monster 库来实现应用程序层分页:http://join-monster.readthedocs.io/en/latest/pagination/ 所有示例都是
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 7 年前。 Improv
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
我是一名优秀的程序员,十分优秀!