test4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>絶対配置</title>
<link rel="stylesheet" href="test4.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>絶対配置と<span class="green">相対配置</span></h1>
<div id="cont">
<p><button id="b_up">↑</button></p>
<p>
<button id="b_left">←</button>
<span>|</span>
<button id="b_right">→</button>
</p>
<p><button id="b_down">↓</button></p>
</div>
<div id="stage">
<!--<p id="msg">餌をください</p>-->
<div id="ball"></div>
</div>
<script src="test4.js"></script>
</body>
</html>
test4.css
body{
background: #bbffa1;
}
h1{
text-align: center;
}
p{
text-align: center;
margin: 5px 0;
}
p span{
visibility: hidden;/*spanの文字の表示を消す*/
}
#stage p{
text-align: left;
/*left: 10px;*//*これはどうしたら動かせる？？*/
}
#stage{
width: 400px;
height: 300px;
margin: auto;
background: #fff;
border: solid 2px #ccc;
position: relative;
/*background-image:url(img/fish_kue2.png);*/
}
#ball{
width: 10px;
height: 10px;
background: #F00;
border-radius: 5px;
position: absolute;
top: 145px;
left: 195px;
}
#cont{
width: 200px;
height: 100px;
margin: auto;/*中央に寄せる*/
/*text-align: center;*//*divの中央ぞろえはtext-alignではできないのでは*/
border: solid 1px #ccc;
border-radius: 30px;
background: #333;
margin-bottom: 10px;
}
test4.js
$(function(){
console.log('foo');
//ワンクリックで50px進むボタン
var ballX = 195;//初期値
var ballY = 145;
var len = 50;//移動量
$('#b_up').on('click',function(){//up
//ballY = ballY - len;//下と同じコード
ballY -= len;
move();
});
$('#b_left').on('click',function(){//left
ballX -= len;
move();
});
$('#b_right').on('click',function(){//right
ballX += len;
move();
});
$('#b_down').on('click',function(){//down
ballY += len;
move();
});
function move(){
if(ballY>290) ballY=290;
if(ballX>390) ballX=390;
if(ballX<0) ballX=0;
if(ballY<0) ballY=0;
var X = ballX+'px';
var Y = ballY+'px';
$('#ball').animate({'top':Y,'left':X});
//$('#ball').animate({'top':X,'left':'Y'});
console.log(X,Y);
//hantei();
}
/*
function hantei(){
console.log(ballX,ballY);
//msgの表示
if(ballX <= 50 && ballY > 120 && ballY < 150){
console.log('hit');
$('#msg').text('ごはんだ！');
}else{
$('#msg').text('餌をください');
}
};
*/
});
