2

まず、こんにちは。ここに素晴らしいフォーラム/サイトがあります:)

私は週末の間ずっと自分の個人サイトに取り組んできましたが、今、自分のサイトを追加したいこの「ゲーム」のアイデアに行き詰まっています。HTML と CSS についてはよく知っていますが、JS/jQuery についてはまったくの初心者です。

ユーザーの経験から、彼が「ゲーム」で何ができるべきかを説明してみましょう。

ユーザーが 3 つの数字と、新しい数字リスト (11-15) から2 つの追加の数字を選択する場所から 10 の数字があります。これらの選択された番号は、別の div (または何か) に移動します。この時点から、私は PHP で自分の仕事をすることができます。しかし、私はこの部分に完全にこだわっています。私は知っています、私はそれが非常に単純であることを知っていますが、48時間私のサイトをコーディングすることからブレアを凍結する必要があります:D

これらから 5 つの番号を選択します: 1-2-3-4-5-6-7-8-9-10 そこから 2 つの追加の番号を選択します: 11-12-13-14-15

そして、これらの選択された数字は、次のように div で jQuery を使用して表示する必要があります: Normal: 2-3-6-7-8 Extra: 12-14

ユーザーは、選択した番号をクリアすることもできます (異なる番号をまとめて選択したい場合)、および/または 1 つの番号を削除して新しい番号を選択することもできます。5/2 の数字が選択されている場合、他のすべての数字は何らかの方法で無効にする必要があるため、ユーザーは 5/2 を超える数字を選択できません。

また、ユーザーが数字をランダムに選択できると便利です(いくつかのボタンをクリックすると、5 + 2 の数字が自動的に選択されます)。しかし、これがどのように行われるのかわかりませんか？

数字の選択は、おそらくこのようなもので行うことができますか?

//5 numbers
$("#mainNumbers div").click(function) {
var selectedNumber = $(this).text().clone();
$("#selectedMainNumbers").append("<div>"+selectedNumber+"</div>");
}

//2 extra numbers
$("#extraNumbers div").click(function) {
var selectedNumber = $(this).text().clone();
$("#selectedExtraNumbers").append("<div>"+selectedNumber+"</div>");
}

選択をクリアすると、おそらくこのようになりますか？

$("#clearNumbers").click(function) {
    $("#selectedMainNumbers, #selectedExtraNumbers").empty();
    }

それらは大丈夫ですか？または、それらはどういうわけかより良くできたでしょうか。

そして今、私にはわからない部分です。数字の並べ替えはどのように行うべきですか? 配列を使用しますか? たとえば、ユーザーは最初に番号 5 をクリックし、それが #selectedMainNumbers div に追加され、次に 2 を選択して #selectedMainNumbers div にも追加され、現在は 8-3 のように見えますが、番号を数値順にしたいと思いますalwaysであるため、数値は 3 ～ 8 形式にする必要があります。

また、乱数ピッキングはどのように行うべきですか? ユーザーが必要な 5 つの番号を既に選択している場合、番号の選択を無効にするのはどうですか?

ふぅ、長文です。申し訳ありません。そして、ヒントを教えていただければ幸いです..私の脳はatmで機能していないので:/ありがとう。不明な点がある場合は質問してください。

4

2 に答える 2

3

これはどうですか: http://jsfiddle.net/ABetK/ ?

サーバーに送信する場合は、次のフォームを使用します: http://jsfiddle.net/ABetK/1/

編集：

私はすべての質問を読んでいないようです。そのため、私のjsfiddleはuser1610229が望んでいることをすべて実行していません。

Dan Barzilayが私のコードを完成させました: http://jsfiddle.net/Crn45/

于 2012-08-19T17:49:02.150 に答える
1

jsBinデモ

HTML：

  <div id="mainNumbers"></div> 
  <div id="extraNumbers"></div>
  <div id="selected_mainNumbers"></div> 
  <div id="selected_extraNumbers"></div>      
  <br />     <button id="generateNumbers">Generate random numbers</button>      
  <br />     <button id="clearNumbers">Clear selected</button>

CSS：

#mainNumbers, #extraNumbers{
  margin:5px;
  padding:16px;
  background:#345;
}
#mainNumbers div,
#extraNumbers div,
#selected_mainNumbers div,
#selected_extraNumbers div
{
 cursor:pointer;
 display:inline;
 background:#eee;
 padding:5px 10px;
 border-radius:10px;
 margin:3px;
}
#selected_mainNumbers, #selected_extraNumbers{
  margin-top:5px;
  padding:16px;
  height:20px;
  background:#789;
}
.selectedNum{
  opacity:0.5;
}
#selected_mainNumbers div,
#selected_extraNumbers div{
  opacity:1;
  background:gold;
}

jQuery：

// generate buttons with numbers
for(i=1;i<=15;i++){
  var appendWhile= i<=10 ?
  $('#mainNumbers').append('<div>'+ i +'</div>') :
  $('#extraNumbers').append('<div>'+ i +'</div>') ; 
}

// create arrays for selected numbers
var mainNumbers=[], extraNumbers=[];

// function print array ///
function printArray(name, arrName){
    $('#selected_'+name).empty();
    for(a=0;a<arrName.length;a++){
       $('#selected_'+name).append('<div>'+ arrName[a]+'</div>');
    }
}

// select function ////////
function selectNum(clickedElement, name, len){
  var arrName = window[name]; // convert string to var
  var num = parseInt( $(clickedElement).text(), 10 );  
  if( arrName.length < len && $.inArray(num,arrName) == -1  ) {
    arrName.push(num);
    arrName.sort(function(a,b){return a-b;}); // sort numerically
    printArray(name, arrName);
    $(clickedElement).addClass('selectedNum');
  }else{
    $(clickedElement).parent().fadeTo(0,0.3).fadeTo(400,1); // visually alert array is full
  }
}

// remove function ///////////
function removeFromArr(clickedElement,arrName){
  var num = parseInt( $(clickedElement).text(), 10 );
  for(i=0;i<arrName.length;i++){
    if(arrName[i]==num){
       arrName.splice(i,1);
       $(clickedElement).remove(); 
    }
  }
}
// clear function
function clearAll(){
    mainNumbers=[], extraNumbers=[]; // reset arrays
  $('#selected_mainNumbers, #selected_extraNumbers').empty(); // remove selected buttons
  $('.selectedNum').removeClass(); // reset 'selected' states
}

// clicks ////////////////////
$('#mainNumbers, #extraNumbers').on('click','div',function(){
   var len = $(this).parent().attr('id')=='mainNumbers' ? 5 : 2;
   selectNum( $(this), $(this).parent().attr('id'), len );
});

$('#selected_mainNumbers, #selected_extraNumbers').on('click','div',function(){
    var arrName = $(this).parent().attr('id').split('selected_')[1];
    $('#'+arrName).find('div:contains('+$(this).text()+')').removeClass('selectedNum');
    removeFromArr( $(this), window[arrName] );
});

// clear all /////////////////
$('#clearNumbers').click(function(){
   clearAll();
});

// generate random ///////////
$('#generateNumbers').click(function(){
  clearAll();
  
  for(r=0;r<5;r++){
     var n = Math.ceil(Math.random() * 10);
     while ($.inArray(n, mainNumbers) > -1){ // loop until no match found
         n = Math.ceil(Math.random() * 10);
     }  
     mainNumbers[r] = n;
     $('#mainNumbers div').eq(n-1).addClass('selectedNum');
  }
  
  for(rr=0;rr<2;rr++){
     var nn = Math.ceil(Math.random() * (15-10)+10);
     while ($.inArray(nn, extraNumbers) > -1){
         nn = Math.ceil(Math.random() * (15-10)+10);
     }  
     extraNumbers[rr] = nn;
     $('#extraNumbers div').eq(nn-10-1).addClass('selectedNum');
  }
  
   mainNumbers.sort(function(a,b){return a-b;}); // sort array
  extraNumbers.sort(function(a,b){return a-b;}); // sort array
  printArray( 'mainNumbers', mainNumbers );
  printArray('extraNumbers', extraNumbers);
  
});
于 2012-08-19T23:11:17.083 に答える