个人中心
gpt4 book ai didi

javascript - Javascript 中的内存，但带有分数

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:42:27 25 4
gpt4 key购买 nike

下面的代码存在一些问题。原始代码是由一位名叫 Adam Khoury 的先生编写的，我试图找到他，但我找不到。该代码创建了一个包含字母“A”到“L”的视觉内存游戏。我想修改它以应用于分数。所以“1/4”和 25% 会匹配。或者 '33%' 和 '0.33' 等。

我有点不知所措。我对 javascript 很生疏，虽然我了解大部分正在发生的事情，但我对如何让它工作感到很迷茫。

我的解决方案如下。我添加了一个新数组“memory_array2”，其中包含成对的相应分数/小数/百分比值。我将 memory_array 和 memory_array2 都解析为 memoryFlipTile 函数。这个想法是“显示”第二个数组，但使用第一个数组中的值来匹配相应的对。

我尝试用 val2 替换第 55 行中的“val”，虽然这确实用 array2 替换了棋盘中的值，但它 a) 并排创建它们，b) 即使相应的图 block 被翻转，它们也会不要保持翻转。

我也不太明白memory_values和memory_values.length的作用到底是什么。

我完全理解代码如何在翻转两张牌后清除数组，检查棋盘是否已清除并创建新棋盘，如果不匹配则将卡片翻转回去。

非常感谢您的帮助!

<!DOCTYPE html>
<html>
<head>
<style>
div#memory_board{
    background:#CCC;
    border:#999 1px solid;
    width:795px;
    height:340px;
    padding:10px;
    margin:0px auto;
}
div#memory_board > div{
    background: url(tile_bg.jpg) no-repeat;
    border:#000 1px solid;
    width:90px;
    height:43px;
    float:left;
    margin:10px;
    padding:10px;
    font-size:36px;
    cursor:pointer;
    text-align:center;
}
</style>
<script>
    // Scripted By Adam Khoury in connection with the following video tutorial:
    // http://www.youtube.com/watch?v=c_ohDPWmsM0
    var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
    var memory_array2 = ['13%','0.13','25%','1/4','1/3','0.33','0.7','70%','.5','1/2','1/8','12.5%','2/5','40%','3/4','75%','3/5','0.60','20%','0.20','1/10','10%','30%','0.30'];
    var memory_values = [];
    var memory_tile_ids = [];
    var tiles_flipped = 0;
    Array.prototype.memory_tile_shuffle = function(){
        var i = this.length, j, temp;
        while(--i > 0){
            j = Math.floor(Math.random() * (i+1));
            temp = this[j];
            this[j] = this[i];
            this[i] = temp;
        }
    }
    function newBoard(){
        tiles_flipped = 0;
        var output = '';
        memory_array.memory_tile_shuffle();
        for(var i = 0; i < memory_array.length; i++){
            output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\',\''+memory_array2[i]+'\')"></div>';
        }
        document.getElementById('memory_board').innerHTML = output;
    }
    function memoryFlipTile(tile,val,val2){
        if(tile.innerHTML == "" && memory_values.length < 2){
            tile.style.background = '#FFF';
            tile.innerHTML = val;
            if(memory_values.length == 0){
                memory_values.push(val);
                memory_tile_ids.push(tile.id);
            } else if(memory_values.length == 1){
                memory_values.push(val);
                memory_tile_ids.push(tile.id);
                if(memory_values[0] == memory_values[1]){
                    tiles_flipped += 2;
                    // Clear both arrays
                    memory_values = [];
                    memory_tile_ids = [];
                    // Check to see if the whole board is cleared
                    if(tiles_flipped == memory_array.length){
                        alert("Board cleared... generating new board");
                        document.getElementById('memory_board').innerHTML = "";
                        newBoard();
                    }
                } else {
                    function flip2Back(){
                        // Flip the 2 tiles back over
                        var tile_1 = document.getElementById(memory_tile_ids[0]);
                        var tile_2 = document.getElementById(memory_tile_ids[1]);
                        tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
                        tile_1.innerHTML = "";
                        tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
                        tile_2.innerHTML = "";
                        // Clear both arrays
                        memory_values = [];
                        memory_tile_ids = [];
                    }
                    setTimeout(flip2Back, 700);
                }
            }
        }
    }
</script>
</head>
<body>
<div id="memory_board"></div>
<script>newBoard();</script>
    <p id="test"></p>
</body>
</html>

最佳答案

好的。游戏当前正在做的是比较字符串值，例如 'E'=='E'，但是您正在处理百分比/分数/小数。

您需要找到一种方法将所有这些值转换为一种类型，以便它们可以相互比较。现在这种偏好将是小数点。

现在，我要做的事情很脏，你应该找到更好的方法。我将使用 eval[WARNING MAY BE HARMFUL] 将字符串“3/4”转换为 0.75。

我这样做是因为我很懒，但是您可以通过 / 拆分字符串并将这两部分相互划​​分。

eval('3/4') == '0.75'  //true
eval('3/4') === '0.75' //false

这解决了我们的分数问题。现在进入百分比。此代码将从“50%”转换为 0.5:

parseFloat(('50%')/100.0;  //0.5

我应该只做这个百分比，因此我会在做之前检查每个数字是否是百分比。这给我们留下了这段代码:

function endsWith(str, suffix) { return str.slice(-suffix.length) === suffix }

if(endsWith(memory_values[0], '%')) {
    memory_values[0] = parseFloat(memory_values[0])/100.0;
}
if(endsWith(memory_values[1], '%')) {
    memory_values[1] = parseFloat(memory_values[1])/100.0;
}

现在，我们的 memory_values[0] 和 memory_values[1] 都是分数形式或小数形式。

让我们比较它们(同时评估分数)

if(eval(memory_values[0]) == eval(memory_values[1])){
    ...
}

这是生成的工作代码:http://pastebin.com/cwSjrsBD这是一个网站:https://dl.dropboxusercontent.com/u/182097009/working.html

错误说明:eval('1/3') != '0.33'您需要四舍五入您的数字。

关于javascript - Javascript 中的内存，但带有分数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33199429/

25 4 0
文章推荐： javascript - ES6解构函数参数——命名根对象
文章推荐： html - iOS 视网膜图像大小限制？
文章推荐： iphone - 计算出的应用程序大小在 iOS 中显示不正确
文章推荐： iphone - 当我们持有 UITableViewCell 时将调用哪个方法
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com