- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
只是为不想阅读一大堆文字的人添加此内容,至少阅读此内容并查看图片以理解我的问题;
我在“玩家”和“对象”之间设置了碰撞,这样当“玩家”击中“对象”的“左侧”时,“玩家”就会被放置到“对象”的“左侧”。 (这就是我要的)。但我希望玩家能够击中对象的任何一侧(“顶部”、“左侧”、“右侧”、“底部”)并适当放置。 所以看上面的图片,基本上我试图在黑色方 block 和其余物体之间创建碰撞。黑色方 block 是“玩家”对象,灰色方 block 是编号“墙”对象,红色方 block 是“下一级”对象。我已经完成了这一点,但它有点困惑,当涉及到移动墙壁对象时,玩家碰撞不再像我希望的那样起作用。所以无论如何,这是我的“墙”代码:
var canvasWalls1 = document.getElementById('canvasWalls');
var ctxWalls1 = canvasWalls.getContext('2d');
var walls1 = new Walls1();
var imgSprite = new Image();
imgSprite.src = 'sprite.png';
imgSprite.addEventListener('load',init,false);
WallLeft.prototype.draw = function (){
ctxWalls1.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
this.checkHitPlayer();
};
WallLeft.prototype.checkHitPlayer = function() {
if (this.drawX > player1.drawX &&
this.drawX <= player1.drawX + player1.width &&
this.drawY >= player1.drawY &&
this.drawY < player1.drawY + player1.height) {
player1.isUpKey = false;
player1.isDownKey = false;
player1.isRightKey = false;
player1.isLeftKey = false;
player1.drawX = this.drawX - player1.width - 0.05;
player1.drawY = this.drawY - 0.05; }
};
我刚刚为 wall1,2,3,.. 等复制了相同的代码。我确信有更好的方法来做到这一点,如果有人可以建议更好的方法吗?我尝试在两个不同的地方绘制相同的 Sprite ,但不知道如何正确实现这一点。我有不同的“墙”对象的主要原因是因为我需要根据“玩家”与“墙”对象碰撞的位置在不同的位置绘制“玩家”对象。如果玩家从左侧飞入,player1.drawX = wall1.drawX - 玩家宽度
。但如果玩家从顶部飞入,则player1.drawY = wall1.drawY + player1.height
。我需要所有碰撞都能发生在任何“墙”对象上的原因是,每当“玩家”对象到达“终点”时,我都会重新使用所有“墙”对象。如果我知道更好的系统,也许我可以继续使用我拥有的碰撞系统。无论如何,当“玩家”击中“完成”对象时会发生什么:
Finish.prototype.checkHitPlayer = function() {
if (this.drawX >= player1.drawX &&
this.drawX <= player1.drawX + player1.width &&
this.drawY >= player1.drawY &&
this.drawY <= player1.drawY + player1.height) {
increaseLevel();
} };
function increaseLevel() {
Level+=1;
if (Level===2) {
drawlevel2(); }
function drawlevel2()
{
player1.drawX = 288;
player1.drawY = 160;
walls1.drawX = 448;
walls1.drawY = 160;
walls2.drawX = 416;
walls2.drawY = 320;
walls3.drawX = 192;
walls3.drawY = 288;
finish1.drawX = 224
finish1.drawY = 96;
}
我再次完成了“玩家”和“墙”之间的碰撞,但只是通过为每个“墙”创建一个单独的函数,当我想在不同的地方绘制“墙”时,这不起作用。如果这看起来需要阅读很多内容,我深表歉意,我尝试只包含相关代码。非常感谢任何帮助/建议。
最佳答案
检测所有 4 个侧面的矩形碰撞
给定如下定义的矩形对象:
var player={x:0,y:0, w:20,h:20};
var barrier={x:100,y:100, w:50,h:50};
您可以使用此函数来测试两个矩形是否从任意一侧发生碰撞
// return true if the 2 rectangles are colliding
function RectsColliding(r1,r2){
return !(r1.x>r2.x+r2.w || r1.x+r1.w<r2.x || r1.y>r2.y+r2.h || r1.y+r1.h<r2.y);
}
您可以像这样调用该函数:
// test if the player and barrier are colliding
if( RectsColliding(player,barrier){
console.log(‘BANG’);
}else{
console.log(‘Congrats…No collision’);
}
即使有很多障碍物,也可以轻松检查碰撞
var CollisionOccured=false;
for(var i=0;i<barriers.length;i++){
if(RectsColliding(desiredPlayer,barriers[i])){
CollisionOccured=true;
}
}
return(CollisionOccured);
这是代码和 fiddle :http://jsfiddle.net/m1erickson/sJfbd/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var defaultFill="lightgray";
var defaultStroke="skyblue";
ctx.fillStyle=defaultFill;
ctx.strokeStyle=defaultStroke;
var player={x:0,y:0, w:20,h:20, fill:"black",stroke:"black"};
console.log(player.fill);
var barriers=[];
barriers.push({x:50 ,y:100, w:40,h:30});
barriers.push({x:200,y:230, w:20,h:20});
barriers.push({x:150,y:100, w:20,h:20});
barriers.push({x:150,y:200, w:20,h:20});
barriers.push({x:240,y:25, w:10,h:150});
drawAll();
function drawAll(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<barriers.length;i++){
drawRect(barriers[i]);
}
drawRect(player,player.fill,player.stroke);
}
function drawRect(r,fill,stroke){
ctx.beginPath();
ctx.rect(r.x,r.y,r.w,r.h);
ctx.closePath();
ctx.fillStyle=fill||defaultFill;
ctx.fill();
ctx.strokeStyle=stroke||defaultStroke;
ctx.stroke();
}
function movePlayer(desiredMoveX,desiredMoveY){
// calculate where the player would like to be
var desiredPlayer={
x:player.x+desiredMoveX,
y:player.y+desiredMoveY,
w:player.w,
h:player.h,
fill:"black",
stroke:"black"
}
// to start, set the move to be allowed
var allowMove=true;
// check every barrier for collisions
for(var i=0;i<barriers.length;i++){
// if the desiredPlayer has collided with a barrier
// set the allowMove flag to false
if(RectsColliding(desiredPlayer,barriers[i])){
allowMove=false;
}
}
// if the move is allowed, return the desiredPlayer position
// if the move is not allowed, return the old player position
if(allowMove){
player=desiredPlayer;
player.stroke="black";
}else{
player.stroke="red";
}
// redraw the screen
drawAll();
}
// return true if the 2 rectangles are colliding
function RectsColliding(r1,r2){
return !(r1.x>r2.x+r2.w || r1.x+r1.w<r2.x || r1.y>r2.y+r2.h || r1.y+r1.h<r2.y);
}
$(document).bind("keydown",function(event) {
switch(event.which){
case 37:
movePlayer(-1,0);
break;
case 39:
movePlayer(1,0);
break;
case 38:
movePlayer(0,-1);
break;
case 40:
movePlayer(0,1);
break;
default:
break;
}
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Use arrowkeys to move player (black box)</p>
<p>Player's outline will become red if hitting barrier</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
关于javascript - 如何正确地从每一侧(上、左、下、右)创建 2d 对象碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17932679/
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
最近一直在学习D语言。我一直对运行时感到困惑。 从我能收集到的关于它的信息中,(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样,它与您自己的程序一起运行。但是既然 D 是编译
想问一下这两个正则表达式有区别吗? \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试,两者都工作正常并且结果相同。但是,当在 linux
我正在学习 Go,而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。 这是一些代码: type IPAddr
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思,但是\1-\2-\3-\4 是什么意思? 最佳答案 \1-\2-\3-\4 是 b
我一直在努力解决这个问题,这让我很恼火。我了解 D 运行时库。它是什么,它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧,XoMB 定义了自己的运行时,但是
我有两个列表列表,子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
我需要使用 Regex 格式化一个字符串,该字符串包含数字、字母 a-z 和 A-Z,同时还包含破折号和空格。 从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D,但没有成功。我也尝试过不同的方法。 import std.datetime : benc
tl;dr:你好吗perfect forwarding在 D? 该链接有一个很好的解释,但例如,假设我有这个方法: void foo(T)(in int a, out int b, ref int c
有什么方法可以在 D 中使用abstract auto 函数吗? 如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
有没有人为内存中重叠的数组切片实现交集?算法在没有重叠时返回 []。 当 pretty-print (使用重叠缩进)内存中重叠的数组切片时,我想要这个。 最佳答案 如果您确定它们是数组,那么只需取 p
我已经开始学习 D,但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
如何创建一个不可变的类? 我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData,m 表示可变。然后我创建一个别名 alias immut
不久前我买了《The D Programming Language》。好书,很有教育意义。但是,我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。 在这本书中,Andrei 写了任何可以像这样调用
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例 我想知道如何在 D 中实现可能的无限数据结构,就像
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数(或类)? 例如: source/packageA/something.d: @sillyWalk(10) void doSomething()
我是一名优秀的程序员,十分优秀!