この記事では、主にネイティブjavascriptとCss3を使用して、主要なモバイルアプリケーションでよく見られるターンテーブルゲームを実装する方法を紹介します。実装はさまざまな方法で実装できるため、canvasに精通している場合は、canvasも使用できます。この記事では、jsとcssを使用して主な考慮事項を実現します。複雑さが軽減され、パフォーマンスが向上するため、より優れたソリューションがあれば、いつでも私と連絡を取ることができます。
序文
この記事の技術的なルートは、前の記事で教えたのと同じテクニックを使用して、200行のコードでアイドルピンレH5ミニゲーム（ソースコード付き）を作成します。つまり、独自のdomライブラリを使用して、習得する必要のあるdom操作を簡素化します。知識のポイントは次のとおりです。
css3バックグラウンドグラデーション、変換、遷移
より少ないループの使用
javascriptの基本的なランダムアルゴリズム
ドキュメントフラグメントdocumentFragmentの使用
この記事にはあまり高度なテクノロジーが含まれていないため、重要なのはアイデアです。それでは、実装の紹介を始めましょう。
エフェクト画像
実現アイデア
実現のアイデアは2つの部分に分かれています。最初の部分はcssでターンテーブルの背景を描くことであり、2番目の部分はターンテーブルの回転とjsによる回転のランダム性の実現を実現することです。
1.ターンテーブルの背景を描きます
以下に示すように、背景勾配法を使用して、交互のストライプで扇形を実現します。原則は、半円を描画し、半円に勾配を追加して実現することです。
正方形を半円に変えるCSSを実現するために、border-radiusを使用して次のことを実現します。
width: 150px;
height: 300px;
border-radius: 0 150px 150px 0;
次に、cssの線形勾配を使用して、基本的に小さな扇形の領域を実現できるようにします。
グラデーションのコードは次のとおりです。
background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px);
ファンの形状を実現するには、自然に計算できます。たとえば、ファンの形状が30度の場合、円を形成するには12のファンの形状が必要です。便宜上、より少ないループを使用して次のことを実現します。
.loop(@n) when (@n >= 0) {
.loop(@n - 1);
.piece-@{n} {
transform: rotate(-30deg * (@n + 1));
}
}
もう1つの詳細は、変換の中心点を変更して、各セクターが中心点でレンダリングされるようにし、完全な円を形成できるようにする必要があることです。
transform-origin: left center;
完全なcssはおおよそ次のとおりです。
.piece-wrap {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto auto 173px;
transform-origin: left center;
transition: transform 16s cubic-bezier(0,.47,.31,1.03);
.piece {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 300px;
border-radius: 0 150px 150px 0;
transform-origin: left center;
span {
margin-left: 16px;
margin-top: 20px;
display: inline-block;
color: #fff;
}
&:nth-child(2n) {
background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px);
}
&:nth-child(2n+1) {
background-image: linear-gradient(120deg, #ff5858, #ff5858 75px, transparent 75px);
}
}
.loop(@n) when (@n >= 0) {
.loop(@n - 1);
.piece-@{n} {
transform: rotate(-30deg * (@n + 1));
}
}
.loop(11);
}
2.javascriptはターンテーブルロジックを実装します
ターンテーブルの回転はランダムであるため、開始ボタンをクリックするたびにランダムに角度を生成する必要がありますが、一部のプラットフォームを注意深く分析すると、ターンテーブルは毎回少なくともn回回転した後、ゆっくりと停止し始めることがわかります。ターンテーブルが停止する前に少なくともn回回転するように、ターンテーブルに720度、1080度などの初期角度を付けます。
もう1つの注意点は、回転角度で停止した後のターンテーブルの位置をどのように知るかです。ここに性能上の問題があります。domは極力操作しないように心がけています。データ制御により、毎回ランダムに取得した単位セクター面積の角度とラジアンで停止位置を計算できます。式は次のとおりです。
totalRadis = initRadis + radis * n + radis / 2
totalRadisは回転角度、initRadisは初期角度、radisは扇形の角度、radis / 2は主に位置決めに使用される勝ちの範囲、nはランダムな数値です。次に、nの役割について説明します。
では、ランダムな角度を実現する方法は？普段はランダムな関数を書いてやりたいのですが、勝ち位置をランダムに生成してランダムな角度にするという新しい発想です。ファンの形が30度なので、ファンの形をした賞品エリアが全部で12個あるので、インデックスを付けてください。 0〜11の場合。したがって、上記のnはランダムインデックスであり、指定された範囲を生成するランダムな数値を記述するだけで済みます。
上記の知識を理解した後、初期化データの準備を開始しました。
// 转盘抽奖数据
var wards = ['1元', '2元', '3元', '5元', '再来',
'算法', '0.5元', '0.1元', '0.2元', '0.6元',
'0.5元', '来'];
賞品データをレンダリングするために、ここではDocumentFragmentを使用します。単純なレンダリングには必要ありませんが、後で役立つ場合があります。
// 渲染dom
var fragment = document.createDocumentFragment();
for(var i=0, len = wards.length; i < len; i++) {
var piece = document.createElement('div');
piece.className = 'piece piece-' + i;
piece.innerHTML = '<span>' + wards[i] + '</span>';
fragment.appendChild(piece);
}
$('#piece_wrap')[0].appendChild(fragment);
指定された範囲のランダムな数値を生成する方法：
// 生成从 start到end的随机数
function randomArr(start, end) {
return Math.round(start + Math.random()* (end - start))
}
スタートボタンをクリックすると、ターンテーブルの変形を変更して移動させます。
// 转动逻辑
var radis = 30, // 每个扇形区域的度数
n = randomArr(0, 360/radis), // 计算随机中奖的位置
initRadis = 720, // 初始转动的角度
time = 16 * 1000, // 转动时间
once = true, // 限制一个转动周期只能点击一次
totalRadis = initRadis + radis * n + radis/2; // 转动角度计算公式
$('.start').on('click', function(){
if(once) {
once = false;
$('#piece_wrap').css({
'transform':'rotate(' + totalRadis + 'deg)',
'transition': 'transform 16s cubic-bezier(0,.47,.31,1.03)'
});
setTimeout(function(){
once = true;
alert('恭喜你抽中了' + wards[n] + '!');
$('#piece_wrap').css({
'transform':'rotate(' + 0 + 'deg)',
'transition': 'none'
});
}, time)
}
})
それがコアコードです、それはどうですか、それは非常に単純ですか？実際のケースエフェクトや技術的な交換を体験したい場合、またはよりオリジナルのh5ゲームのソースコードを感じたい場合は、以下の体験に従うことができます
素晴らしいレビュー
リラックス