【JavaScript・enchant.js】どのゲームにするか決まったよ！
そろそろ朝型にシフトしたい。
でもモンハンとかブログ更新とかゲームとかいろいろやりたい。
「やりたいことは全部やろう」に矛盾ができて困ってるがちゃまにあですどーもこんばんは。
あっ、寝る時間問わず起きる時間を一定にすればいいのか！今気付いた！！(完全に自己解決)
目覚ましが欲しいな。強力なやつ。
あとは朝スッキリ起きられる方法があれば教えて欲しいです(他力本願)
7分おきにアラームかけても全スルーってどうよ･･･？
「ホコリにかけて」が選ばれちゃいました
先日のこの記事でゲームの企画を書きました。
メンバー全員分が出揃ったので、全２０個からどれを作るか、選考作業を昨日行ったんですね。
結果はこちら。
え、選ばれてるっ！！∑(ﾟДﾟﾉ)ﾉ
すごいざっくりなイメージだけどいいのかな？( ;ﾟ─ﾟ)
きっとみんなでこれから詰めていくんだろうけどさ。
でもまあとにかく。
選ばれたのは素直に嬉しかったです(*･ω･*)
今後の作業について決まったらまたお知らせします。
「ゲームってこうやって作るんだ」という一例になれば幸い。
がんばって作るずら！！
【JavaScript・enchant.js】ゲームの企画をするよ！
モンハンしすぎた！((((( ;ﾟДﾟ)))))
結局企画書あげるの最後になりましたがちゃまにあですどーもこんばんは。
詳しいことはこちら。
このシリーズの記事を順を追ってみていただくと何でこうなったかわかるかと。
読みにくかったので文章だけ打ち直しました。
では早速行きます！！
勇者スポンジ
★概要
悪の帝王アブラギッシュ１２世を倒すべく、勇者が旅に出る。
自分(スポンジの種類)と武器(洗剤)を強化して、現れる敵を倒しつつ悪の根城オイール城を目指す。
★画面
育成画面
ＬＶ概念and取得アイテムで強化。
アイテム合成でのステータス値強化は次の戦闘から、レベルアップによる強化は即時反映。
育成画面も戦闘中と同様に下部にコマンド入力欄とメッセージ欄
戦闘画面
ドラクエ3風（FC版。背景黒地×白字）
名前はプレイヤーに決めてもらっても良いかも。
助っ人は1人。
★その他
マップ移動(自由な、DQ的な)はなし。
ロックマンのワイリーステージくらいのマップ移動はありかと。
出現する敵は各ステージ数種類からランダムで。
レベル上げ要素なんかもあるとよい。
消しカスが降ってくる
★概要
飛んでくる消しカスを左右に避ける。
規定量避けきるとステージクリア。最高得点を競う全ステージクリアを目指す
★画面
正面から飛んでくる消しカス砲を避ける。
移動は左右のみ。(矢印キー)
中心から左の砲台は左に、右の砲台は右に玉を飛ばす。
★その他
ストーリー的には、「混沌とした戦国時代を武器を使わずに平定しようとした漢の物語」みたいな。
初期マリオのようなドット絵が良いかと思います。
アイテム使用しないとクリアできないステージも(アイテムはステージの最初に付与)
私も空を飛びたいの！
★概要
一人前の「空飛ぶホウキ」になるため、ホウキくんの修行が始まる。
ホウキを擬人化する。
規定期間内に能力を上げて、最終的に卒業検定(横スクロールシューティング)をクリアできたらゲームクリア。
エンディングはGOOD、NORMAL、BADの3種。
★画面
卒業検定時の操作性はステータス値によって変化。
規定時間内にゴールすればクリア。
★その他
1ヶ月1コマンド(能力値の上昇1回)で12ヶ月。
能力上昇は規定値＋ランダムで。
イメージとしては絵本のような感じ(数値表示より図示)
ホコリにかけて
★概要
ステージ上にいる仲間の力を借りてゴールを目指すアクションパズルゲーム。
イメージとしては「星のカービィ」に近いかも。
全8ステージ、各ステージにはボス出現。
★画面
ギミックを使ったアクションパズル。
例えばスイッチを押すには自分だけだと重さが足りないから仲間の力を借りる、とか。
敵は倒せない(ボス以外)
★その他
「もう一度あの子に会いたい･･･！」そう考えたホコリくんは旅に出る決意をするのでした。
とか、
「お母さんを助けるためには遠い国にある薬草を取りに行かなければなりません」
的なストーリーはあったほうが良いですね。
こんな感じでございます。
ちなみにどうやって実現するかについてはうっすらとしか考えておりません(笑)
絵が一番時間かかるかもな･･･
【JavaScript・enchant.js】つくあそゲーム勉強会に参加するよ！
モカチーノで至福のひと時を満喫中。
いつも3本くらい買ってやろうと思って店に行くんだけど、なぜか1本しか売ってない。
運がいいのか悪いのか、ちょっぴりもにょもにょしているがちゃまにあですどーもこんばんは。
https://twitter.com/4970chun/status/506769791731138560
との声から、ゲームを共同で作ろうという企画が始まりました。
こんな面白そうなの参加するに決まってるじゃないですか！
今日はその最初のミッション、「企画を10本考えよう！」を早速やっちゃいます！
企画１０本
テーマは「掃除」。
１.雑巾がけ
一筆書きでいかにきれいに掃除できるかを競う。
強制的に前に進んで、使うのは十字キーのみ。
壁に当たったり、同じ所を拭いたら終了。
点数競うも良し、パズル的にステージを攻略していくも良し。
２.king of sweepers
掃除道具を武器にした格ゲー。
３.猫様絶対主義
猫様になって部屋を散らかして主人を困らせる。
つかまって怒られたら終わり。
４.掃除機発明人
パーツを選んで組み合わせて、高性能な掃除機を作る。
５.ほうき万能説
アイテムがほうき１つの脱出ゲーム
６.THE CLEARNING
掃除道具を特殊アイテムにした落ち物パズル。
ほうき→下２列を消す
雑巾→ランダムに数箇所消す
とか。
７.SOUJI
決まった種類のパーツを組み合わせて、見本と同じ形を作るパズルゲーム。
掃除と相似(ただのだじゃれ)
瞬希さんと丸かぶりでやんのー(笑)
８.Ｇの伝説
掃除道具でＧを叩いて倒す。
９.掃除から始まる物語
ある部屋を見知らぬ女の子と一緒に片付けることになった僕。
サウンドノベルでも恋愛シミュレーションでも。
１０.LIKE THE WIND
キキはデッキブラシで飛んだじゃない。
モップでも掃除機でも雑巾でも飛べるはず！
実現可能か、面白いかはまあアレですよね(笑)
他の方の企画にも期待！！
【enchant.js】ドロイドくんもぐらたたきのコードを読み解いてみる
こんだけ稲妻見たの久しぶり
— がちゃまにあ (@gachamania21) July 19, 2014ということで引きこもってましたがちゃまにあですどーもこんばんは。
今日は１日enchant.jsいじり。
集中力がなくてほとんど進んでないけど。
サンプルになっている「ドロイドくんもぐらたたき」について考えてみました。
大体意味はわかるけど
例によって手書きノートを晒します。
これがコード全文。
http://code.9leap.net/内のサンプルより引用しました。
enchant();
//ドロイド君の出現数
maxDroid = 30;
//穴クラスの定義
Pit = Class.create(Sprite,{ //Spriteクラスを継承する
initialize:function(x,y){
enchant.Sprite.call(this,48,48); //Spriteクラスのコンストラクタ呼び出し
this.image = game.assets['mogura.png'];
this.x = x;
this.y = y;
this.addEventListener('enterframe',this.tick); //イベントリスナーを定義
this.addEventListener('touchstart',this.hit); //叩いた場合のイベントリスナーを定義
this.mode = 2; //ドロイド君の出現モードを待つ、からに設定
this.nextMode = 0;
this.waitFor = game.frame+Math.floor(Math.random()*100);
},
tick:function(){ //ドロイド君が出るアニメーションを繰り返す
if(game.frame%2!=0)return; //4フレームごとに実行する
switch(this.mode){
case 0: //穴からドロイド君がでてくる
this.frame++;
if(this.frame>=4){
this.mode=2; //出切ったら、待つモードへ
this.nextMode=1;//待った後に遷移するモードは1(隠れる)
this.waitFor = game.frame+Math.floor(Math.random()*30);
}
break;
case 1://ドロイド君が穴に隠れる
this.frame--;
if(this.frame<=0){
this.mode=2; //出切ったら、待つモードへ
this.nextMode=0;//待った後に遷移するモードは0(出現)
this.waitFor = game.frame+Math.floor(Math.random()*200);
//ドロイド君の最大数を減らす
maxDroid--;
//もしこれ以上ドロイド君は出現しないなら、穴を塞ぐ
if(maxDroid<=0)this.mode=3;
}
break;
case 2://待つ
if(game.frame>this.waitFor){
this.mode = this.nextMode;
}
break;
case 3://なにもしない(この穴からもうドロイド君は出ない)
break;
}
},
hit:function(){ //ドロイド君を殴る
if(this.frame==5)return;//既に殴れた状態だったらなにもしない
if(this.frame>=2){ // ドロイド君が半分以上出ていた場合
this.frame=5; //殴れたドロイド君
this.mode=2; //待ちモードに入る
this.nextMode=1;
this.waitFor = game.frame+10; //待つフレーム数は10で一定
scoreLabel.add(1); //スコアに追加
}
}
});
//ScoreLabelクラスの定義
ScoreLabel = Class.create(Label,{ //Labelクラスを継承する
initialize:function(x,y){
enchant.Label.call(this,"SCORE:0"); //Labelクラスのコンストラクタ呼び出し
this.x=x;
this.y=y;
this.score = 0;
},
add:function(pts){ //スコアを加算
this.score+=pts;
this.text="SCORE:"+this.score; //表示を修正
}
});
window.onload = function(){//初期化
game = new Game(320, 320);
game.preload('mogura.png');//ドロイド君画像を読み込み
game.onload = function(){
//スコアラベルを表示
scoreLabel=new ScoreLabel(5,5);
game.rootScene.addChild(scoreLabel);
//穴を4x4に並べる
for(y=0;y<4;y++){
for(x=0;x<4;x++){
var pit = new Pit(x*48+20,y*48+20);
game.rootScene.addChild(pit);
}
}
}
game.start();
}
コードだけではなくノートとかメモを貼るのは、どういうところに引っかかるか見てもらうため。
どうでもいいような所で躓いたりしてると思うので(笑)
で、今回の疑問。
変数って宣言しなくていいの？？
modeもnextModeもwaitForも、varで宣言してないけど。
「Pit = Class.create(Sprite,{･･･」は、
「var Pit=enchant.Class.create(enchant.Sprite{･･･」の書きかえってことでいいのかな。
あと、ifを使う時って{}でくくらなくていいんでしょうか。breakだからＯＫとかあるの？
うーむ。
まあ大体の仕組みはわかったので(nextModeの役割がわかったときはおおぉ！ってなった)良しとしています。
あとはこれを生かしてコードを書くと。
折角なので画像も作ります。ドット絵。
まずは簡単なゲームを完成させたい！
－－追記－－
わかったことをまるっと書いてないっていう(笑)
むしろここからが本番。
maxDroid=30;
ドロイド君の出現回数を制御。
tickのcase1(穴にもぐるアクション)で減らしてる。
逃げられたら１機ミスみたいな感じ。
function tick
変数modeで状態ごとに指示を出す。
case0＝出現、case1＝潜る、case2＝待機、case3＝出現無効化
フレーム進行での分岐(「if(this.frame>･･･」など)と、変数nextModeを仕込むことで行動を指示。
mode=0のとき
フレームが４以上に進行したらmodeの値を2、nextModeの値を1、waitForの値を「フレーム数+30までの整数」にする。
mode=1のとき
frame--で、出現アクションを逆再生。
maxDroidも減らす。
mode=2のとき
フレームがwaitForの値まで進行するまで待機
nextModeを仕込んであるおかげで、mode=0→mode=2→mode=1をループすることができる。
for(y=0;y<4;y++){･･･Ａ
for(x=0;x<4;x++){･･･Ｂ
Ｂで4つ作ったものを、Ａで4つ作る。
つまり4×4＝16のスプライトを生成。
こんなもんでしょうかね。
【enchant.js】ゲームのスコアを表示する(Labelオブジェクト)
夏バテな予感。
疲れてタウリン3000配合の栄養ドリンク×2本を摂取しているがちゃまにあですどーもこんばんは。
でもさすがに3000を2本はやりすぎな気がしないでもない。
それはさておき、今日もenchant.jsをいじくっております。
でも今日はほぼ進歩なし(=ω=; )
脳みその限界を感じますねえほんとに。
今日わかったのは「点数の加算方法」と「点数の表示(即時反映)」です。
スプライトの生成とかに関してもまたちゃんと記事にしようそうしよう。
書かないと覚えないもんなー
「Label」オブジェクトを使うべし！
とりあえず現状のコードを。
enchant();
window.onload = function() {
game = new Game(320, 320);
game.preload('chara1.png');
game.onload = function() {
for(i=1;i<11;i++){
bear=new Bear();
}
game.score=0;
scorelabel=new Label();
scorelabel.x=10;scorelabel.y=10;
game.rootScene.addChild(scorelabel);
scorelabel.text ="";
}
// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
initialize: function(x, y) { //初期化する
Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
this.image = game.assets['chara1.png'];
this.scale(1.5,1.5);
this.x=Math.floor( Math.random() * 270 );
this.y=Math.floor( Math.random() * 270 );
this.frame = 0;
game.rootScene.addChild(this);
},
//enterframeイベントのリスナーを定義する
onenterframe: function() {
scorelabel.text = "SCORE : "+game.score;
},
//touchendイベントのリスナーを定義する
ontouchend: function() {
this.frame = 3; //泣く
this.waitFor = game.frame+10;
game.score+=50;
this.x=Math.floor( Math.random() * 270 );
this.y=Math.floor( Math.random() * 270 );
}
});
game.start();
}スコア表記に関する記述は注釈をつけてあります。
scorelabel・game.scoreあたりが関係していますかね。
クマをランダムな位置に10体出現させて、クリックしたら50点加算される仕組み。
スコアは左上に表示されるように設定しました。
スプライトを消してるのではなく、クリックされた瞬間にクマの位置を変えて消えたように見せてるだけ。
最初は
this.parentNode.removeChild(this);
を使ってちゃんと消してたんですけど、最後の1体だけ50点加算されない謎発生。
解決できないし、消したのをいい感じに復活させる手段もわからんのでやめました。
まあ常時10体を維持できるし丁度いいのかなーと。
本当はクリックした瞬間にどこかに移動するんじゃなくて、クマがアクションしてから移動するようにしたい(移動を数フレーム遅らせたい)。
色々試したんですけど、やっぱり上手くいかないんですよねー。
tl.delay()とか使うんじゃないのか？
実際どう動くのか、現物を貼りたいんだけどやり方が良くわからん。
はてなブログには貼れないのかな？
また調べときます( ;´-`)
－－追記－－
ここでどう動くのか見られます。
今はクリックしたらクマ動くだけだからね！(=ω=; )
【enchant.js】code.9leapすごい親切！！（チュートリアル編）～JavaScript初心者がenchant.jsを使ってゲームを作りたい話
朝からセミさん全力すぎ。
鳴き声で起こされたがちゃまにあですどーもおはようございます。
昨日から始めたencant.js。
【enchant.js】JavaScript初心者がenchant.jsを使ってゲームを作りたい話(始動編) - がちゃまにあ日報
ちょっとだけいじってみましたよー。
code.9leapというサイトが死ぬほど便利で感動！！
そこでチュートリアルをやってみました。
ローカルでやろうと思ってたけど
JavaScriptでも何でもそうだと思うんだけど、コード書くのはテキストエディタあればいいけど、それを動かして試す環境もいるんですよね。
色々調べてまずは自前で環境設定*1したんですが、ブラウザに上手く反映されない。
【JavaScript】ぎゃぁぁぁできた！(*ﾟ∀ﾟ*) ページ上部に戻るボタン(解決・設置編) - がちゃまにあ日報
このボタンを作るのにJS binというサイトを使ったので試してみたんだけど、やっぱりダメで。
おい、いきなり躓くか！？( ﾟДﾟ; )
とか思ってたところに現れたのがこのサイト。
code.9leap.net
良くみたらenchant.jsのサイトでちゃんと紹介されてんのな(笑)
ここはほんと初心者に優しい。泣ける。
そもそもenchant.jsが画像まで用意してくれてることにも感動したんだけど。
ゲーム作りするときに、０から画像作るのって結構大変なんですよね。
それだけでちょっと挫折しそうになったり(笑)
まずはいくつかのサンプルがあるのでそれをfork(コピーを生成して保存)する。
右にサンプルコード、左に実行画面。
RUNボタンを押せばコードが実行されます。
コードいじる画面はこんな感じ。
これはクマさんを表示しよう、っていうチュートリアルです。
操作の説明なんかいらないほどシンプル。
右のコードいじって、RUNを押すだけです。
実行画面の下に課題みたいなのがあるのも良いですね。
どこをいじったらどうなるかがわかるもの。
私はまだ最後までチュートリアルをやってないんですが(脱線してアレンジしたくなる罠にはまりました)、最後に簡単なゲームのサンプルコードがあるので、一通りやればなんとなく理解できるのではないかと。
あとはひたすら他の人のコードを読んで分析あるのみ！
そんなわけでcode.9leap、なかなかオススメでございます。
ちなみにこれが脱線結果。
enchant();
// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
initialize: function(x, y) { //初期化する
Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
this.image = game.assets['chara1.png'];
this.scale(2,2);
this.x = x;
this.y = y;
this.frame = 0;
game.rootScene.addChild(this);
},
//enterframeイベントのリスナーを定義する
onenterframe: function() {
var p="";
if(this.age % 5 === 0){
p=Math.floor (Math.random () * 30) + 1}
switch(p){
case 1:
this.x=Math.floor( Math.random() * 270 );
this.y=Math.floor( Math.random() * 270 );
this.frame=0;this.opacity=1;
break;
case 5:
this.x=Math.floor( Math.random() * 270 );
this.y=Math.floor( Math.random() * 270 );
this.frame=0;this.opacity=1;
break;
case 8:
this.x=Math.floor( Math.random() * 270 );
this.y=Math.floor( Math.random() * 270 );
this.frame=0;this.opacity=1;
break;
case 9:
this.x=Math.floor( Math.random() * 270 );
this.y=Math.floor( Math.random() * 270 );
this.frame=0;this.opacity=1;
break;
default:
break;
}
},
//touchendイベントのリスナーを定義する
ontouchend: function() {
this.frame = 3; //泣く
score+= 50;
}
});
window.onload = function() {
game = new Game(320, 320);
game.preload('chara1.png');
game.onload = function() {
var score ="0";
bear1 = new Bear(10, 100); // 一人目のクマさん
bear2 = new Bear(40, 110); // 二人目のクマさん
bear3 = new Bear(0, 120); // 三人目のクマさん
}
game.start();
}クマランダム出現
↓
クリック
↓
泣くアクションのまま停止 ←今ここ
↓
消える
クリック時のアクションに「this.tl.delay(10)」とか組み込んでもダメだったんですよね。
enterframeで読み込んじゃってるからなー。うーむ。
1・5・8・9が出て消えるの待つしかないっていうね。
ほんとはswitch使う必要ない。どの数字が出る確率も一緒だから。
わかってたけど「連続してると嫌だ」という小学生的なこだわりでifをやめました(笑)
あとswitch文好きなんですよね、なんとなく。
おお？enchant.jsの仕組みって、ActionScriptに似てるかも？
— がちゃまにあ (@gachamania21) July 15, 2014とかも思ってみたりね。
*1:環境設定って言うほど大袈裟なものじゃなくて、enchant.jsをダウンロードしてフォルダを作り、そこにmain.jsというファイル、img、libというフォルダを同じ階層に作ったりしただけです。結局上手くいかんかったけど。
【enchant.js】JavaScript初心者がenchant.jsを使ってゲームを作りたい話(始動編)
おいただの業務連絡じゃなかったのか。
朝から衝撃的な話を聞いてしまったがちゃまにあですどーもこんにちは。
瞬希 (id:syunki-gt)さんの記事にがっつり影響されました(笑)
「たった5日で何ができるかゲーム」 1日目 その2 ～24パズル～ - 灰色の棚
え、これ4時間でできちゃうの！？うそやん∑(ﾟДﾟﾉ)ﾉ
5日でゲーム1本でもすごいと思ってたのに･･･
こんな記事読んだら作りたくなっちゃうじゃあないですか(笑)
そういえばどこぞでゲーム作ろう記事読んだなーと思ってブクマ探しました。
これ。
enchant.jsでHTML5＋JavaScriptゲーム開発入門（終）：スマホでも動く無限横スクロールアクションのブラウザゲームを作る (1/5) - ＠IT
ふむ、enchant.jsなるものを使うと楽にできるわけですね。なるほどなるほど。
とりあえず読み進めるか。
そもそもenchant.jsってなんぞや？
こんなのらしいです。
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is …
カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。
2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。
オープンソース (MITライセンス) で、無料で利用できます。
ドキュメント・書籍・チュートリアルサイトが充実しています。
たくさんのプラグインで機能を拡張できます。
UEI/ARC を中心としたメンバによって開発・メンテナンスされています。
プログラミング教育のためにも利用されています。
上記ページより引用
ふーん、そうなんだ。
って、これだけでわかるわけもないので、早速チュートリアルを読む。
Let’s start enchant.js | enchant.js - A simple JavaScript framework for creating games and apps.
Game オブジェクトは、ゲーム全体を管理し、動かすシステム、つまりゲームの基本的な機能を提供します。すべてのゲームは、 Game オブジェクトを中心に動作します。
･･･(中略)
Scene オブジェクトは、ひとまとまりになった視覚要素です。ゲームで用いる表示要素の多くを占める Node オブジェクトを束ねることができます。たとえば、スタート画面があるゲームにおいては、ゲームのスタート画面の Scene オブジェクトやプレイ画面の Scene オブジェクトが考えられます。
上記ページより引用
へえぇぇぇ、なるほどねえ･･･
なんてなるわけないですよね(=ω=; )
ぶっちゃけ何言ってるのかさっぱり(笑)
なんすかNodeって。え？え？
でも私めげない！
幸い、ページ下部に具体的にどうすればいいのかコードが書いてあるので、それを参考にやってみようと思います。
作るのはちょっとしたアクションゲーの予定。
モグラたたきみたいなのとか燃えるかなー。
昔なつかし「マリオペイント」の「はえたたき」みたいなのが作りたいです、はい。
続きは夜じゃ！
【JavaScript】ぎゃぁぁぁできた！(*ﾟ∀ﾟ*) ページ上部に戻るボタン(解決・設置編)
むしむしむしむし。
湿度80％の部屋で過ごしているがちゃまにあですどーもこんにちは。
今日は朝から町内会の草刈りに駆り出されてきました。
2時間くらいなんですけどね。ずっとしゃがんでたから腰が痛い。
ついでに足首と股関節も。
整体とか行ったほうがいいのかなー。うーむ。
今日は昨日投げた疑問の解決編です。
元ネタ↓
【JavaScript】上部に戻るボタンを付けたい(疑問編) - がちゃまにあ日報
謎は全て(じゃないけど)解けた･･･！
昨日の時点ではこんな感じ。
<a id="page-top" href="#blog-title">ページトップへ</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var btn = $('#page-top');
btn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
btn.fadeIn();｝
else {
btn.fadeOut();
}
});
btn.click(function () {
$('body,html').animate({scrollTop: 0}, 300);
return false;
});
});
</script>
下にスクロールしたら現れるっていうのはいいんやけど、上に戻っても消えないってのは何でなんだろう？
スクロールの位置を常時観察してるわけじゃないんだろうか。
じゃあどのタイミングでこのfunction実行されるんだろ。謎。
かなり上の方まで戻らないとボタンが消えなかったんですよねー。これが気に食わなくて。
8行目の「if ($(this).scrollTop() > ★)」の★部分を変更すればいいことはわかっていたので、色々いじってついに発見。
あ、この数字pxなのか(超基本)
いや、最初の数字が「100」だったもんだから、てっきり％なのかと…
そんなレベルです私(笑)
適当に数字を入れて調整してたんですが、記事によって高さが違うし、どうせならどのくらいの割合スクロールさせたかで判断したいよねってことで、色々付け加えました。
あと、出てくる動きが単なるフェードインなのもアレだったので変更。
「btn.click～」のところでanimateを使ってくれていたのでこの辺は割とすぐできたかな。
って言ってもここで例示されてるコードの改変だけど。０からはまだきつい。
animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス
よーし、これで完成だべー！！とか思ってニヤニヤしつつ、自分のブログ画面をリロードしてみたんですよ。
そしたらあれ、一瞬ボタンが表示されちゃう･･･？( ﾟДﾟ; )
こんなのやだやだかっこ悪い！
ActionScriptで言う「onClipEvent(load)」*1みたいなヤツ探したんですが、結局よくわからんまま。
仕方ないので路線変更して、「最初CSSでボタンを消しておいて、隠すコードを読み込んだらCSS書き換えてしまおう！」ということに。
ゴリ押し万歳。
最終的にはこんな風になりました。
サイドバー(ＨＴＭＬ)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var btn = $('#page-top');
btn.hide();
/* #page-topのCSSを読み込んで、「visibility」を書き換える */
var c = document.getElementById('page-top');
c.style.visibility = "visible";
/* 記事の高さを変数phに読み込んで、その高さの70％になったらボタンをひょこっと表示 */
var ph=$(document).height();
$(window).scroll(function () {
if ($(this).scrollTop() > ph*0.7) {
$(btn).animate({height: "show", opacity: "show"},"easeOutQuint");
} else {
$(btn).animate({height: "hide", opacity: "hide"},"easeOutQuint");
}
});
btn.click(function () {
$('body,html').animate({scrollTop: 0}, 300);
return false;
});
});
</script>
<a id="page-top" href="#blog-title"><img src="http://f.st-hatena.com/images/fotolife/g/gachamania/20140713/201407131*****.png?1*******"></a>
CSS(関係部分抜粋)
#page-top{
z-index:222222;
position:fixed;
bottom:0px;
right:0px;
visibility:hidden;
}ということで、下まで行くとクマさんがひょこっと現れます。
一応自分とこではちゃんと動いてるんだけどどうでしょうか。
そのうちランダムでいろんな動物が出てくるとか実装しようかな。超無駄だけど(笑)
*1:ページをロードした瞬間実行するよ！的なやつです。脱出ゲーム制作には欠かせない。
