色々と紆余曲折を経て、とりあえず2つのボールが動きました。
分かったことは、setIntervalとaddEventListenerを使う時は、addEventListenerの第3項をfalseにする。
起動時読み込みは、window.onloadかbodyでonloadを宣言する。
まだ、当たり判定はできていませんが、とりあえずアップします。
<!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 ;//- (window.innerWidth - SCREEN_WIDTH);
mouseY = e.clientY ;//- (window.innerHeight - SCREEN_HEIGHT);
}
//drawing circle
function draw() {
ctx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(circleX,circleY,radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
MoveCircle();
ctx.beginPath();
ctx.arc(circle2X,circle2Y,radius,0,Math.PI*2,true);
ctx.fillStyle = '#ff6600';
ctx.fill();
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);
}
circle2Y = circle2Y + hugouY;
}
//moving circle
function MoveCircle(){
circleX += (mouseX - circleX)*speed;
circleY += (mouseY - circleY)*speed;
}
</script>
</head>
<body onload="init()">
<canvas id="circle" width="500" height="340"></canvas>
</body>
</html>
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。