$(function(){
var id = "chara"; // ターゲット
var width = 20; // 1コマの幅
var height = 34; // 1コマの高さ
var fps = 15;
var frame = 0;
var max_frame = 4; // 総コマ数
var onceFlg = false;
var interval = 1/fps*1000;
animation = setInterval(intervalEvent, interval);
function intervalEvent(){
$("#"+id).css({
"background-position-x" : -width * frame +"px" // 1コマづつ右にずらしていく
});
frame++;
if(frame>=max_frame){
if(onceFlg) clearInterval( animation );
frame = 0;
};
};
});
1コマづつ横に並べた、横長スプライトシートの場合の例です。
縦に並べた画像の場合は15行目を編集する必要があるので注意。
var xg, yg;
window.addEventListener("devicemotion",device_motion,true);
function device_motion(evt){
// device gravity x,y
xg = Math.floor(evt.accelerationIncludingGravity.x);
yg = Math.floor(evt.accelerationIncludingGravity.y);
};
$(function(){
// preload images
jQuery.preloadImages = function(){
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
};
$.preloadImages("./img/hoge1.png","./img/hoge2.png","./img/hoge3.png");
});
iPhone、iPad、Androidの縦画面・横画面を判別して処理を変更する。
// for Smartphone / Tablet
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('Android') > 0) {
window.onorientationchange = orientCheck; // 画面の向きが変更されたら関数を実行
function orientCheck() {
var orientation = window.orientation;
if(orientation === 0){ // portrait
// ***** 縦画面時の処理 ***** //
} else { // landscape
// ***** 横画面時の処理 ***** //
}
};
orientCheck();
}
要素をアニメーションさせて印象的に見せる「動きのあるメインビジュアル」は以前まで主にFlashが使われていましたが、最近ではJavascriptで実装されているものが増えてきています。Javascriptを利用したアニメーションは、jQueryとEasing Pluginを使うことで比較的簡単に個々の動きをつけることができます。
個々に設定したアニメーションを順番に再生するために、今まで自分はdelay()やコールバックを利用していましたが、Web Designing（2013.03）にjQueryのDeferredオブジェクトを利用して関数を順番に実行する方法が載っていたので処理の流れを確認するためメモを兼ねてコードを自分なりに整理してみました。
個人的に今回のポイントとなるのはjQuery.Deferredとスキップボタンに使用するstop()。
調べてみるとstop()の引数には実は色々使える機能がありました。以下のコードではstop()を利用してアニメーションの最後のコマへとジャンプさせています。
+more read
jQueryを利用して画像を全画面にフィットさせる方法。
cssによるbackground指定ではなく、htmlに記述した画像をフィットさせてz-indexで下に敷く形をとっています。
【html／css】
<img src="./img/XXXXX.jpg" width="100%" height="100%" id="bg" />
#bg {
position: fixed;
z-index: -1;
}
【js】
$(function(){
setSize();
$(window).resize(function(){
setSize();
});
});
function setSize() {
//画像サイズ指定
var imgW = 1000;
var imgH = 650;
//ウィンドウサイズ取得
var winW = $(window).width();
var winH = $(window).height();
var scaleW = winW / imgW;
var scaleH = winH / imgH;
var fixScale = Math.max(scaleW, scaleH);
var setW = imgW * fixScale;
var setH = imgH * fixScale;
var moveX = Math.floor((winW - setW) / 2);
var moveY = Math.floor((winH - setH) / 2);
$('#bg').css({
'width': setW,
'height': setH,
'left' : moveX,
'top' : moveY
});
}
PC, Mac, iPhone, iPad, Androidすべてで動作するクロスプラットフォームなアプリケーションが開発可能な、
話題のHTML5 + JavaScriptベースのゲームエンジン「enchant.js」を使ってみました。
勉強用に、書籍「enchant.js スマートフォンゲーム開発講座（amazonリンク）」を購入したので、写経しつつ、カスタムしつつ進めながら学習のログを残していきます。
今回は、一定時間毎にステージ上にキャラクターを生成し、ステージ上をランダムに走り回るキャラクターをタッチ（クリック）すると消える。というタッチゲームの基本となるようなベースを作成します。
+more read
今更ながら毎回書くことになるので、自分用メモ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="" />
<link rel="stylesheet" href="" media="" />
<script src=""></script>
<title></title>
</head>
<body>
</body>
</html>
大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。
読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。
これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。
イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。
ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。
ソースコードと画像が「全て読み込まれた」というイベントは、javascriptのwindow.onloadで取得できますが、今回はjQueryを利用した書き方になっています。
+more read
このブログの右下に実装している「ページトップに戻る」ボタンは、
ページトップ時には非表示にし、ページを少しスクロールすると出現する仕組みになっています。
jQueryを利用すれば非常にカンタンなのでご紹介します。
<!-- html -->
<div id="pageTop">「ページトップに戻る」ボタン</div>
$(function(){
$(window).scroll(function(){
// 対象までの高さ
var distanceTop = 100;
// 対象に達しているかどうかを判別
if ($(window).scrollTop() > distanceTop) {
// していれば、pageTopをfadeIn
$('#pageTop').fadeIn("slow");
} else {
// していなければ、pageTopをfadeOut
$('#pageTop').fadeOut("slow");
}
});
});
この仕組みはパララックス（視差）効果を利用した縦スクロールサイトなどでは必ず使うと思います。
※仕組み自体は、以前ブログに書いた「jQueryを使った長い縦スクロールページの現在地による制御」とまったく同じなのですが、意外と使える小技なので肝となる部分を抜粋し、分かりやすくシンプルに書き直しました。
