js消除图片小游戏,效果如下所示:
做了一个简易的消除图片的小游戏,没有连线的规则。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> js连连看& lt;/title>
& lt; style>
* {
保证金:0;
填充:0;
}
超文本标记语言
身体{
宽度:100%;
高度:100%;
背景:# 222;
溢出:隐藏;
}
.wrapper {
background-size: 100% - 100%;
保证金:10 px汽车;
位置:相对;/*边境:1 px固体# f40;*/}
.square {
光标:指针;
位置:绝对的;
宽度:80 px;
身高:80 px;
background-size:封面;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="包装"祝辞& lt;/div>
& lt; script>
var包=document.getElementsByClassName(“包装器”)[0];
var=7行;//创建连连看行数
var关口=12;//创建连连看列数
var type=24//选择多少种图片,0-24都可以看自己心情数字大种类多数字小种类少游戏难度更简单
var squareSet=[];//生成小方块的数组
var chooseOne=零;//var chooseTwo=零;//var向={节点:null,:{行:1、坳:0},右:{行:0,上校:1},:{行:1、坳:0},左:{行:0,上校:1}}
窗口。onload=function () {
init ();//初始化
}
init()函数{
如果(行*关口% 2 !=0){//判断小方块总数是否为奇数,奇数就不执行
alert('展示数量不能为奇数”)//弹出提示,阻塞js加载
}
initSquareSet ();
}
函数initSquareSet () {//方块默认长宽都是80 px
wrap.style。身高=行* 80 +“px”;//外面盒子的总高度
wrap.style。宽度=关口* 80 +“px”;//外面盒子的总宽度
var oDiv=document.createElement (div)
var tmp=createRandomNum ();//生成随机数数组我的图片名称是jpg 0. ~ 24. jpg函数生成0 ~ 24随机数就可以通过字符串拼接动态的选择图片
squareSet=new Array(行+ 2);//生成小方块的数组既有行又有列我们就要利用的循环生成二维数组57 ~ 60
(var=0;我& lt;squareSet.length;我+ +){
squareSet[我]=new Array(关口+ 2);
}
(var i=1;我& lt;=行;我+ +){//生成行数
(var=1;j & lt;=关口;j + +){//生成列数同理
var temp=createSquare (tmp.pop (), i, j);//参数每次取随机数数组的最后一位我小方块在整体中行的位置j是列的位置临时接收这个返回的DOM元素
squareSet[我][j]=temp;
wrap.append(临时);
temp.onclick=function () {
如果(chooseOne==null | | chooseOne。num !=this.num){//判断是第一次点击还是第二次77 ~ 81没有值或者说没有属性的都是第一次点击
chooseOne=;
其他}{
chooseTwo=;
如果(chooseOne !=chooseTwo,,chooseOne。num==chooseTwo。num){//判断第一次和第二次点击不是同一个并且num值相等以及是否在路径上可以消除
clearSquare (chooseOne。行,chooseOne.col);
clearSquare (chooseTwo。行,chooseTwo.col);
}
chooseOne=零;
chooseTwo=零;
}
呈现();//点击方块变换样式
}
}
}
}
函数createRandomNum () {
var tmp=[]//存放生成图片是字符串拼接的数字//行*关口可以算出需要多少张图片然后除因以2为每张图片都是成对出现的即7 * 12=84张图片84/2=41算出有42对
(var=0;我& lt;行*关口/2;我+ +){
var num=Math.floor (math . random() *类型)//生成0 ~ 24的随机数
tmp.push (num);
tmp.push (num);//循环了42次所以推动两遍相当如每次推了相同的一对数,42次正好84张图片
}//console.log (tmp)//看看生成的数组可以看到成对的随机数字数组
tmp。排序(函数(){
返回math . random() - 0.5//可以打乱数组
}）//console.log (tmp)//看看生成的数组可以看到已经不成对的随机数字数组
返回tmp//将数组返回回去
}
函数createSquare (num、行坳){
var temp=document.createElement (div);
temp.classList.add(“广场”);
temp.style。(“backgroundImage=" url。/src/img/连连看/jpg”)“+ num +;
temp.style。=行* 80 +“px”;//生成方块的位置96年,97年
temp.style。左=坳* 80 +“px”;
temp.num=num;//设置小方块的随机数属性到时候可以用来判断属性是否一样来判断是否消除小方块
返回临时;//返回了一个带着属性的DOM元素
}
函数呈现(){
(var=0;我& lt;squareSet.length;我+ +){//做一个样式的切换
(var j=0;j & lt;squareSet[我]. length;j + +) {
如果(squareSet[我][j],,squareSet[我][j]==chooseOne) {
squareSet[我][j] .style。不透明度=' 0.5 ';
}else if (squareSet[我][j]) {
squareSet[我][j] .style。不透明度=' 1 ';
}
}
}
}
函数clearSquare (x, y) {
wrap.removeChild (squareSet [x] [y]);//删除方块
squareSet [x] [y]=零;
}
& lt;/script>
& lt;/body>
& lt;/html>
