border-radius
丸めるサイズの内円の半径を指定する
ワンクリックすると50px進むボタンをつくる
--->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.js(自分で作ったコード)
$(function(){
console.log('foo');
//ワンクリックで50px進むボタン
var ballX = 195;//初期値
var ballY = 145;
var ballXpx;//pxを文字列として付与した形
var ballYpx;
var len = 50;//移動量
$('#b_up').on('click',function(){//up
//ballY = ballY - len;//下と同じコード
ballY -= len;
var ballYpx = ballY+'px';
$('#ball').animate({'top' : ballYpx});
console.log(ballYpx);
hantei();
});
$('#b_left').on('click',function(){//left
ballX -= len;
var ballXpx = ballX+'px';
$('#ball').animate({'left' : ballX});
hantei();
});
$('#b_right').on('click',function(){//right
ballX += len;
var ballXpx = ballX+'px';
$('#ball').animate({'left' : ballX});
hantei();
});
$('#b_down').on('click',function(){//down
ballY += len;
var ballYpx = ballY+'px';
$('#ball').animate({'top' : ballY});
hantei();
});
function hantei(){
console.log(ballX,ballY);
//msgの表示
if(ballX == 45 && ballY == 145){
console.log('hit');
$('#msg').text('ごはんだ！');
}else{
$('#msg').text('餌をください');
}
};
});
--->test4.js（先生版）
$(function(){
//ワンクリックで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});
console.log(X,Y);
}
});
①４つのボタンでanimateを書くのは便利じゃないので、moveという関数を呼び出す形
②move()で実際の移動は、
$('#ball').animate({'top':Y,'left':X});
と記述。
YやXの変数はむきだしで記述（シングルコートで囲ってはいけない）
③pxは単位として付けたほうがいいので、
functionの中だけで生きている変数（X,Y）でpxという文字列を付与。
④はみでないようにif文で制御
