本文主要是介绍用js实现一个随机翻牌游戏的HTML网页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
个人的一个小作业，仅供参考，希望对你有所帮助。
界面：
图片存储路径与代码存储路径：
代码：
<!DOCTYPE html>
<!-- 消消乐 --><!-- window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），
然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。 -->
<html><head><meta charset="utf-8"><title></title><style>.kid{width: 150px;height: 150px;background-color: #7FFFD4;border: 1px solid black;margin: 10px;float: left;}.par{width: 65%;padding: 10px;border: 1px solid black;float: left;}</style><script>window.onload = function(){//规则：五个背景图，每张图出现两次，随机分配到10个div中var ele = document.getElementById("parent");var imgs = [1,2,3,4,5]; var is = [0,0,0,0,0,0];for(var i = 0; i < 10; i++){var index = getImgIndex(is);console.info(index);ele.innerHTML += "<div id='k"+i+"' class='kid' "+"onclick='look(this.id,"+index+");'></div>";}}var name = 0;var ela;var sum = [0,0,0,0,0,0];function getImgIndex(is){var index = parseInt(Math.random()*5)+1;if(is[index] < 2){is[index]++;} else {index = getImgIndex(is);}return index;}function look(id,index){if(sum[index] < 2) {if(name == 0) {if(sum[index] == 0) {var ele = document.getElementById(id);ela = ele;ele.style="background-image: url(../img/"+index+".png);";name = index;sum[index]++;}}else {if(name == index) {var ele = document.getElementById(id);if(ele !== ela) {ele.style="background-image: url(../img/"+index+".png);";name = 0;ela = null;sum[index]++;}}else {var ele = document.getElementById(id);ele.style="background-image: url(../img/"+index+".png);";setTimeout(function(){ele.style="";ela.style="";sum[name] = 0;name = 0;console.info(ela);ela = null;}, 200);}}}}</script></head><body><div id="parent" class="par"></div></body>
</html>
这篇关于用js实现一个随机翻牌游戏的HTML网页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
