当たり判定を、どうするとうまくいくか試行錯誤していましたが、ようやく期待通りに動いてくれました。
まだ、ツメが甘いですが、現在のソースを載せておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 (Canvas)</title>
<style>
body{margin:0; padding:0}
#circle{margin:0; padding:0; background-color:#d8eb00}
</style>
<script>
var circle;
var ctx;
var speed = 0.05;
var radius = 20;
var color = "#FFFFFF";
var circleX = 250;
var circleY = 170;
var mouseX = 250;
var mouseY = 170;
var circle2X = 50;
var circle2Y = 70;
var hugouX = 1;
var hugouY = 1;
function init(){
circle = document.getElementById('circle');
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
circle.addEventListener('mousemove',MouseMove,false);
ctx = circle.getContext('2d');
setInterval(draw,10);
}
//get mouse point
function MouseMove(e){
mouseX = e.clientX ;
mouseY = e.clientY ;
}
//drawing circle
function draw() {
ctx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
ctx.fillStyle = color;
ctx.beginPath();
ctx.lineTo(circleX-radius, circleY-radius);
ctx.lineTo(circleX+radius, circleY-radius);
ctx.lineTo(circleX+radius, circleY+radius);
ctx.lineTo(circleX-radius, circleY+radius);
ctx.closePath();
ctx.fill();
MoveCircle();
ctx.beginPath();
ctx.arc(circle2X,circle2Y,radius,0,Math.PI*2,true);
ctx.fillStyle = '#ff6600';
ctx.fill();
hitPoint();
ctx.fillText(circleX,10,10);
ctx.fillText(circleY,30,10);
ctx.fillText(circle2X,10,30);
ctx.fillText(circle2Y,30,30);
ctx.fillText(hugouX,60,30);
ctx.fillText(hugouY,90,30);
}
//moving circle
function MoveCircle(){
circleX = mouseX;
circleY = mouseY;
}
//Hitpoint
function hitPoint(){
// for bar
if( (circleX-radius) < (circle2X+radius) && (circle2X-radius) < (circleX+radius) && (circle2Y-radius) < (circleY+radius) && (circleY-radius) < (circle2Y+radius)){
if(Math.abs(circleX-circle2X) > Math.abs(circleY-circle2Y)){
hugouX = -1 * hugouX;
hugouY = 1 * hugouY;
}
if(Math.abs(circleX-circle2X) < Math.abs(circleY-circle2Y)){
hugouX = 1 * hugouX;
hugouY = -1 * hugouY;
}
ctx.fillText("True!!",60,10);
}
// for out side
if( 1 <= circle2X || circle2X <= 499) {
hugouX = hugouX * 1;
}
if( 0 > circle2X || circle2X > 499) {
hugouX = hugouX * (-1);
}
circle2X = circle2X + hugouX;
if( 1 <= circle2Y || circle2Y <= 339) {
hugouY = hugouY * 1;
}
if( 0 > circle2Y || circle2Y > 339) {
hugouY = hugouY * (-1);
}
circle2X = circle2X + hugouX;
circle2Y = circle2Y + hugouY;
}
</script>
</head>
<body onload="init()">
<canvas id="circle" width="500" height="340"></canvas>
</body>
</html>
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。