js中如何利用循环数组得到一个随机的图片

Posted 2023-05-01

最近制作的一个小游戏，赛道中的障碍物是通过循环数组随机生成的，另外，赛道的初始高度只有10px，通过追加循环和页面渲染达到了图片中的效果，请问大神要如何实现。求详细代码和注释，本人新手。谢谢啦！

var arr=["1.jpg","2.jpg","3.jpg","4.jpg".......];
var oImg=Math.floor(Math.random()*arr.length) //随机图
img.src="./img/"+arr[oImg]; //img元素得到img文件夹下面的某张图片追问

这个是达到了随机生成图片的效果，如果要让赛车碰撞到障碍物后，触发碰撞的提示，要如何实现呢。

参考技术A 这个图，你不是做出来了么追问

这个是在网上搜的，我们是刚刚才学习了js一个月的小菜鸡，这个星期老师要求自己用js制作一个小游戏，这个游戏代码我有，不过看不懂，所以才想找各位大神详细讲解一下。比如游戏中的障碍是怎么实现随机生成的，用div无法实现障碍和赛车之间的碰撞效果，还有赛道是怎么通过循环，让它不断的可以刷新前面的不同样式的道路的。

如何随机洗牌一个数组

在使用javascript的时候有可能会有随机打乱一个数组的需求，我们可以利用数组的sort方法和Math.random来随机排序

const arr = [1,2,3];

arr.sort(() => 0.5 - Math.random())

console.log(arr)

主要利用了Math.random()生成随机数与0.5的大小比较来排序，如果0.5 - Math.random()大于或等于0，数组中的两个数位置不变，小于0就交换位置。

乍一看这样是达到了随机排序的效果，但是实际上这个排序是不那么随机的。具体分析可以参考这篇文章。

 

一个更好方式是采用Fisher–Yates shuffle算法，在此处的使用方式如下

const arr = [1,2,3,4,5,6]

Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
}
arr.shuffle()

https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array