找到两个相等的阵列图像

时间:2017-10-15 10:12:29

标签: javascript html css

    <Storyboard x:Name="MyCount" Completed="MyCount_Completed">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="MyProgressBar" Storyboard.TargetProperty="(RangeBase.Value)">
        <DiscreteDoubleKeyFrame KeyTime="{Binding MyStoryboardTimeKeyframeA}" Value="{Binding MyStoryboardValueKeyframeA}"/>
    </DoubleAnimationUsingKeyFrames>

上面是我创建的游戏的代码,如果用户点击随机播放按钮,它会随机播放图像并显示随机图像。但我想创建另一个按钮,如果用户点击它,会出现一条警告消息,说明这两张卡是匹配还是不匹配。

public class MyViewModel : INotifyPropertyChanged
{
    private double _myStoryboardValueKeyframeA;
    public double MyStoryboardValueKeyframeA
    {
        get
        {
            return _myStoryboardValueKeyframeA;
        }
        set
        {
            _myStoryboardValueKeyframeA = value;
            OnPropertyChanged("MyStoryboardValueKeyframeA");
        }
    }

    private TimeSpan _myStoryboardTimeKeyframeA;
    public TimeSpan MyStoryboardTimeKeyframeA
    {
        get
        {
            return _myStoryboardTimeKeyframeA;
        }
        set
        {
            _myStoryboardTimeKeyframeA = value;
            OnPropertyChanged("MyStoryboardTimeKeyframeA");
        }
    }

    protected void OnPropertyChanged(PropertyChangedEventArgs e)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
            handler(this, e);
    }

    public void OnPropertyChanged(string propertyName)
    {
        OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

我已经厌倦了将此代码添加到我的网站中,但它不起作用,只有“不匹配!”的警告消息。我每次点击按钮都会出现。

2 个答案:

答案 0 :(得分:0)

你必须清除你的目标并与JS语法相处。

See here how you declare an array. See here how you call a function by pressing a button.

无论如何,你的函数只会确定你存储的两个字符串是否相等,所以是图像的名称,而不是图像本身。

如果你想这样做,我就不会看到阵列的需要......

答案 1 :(得分:0)

我相信这个例子可以完成你所追求的目标。最终你有两个相同的图像阵列,所以你真的只需要一个。你需要的是来自该单个数组的两个随机值,并测试它们是否是相同的值。所以在这个例子中有一个带有点击监听器的随机播放按钮,它从图像数组中提取两个随机值,在屏幕上加载图像,测试它们是否相同,并在屏幕上提供可视结果。您可以轻松地将结果更改为警报,我只是厌倦了关闭这些窗口。

我添加的CSS并不重要,只是为了让示例看起来更好一些。

var myImages = 
    ["http://fillmurray.com/100/100",
    "http://fillmurray.com/125/125",
    "http://fillmurray.com/150/150"];
var shuffle = document.getElementById('shuffle');
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var result = document.getElementById('result');
var msg = "";

shuffle.onclick = function() {

   var rand1 = myImages[Math.floor(Math.random()*myImages.length)];
   var rand2 = myImages[Math.floor(Math.random()*myImages.length)];

   img1.innerHTML = "<img src='"+rand1+"'/>";
   img2.innerHTML = "<img src='"+rand2+"'/>";
    console.log(rand1 + " " + rand2);
   if (rand1 == rand2) {
     msg = "Images Match!";
   } else {
     msg = "Images Do Not Match!"
   }

   result.innerHTML = msg;
};
.wrapper {
  display: flex;
  justify-content: left;
  align-items: center;
 }
.wrapper div {
  border: 1px solid black;
  min-width: 150px;
  min-height: 150px;
}
<div class="wrapper">
  <div id="img1">&nbsp;</div>
  <div id="img2">&nbsp;</div>
    <button id='shuffle'>Shuffle</button>
</div>
<div id="result"></div>