2011/06/30

jsdoit!

jsdo.itにアップしました。
IE以外ならば、見られると思います。
http://jsdo.it/aito/ro7Y

ARMボード

以前からLEDマトリクスを使った電光表示装置を作ろうかと思っていたのですが、
今日CQ出版社のサイトを見ていたら、このようなキット(http://toragi.cqpub.co.jp/tabid/412/Default.aspx)を売っていました。
更に、ページ下にあるようなオプションパーツまで!!
なにやら、ビッグウェーブに乗り遅れて締まった気がしてならない!!

壁打ちもどき

当たり判定を、どうするとうまくいくか試行錯誤していましたが、ようやく期待通りに動いてくれました。
まだ、ツメが甘いですが、現在のソースを載せておきます。
<!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>

2011/06/26

当たり判定

http://www.c3.club.kyutech.ac.jp/gamewiki/index.php?%C5%F6%A4%BF%A4%EA%C8%BD%C4%EA

上のサイトを参考にさせてもらいました。
それを参考に当たり判定の関数を追加。
後、デバッグ用に座標などを表示するように変更しました。
ただ、当たり判定の処理がうまくできておらず、マウスのカーソルで跳ね返りますが、動作が微妙です…(^^;)
ブログ上でソースを綺麗に載せられなさそうなので、jsdo.it(http://jsdo.it/)で試したほうが良いのかと検討中。
Web上で実行もできるし、非常に面白いサイトです。カヤックさんナイス!
とりあえず、カーソルとボールの座標を考えた絵をアップ。

2011/06/23

ボール2個

色々と紆余曲折を経て、とりあえず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>

2011/06/17

壁打ちもどき

今週、時間がとれず中々進まないですが、マウスイベントとsetIntervalによるボールの表示との関係がうまくできず、真っ白な画面が表示されます。orz
もっと、参考となるところを探さないと。。。
参考にさせていただきました。ありがとうございます。
http://homepage2.nifty.com/t_ishii/HTML5/tabletennis/index.html

2011/06/14

html5勉強

html5の勉強として、本(スマートフォンのためのHTML5 アプリケーション開発ガイド)の例題からちょっと改造を加えようと考えています。
とりあえず、例題のそのまま入力して表示してみました。
私の知っている時のhtmlから比べると、全然違う印象です。