图像随机发生器与重量/运气

时间:2018-02-04 13:55:44

标签: javascript php

我想知道php是否可以使用类似于此JavaScript代码的运气系统制作图像随机数:

function doSingle() {
  var luck = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    imagesArray = ["tree.png", "wood.png", "tick.png", "logs.png"];
    //These two arrays are rarities, below array is "ssr", super super rare
  var ssrArray = ["mash.jpg", "apples.png", "joji.png", "rap.png"]; 
  lucknumber = Math.floor((Math.random() * luck.length));

  if (lucknumber < 8) {
    function displayImage() {
      var num = Math.floor(Math.random() * ssrArray.length);
      window.canvas.src = ssrArray[num];
    }

    displayImage();
  } else {
    function displayImage() {
      var num = Math.floor(Math.random() * imagesArray.length);
      window.canvas.src = imagesArray[num];
    };

    displayImage();
  }
}

doSingle();

我可以忍受这个,但我更喜欢它是php,因为在JavaScript中,运气只能达到整数10而php是无限的。

有没有办法将其转换为php?

(这是我的PHP代码到目前为止 - 没有运气系统的网站);

<?php
function getImagesFromDir($path) {
    $images = array();
    if ( $img_dir = @opendir($path) ) {
        while ( false !== ($img_file = readdir($img_dir)) ) {
            // checks for gif, jpg, png
            if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) {
                $images[] = $img_file;
            }
        }
        closedir($img_dir);
    }
    return $images;
}

function getRandomFromArray($ar) {
    $num = array_rand($ar);
    return $ar[$num];
}
?>

我想要运气系统的原因是因为我想加重它,所以你不会一直得到超级rares,但是在你点击按钮的时候大约70%的时候都会得到rares。

1 个答案:

答案 0 :(得分:0)

使用如下函数可以简单地在javascript中生成下限和上限之间的随机数:

function random( min, max ){
    return Math.round( ( min + ( Math.random() * ( max - min ) ) ) );
}

所以剩余的代码可能会在javascript中使用该函数进行重新分解 - 未经测试btw但看起来没问题。您可以通过更改输入变量a,b

来设置生成的“运气”数的下限和上限

希望能够了解如果10的限制是个问题,您可以继续使用javascript

function doSingle(a,b){
    var lucknumber=random(a,b);
    var images=[ 'tree.png', 'wood.png', 'tick.png', 'logs.png' ];
    var ssr=[ 'mash.jpg', 'apples.png', 'joji.png', 'rap.png' ];

    var displayImage=function(arr){
        var i=Math.floor( Math.random() * arr.length );
        window.canvas.src = arr[ i ];
    }
    /* perhaps you need to make more conditions here to deal with a large range of `luck` numbers? */
    var arr = lucknumber < 8 ? ssr : images;

    displayImage.call( this, arr );
}
doSingle(0,10);

我看了一下你发布链接的文件 - 看起来画布指的是一个标准的HTML画布元素,所以考虑到这一点我拼凑了这个我希望可能有用的演示。您可以忽略顶部的php函数 - 或者您可以使用它们生成合适的图像数组,如注释代码所示。

javascript在ab之间生成一个随机数 - 在这种情况下a=0b=50 - 如果这低于threshold那么将从super super rare数组

中选择图像
<?php
    function getImages( $dir ){
        return array_values( preg_grep( '@(\.jpg$|\.jpeg$|\.png$|\.gif$)@i', glob( $dir . '/*.*' ) ) );
    }
    function randomImage( $dir ){
        $imgs=getImages( $dir );
        return basename( $imgs[ rand( 0, count( $imgs ) - 1 ) ] );
    }

    /*
        You could use these functions to generate the
        source arrays.

        $dir_std_img='c:/wwwroot/images/std';
        $dir_ssr_img='c:/wwwroot/images/ssr';

        $arr_std=json_encode( randomImage( $dir_std_img ) );
        $arr_ssr=json_encode( randomImage( $dir_ssr_img ) );


    */


?>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Javascript: Luck Generator</title>
        <script>
            /*

            The image names used in the arrays are based upon the images
            within my directory as shown below. Some differ in file 
            extension to those in your original code - these are, afterall,
            just testing images for me.


            C:\wwwroot\images\tmp\lucky > dir /B
            ----------------------------------

            apples.jpg
            joji.png
            logs.jpg
            mash.jpg
            rap.png
            tick.jpg
            tree.jpg
            wood.jpg

            */



            function drawimage( dir, src, i ) {
                /*
                    take selected random image and
                    add to the canvas. In addition
                    add the luck number. Can clearly
                    be simplified by removing code that
                    positions image centrally and adds 
                    the text.
                */
                var canvas=document.getElementById('cnvs');
                var ctx = canvas.getContext('2d');
                var img = new Image();

                img.onload = function() {
                    var px=Math.floor( Math.abs( canvas.width - img.width ) / 2 );
                    var py=Math.floor( Math.abs( canvas.height - img.height ) / 2 );

                    ctx.clearRect( 0, 0, canvas.width, canvas.height );
                    ctx.drawImage( img, px, py );

                    ctx.font='18px calibri';
                    var message='Lucky number: '+i;
                    var text=ctx.measureText( message );
                    ctx.fillText( message, ( ( canvas.width - text.width ) / 2 ), canvas.height - 20 );
                };
                img.src = dir + src;
            }


            function random( min, max ){
                return Math.round( ( min + ( Math.random() * ( max - min ) ) ) );
            }


            function getlucky(a,b,threshold){
                var imgpath='/images/tmp/lucky/';
                var luckynumber=random(a,b);

                var images=['tree.jpg', 'wood.jpg', 'tick.jpg', 'logs.jpg'];
                var ssr=['mash.jpg', 'apples.jpg', 'joji.png', 'rap.png'];

                var displayImage=function( arr ){
                    drawimage.call( this, imgpath, arr[ Math.floor( Math.random() * arr.length ) ], luckynumber );
                }
                var arr = luckynumber <= threshold ? ssr : images;

                displayImage.call( this, arr );
            }





            document.addEventListener( 'DOMContentLoaded',function(){
                document.getElementById( 'bttn' ).addEventListener( 'click', function(){
                    getlucky( 0, 50, 5 );
                }, false );
            },false );
        </script>
        <style>
            canvas{margin:1rem auto;float:none;display:block;}
            input[type='button']{float:none;margin:1rem auto;width:800px;display:block;padding:1rem;}
        </style>
    </head>
    <body>
        <canvas id='cnvs' width=800 height=600></canvas>
        <input id='bttn' type='button' value='Get Lucky' />
        <output></output>
    </body>
</html>

我早就做到了这一点,但橄榄球已经开启,所以这需要一个反击......祝你好运