87,990
社区成员
发帖
与我相关
我的任务
分享【求助】自己做了个有碰撞检测的小游戏，未完成，不知哪里有问题求解答
case:39的if语句里如果没有碰撞检测是正常的，加上后却不好用了，求解答
HTML:
CSS:
JS:
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单生存游戏</title>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/public.css">
</head>
<body>
<div class="world">
<div id="element" class="element">
<img style="background-color:red;width:50px;height:50px"/>
</div>
<div class="stone" id="stone1"></div>
<div class="stone" id="stone2"></div>
</div>
</body>
</html>
CSS:
.world{
width: 100%;
height: 100%;
background: #666666;
position: relative;
overflow:hidden;
}
.element{
left:0;
top:0;
position: absolute;
background-color: #eee;
border: 1px solid #000;
}
.stone{
position: absolute;
background: #000;
border: 1px solid green;
}
#stone1{
width: 100px;
height: 100px;
left: 300px;
top:400px;
}
#stone2{
width: 200px;
height: 100px;
left: 500px;
top: 30px;
}
JS:
window.onload = function(){
/************* 浏览器滚动条宽度 **************/
var scrollTop=0;
function getScrollTop()
{
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
/*************** 控制玩家移动 *****************/
function to_left(){ $("#element").css({'left':'-=10'});}
function to_right(){ $("#element").css({'left':'+=10'});}
function to_top(){ $("#element").css({'top':'-=10'});}
function to_bottom(){ $("#element").css({'top':'+=10'});}
function myParseInt(s) {
var ret = parseInt(s);
return (isNaN(ret) ? 0 : ret);
}
/***************** 获取障碍物 ******************/
var stone = $('.stone');
var stoneNum = stone.length;
/********************* 碰撞检测 ***********************/
function playerCollision(rect1,rect2){
var center1 = {
x:myParseInt(rect1.css('left')) + rect1[0].offsetWidth/2,
y:myParseInt(rect1.css('top')) + rect1[0].offsetHeight/2
}
var center2 = {
x:rect2.offsetLeft + rect2.offsetWidth/2,
y:rect2.offsetTop + rect2.offsetHeight/2
}
var distX = Math.abs(center1.x-center2.x);
var distY = Math.abs(center1.y-center2.y);
if(distX < (rect1[0].offsetWidth+rect2.offsetWidth) && distY < (rect1[0].offsetHeight+rect2.offsetHeight) ){
return true;
} else {
return false;
}
}
/************* 碰撞判断 **************/
function collisionJudge(pl,st){
for(var i=1;i<st.length;i++){
playerCollision(pl,st);
}
}
/*************** 键盘响应事件 *****************/
$(document).keydown(function(e){
console.log('进入键盘响应事件');
var keyNum = e.which;
e=window.event||e;
var el = $("#element");
var stone = $('.stone');
var elWidth = el[0].offsetWidth;
var elHeight = el[0].offsetHeight;
var bodyWidth = $(window).width();
var bodyHeight = $(window).height();
var left = el.css('left');
var top = el.css('top');
switch (keyNum) {
case 37: //向左
if(myParseInt(left)>0){
to_left();
}
break;
case 38: //向上
if(myParseInt(top)>0){
to_top();
}
break;
case 39: //向右
console.log('准备向右移动');
if( myParseInt(left) <= (bodyWidth-elWidth-scrollTop-10) && collisionJudge(el,stone)){
console.log('开始向右移动');
to_right();
}
else{
console.log('碰到障碍物停止前进');
}
break;
case 40: //向下
if(myParseInt(top)<= (bodyHeight-elHeight-scrollTop-10)){
to_bottom();
}
break;
case 65: // A键向左
if(myParseInt(left)>0){
to_left();
}
break;
case 87: //W键向上
if(myParseInt(top)>0){
to_top();
}
break;
case 68: //D键向右
if(myParseInt(left)<= (bodyWidth-elWidth-scrollTop-10)){
to_right();
}
break;
case 83: //S键向下
if(myParseInt(top)<= (bodyHeight-elHeight-scrollTop-10)){
to_bottom();
}
break;
}
})
/************* 消除浏览器滚动条跟随按键移动 **************/
$(document).keydown(function(event){
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40 || event.keyCode == 65 || event.keyCode == 87 || event.keyCode == 68 || event.keyCode == 83)
{event.preventDefault();}
});
}
...全文
请发表友善的回复…
发表回复
囧 2017-04-07
- 打赏
- 举报
function collisionJudge(pl,st){
for(var i=1;i<st.length;i++){
if(playerCollision(pl,st)){
return true;
}
}
return false;
}
牧殇之ZERO 2017-04-06
- 打赏
- 举报
顶，自顶求关注
牧殇之ZERO 2017-04-05
- 打赏
- 举报
自顶，求大神帮忙改一下代码
牧殇之ZERO 2017-04-05
- 打赏
- 举报
返回值应该返回什么好，return true吗？
囧 2017-04-05
- 打赏
- 举报
collisionJudge 这个函数都没返回值。
