Elimination の JavaScript ソースコード
|
ゲームのソースコードのダウンロードアドレスを取得するためのJavaScript：クリックしてソースコードをダウンロード
インデックス.html <!doctypehtml> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、user-scalable=いいえ、initial-scale=1.0、maximum-scale=1.0、minimum-scale=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ラッキースター</title> <link rel="スタイルシート" href="./css/index.css?v=1.0.0" rel="外部nofollow" > </head> <本文> <div class="lucky-star" id="luckyStar"> <div class="スコアターゲット"> <p class="score-level">レベル<span id="scoreLevel"></span></p> <p>ターゲット: <span id="scoreTarget"></span></p> </div> <div class="score-current">スコア<span id="scoreCurrent"></span></div> <div class="score-select" id="scoreSelect"></div> <ul class="star-list" id="starList"> </ul> </div> </本文> <script src="./js/countUp.js"></script> <script src="./js/index.js"></script> <script src="./js/resize.js"></script> <スクリプト> 新しいポップスター() </スクリプト> </html> JSファイル
メイン.js
（関数（） {
//グローバル設定 var config = {
tileWidth: .75, //小さな星の幅と高さ tileHeight: .75,
tileSet: [], // 小さな星を格納するための 2 次元配列 tableRows: 10, // 行数 baseScore: 5, // 各小さな星の基本スコア stepScore: 10, // 各小さな星の増分スコア targetScore: 2000, // 目標スコア (初期値は 2000)
el: document.querySelector('#starList'), // 星リスト scoreTarget: document.querySelector('#scoreTarget'), // 目標スコア scoreCurrent: document.querySelector('#scoreCurrent'), // 現在のスコア scoreSelect: document.querySelector('#scoreSelect'), // 選択された星スコア scoreLevel: document.querySelector('#scoreLevel'), // 現在のレベル };
//グローバル計算プロパティ var computed = {
flag: true, //ロック choose: [], //選択されたスターコレクション timer: null,
totalScore: 0, //合計スコア tempTile: null,
level: 1, //現在のレベル番号 (レベルが 1 つ上がるごとに +1、ゲームに失敗するごとに 1)
stepTargetScore: 1000, //レベルをクリアしたときの増分スコア（1000/レベル）
score: 0 //現在の計算スコア };
//ブロックオブジェクト関数Block(number, row, col) {
var tile = document.createElement('li');
タイルの幅 = config.tileWidth;
タイルの高さをconfig.tileHeightに設定します。
タイル番号 = 番号;
tile.row = 行;
タイルの列の幅を揃える
タイルを返す;
}
//エントリ関数 function PopStar() {
新しい PopStar.prototype.init() を返します。
}
//PopStarプロトタイプ PopStar.prototype = {
/**
* ポップスターのエントリー機能 */
初期化: 関数() {
テーブルを初期化します。
},
/**
* 初期化操作 */
initTable: 関数() {
スコアを初期化します。
タイルセットを初期化します。
ブロックを初期化します。
},
/**
* 現在のスコアとターゲットを初期化します */
initScore: 関数() {
新しい CountUp(config.scoreTarget、config.targetScore、config.targetScore).start();
config.scoreCurrent.innerHTML = 計算された合計スコア;
config.scoreLevel.innerHTML = 計算されたレベル;
},
/**
* クリックイベント操作 */
マウスクリック: 関数() {
var tileSet = config.tileSet,
選択 = computed.choose、
ベーススコア = config.baseScore、
ステップスコア = config.stepScore、
el = config.el、
自分 = これ、
len = 長さを選択します。
if (!computed.flag || len <= 1) {
戻る;
}
計算されたフラグ = false;
計算されたtempTile = null;
var スコア = 0;
(var i = 0; i < len; i++) の場合 {
スコア += ベーススコア + i * ステップスコア;
}
新しい CountUp(config.scoreCurrent、computed.totalScore、computed.totalScore += score).start();
(var i = 0; i < len; i++) の場合 {
setTimeout(関数(i) {
tileSet[choose[i].row][choose[i].col] = null;
el.removeChild([i] を選択して)
}, i * 100, i);
}
setTimeout(関数() {
自己を移動します。
//終了を判断する setTimeout(function() {
（self.isFinish()）の場合{
自己をクリアします。
計算された合計スコア >= config.targetScore の場合 {
新しいCountUp(config.scoreTarget, config.targetScore, config.targetScore += (computed.level - 1) * computed
.stepTargetScore)
。始める（）;
新しい CountUp(config.scoreLevel, computed.level, computed.level += 1).start();
alert("優勝おめでとうございます");
console.log("優勝おめでとうございます")
} それ以外 {
config.targetScore = config.scoreTarget = 2000;
計算されたレベル = 計算された合計スコア = 0;
alert("ゲームに失敗しました");
console.log("ゲームに失敗しました")
}
計算されたフラグ = true;
} それ以外 {
選択 = [];
computed.flag = true; //すべてのアクションが完了したらロックを解除します self.mouseOver(computed.tempTile);
}
}, 300 + choose.length * 150);
}, 長さ * 100 を選択します。
},
/**
* 成功または失敗した場合はレベルをクリアします（2次元配列とelの子ノードをクリアします）*/
クリア: 関数() {
var tileSet = config.tileSet,
行数 = タイルセットの長さ、
el = config.el;
var temp = [];
(var i = 行 - 1; i >= 0; i--) {
(var j = tileSet[i].length - 1; j >= 0; j--) {
タイルセット[i][j] === nullの場合{
続く;
}
temp.push(タイルセット[i][j])
タイルセット[i][j] = null;
}
}
(var k = 0; k < temp.length; k++) の場合 {
setTimeout(関数(k) {
el.removeChild(temp[k]);
if(k>=temp.length-1){
setTimeout(関数(k) {
新しい PopStar();
},1000)
}
}, k * 100, k);
}
},
/**
* ゲームは終了しましたか? * @returns {boolean}
*/
isFinish: 関数() {
var tileSet = config.tileSet,
行数 = tileSet.length;
(var i = 0; i < 行; i++) の場合 {
var 行 = tileSet[i].length;
(var j = 0; j < row; j++) の場合 {
var temp = [];
this.checkLink(tileSet[i][j], temp);
（温度長さ＞1）の場合{
false を返します。
}
}
}
true を返します。
},
/**
* 星を消した後の移動操作 */
移動: 関数() {
var 行 = config.tableRows、
タイルセット = config.tileSet;
//下へ移動 for (var i = 0; i < rows; i++) {
var ポインタ = 0; // ポインタは小さな四角形を指します。null に遭遇すると停止し、上の小さな四角形がここに落ちるのを待ちます。 for (var j = 0; j < rows; j++) {
タイルセット[j][i]がnullの場合
if (j !== ポインタ) {
tileSet[ポインタ][i] = tileSet[j][i];
tileSet[j][i].row = ポインター;
タイルセット[j][i] = null;
}
ポインタ++;
}
}
}
//水平方向に移動（一番下の行に空の列があるかどうか）
(var i = 0; i < tileSet[0].length;) の場合 {
タイルセット[0][i] == nullの場合{
(var j = 0; j < 行; j++) {
タイルセット[j].splice(i, 1);
}
続く;
}
私は++;
}
this.refresh()
},
/**
* マウスが移動したときに点滅する操作 * @param obj
*/
マウスオーバー: function(obj) {
if (!computed.flag) { //ロックされた状態では操作は許可されません computed.tempTile = obj;
戻る;
}
this.clearFlicker();
var 選択 = [];
this.checkLink(obj, 選択);
computed.choose = 選択;
（長さ<= 1の場合）{
選択 = [];
戻る;
}
this.flicker(選択);
this.computeScore(選択);
},
/**
* 選択した星のスコアを計算します * @param arr
*/
スコアを計算する: 関数(arr) {
var スコア = 0,
len = 配列の長さ、
ベーススコア = config.baseScore、
ステップスコア = config.stepScore;
(var i = 0; i < len; i++) の場合 {
スコア += ベーススコア + i * ステップスコア
}
（スコア<= 0）の場合{
戻る;
}
計算されたスコア = スコア;
config.scoreSelect.style.opacity = '1';
config.scoreSelect.innerHTML = arr.length + "キャンセル" + score + "分";
setTimeout(関数() {
config.scoreSelect.style.opacity = '0';
}, 1200)
},
/**
* マウスを動かしたときに星のちらつきを削除します */
クリアフリッカー: 関数() {
タイルセットをconfig.tileSetに追加します。
(var i = 0; i < tileSet.length; i++) の場合 {
(var j = 0; j < tileSet[i].length; j++) {
var div = tileSet[i][j];
div === nullの場合{
続く;
}
div.classList.remove("スケール");
}
}
},
/**
* 星がきらめく * @param arr
*/
ちらつき: function(arr) {
(var i = 0; i < arr.length; i++) の場合 {
var div = arr[i];
div.classList.add("スケール");
}
},
/**
* マウスが移動した星が同じ星に接続されているかどうかを確認します。
* @param obj スター
* @param arr 選択
*/
チェックリンク: 関数(obj, arr) {
（オブジェクトがnullの場合）{
戻る;
}
arr.push(obj);
/**
* 左のブロックを、選択した削除可能な星の行に追加できるかどうかを確認します。
* 選択した星は一番左の星であってはなりません。
* 選択した星の左側に星が表示されます。
* 選択した星の左側の星は、選択した星と同じです。
* 選択した星の左側の星は選択されたことがありません */
var tileSet = config.tileSet,
行 = config.tableRows;
if (obj.col > 0 && tileSet[obj.row][obj.col - 1] && tileSet[obj.row][obj.col - 1].number === obj.number && arr.indexOf(
タイルセット[obj.row][obj.col - 1]) === -1) {
this.checkLink(tileSet[obj.row][obj.col - 1], arr);
}
if (obj.col < rows - 1 && tileSet[obj.row][obj.col + 1] && tileSet[obj.row][obj.col + 1].number === obj.number &&
arr.indexOf(タイルセット[obj.row][obj.col + 1]) === -1) {
this.checkLink(tileSet[obj.row][obj.col + 1], arr);
}
if (obj.row < rows - 1 && tileSet[obj.row + 1][obj.col] && tileSet[obj.row + 1][obj.col].number === obj.number &&
arr.indexOf(tileSet[obj.row + 1][obj.col]) === -1) {
this.checkLink(tileSet[obj.row + 1][obj.col], arr);
}
if (obj.row > 0 && tileSet[obj.row - 1][obj.col] && tileSet[obj.row - 1][obj.col].number === obj.number && arr.indexOf(
タイルセット[obj.row - 1][obj.col]) === -1) {
this.checkLink(tileSet[obj.row - 1][obj.col], arr);
}
},
/**
* 2次元配列を初期化する */
initTileSet: 関数() {
var 行 = config.tableRows、
config.tileSet をオーバーライドします。
(var i = 0; i < 行; i++) の場合 {
arr[i] = [];
(var j = 0; j < 行; j++) {
arr[i][j] = [];
}
}
},
/**
* elの子ノードを初期化する */
initBlocks: 関数() {
var tileSet = config.tileSet,
自分 = これ、
el = config.el、
cols = タイルセットの長さ;
(var i = 0; i < cols; i++) の場合 {
var 行 = tileSet[i].length;
(var j = 0; j < 行; j++) {
var tile = this.createBlock(Math.floor(Math.random() * 5), i, j);
tile.onmouseover = 関数() {
self.mouseOver(これ)
};
tile.onclick = 関数() {
自己.mouseClick();
};
tileSet[i][j] = タイル;
el.appendChild(タイル);
}
}
this.refresh()
},
/**
* elの子ノードをレンダリングする */
更新: 関数() {
タイルセットをconfig.tileSetに追加します。
(var i = 0; i < tileSet.length; i++) の場合 {
var 行 = tileSet[i].length;
(var j = 0; j < row; j++) の場合 {
var tile = tileSet[i][j];
タイルが null の場合
続く;
}
タイルの行数を指定します。
タイルの列をjにします。
tile.style.left = tileSet[i][j].col * config.tileWidth + "rem";
tile.style.bottom = tileSet[i][j].row * config.tileHeight + "rem";
tile.style.backgroundImage = "url('./images/" + tileSet[i][j].number + ".png')";
}
}
},
/**
* スター子ノードを作成する関数 * @param number
* @param 行
* @param 列
* @returns {HTML要素}
*/
createBlock: 関数(数値、行、列) {
新しいブロック(番号、行、列)を返します。
},
};
PopStar.prototype.init.prototype = PopStar.prototype;
ウィンドウをポップスターに変換します。
})();
インデックス
（関数（）
{関数 u(a,b,c)
{
var d = document.createElement("li");
d.width=e.tileWidth;d.height=e.tileHeight;
d.数値=a;
d.row=b;d.col=c;dを返す}
関数 m()
{新しいm.prototype.initを返す
}
var e={タイル幅:.75,タイル高さ:.75,タイルセット: [],
表行数:10、基本スコア:5、
ステップスコア:10,
目標スコア:2E3,
el:document.querySelector("#starList"),
スコアターゲット:document.querySelector("#スコアターゲット"),
スコアカレント:document.querySelector("#スコアカレント"),
スコア選択:document.querySelector("#スコア選択"),
スコアレベル:document.querySelector("#スコアレベル")
},
n=!0、t=[]、p=0、r=null、q=1;
m.プロトタイプ={
init:function(){this.initTable()
}
,initTable:関数(){
スコアを初期化します。
タイルセットを初期化します。
this.initBlocks()
}
、
initScore:関数(){
(新しい CountUp(e.scoreTarget、e.targetScore、e.targetScore)) を開始します。
e.scoreCurrent.innerHTML=p;e.scoreLevel.innerHTML=q
},
マウスクリック:関数(){
var a=e.tileSet,b=t,c=e.baseScore,d=e.stepScore,f=e.el,g=this,h=b.length;if(n&&!(1>=h)){
n=!1;r=null;
(var l=0,k=0;)の場合
k<h;k++)l+=c+k*d;(新しいCountUp(e.scoreCurrent,p,p+=l)).start();
(k=0;k<h;k++) の場合
setTimeout(function(c){a[b[c].row][b[c].col]=
ヌル;
f.removeChild(b[c])},100*k,k);
setTimeout(関数(){g.move();
setTimeout(関数()
{g.isfinish（）？（g.clear（）、p> = e.targetscore？（（new countup（e.scoretarget、e.targetscore、e.targetscore+= 1e3*（q-1）））。 u80dc "）、console.log（" \ u606d \ u559c \ u83b7 \ u80dc "））:( e.targetscore = e.scoretarget = 2e3、q = p = 0、alert（" \ u6e38 \ u620f \ u5931 \ u8d25 "） 620f \ u5931 \ u8d25 "）、n =！0）:( b = []、n =！0、g.mouseover（r））}、300+150*b.length）}、100*length）}}、
クリア:関数()
{for(var a=e.tileSet,b=e.el,c=[],
d=a.length-1;0<=d;d--)
(var f=a[d].length-1;0<=f;f--) の場合
null!==a[d][f]&&(c.push(a[d][f]),a[d][f]=null);
(a=0;a<c.length;a++) の場合
setTimeout(関数(a)
{b.removeChild(c[a]);
a>=c.length-1&&setTimeout(function(a){new m},1E3)},100*a,a)},isFinish:function()
{for(var a=e.tileSet,b=a.length,c=0;c<b;c++)
(var d=a[c].length,f=0;f<d;f++) の場合
{var g=[];this.checkLink(a[c][f],g);
1<g.lengthの場合
戻る!1}戻る!0},
移動:関数()
{for(var a=e.tableRows,b=e.tileSet,c=0;
c<a;c++)for(var d=
0、f=0;f<a;f++)null!=b[f][c]&&(f!==d&&(b[d][c]=b[f][c]、b[f][c].row=d、b[f][c]=null)、d++);
c=0;c<b[0].length;の場合
)if(null==b[0][c])
for(f=0;f<a;f++)b[f].splice(c,1);else c++;this.refresh()},
マウスオーバー:function(a){if(n)
{this.clearFlicker();
var b = [];
this.checkLink(a,b);
t=b;1>=b.length||(this.flicker(b),this.computeScore(b))}
そうでなければr=a
},
スコアを計算する:関数(a)
{for(var b=0,c=a.length,d=e.baseScore,f=e.stepScore,g=0;
g<c;g++)b+=d+g*f;
0>=b||(e.scoreSelect.style.opacity="1",e.scoreSelect.innerHTML=a.length+"\u8fde\u6d88 "+
b+"\u5206",setTimeout(関数(){
e.scoreSelect.style.opacity="0"},1200))
},clearFlicker:関数(){
(var a=e.tileSet,b=0;b<a.length;b++) の場合
for(var c=0;c<a[b].length;c++){var d=a[b][c];null!==d&&d.classList.remove("scale")}},flicker:function(a){for(var b=0;b<a.length;b++)a[b].classList.add("scale")
},
チェックリンク:function(a,b){
if(null!==a){
b.push(a);var c=e.tileSet,d=e.tableRows;0<a.col&&c[a.row][a.col-1]&&c[a.row][a.col-1].number===a.number&&-1===b.indexOf(c[a.row][a.col-1])&&this.checkLink(c[a.row][a.col-
1],b);a.col<d-1&&c[a.row][a.col+1]&&c[a.row]
[a.col+1].number===a.number&&-1===b.indexOf(c[a.row][a.col+1])&&this.checkLink(c[a.row][a.col+1],b);a.row<d-1&&c[a.row+1][a.col]&&c[a.row+1][a.col].number===a.number&&-1===b.indexOf(c[a.row+1][a.col])&&this.checkLink(c[a.row+1][a.col],b);0<a.row&&c[a.row-1][a.col]&&c[a.row-1][a.col].number===a.number&&-1===b.indexOf(c[a.row-1][a.col])&&this.checkLink(c[a.row-1][a.col],b)}},
initTileSet:関数(){
(var a=e.tableRows,b=e.tileSet,c=0;c<a;c++){b[c]=[];
(var d = 0;d<a;d++)b[c][d] = []}},
initBlocks:関数()
{
(var a=e.tileSet、b=this、c=e.el、d=a.length、f=0;f<d;f++) の場合
(var g=a[f].length,h=0;h<g;h++){
var l = this.createBlock(Math.floor(5*Math.random()),f,h);
l.onmouseover = function(){b.mouseOver(this)};
l.onclick=関数(){b.mouseClick()};
a[f][h] = l;
c.appendChild(l)}
this.refresh()},
リフレッシュ:関数()
{for(var a=e.tileSet,b=0;b<a.length;b++)
(var c=a[b].length,d=0;d<c;d++) の場合
var f = a [b] [d];
null!=f&&(f.row=b,f.col=d,f.style.left=a[b][d].col*e.tileWidth+"rem",f.style.bottom=
a[b][d].row*e.tileHeight+"rem",f.style.backgroundImage="url('./images/"+a[b][d].number+".png')")
}
}
,createBlock:function(a,b,c){return new u(a,b,c)
}
}
;m.prototype.init.prototype=m.prototype;window.PopStar=m
})();サイズ変更.js
// JavaScript ドキュメント
(関数px2rem(doc, win) {
var docEl = doc.documentElement、
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
再計算 = 関数 () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) 戻り値:
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
/*
* 100 -> html、本文 { フォントサイズ:100px; }
* 750 -> ここでは、レイアウト ページは 750px で、iPhone 6 のデザイン案の幅の 2 倍です。 * 具体的な状況に応じて、この 2 つの値を変更します */
};
doc.addEventListener の場合、戻り値は次のようになります。
// ウィンドウのサイズが変更されたので、win.addEventListener(resizeEvt, recalc, false) を初期化します。
doc.addEventListener('DOMContentLoaded', 再計算, false);
//HTMLが完全に読み込まれていない場合は実行を防止して、正しいページ幅を確保します。setTimeout(function(){
px2rem(doc, win);
}, 200);
})(ドキュメント、ウィンドウ);カウントアップ.js
(関数(ルート、ファクトリー) {
if (typeof define === 'function' && define.amd) {
定義(ファクトリー)
} そうでない場合 (typeof exports === 'object') {
module.exports = factory(require, exports, module);
} それ以外 {
ルートファクトリー
}
}(this, function(require, exports, module) {
/*
カウントアップ.js
@inorganik より
*/
// target = カウントが行われる HTML 要素の ID または以前に選択された HTML 要素の var
// startVal = 開始したい値
// endVal = 到達したい値
// 小数点以下桁数 = 小数点以下の桁数、デフォルトは 0
// 継続時間 = アニメーションの継続時間（秒数）、デフォルトは 2
// options = オプションのオプションオブジェクト（下記参照）
var CountUp = function(ターゲット、開始値、終了値、小数点、期間、オプション) {
var self = this;
self.version = function () { return '1.9.3'; };
// デフォルトオプション
自己オプション = {
useEasing: true, // イージングのオン/オフを切り替える
useGrouping: true, // 1,000,000 対 1000000
セパレータ: ',', // セパレータとして使用する文字
小数点: '.', // 小数点として使用する文字
easingFn: easyOutExpo, // オプションのカスタムイージング関数、デフォルトは Robert Penner の easyOutExpo
formattingFn: formatNumber, // オプションのカスタム書式設定関数、デフォルトは上記の formatNumber
プレフィックス: '', // 結果の前のオプションのテキスト
接尾辞: '', // 結果の後のオプションのテキスト
数字: [] // オプションで0～9のカスタム数字の配列を渡します
};
// 渡されたオプションオブジェクトを使用してデフォルトのオプションを拡張します
if (オプション && typeof オプション === 'オブジェクト') {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[キー] = options[キー];
}
}
}
if (self.options.separator === '') {
self.options.useGrouping = false;
}
それ以外 {
// 区切り文字が文字列であることを確認します (formatNumber はこれを前提としています)
self.options.separator = '' + self.options.separator;
}
// requestAnimationFrame と cancelAnimationFrame が定義されていることを確認する
// ネイティブサポートのないブラウザ用のポリフィル
// オペラエンジニアのエリック・モラー
var lastTime = 0;
var vendors = ['webkit', 'moz', 'ms', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(コールバック、要素) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
最終時刻 = currTime + 呼び出し時刻;
ID を返します。
};
}
アニメーションフレームをキャンセルする場合
window.cancelAnimationFrame = 関数(id) {
タイムアウトをクリアします(id);
};
}
関数formatNumber(num) {
var neg = (数値 < 0)、
x、x1、x2、x3、i、長さ;
num = Math.abs(num).toFixed(self.decimals);
数値 += '';
x = num.split('.');
0 は 0 です。
x2 = x.length > 1 ? self.options.decimal + x[1] : '';
（self.options.useGrouping）の場合{
x3 = '';
(i = 0, len = x1.length; i < len; ++i) の場合 {
(i !== 0 && ((i % 3) === 0)) の場合 {
x3 = self.options.separator + x3;
}
x3 = x1[len - i - 1] + x3;
}
x1 = x3;
}
// オプションの数値置換
if (self.options.numerals.length) {
x1 = x1.replace(/[0-9]/g, 関数(w) {
self.options.numerals[+w]を返します。
})
x2 = x2.replace(/[0-9]/g, 関数(w) {
self.options.numerals[+w]を返します。
})
}
戻り値 (neg ? '-' : '') + self.options.prefix + x1 + x2 + self.options.suffix;
}
// ロバート・ペナーのeaseOutExpo
関数easeOutExpo(t, b, c, d) {
c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b を返します。
}
関数ensureNumber(n) {
戻り値 (typeof n === 'number' && !isNaN(n));
}
自己初期化 = 関数() {
(self.initialized) の場合は true を返します。
自己エラー = '';
self.d = (typeof target === 'string') ? document.getElementById(target) : target;
もし(!self.d) {
self.error = '[CountUp] ターゲットが null または未定義です'
false を返します。
}
self.startVal = Number(startVal);
self.endVal = 数値(endVal);
// エラーチェック
if (ensureNumber(self.startVal) && EnsureNumber(self.endVal)) {
self.decimals = Math.max(0, 小数点 || 0);
self.dec = Math.pow(10, self.decimals);
self.duration = 数値(期間) * 1000 || 2000;
self.countDown = (self.startVal > self.endVal);
自己フレーム値 = 自己開始値;
自己初期化 = true;
true を返します。
}
それ以外 {
self.error = '[CountUp] startVal ('+startVal+') または endVal ('+endVal+') は数値ではありません';
false を返します。
}
};
// ターゲットに値を印刷する
self.printValue = 関数(値) {
var result = self.options.formattingFn(値);
if (self.d.tagName === 'INPUT') {
this.d.value = 結果;
}
そうでない場合 (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
this.d.textContent = 結果;
}
それ以外 {
this.d.innerHTML = 結果;
}
};
self.count = 関数(タイムスタンプ) {
self.startTime がタイムスタンプの場合、
self.timestamp = タイムスタンプ;
var progress = タイムスタンプ - self.startTime;
self.remaining = self.duration - 進捗状況;
// 緩和するかしないか
if (self.options.useEasing) {
（自己カウントダウン）{
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
} それ以外 {
self.frameVal = self.options.easingFn(progress、self.startVal、self.endVal - self.startVal、self.duration);
}
} それ以外 {
（自己カウントダウン）{
self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
} それ以外 {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
}
}
// 最後のフレームで進行が継続時間を超える可能性があるため、endVal を超えないようにしてください
（自己カウントダウン）{
self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
} それ以外 {
self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
}
// 小数点
self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
// 値をフォーマットして印刷する
self.printValue(self.frameVal);
// 続行するかどうか
進捗状況が self.duration 未満の場合
self.rAF = requestAnimationFrame(self.count);
} それ以外 {
コールバックを実装するには、次のようにします。
}
};
// アニメーションを開始する
self.start = 関数(コールバック) {
(!self.initialize()) の場合、戻り値:
self.callback = コールバック;
self.rAF = requestAnimationFrame(self.count);
};
// アニメーションの一時停止/再開を切り替えます
self.pauseResume = 関数() {
一時停止した場合
自己一時停止 = true;
アニメーションフレームをキャンセルします(self.rAF);
} それ以外 {
自己一時停止 = false;
self.startTime を削除します。
自己継続時間 = 自己残り時間;
自己.startVal = 自己.frameVal;
アニメーションフレームをリクエストします。
}
};
// アニメーションを再度実行できるように startVal にリセットします
自己リセット = 関数() {
自己一時停止 = false;
self.startTime を削除します。
自己初期化 = false;
（自己初期化()）の場合{
アニメーションフレームをキャンセルします(self.rAF);
自己のstartValを印刷します。
}
};
// 新しいendValを渡してアニメーションを開始する
self.update = 関数 (newEndVal) {
(!self.initialize()) の場合、戻り値:
新しい終了値 = 数値(新しい終了値);
if (!ensureNumber(newEndVal)) {
self.error = '[CountUp] update() - 新しい endVal は数値ではありません: '+newEndVal;
戻る;
}
自己エラー = '';
if (newEndVal === self.frameVal) 戻り値:
アニメーションフレームをキャンセルします(self.rAF);
自己一時停止 = false;
self.startTime を削除します。
自己.startVal = 自己.frameVal;
自己終了値 = new終了値;
self.countDown = (self.startVal > self.endVal);
self.rAF = requestAnimationFrame(self.count);
};
// 初期化時にstartValをフォーマットする
self.initialize() の場合、self.printValue(self.startVal);
};
CountUp を返します。
}));
インデックス.css
a、本文、ボタン、dd、div、dl、dt、フォーム、h1、h2、h3、h4、h5、h6、入力、ラベル、li、ol、p、span、テーブル、td、テキストエリア、th、tr、ul
{ -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;ボックスのサイズ設定:border-box;
マージン:0;パディング:0;
border:0;-webkit-tap-highlight-color:transparent
}
本文、html{
幅:100%;最小高さ:100%;背景色:#fff;
-webkit-user-select:なし;
-moz-ユーザー選択:なし;
-ms-ユーザー選択:なし;
ユーザー選択:なし
}
体
{カラー:#333;
フォントファミリー:Microsoft YaHei}
h1、h2、h3、h4、h5、h6
{
フォントの太さ:400;
フォントサイズ:100%
}
{
色:#555
}
a,a:ホバー{
テキスト装飾:なし
}
画像{
境界線:なし
}
li、ol、ul{
リストスタイル:なし
}
入力、テキストエリア{
アウトライン:0;
-webkit-外観:なし
}
::-webkit-入力プレースホルダー{
色:#b0b0b0
}
:-moz-プレースホルダー,::-moz-プレースホルダー{
色:#b0b0b0
}
:-ms-入力プレースホルダー{
色:#b0b0b0
}
[v-マント]{
表示:なし
}
.ラッキースター{
位置:固定;
上:0;左:0;幅:100%;
高さ:100%;
背景画像:url(../images/cover.jpg);背景サイズ:カバー;背景繰り返し:繰り返しなし;フォントサイズ:0;
-moz-background-size:カバー;
-o-背景サイズ:カバー
}
.スコアターゲット
{
パディング:0.3rem;高さ:1.5rem;
-webkit-box-pack: 正当化する;
コンテンツ間のスペースを空ける
-moz-box-pack: 正当化する;
-ms-flex-pack: 揃える;
コンテンツの両端揃え:スペース間の
}
.スコア-現在,.スコア-対象{
ディスプレイ:-webkit-box;ディスプレイ:-webkit-flex;ディスプレイ:-moz-box;ディスプレイ:-ms-flexbox;
ディスプレイ:flex;幅:100%;
色:#fff;フォントサイズ:.24rem;
-webkit-box-align:center;
-webkit-align-items:center;
中央揃え
中央揃え
アイテムの位置を中央揃えにする
}
.スコア-現在{
位置:絶対;上部:.3rem;
-webkit-box-orient:垂直;
-webkit-box-direction:normal;
-webkit-flex-direction:列;
-moz-box-orient:垂直;
-moz-box-direction:normal;
-ms-flex-direction:列;
flex-direction:列;
-webkit-box-pack:center;
中央揃えにします。
ボックスパックの中心
フレックスパックの中央に
コンテンツの中央揃え
}
.score-current スパン{
色:#fffc0f;
フォントサイズ:.48rem
}
.スコア選択{
幅:100%;
色:#fff;
テキスト配置:中央;
フォントサイズ:.28rem;不透明度:0;
-webkit-transition:不透明度 1 秒;
-moz-transition:不透明度 1 秒;
-o-transition:不透明度 1 秒;
遷移:不透明度 1秒
}
.スターリスト{
位置:固定;
下:0;左:0;
幅:100%;
高さ:70%}
.star-list li{
位置:絶対;
幅:.75rem;
高さ:.75rem;
境界線:0;
-webkit-border-radius: .16rem; ウェブキットの境界線の半径: .16rem;
-moz-border-radius: 半径.16rem;
境界線の半径:.16rem;
背景サイズ:カバー;
-webkit-transition:left .3s、bottom .3s、-webkit-transform .3s;-moz-transition:transform .3s、left .3s、bottom .3s、-moz-transform .3s;-o-transition:left .3s、bottom .3s、-o-transform .3s;transition:left .3s、bottom .3s、-webkit-transform .3s;transition:transform .3s、left .3s、bottom .3s;transition:transform .3s、left .3s、bottom .3s、-webkit-transform .3s、-moz-transform .3s、-o-transform .3s;
-moz-background-size:カバー;
-o-背景サイズ:カバー
}
.star-list li.scale{
境界線:2px 実線 #bfefff;
-webkit-animation:scale .3s 線形無限交互;
-moz-animation:scale .3s 線形無限交互;
-o-animation:scale .3s linear infinite alternate;animation:scale .3s linear infinite alternate}
.star-list li img{位置:絶対;上:15%;左:15%;幅:70%;高さ:70%
@-webkit-keyframes スケール
0%{-webkit-transform:scale(1);transform:scale(1)
}
に{
-webkit-transform:スケール(.95);
変換:スケール(.95)
}
}
@-moz-keyframes スケール
0%{
-moz-transform:スケール(1);
変換:スケール(1)}
に{
-moz-transform:スケール(.95);
変換:スケール(.95)
}
}
@-o-keyframes スケール{
0%{
-o-変換:スケール(1);
変換:スケール(1)
}
に{
-o-変換:スケール(.95);変換:スケール(.95)
}
}
@keyframesスケール{
0%{
-webkit-transform:スケール(1);
-moz-transform:スケール(1);
-o-変換:スケール(1);
変換:スケール(1)
}
に
{
-webkit-transform:スケール(.95);
-moz-transform:スケール(.95);
-o-変換:スケール(.95);変換:スケール(.95)
}
}.DS_ストア これで、Candy Crush Saga の JavaScript 実装 - ソースコードに関するこの記事は終了です。Candy Crush Saga の JavaScript 実装に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Vue ページレンダリングにおけるキーの適用例チュートリアル
>>: Vueカスタムコンポーネントは双方向バインディングを実装します
推薦する
単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)
この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...
ウェブページの背景色を制御する CSS コード
誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...
MySQL クラスター化インデックスのページ分割原理の分析例
この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...
Vue でメニュー権限制御を実装するためのサンプルコード
バックエンド管理システムで作業している場合、通常、メニュー権限制御に関連する問題に遭遇します。もちろ...
WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します
目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...
Dockerの匿名マウントと名前付きマウントの具体的な使用法
目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...
MySQL インデックスの詳細な説明
目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...
熟練デザイナーの7つの原則（2）：色の使い方
<br />前回の記事：優秀なデザイナーの7つの原則（1）：フォントデザイン 英語 原文...
MySQL 8.0.21.0 コミュニティ エディションのインストール チュートリアル (詳細な図解)
1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...
Linux アカウントのパスワードを変更する詳細な例
個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...
Docker で Jenkins サービスを構築する例
画像をプルする root@EricZhou-MateBookProX: docker pull je...
nginxのデフォルトポートを変更する方法の詳細な説明
まず設定ファイルがどこにあるか調べる nginx.confはどこにありますかこれらのディレクトリを調...
CentOS 6 または CentOS 7 でディスク領域をクリアする方法
以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...
ウェブページのFOUC問題によるウェブページの混乱の解決策
FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...
Nginx で複数のドメイン名がドメインをまたいでアクセスできるようにマップを使用する方法
一般的なNginx構成ではクロスドメインが可能 サーバー{ 11111 を聞いてください。 serv...