0

私の目標の簡単な概要から始めましょう。色ベースのパスワードを作成したいと考えています。より詳細には、150x150 の正方形が 2 行で満たされた 750x150px のボックスがあります。これらの各正方形には、10 色のいずれかがランダムに割り当てられます。目標は、ユーザーがプリセットされているのと同じ順序でこれらの色をクリックすることです。

css と html がビルドされ、各 div の背景色を決定する php が完成しました。私が今抱えている問題は、ユーザーが選択した div (したがって色) とそれらが選択された順序を決定する方法です。

私の目的は、URL にカラー コードを追加することですが、その方法がわかりません。誰かがそれを行う方法や、ユーザーの選択を色で整理する別の方法を説明できますか?

また、別の問題が発生します。各色がランダムに表示されるようにするにはどうすればよいですか? 現在、一部は表示されず、他のものは最終的に 2 つの div になります。

現在、私のドキュメント全体が 1 ページにまとめられているため、div の色の変数をインデックス内の if ステートメントに使用できます。

提案やコードがあれば、助けてください!

index.php:

 <?php "session_start" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>colorlock</title>
 </head>



 <style media="screen" type="text/css">

 <?php


 $background_colors = array(
 "#FFFF00",
 "#FF3399",
 "#FF0000",
 "#990099",
 "#66FFFF",
 "#339900",
 "#000000",
 "#000033",
 "#FFFFCC",
 "#FF3399", 
 );

 $rand_background1 = $background_colors[array_rand($background_colors)];
 $rand_background2 = $background_colors[array_rand($background_colors)];
 $rand_background3 = $background_colors[array_rand($background_colors)];
 $rand_background4 = $background_colors[array_rand($background_colors)];
 $rand_background5 = $background_colors[array_rand($background_colors)];
 $rand_background6 = $background_colors[array_rand($background_colors)];
 $rand_background7 = $background_colors[array_rand($background_colors)];
 $rand_background8 = $background_colors[array_rand($background_colors)];
 $rand_background9 = $background_colors[array_rand($background_colors)];
 $rand_background10 = $background_colors[array_rand($background_colors)];


 ?>  

  #full {  
  height: 300px;
  width: 750px;

 } 



 #boxone1 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background1?>; 
 float: left;
 } 

 #boxone2 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background2?>; 
 float: left;
 } 
 #boxone3 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background3?>; 
 float: left;
 } 
 #boxone4 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background4?>; 
 float: left;
 } 
 #boxone5 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background5?>; 
 float: left;
 } 


 #boxtwo1 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background6?>; 
 float: left;
 } 

 #boxtwo2 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background7?>; 
 float: left;
 } 
 #boxtwo3 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background8?>; 
 float: left;
 } 
 #boxtwo4 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background9?>; 
 float: left;
 } 
 #boxtwo5 {  
 height: 150px;
 width: 150px;
 background: <?=$rand_background10?>; 
 float: left;
 } 

 </style>






  <body>

  <div id="full">

  <div id="boxone1" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxone2" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxone3" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxone4" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxone5" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxtwo1" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxtwo2" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxtwo3" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxtwo4" onclick="window.location='?name='+this.id" style=""></div>

  <div id="boxtwo5" onclick="window.location='?name='+this.id" style=""></div>
  </div>
  </div>


  <?php

  if( $rand_background5 == $rand_background6)
{
  echo ("that was lucky!");
}
  else 
  {
  echo ("that was expected!");
  }

  ?>

  </body>
  </html>
4

1 に答える 1

1

URLのクリックを具体的に追跡する必要がありますか？そうでない場合は、JSアレイで進行状況をサイレントに追跡することをお勧めします

var sequence = [];
$('#full > div').on('click', function() {
    sequence.push($(this).attr('id'));
});

次に、3回クリックすると、sequence配列に3つのエントリ（DIVの3つのID）が作成されます。

各色が1回だけ出力されるようにするための秘訣は、配列からランダムなエントリを引き出すだけでなく、後でそれを配列から削除して、再度選択できないようにすることです。

後でcolors配列を参照する必要がある場合は、おそらく最初にそのコピーを取りたいと思うでしょう。

$cols = array('#f00', '#00f', '#0f0', '#d70');
function getRandomColour() {
    global $cols;
    $num_cols = count($cols);
    $rand = array_rand($cols);
    $rand_col = $cols[$rand];
    echo $rand_col;
    unset($cols[$rand]);
}

echo getRandomColour();
于 2012-07-05T01:14:35.530 に答える