Forked from: Tomo's GYAOS_sample diff(542)

forked from: GYAOS_sample

aom.dk

2011-02-01 00:03:00

License: MIT License

Fork: 0

Fav: 1

View: 681

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 438 lines
HTML 42 lines
CSS 90 lines

forked from: GYAOS_sample
Raphael 1.4.3 - JavaScript Vector Library
jQuery v1.4.4

// forked from Tomo's "GYAOS_sample" http://jsdo.it/Tomo/rQ0z
var hpMax=120;
var hp=hpMax;

//raphael paper
var paper;

//ゲームの状態
var status;

//味方パラメータ
var u_hpMax=100;
var u_hp=u_hpMax; //enemy lifepoint
var atk=10; //attack point
var lv1_atkp;
var lv2_atkp;
var lv3_atkp;
var atk_pat;
var pe1,pe1_a,pe1_b,pe1_c,pe1_d,pe1_e;
var ge1,ge2,ge3;

//敵パラメータ
var e_hpMax=100;
var e_hp=100; //enemy lifepoint
var e_atk=10;
var ehp;

$(function(){
 
var off = $("#main").offset();
paper = Raphael(off.left, off.top, 240, 320);

//見方のＨＰ表示
var r_bg = paper.rect(10, 30, 100, 8);
r_bg.attr({fill:"#fff",stroke:"#d9d9d9",opacity:1.0});
var uhp = paper.rect(10, 30, 100, 8);
uhp.attr({fill:"#ff1e0c",stroke:"#ff1e0c",opacity:1.0});

//敵のＨＰ表示
var ehp_bg = paper.rect(125, 30, 100, 8);
ehp_bg.attr({fill:"#fff",stroke:"#d9d9d9",opacity:1.0});
ehp = paper.rect(125, 30, 100, 8);
ehp.attr({fill:"#231ce0",stroke:"#231ce0",opacity:1.0});

//敵のATPバー(5つで行動できる。速さはパラメータから)
var atp1 = paper.circle(130, 49, 5);
atp1.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7});

var atp2 = paper.circle(150, 49, 5);
atp2.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7});

var atp3 = paper.circle(170, 49, 5);
atp3.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7});

var atp4 = paper.circle(190, 49, 5);
atp4.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7});

var atp5 = paper.circle(210, 49, 5);
atp5.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7});

//アタッカー表示(パターンは、攻撃の種類による)
var attacker = paper.rect(80, 280, 150, 25);
attacker.attr({fill:"#c9a466",stroke:"#a17b3d",opacity:0.8});

//var atk_bt = paper.circle(225, 292, 10);
//atk_bt.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.8});

var atk_sign = paper.rect(80, 280, 1,25);
atk_sign.attr({fill:"#000030",stroke:"#000030",opacity:0.8});

var atk_lv1 = paper.rect(130, 282, 50, 22);
atk_lv1.attr({fill:"#ffeb00",stroke:"#ffeb00",opacity:0.6});

var atk_lv2 = paper.rect(180, 282, 30, 22);
atk_lv2.attr({fill:"#4da619",stroke:"#4da619",opacity:0.6});

var atk_lv3 = paper.rect(210, 282, 15, 22);
atk_lv3.attr({fill:"#c40026",stroke:"#c40026",opacity:0.6});

//攻撃エフェクト(パンチ)

pe1 = paper.circle(150, 160, 10).attr({opacity:0});
pe1_a = paper.circle(135,150,8).attr({opacity:0});
pe1_b = paper.circle(165,170,8).attr({opacity:0});
pe1_c = paper.circle(135,170,8).attr({opacity:0});
pe1_d = paper.circle(165,150,8).attr({opacity:0});
pe1_e = paper.circle(140,150,8).attr({opacity:0});

pe2 = paper.circle(50, 120, 10);
pe2.attr({opacity:0});

pe3 = paper.circle(60, 160, 30);
pe3.attr({opacity:0});

//攻撃エフェクト(explosion)

ge1 = paper.circle(150, 160, 30);
ge1.attr({opacity:0});

ge2 = paper.circle(50, 120, 10);
ge2.attr({opacity:0});

ge3 = paper.circle(60, 160, 30);
ge3.attr({opacity:0});

atp_num = 1;

e_action = setInterval(function(){

if(atp_num == 1){
   atp1.animate({fill:"#ffb299",stroke:"#ffb299",opacity:1.0},200);
 }else if(atp_num == 2){
   atp2.animate({fill:"#ffa591",stroke:"#ffa591",opacity:1.0},200);
 }else if(atp_num == 3){
   atp3.animate({fill:"#ff7c5b",stroke:"#ff7c5b",opacity:1.0},200);
 }else if(atp_num == 4){
   atp4.animate({fill:"#ff5935",stroke:"#ff5935",opacity:1.0},200);
 }else if(atp_num == 5){
 
 u_hp -= e_atk; 
 atp5.animate({fill:"#ff3a07",stroke:"#ff3a07",opacity:1.0},200);

if(u_hp>0){ 
 uhp.animate({opacity:1,width:u_hp},1000);

}else{

uhp.animate({opacity:1,width:u_hp},1000);
 $("#alert_lose").slideDown("slow",function(){ $("#alert_lose").fadeOut("slow"); });
 clearInterval(e_action);
 status = 2;

}

}else if(atp_num == 6){

atp1.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200);
 atp2.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200);
 atp3.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200);
 atp4.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200);
 atp5.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200);

}

if(atp_num<6){
 atp_num++;
 }else{
 atp_num = 1;
 }

},700);

$("#stop_ea").click(function(){

clearInterval(e_action);

});

var sum = 100;

$("#test_hp").click(function(){

e_hp -= atk;

if(e_hp>0){

$("#hp").text(e_hp+"/"+e_hpMax);
$("#monster").fadeOut(10).delay(80).fadeIn(10).fadeOut(10).delay(80).fadeIn(10);
ehp.animate({opacity:1,width:e_hp},1000);

}else{

ehp.animate({opacity:1,width:e_hp},1000);
$("#hp").text("0/"+e_hpMax);
$("#alert_win").slideDown("slow",function(){ $("#alert_win").fadeOut("slow"); });

}
});

$("#hp").text(hp+"/"+hpMax);
$("#alert_ft").slideDown("slow",function(){ $("#alert_ft").fadeOut("slow"); });

$("#atc").click(function(){
var r = Math.floor(Math.random() * 10)+10;
hp-=r;
if(hp>0){
$("#hp").text(hp+"/"+hpMax);
$("#monster").fadeOut(10).delay(80).fadeIn(10).fadeOut(10).delay(80).fadeIn(10);
}else{

//$("#main").html("<p>win</p>");
  $("#hp").text("0/"+hpMax);
  $("#alert_win").slideDown("slow",function(){ $("#alert_win").fadeOut("slow"); });

}

});

var lv1st = 0;
var lv2st = 0;
var lv3st = 0;

atk_label = paper.text(80,310,"アタック");
atk_label.attr({"fill": "#fff","font-size":"11px","text-anchor":"start",opacity:0});

sct_label = paper.text(80,310,"スクラッチ");
sct_label.attr({"fill": "#fff","font-size":"11px","text-anchor":"start",opacity:0});

ge_label = paper.text(80,310,"グラビティ　エクスプロージョン");
ge_label.attr({"fill": "#fff","font-size":"11px","text-anchor":"start",opacity:0});

$("#attack").click(function(){

atk_pat = 1; //attack
atk_label.animate({opacity:1.0},100);
sct_label.animate({opacity:0},100);
ge_label.animate({opacity:0},100);
$("#active_cmd #a_attack").show();$("#active_cmd #a_scratche").hide();
$("#active_cmd #a_explosion").hide();$("#active_cmd #a_escape").hide();
atk_lv1.animate({width:50},100); atk_lv2.animate({width:30},100); atk_lv3.animate({width:15},100);
lv1st = 50; lv2st = 30; lv3st = 15;
lv1_atkp = 1; lv2_atkp = 3; lv3_atkp = 5;

});

$("#scratche").click(function(){

atk_pat = 2; //scratche
sct_label.animate({opacity:1.0},100);
atk_label.animate({opacity:0},100);
ge_label.animate({opacity:0},100);
$("#active_cmd #a_attack").hide();$("#active_cmd #a_scratche").show();
$("#active_cmd #a_explosion").hide();$("#active_cmd #a_escape").hide();
atk_lv1.animate({width:45},100); atk_lv2.animate({width:25},100); atk_lv3.animate({width:10},100);
lv1st = 45; lv2st = 25; lv3st = 10;
lv1_atkp = 2; lv2_atkp = 4; lv3_atkp = 6;

});

$("#explosion").click(function(){

atk_pat = 3; //explosion
sct_label.animate({opacity:0},100);
atk_label.animate({opacity:0},100);
ge_label.animate({opacity:1.0},100);
$("#active_cmd #a_attack").hide();$("#active_cmd #a_scratche").hide();
$("#active_cmd #a_explosion").show();$("#active_cmd #a_escape").hide();
atk_lv1.animate({width:30},100); atk_lv2.animate({width:20},100); atk_lv3.animate({width:5},100);
lv1st = 30; lv2st = 20; lv3st = 5;
lv1_atkp = 3; lv2_atkp = 7; lv3_atkp = 12;

});

$("#escape").click(function(){

$("#active_cmd #a_attack").hide();$("#active_cmd #a_scratche").hide();
$("#active_cmd #a_explosion").hide();$("#active_cmd #a_escape").show();

atk_lv1.animate({width:50},100); atk_lv2.animate({width:30},100); atk_lv3.animate({width:15},100);
lv1st = 50; lv2st = 30; lv3st = 15;

});

var moveMax = 150;
var movepx = 0;
var sign_sts = 0; //0は待機中 //1は動作中

uname = paper.text(15, 15, "たんぽぽライオン");
uname.attr({"fill": "#ffffff","font-size":"12px","text-anchor":"start",opacity:1});

uname = paper.text(155, 15, "Gyaos");
uname.attr({"fill": "#ffffff","font-size":"12px","text-anchor":"start",opacity:1});

miss = paper.text(190,270,"Miss!");
miss.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0});

great = paper.text(190,270,"Great!");
great.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0});

nice = paper.text(190,270,"Nice!");
nice.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0});

bad = paper.text(190,270,"Bad");
bad.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0});

$(".atkcmd").click(function(){

if(sign_sts == 0){

sign_sts = 1;
 start_attack = setInterval(function(){

if(movepx<150){
  atk_sign.translate(1,0);
  movepx++;
 }else{
  miss.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ miss.animate({opacity:0},300);  });
  atk_sign.translate(-150,0);
  clearInterval(start_attack);
  movepx = 0; sign_sts = 0;
 }

},6);

}else{ //動作中のクリック

if(movepx < 50){

miss.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ miss.animate({opacity:0},300);});

}else if(movepx >= 50 && movepx < (50 + lv1st)){

bad.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ bad.animate({opacity:0},300);});
test_attack(lv1_atkp);

}else if(movepx > 100 && movepx < (100 + lv2st)){

nice.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ nice.animate({opacity:0},300);});
test_attack(lv2_atkp);

}else if(movepx > 130 && movepx < (130 + lv3st)){

great.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ great.animate({opacity:0},300);});
test_attack(lv3_atkp);

}else{

miss.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ miss.animate({opacity:0},300);});

}

atk_sign.translate(-movepx,0);
clearInterval(start_attack);

movepx=0; sign_sts = 0;

}

});

$(".cmd").hover(function(){

$(this).fadeTo("normal", 0.6);
},function(){
 $(this).fadeTo("normal", 1.0);

});

}); //end script

function test_attack(atkp){

e_hp -= atkp;

if(e_hp>0){

$("#hp").text(e_hp+"/"+e_hpMax);

$("#monster").fadeOut(10).delay(80).fadeIn(10).fadeOut(10).delay(80).fadeIn(10);
ehp.animate({opacity:1,width:e_hp},1000);
if(atk_pat == 1){
attack_effect_pe();
}else if(atk_pat == 2){

}else if(atk_pat == 3){
attack_effect_ge();
}

}else{

ehp.animate({opacity:1,width:e_hp},1000);
$("#hp").text("0/"+e_hpMax);
$("#alert_win").slideDown("slow",function(){ $("#alert_win").fadeOut("slow"); });

}

function attack_effect_pe(){

pe1.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 20, "stroke-opacity": 0.3,opacity:1.0}, 120,
function(){ pe1.animate({opacity:0},100,function(){

pe1_a.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120,
function(){ pe1_a.animate({opacity:0}); });

pe1_b.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120,
function(){ pe1_b.animate({opacity:0}); });

pe1_c.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120,
function(){ pe1_c.animate({opacity:0}); });

pe1_d.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120,
function(){ pe1_d.animate({opacity:0}); });

}); });

//pe1_c.animate({fill: "#700014", stroke: "#000",opacity:1.0}, 120,
//function(){ pe1.animate({opacity:0}); });

}

function attack_effect_ge(){

ge1.animate({fill: "#700014", stroke: "#000", "stroke-width": 20, "stroke-opacity": 0.3,opacity:1.0}, 120,
function(){ ge1.animate({opacity:0}); });

ge2.animate({fill: "#700014", stroke: "#000", "stroke-width": 30, "stroke-opacity": 0.5,opacity:1.0}, 250,
function(){ ge2.animate({opacity:0}); });

ge3.animate({fill: "#700014", stroke: "#000", "stroke-width": 30, "stroke-opacity": 0.5,opacity:1.0}, 160,
function(){ ge3.animate({opacity:0}); });

}

forked from: GYAOS_sample

#hp{margin:0 auto;width:240px;height:20px;text-align:center;}

#main{margin:0 auto;width:240px;height:320px;border:1px solid #000;}

#main p{font-size:5em;text-align:center;margin:0 auto;}

#atc{margin:0 auto;background:#FF0000;width:100px; height:30px;text-align:center;cursor:pointer;}

#monster{width:240px;height:320px;background:url("http://www.cyberagent.co.jp/img/media/kayac/monster03.png"); position:absolute;}
#bg{width:240px;height:320px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/raion2.png"); position:absolute;}

#cmd_area{ width:240px;height:50px;margin:0 auto; border:1px solid #ccc;}

#alert_ft{ width:138px; height:138px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/fight.png");
margin:100px 0 0 51px;display:none;position:absolute;z-index:600;}

#alert_win{ width:138px; height:138px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/win.png");
margin:100px 0 0 51px;display:none;position:absolute;z-index:600;}

#alert_lose{ width:138px; height:138px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/lose.png");
margin:100px 0 0 51px;display:none;position:absolute;z-index:600;}

#active_cmd{
width:46px;
height:46px;
margin-top:274px;
border:0px solid #ccc;
position:absolute;
z-index:700;

}

#attack{
 width:46px; height:46px;
 background:url("http://aomlab.dip.jp/~aom/gyaos/image/attack.png") no-repeat;
 float:left;
}

#scratche{
 width:46px;
 height:46px;
 background:url("http://aomlab.dip.jp/~aom/gyaos/image/scratche.png") no-repeat;
 float:left;
}

#explosion{

width:46px;
 height:46px;
 background:url("http://aomlab.dip.jp/~aom/gyaos/image/explosion.png") no-repeat;
 float:left;

}
#escape{

width:46px;
 height:46px;
 background:url("http://aomlab.dip.jp/~aom/gyaos/image/escape.png") no-repeat;
 float:left;

}

#a_attack{ width:46px; height:46px; background:url("http://aomlab.dip.jp/~aom/gyaos/image/attack.png") no-repeat;display:none;}
#a_scratche{ width:46px;height:46px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/scratche.png") no-repeat;display:none;}
#a_explosion{width:46px;height:46px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/explosion.png") no-repeat;display:none;}
#a_escape{width:46px;height:46px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/escape.png") no-repeat;display:none;}

#cleaner{ clean:both;}

#hpbar{

width:100px;
height:15px;
border:1px solid #ccc;
background-color:#ff1e0c;

}

#atk{

width:10px;
height:15px;
background-color:#fff;

}

■マニュアルまず、メニューからコマンドアイコンを選んでください。次に表示されたアイコンをクリックし、アタッカーを「黄色、緑、赤」の領域に合わせてクリックしてください。領域の狭い赤が一番威力が高いです。技は3つあります。１アタック　２スクラッチ　　３グラビティ　エクスプロージョン威力の高い技ほど、アタッカーを合わせるのが難しくなります。オススメは3番です。ネーミングセンスは人それぞれだと思います。敵のHPバーの下に表示されている5つのランプがそろうと攻撃してきます。倒される前に倒しましょう！ゲームとしては未完成です。すみません自分の環境では、IEでも動作してたのですが、jsdo.itにアップしたら動かなくなりました。IEの人は他のブラウザで見てください。 ■こんせぷと IE9がSVG形式をサポートしたことや、HTML5ではHTMLの形式中にSVGを直接記述することができるようになるなど、SVGは注目の技術だと思います。そこで今回は、SVGを描画できるjavascriptライブラリ「Raphael」を使って作るということを目標にしました。ライブラリを使えば、ものすごく簡単に描画やアニメーションが利用できました。IE9では、SVG単体でのアニメーションはサポートしないみたいなので、ライブラリを使うのが良さそうです。 ■感想ゲームを作るという体験が無かったので、どんな風に作ればよいか戸惑いましたが、なんとかそれなりの形になったと思います。raphaelの情報が少なくて、手探り状態でしたが、アニメーションなどのサンプルを見てると胸がときめきました。ソース読んで頑張ることにします。jsdo.itを使ったのが始めてでしたが、他の方のアイデアやソースコードが見られることでとても刺激になりました。WEB素晴らしい// forked from Tomo's "GYAOS_sample" http://jsdo.it/Tomo/rQ0z var hpMax=120; var hp=hpMax; //raphael paper var paper; //ゲームの状態 var status; //味方パラメータ var u_hpMax=100; var u_hp=u_hpMax; //enemy lifepoint var atk=10; //attack point var lv1_atkp; var lv2_atkp; var lv3_atkp; var atk_pat; var pe1,pe1_a,pe1_b,pe1_c,pe1_d,pe1_e; var ge1,ge2,ge3; //敵パラメータ var e_hpMax=100; var e_hp=100; //enemy lifepoint var e_atk=10; var ehp; $(function(){ var off = $("#main").offset(); paper = Raphael(off.left, off.top, 240, 320); //見方のＨＰ表示 var r_bg = paper.rect(10, 30, 100, 8); r_bg.attr({fill:"#fff",stroke:"#d9d9d9",opacity:1.0}); var uhp = paper.rect(10, 30, 100, 8); uhp.attr({fill:"#ff1e0c",stroke:"#ff1e0c",opacity:1.0}); //敵のＨＰ表示 var ehp_bg = paper.rect(125, 30, 100, 8); ehp_bg.attr({fill:"#fff",stroke:"#d9d9d9",opacity:1.0}); ehp = paper.rect(125, 30, 100, 8); ehp.attr({fill:"#231ce0",stroke:"#231ce0",opacity:1.0}); //敵のATPバー(5つで行動できる。速さはパラメータから) var atp1 = paper.circle(130, 49, 5); atp1.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7}); var atp2 = paper.circle(150, 49, 5); atp2.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7}); var atp3 = paper.circle(170, 49, 5); atp3.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7}); var atp4 = paper.circle(190, 49, 5); atp4.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7}); var atp5 = paper.circle(210, 49, 5); atp5.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7}); //アタッカー表示(パターンは、攻撃の種類による) var attacker = paper.rect(80, 280, 150, 25); attacker.attr({fill:"#c9a466",stroke:"#a17b3d",opacity:0.8}); //var atk_bt = paper.circle(225, 292, 10); //atk_bt.attr({fill:"#ddd",stroke:"#dbdbdb",opacity:0.8}); var atk_sign = paper.rect(80, 280, 1,25); atk_sign.attr({fill:"#000030",stroke:"#000030",opacity:0.8}); var atk_lv1 = paper.rect(130, 282, 50, 22); atk_lv1.attr({fill:"#ffeb00",stroke:"#ffeb00",opacity:0.6}); var atk_lv2 = paper.rect(180, 282, 30, 22); atk_lv2.attr({fill:"#4da619",stroke:"#4da619",opacity:0.6}); var atk_lv3 = paper.rect(210, 282, 15, 22); atk_lv3.attr({fill:"#c40026",stroke:"#c40026",opacity:0.6}); //攻撃エフェクト(パンチ) pe1 = paper.circle(150, 160, 10).attr({opacity:0}); pe1_a = paper.circle(135,150,8).attr({opacity:0}); pe1_b = paper.circle(165,170,8).attr({opacity:0}); pe1_c = paper.circle(135,170,8).attr({opacity:0}); pe1_d = paper.circle(165,150,8).attr({opacity:0}); pe1_e = paper.circle(140,150,8).attr({opacity:0}); pe2 = paper.circle(50, 120, 10); pe2.attr({opacity:0}); pe3 = paper.circle(60, 160, 30); pe3.attr({opacity:0}); //攻撃エフェクト(explosion) ge1 = paper.circle(150, 160, 30); ge1.attr({opacity:0}); ge2 = paper.circle(50, 120, 10); ge2.attr({opacity:0}); ge3 = paper.circle(60, 160, 30); ge3.attr({opacity:0}); atp_num = 1; e_action = setInterval(function(){ if(atp_num == 1){ atp1.animate({fill:"#ffb299",stroke:"#ffb299",opacity:1.0},200); }else if(atp_num == 2){ atp2.animate({fill:"#ffa591",stroke:"#ffa591",opacity:1.0},200); }else if(atp_num == 3){ atp3.animate({fill:"#ff7c5b",stroke:"#ff7c5b",opacity:1.0},200); }else if(atp_num == 4){ atp4.animate({fill:"#ff5935",stroke:"#ff5935",opacity:1.0},200); }else if(atp_num == 5){ u_hp -= e_atk; atp5.animate({fill:"#ff3a07",stroke:"#ff3a07",opacity:1.0},200); if(u_hp>0){ uhp.animate({opacity:1,width:u_hp},1000); }else{ uhp.animate({opacity:1,width:u_hp},1000); $("#alert_lose").slideDown("slow",function(){ $("#alert_lose").fadeOut("slow"); }); clearInterval(e_action); status = 2; } }else if(atp_num == 6){ atp1.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200); atp2.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200); atp3.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200); atp4.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200); atp5.animate({fill:"#ddd",stroke:"#dbdbdb",opacity:0.7},200); } if(atp_num<6){ atp_num++; }else{ atp_num = 1; } },700); $("#stop_ea").click(function(){ clearInterval(e_action); }); var sum = 100; $("#test_hp").click(function(){ e_hp -= atk; if(e_hp>0){ $("#hp").text(e_hp+"/"+e_hpMax); $("#monster").fadeOut(10).delay(80).fadeIn(10).fadeOut(10).delay(80).fadeIn(10); ehp.animate({opacity:1,width:e_hp},1000); }else{ ehp.animate({opacity:1,width:e_hp},1000); $("#hp").text("0/"+e_hpMax); $("#alert_win").slideDown("slow",function(){ $("#alert_win").fadeOut("slow"); }); } }); $("#hp").text(hp+"/"+hpMax); $("#alert_ft").slideDown("slow",function(){ $("#alert_ft").fadeOut("slow"); }); $("#atc").click(function(){ var r = Math.floor(Math.random() * 10)+10; hp-=r; if(hp>0){ $("#hp").text(hp+"/"+hpMax); $("#monster").fadeOut(10).delay(80).fadeIn(10).fadeOut(10).delay(80).fadeIn(10); }else{ //$("#main").html("<p>win</p>"); $("#hp").text("0/"+hpMax); $("#alert_win").slideDown("slow",function(){ $("#alert_win").fadeOut("slow"); }); } }); var lv1st = 0; var lv2st = 0; var lv3st = 0; atk_label = paper.text(80,310,"アタック"); atk_label.attr({"fill": "#fff","font-size":"11px","text-anchor":"start",opacity:0}); sct_label = paper.text(80,310,"スクラッチ"); sct_label.attr({"fill": "#fff","font-size":"11px","text-anchor":"start",opacity:0}); ge_label = paper.text(80,310,"グラビティ　エクスプロージョン"); ge_label.attr({"fill": "#fff","font-size":"11px","text-anchor":"start",opacity:0}); $("#attack").click(function(){ atk_pat = 1; //attack atk_label.animate({opacity:1.0},100); sct_label.animate({opacity:0},100); ge_label.animate({opacity:0},100); $("#active_cmd #a_attack").show();$("#active_cmd #a_scratche").hide(); $("#active_cmd #a_explosion").hide();$("#active_cmd #a_escape").hide(); atk_lv1.animate({width:50},100); atk_lv2.animate({width:30},100); atk_lv3.animate({width:15},100); lv1st = 50; lv2st = 30; lv3st = 15; lv1_atkp = 1; lv2_atkp = 3; lv3_atkp = 5; }); $("#scratche").click(function(){ atk_pat = 2; //scratche sct_label.animate({opacity:1.0},100); atk_label.animate({opacity:0},100); ge_label.animate({opacity:0},100); $("#active_cmd #a_attack").hide();$("#active_cmd #a_scratche").show(); $("#active_cmd #a_explosion").hide();$("#active_cmd #a_escape").hide(); atk_lv1.animate({width:45},100); atk_lv2.animate({width:25},100); atk_lv3.animate({width:10},100); lv1st = 45; lv2st = 25; lv3st = 10; lv1_atkp = 2; lv2_atkp = 4; lv3_atkp = 6; }); $("#explosion").click(function(){ atk_pat = 3; //explosion sct_label.animate({opacity:0},100); atk_label.animate({opacity:0},100); ge_label.animate({opacity:1.0},100); $("#active_cmd #a_attack").hide();$("#active_cmd #a_scratche").hide(); $("#active_cmd #a_explosion").show();$("#active_cmd #a_escape").hide(); atk_lv1.animate({width:30},100); atk_lv2.animate({width:20},100); atk_lv3.animate({width:5},100); lv1st = 30; lv2st = 20; lv3st = 5; lv1_atkp = 3; lv2_atkp = 7; lv3_atkp = 12; }); $("#escape").click(function(){ $("#active_cmd #a_attack").hide();$("#active_cmd #a_scratche").hide(); $("#active_cmd #a_explosion").hide();$("#active_cmd #a_escape").show(); atk_lv1.animate({width:50},100); atk_lv2.animate({width:30},100); atk_lv3.animate({width:15},100); lv1st = 50; lv2st = 30; lv3st = 15; }); var moveMax = 150; var movepx = 0; var sign_sts = 0; //0は待機中 //1は動作中 uname = paper.text(15, 15, "たんぽぽライオン"); uname.attr({"fill": "#ffffff","font-size":"12px","text-anchor":"start",opacity:1}); uname = paper.text(155, 15, "Gyaos"); uname.attr({"fill": "#ffffff","font-size":"12px","text-anchor":"start",opacity:1}); miss = paper.text(190,270,"Miss!"); miss.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0}); great = paper.text(190,270,"Great!"); great.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0}); nice = paper.text(190,270,"Nice!"); nice.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0}); bad = paper.text(190,270,"Bad"); bad.attr({"fill": "#ff3333","font-size":"15px","text-anchor":"start",opacity:0}); $(".atkcmd").click(function(){ if(sign_sts == 0){ sign_sts = 1; start_attack = setInterval(function(){ if(movepx<150){ atk_sign.translate(1,0); movepx++; }else{ miss.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ miss.animate({opacity:0},300); }); atk_sign.translate(-150,0); clearInterval(start_attack); movepx = 0; sign_sts = 0; } },6); }else{ //動作中のクリック if(movepx < 50){ miss.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ miss.animate({opacity:0},300);}); }else if(movepx >= 50 && movepx < (50 + lv1st)){ bad.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ bad.animate({opacity:0},300);}); test_attack(lv1_atkp); }else if(movepx > 100 && movepx < (100 + lv2st)){ nice.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ nice.animate({opacity:0},300);}); test_attack(lv2_atkp); }else if(movepx > 130 && movepx < (130 + lv3st)){ great.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ great.animate({opacity:0},300);}); test_attack(lv3_atkp); }else{ miss.animate({"fill": "#ff3333","font-size":"20px",opacity:1.0},100,function(){ miss.animate({opacity:0},300);}); } atk_sign.translate(-movepx,0); clearInterval(start_attack); movepx=0; sign_sts = 0; } }); $(".cmd").hover(function(){ $(this).fadeTo("normal", 0.6); },function(){ $(this).fadeTo("normal", 1.0); }); }); //end script function test_attack(atkp){ e_hp -= atkp; if(e_hp>0){ $("#hp").text(e_hp+"/"+e_hpMax); $("#monster").fadeOut(10).delay(80).fadeIn(10).fadeOut(10).delay(80).fadeIn(10); ehp.animate({opacity:1,width:e_hp},1000); if(atk_pat == 1){ attack_effect_pe(); }else if(atk_pat == 2){ }else if(atk_pat == 3){ attack_effect_ge(); } }else{ ehp.animate({opacity:1,width:e_hp},1000); $("#hp").text("0/"+e_hpMax); $("#alert_win").slideDown("slow",function(){ $("#alert_win").fadeOut("slow"); }); } } function attack_effect_pe(){ pe1.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 20, "stroke-opacity": 0.3,opacity:1.0}, 120, function(){ pe1.animate({opacity:0},100,function(){ pe1_a.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120, function(){ pe1_a.animate({opacity:0}); }); pe1_b.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120, function(){ pe1_b.animate({opacity:0}); }); pe1_c.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120, function(){ pe1_c.animate({opacity:0}); }); pe1_d.animate({fill: "#dddddd", stroke: "#cccccc", "stroke-width": 5, "stroke-opacity": 0.3,opacity:1.0}, 120, function(){ pe1_d.animate({opacity:0}); }); }); }); //pe1_c.animate({fill: "#700014", stroke: "#000",opacity:1.0}, 120, //function(){ pe1.animate({opacity:0}); }); } function attack_effect_ge(){ ge1.animate({fill: "#700014", stroke: "#000", "stroke-width": 20, "stroke-opacity": 0.3,opacity:1.0}, 120, function(){ ge1.animate({opacity:0}); }); ge2.animate({fill: "#700014", stroke: "#000", "stroke-width": 30, "stroke-opacity": 0.5,opacity:1.0}, 250, function(){ ge2.animate({opacity:0}); }); ge3.animate({fill: "#700014", stroke: "#000", "stroke-width": 30, "stroke-opacity": 0.5,opacity:1.0}, 160, function(){ ge3.animate({opacity:0}); }); } <div id="main"> <div id="bg"></div> <div id="monster"></div> <div id="active_cmd"> <div id="a_attack" class="atkcmd"></div> <div id="a_scratche" class="atkcmd"></div> <div id="a_explosion" class="atkcmd"></div> <div id="a_escape" class="atkcmd"></div> </div> <div id="alert_area"> <div id="alert_ft"></div> <div id="alert_win"></div> <div id="alert_lose"></div> </div> </div> <div id="cmd_area"> <div class="cmd" id="attack"></div> <div class="cmd" id="scratche"></div> <div class="cmd" id="explosion"></div> <div class="cmd" id="escape"></div> <div class="cmd" id="cleaner"></div> </div>  <div id="hp"></div>  #hp{margin:0 auto;width:240px;height:20px;text-align:center;} #main{margin:0 auto;width:240px;height:320px;border:1px solid #000;} #main p{font-size:5em;text-align:center;margin:0 auto;} #atc{margin:0 auto;background:#FF0000;width:100px; height:30px;text-align:center;cursor:pointer;} #monster{width:240px;height:320px;background:url("http://www.cyberagent.co.jp/img/media/kayac/monster03.png"); position:absolute;} #bg{width:240px;height:320px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/raion2.png"); position:absolute;} #cmd_area{ width:240px;height:50px;margin:0 auto; border:1px solid #ccc;} #alert_ft{ width:138px; height:138px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/fight.png"); margin:100px 0 0 51px;display:none;position:absolute;z-index:600;} #alert_win{ width:138px; height:138px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/win.png"); margin:100px 0 0 51px;display:none;position:absolute;z-index:600;} #alert_lose{ width:138px; height:138px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/lose.png"); margin:100px 0 0 51px;display:none;position:absolute;z-index:600;} #active_cmd{ width:46px; height:46px; margin-top:274px; border:0px solid #ccc; position:absolute; z-index:700; } #attack{ width:46px; height:46px; background:url("http://aomlab.dip.jp/~aom/gyaos/image/attack.png") no-repeat; float:left; } #scratche{ width:46px; height:46px; background:url("http://aomlab.dip.jp/~aom/gyaos/image/scratche.png") no-repeat; float:left; } #explosion{ width:46px; height:46px; background:url("http://aomlab.dip.jp/~aom/gyaos/image/explosion.png") no-repeat; float:left; } #escape{ width:46px; height:46px; background:url("http://aomlab.dip.jp/~aom/gyaos/image/escape.png") no-repeat; float:left; } #a_attack{ width:46px; height:46px; background:url("http://aomlab.dip.jp/~aom/gyaos/image/attack.png") no-repeat;display:none;} #a_scratche{ width:46px;height:46px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/scratche.png") no-repeat;display:none;} #a_explosion{width:46px;height:46px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/explosion.png") no-repeat;display:none;} #a_escape{width:46px;height:46px;background:url("http://aomlab.dip.jp/~aom/gyaos/image/escape.png") no-repeat;display:none;} #cleaner{ clean:both;} #hpbar{ width:100px; height:15px; border:1px solid #ccc; background-color:#ff1e0c; } #atk{ width:10px; height:15px; background-color:#fff; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/nR21/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/aom.dk/nR21" title="forked from: GYAOS_sample">forked from: GYAOS_sample - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

Favorite by

hoPPen:

html5

forked from: GYAOS_sample

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter

Tags

Favorite by