DIR : /home/kozerus/public_html/jkwii/js/jsdoit/wheelreotate/index.js
/home/kozerus/public_html/jkwii/js/jsdoit/wheelreotate
var canvas=document.getElementById('spec');
var c = canvas.getContext('2d');
var pi=Math.PI;
function f(h){return Math.floor(Math.sin(frame/180*pi)*h);}
function $(a){return document.getElementById(a);}
//画像読込
var magic = new Image(); magic.src='http://jsrun.it/assets/e/L/H/b/eLHbC.png';
var img01 = new Image(); img01.src='http://jsrun.it/assets/i/G/l/C/iGlCy.jpg';
var img02 = new Image(); img02.src='http://jsrun.it/assets/v/0/i/3/v0i3H.jpg';
var img03 = new Image(); img03.src='http://jsrun.it/assets/u/V/K/C/uVKCn.jpg';
var img04 = new Image(); img04.src='http://jsrun.it/assets/4/9/R/d/49Rdv.jpg';
var kira = new Image(); kira.src='http://jsrun.it/assets/A/k/V/Q/AkVQE.png';
var levelUp = new Image(); levelUp.src='http://jsrun.it/assets/8/J/R/P/8JRP9.png';
//音読込
var jump1 = new Audio(); jump1.src='http://springreen.jp/INDEX/themes/ShunsuiKobo/bg/jump.mp3';
var jump2 = new Audio(); jump2.src='http://springreen.jp/INDEX/themes/ShunsuiKobo/bg/jump.mp3';
var jump3 = new Audio(); jump3.src='http://springreen.jp/INDEX/themes/ShunsuiKobo/bg/jump.mp3';
var koto = new Audio(); koto.src='http://springreen.jp/INDEX/themes/ShunsuiKobo/bg/kotoarp.mp3';
var kotoCount =0;
//カードの初期パラメータ
card01={visible:false,size:0,x:30,y:200,name:'MainCard',
lev:1,attack:99,defence:99,cost:99,skill:99,dx:0,dy:0,alpha:0.3};
card02={visible:false,size:0,x:180,y:200,name:'Card1',
lev:1,attack:99,defence:99,cost:99,skill:99,dx:0,dy:0,alpha:0.3};
card03={visible:false,size:0,x:330,y:200,name:'Card2',
lev:1,attack:99,defence:99,cost:99,skill:99,dx:0,dy:0,alpha:0.3};
//初期化
var frame = 0;
var mouse={x:0,y:0};
var scene=1;
var sparkInterval=10;
var msg="SELECT Main card!";
var rotateInterval=0;
var g=c.createLinearGradient(0,120,0,150);
g.addColorStop(0,'white');
g.addColorStop(0.5,'#eecc99');
g.addColorStop(1,'white');
//アニメーション
setInterval(anime,30);
function anime(){
frame++;
magicDraw();
if(frame>200)scene1();
if(scene==2 && card01.x<180)scene25();
if(scene==4 && card01.y<110)scene45();
if(scene==4 && card01.y>=110)scene=5;
if(scene<5)scene49();
if(scene==5)scene5();
if(scene==6)scene6();
if(scene==7)scene7();
}
function clk(){
if( (scene==1) && (mouse.x>card01.x) && (mouse.x<card01.x+120) &&(mouse.y>card01.y) && (mouse.y<card01.y+260)){
scene2();jump1.play();
}
if( (scene==2) && (mouse.x>card02.x) && (mouse.x<card02.x+120) && (mouse.y>card02.y) && (mouse.y<card02.y+260)){
scene3();jump2.play();
}
if( (scene==3) && (mouse.x>card03.x) && (mouse.x<card03.x+120) &&(mouse.y>card03.y) && (mouse.y<card03.y+260)){
scene4(); jump3.play();
}
}
//scene1(opening)/////////////////////////
function scene1(){
card01.visible=true;
card02.visible=true;
card03.visible=true;
}
//scene2(メインクリック)/////////////////////////
function scene2(){
scene=2;
card01.alpha=1;
card01.dx=4;card01.dy=-4;
card02.dx=-4;card02.dy=0;
msg='CLICK Card1';
}
//scene25(移動)/////////////////////////
function scene25(){
card01.x +=card01.dx; card01.y +=card01.dy;
card02.x +=card02.dx; card02.y +=card02.dy;
}
//scene3(サブ１クリック)/////////////////////////
function scene3(){
scene=3;
card02.alpha=1;
msg='CLICK Card2';
}
//scene4(サブ2クリック)/////////////////////////
function scene4(){
scene=4;
card03.alpha=1;
card01.dx=0;card01.dy=2;
card02.dx=4;card02.dy=-2;
card03.dx=-4;card03.dy=-2;
}
//scene45(移動)/////////////////////////
function scene45(){
card01.x +=card01.dx; card01.y +=card01.dy;
card02.x +=card02.dx; card02.y +=card02.dy;
card03.x +=card03.dx; card03.y +=card03.dy;
}
//scene4(5になるまで)/////////////////////////
function scene49(){
cardDraw(card03,img03);
cardDraw(card02,img02);
cardDraw(card01,img01);
}
//scene5(spark)/////////////////////////
function scene5(){
sparkDraw(card03,img03);
sparkDraw(card02,img02);
sparkDraw(card01,img01);
}
//scene6(spark)/////////////////////////
function scene6(){
createDraw(card01,img04);
}
//scene7(levelup)/////////////////////////
function scene7(){
if(kotoCount===0){koto.play();kotoCount=1;}
levelUpDraw(card01,img04);
c.drawImage(levelUp,150,360);
c.drawImage(kira,Math.random()*270+100,Math.random()*360+50);
}
//Draw関係の関数////////////////////////////////////////////////////////////////////
magicDraw =function(){
c.fillStyle="black";
c.globalAlpha=0.03;
c.fillRect(0,0,500,500);
c.globalAlpha=1;
c.save();
c.translate(250,350);
c.scale(0.98,0.5);
c.rotate(frame/180/3*pi);
c.shadowBlur=3; c.shadowColor="#aaa"; c.shadowOffsetX=0; c.shadowOffsetY=5;
c.drawImage(magic,-250,-250,500,500);
c.shadowBlur=0; c.shadowColor=""; c.shadowOffsetX=0; c.shadowOffsetY=0;
c.restore();
};
cardDraw =function(card,img){
for(var y=0;y<16;y++){
for(var x=0;x<12;x++){
c.globalAlpha=card.alpha;
c.drawImage(img,x*10,y*10,10,10,x*10+card.x,y*10+card.y,card.size,card.size);
c.globalAlpha=1;
if(card.size<10){card.size+=0.001;}
}
}
if(card.size>5){
c.fillStyle="white";
c.font='15px "serif"';
c.fillText(card.name,card.x,card.y+180);
c.fillText("Lev:"+card.lev,card.x,card.y+200);
c.fillText("攻 :"+card.attack,card.x,card.y+220);
c.fillText("防 :"+card.defence,card.x,card.y+240);
c.fillText("コスト"+card.cost,card.x,card.y+260);
c.fillText("スキル"+card.skill,card.x,card.y+280);
c.font='50px "serif"';
c.globalAlpha=1;
c.fillStyle=g;
c.strokeStyle="black";
c.textAlign="center";
c.lineWidth="3";
c.strokeText(msg,250,150);
c.fillText(msg,250,150);
c.textAlign="left";
}
};
sparkDraw = function(card,img){
for(var y=0;y<16;y++){for(var x=0;x<12;x++){
c.drawImage(img,x*10,y*10,10,10,x*sparkInterval+card.x,y*sparkInterval+card.y,card.size,card.size);
c.fillStyle="white";
c.globalAlpha = 0.05*card.size-0.5;
c.fillRect(x*sparkInterval+card.x,y*sparkInterval+card.y,card.size,card.size);
c.globalAlpha = 1;
}}
sparkInterval +=0.14;
card.y -=3.2;
card.x -=2.4;
card.size +=0.32;
if(card.size>30)scene=6;
};
createDraw=function(card,img){
for(var y=0;y<16;y++){for(var x=0;x<12;x++){
c.drawImage(img,x*10,y*10,10,10,x*sparkInterval+card.x,y*sparkInterval+card.y,card.size,card.size);
c.fillStyle="white";
c.globalAlpha = 0.1*card.size-2;
c.fillRect(x*sparkInterval+card.x,y*sparkInterval+card.y,card.size,card.size);
c.globalAlpha = 1;
}}
sparkInterval -=0.25;
card.y +=1.76;
card.x +=1.52;
card.size -=0.156;
if(card.size<20)scene=7;
};
levelUpDraw=function(card,img){
for(var y=0;y<16;y++){
for(var x=0;x<12;x++){
c.drawImage(img,x*10,y*10,10,10,x*sparkInterval+card.x,y*sparkInterval+card.y,card.size,card.size);
}
}
};
//マウスの位置を把握
function mouseArea(card){return (mouse.x>card.x) && (mouse.x<card.x+120) &&(mouse.y>card.y) && (mouse.y<card.y+160);}
canvas.onmousemove = function(e){
var rect = e.target.getBoundingClientRect();
mouse.x = e.clientX - rect.left;
mouse.y = e.clientY - rect.top;
if((scene>0)&&(scene<4)){
if(mouseArea(card01)){
c.strokeStyle="red";
c.lineWidth=2;
c.strokeRect(card01.x-2,card01.y-2,124,164);
}
if(mouseArea(card02)){
c.strokeStyle="blue";
c.lineWidth=2;
c.strokeRect(card02.x-2,card02.y-2,124,164);
}
if(mouseArea(card03)){
c.strokeStyle="green";
c.lineWidth=2;
c.strokeRect(card03.x-2,card03.y-2,124,164);
}
}
};
//google
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3233827-65']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//google
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer