如果声明防止漫画被放置在预先定义的区域之外
If-statement to prevent cartoon to be placed outside a predefiend area
我在获取下面的if语句以正确执行我想要的操作时遇到了问题。这里提到的"Baddie"是一个卡通,它通过按下400px
宽度、300px
高度的箭头键在盒子里移动。
这个函数将阻止他离开这个框,但我的问题是,即使我的变量是movable = false;
,他也可以离开这个框
var isBaddieMovable = function(moveLeft, moveTop) {
var movable, newLeft, newTop, max;
console.log("Checking if baddie collided with the content walls");
movable = true;
// Get baddie's new position if moved
newLeft = left + moveLeft*step;
newTop = top + moveTop*step;
console.log("Checking collision at", newLeft, newTop);
// Left wall collide check - check if newLeft outside content
var condition = false;
if(newLeft < 0) {
movable = false;
console.log("Baddie collided with left wall");
}
condition = false;
// Top wall collide check - check if newTop is outside content
if(newTop < 0) {
movable = false;
console.log("Baddie collided with top wall");
}
// Right wall collide check
max = 400;
if(newLeft + baddie.offsetWidth > max) {
movable = false;
console.log("Baddie collided with right wall");
}
// Bottom wall collide check
max = 300;
if(newTop + baddie.offsetHeight > max) {
movable = false;
console.log("Baddie collided with bottom wall");
}
// Return if baddie collided
return movable;
};
我可以从console.log()
中看到,函数是发现Baddie与墙相撞,但即使设置了movable = false
,他仍然会穿过墙。
Console:
Baddie will step 50 pixels each move
Baddie starts at 0,0
37 was pressed
Checking if baddie collided with the content walls
Checking collision at -50 0
Baddie collided with left wall
这些信息足以帮助我吗?
编辑:正如有人提到的,我在这里添加了该运动的功能:
var moveBaddie = function(moveLeft, moveTop) {
left += moveLeft*step;
top += moveTop*step;
baddie.style.left = left + "px";
baddie.style.top = top + "px";
};
编辑2:这是调用函数isBaddieMovable()
和moveBaddie()
的Switch情况
(function(){
'use strict';
var baddie, content;
var step, left, top;
baddie = document.getElementById("baddie");
content = document.getElementById("content");
step = baddie.offsetWidth;
console.log("Baddie will step " + step + " pixels each move");
// Gets starting position of baddie
left = baddie.offsetLeft;
top = baddie.offsetTop;
console.log("Baddie starts at " + left + "," + top);
/* ------------------------------------
* EVENTS
*/
// Triggers action on keypress
document.addEventListener("keydown", function(event) {
var key;
// Gets what key was pressed as number
key = event.keyCode || event.which;
console.log(key + " was pressed");
// Switch case to decide where baddie is to go
switch(key) {
case 37: {
isBaddieMovable(-1, 0);
return moveBaddie(-1, 0)+turnLeft();
}
break;
case 38:{
isBaddieMovable(0, -1);
return moveBaddie( 0, -1);
break;
}
case 39: {
isBaddieMovable(1, 0);
return moveBaddie(1, 0)+turnRight();
break;
}
case 40: {
isBaddieMovable(0, 1);
return moveBaddie(0, 1);
break;
}
default:
console.log("Nothing happened with the gameboard");
return true;
}
// Baddie action was performed - prevent button default
event.preventDefault();
});
编辑:原来不是函数失败了。是我的开关盒设置不正确。改成了这个,现在它开始工作了!
switch(key) {
case 37:
if (isBaddieMovable(-1, 0))
return moveBaddie(-1, 0)+turnLeft();
break;
case 38:
if (isBaddieMovable(0, -1))
return moveBaddie( 0, -1);
break;
case 39:
if (isBaddieMovable(1, 0))
return moveBaddie(1, 0)+turnRight();
break;
case 40:
if (isBaddieMovable(0, 1))
return moveBaddie(0, 1);
break;
尝试这样做,首先获取移动值,然后在切换后对其进行测试,并确保isBaddieMovable
返回true或false。。。如果它返回true,执行一个动作。。。
我希望这会有所帮助。
var movementToDo = {left:0,up:0};
var couldMove = false;
switch(key) {
case 37:
movementToDo.left= -1;
movementToDo.up = 0;
break;
case 38:
movementToDo.left= 0;
movementToDo.up = -1;
break;
case 39:
movementToDo.left= 1;
movementToDo.up = 0;
break;
case 40:
movementToDo.left= 0;
movementToDo.up = 1;
break;
default:
console.log("Nothing happened with the gameboard");
return true;
}
if(isBaddieMovable(movementToDo.left,movementToDo.up)){
moveBaddie(movementToDo.left,movementToDo.up);
}
您可以立即返回false,以避免有人使用该变量出错。但当我看到你的代码时,我认为你应该在使用检查的代码中搜索问题。
var isBaddieMovable = function(moveLeft, moveTop) {
var newLeft, newTop, max;
console.log("Checking if baddie collided with the content walls");
// Get baddie's new position if moved
newLeft = left + moveLeft*step;
newTop = top + moveTop*step;
console.log("Checking collision at", newLeft, newTop);
// Left wall collide check - check if newLeft outside content
if(newLeft < 0) {
console.log("Baddie collided with left wall");
return false;
}
if(newTop < 0) {
console.log("Baddie collided with top wall");
return false;
}
// Right wall collide check
max = 400;
if(newLeft + baddie.offsetWidth > max) {
console.log("Baddie collided with right wall");
return false;
}
// Bottom wall collide check
max = 300;
if(newTop + baddie.offsetHeight > max) {
console.log("Baddie collided with bottom wall");
return false;
}
// Return if baddie collided
return true;
};
相关文章:
- 在文本区域禁用javascript定义的keydown事件并恢复默认行为
- 不使用自定义CSS或HTML(使用框架方法)的角度材质文本输入或文本区域标签大小
- 当前的GMT区域是如何在Javascript中定义的
- 使用Google Analytics API的区域图-未采集类型错误无法读取'库'的未定义
- 在文本区域显示未定义的javascript数组
- 如果声明防止漫画被放置在预先定义的区域之外
- 无法读取属性'区域设置'的未定义
- 谷歌地图区域中的自定义叠加层单击然后放大
- 文本区域的自定义占位符
- 如何在 sugarcrm 中的自定义下拉字段中更改值时填充自定义文本区域
- 未捕获的类型错误: 无法读取未定义的属性“区域”
- 无法从自定义对话框中获取文本区域值
- 在一个图像上定义多个单击区域
- 需要有关自定义文本区域最大长度功能的建议
- 如何使用 MVC4 表单在 Dropzone.js 中配置自定义上传区域
- 可以通过Javascript在Acrobat中搜索和保存页面定义区域中的文本
- 使用D3.js在美国地图中定义区域
- 元素不在定义区域内
- 在我构建的这个自定义区域中,coffeescript's的胖箭头是如何转换成Javascript的?
- Angular Moment-使用自定义区域设置对象更改区域设置