<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>js连连看</title>

<style>

* {

margin: 0;

padding: 0;

}

html,

body {

width: 100%;

height: 100%;

background: #222;

overflow: hidden;

}

.wrapper {

background-size: 100% 100%;

margin: 10px auto;

position: relative;

/* border: 1px solid #f40;  */

}

.square {

cursor: pointer;

position: absolute;

width: 80px;

height: 80px;

background-size: cover;

}

</style>

</head>

<body>

<div class="wrapper"></div>

<script>

var wrap = document.getElementsByClassName('wrapper')[0];

var rows = 7;   // 创建连连看行数

var cols = 12;  // 创建连连看列数

var type = 24   //选择多少种图片，0-24都可以  看自己心情 数字大种类多  数字小种类少游戏难度更简单

var squareSet = [];    // 生成小方块的数组

var chooseOne = null; //

var chooseTwo = null; //

var Toward = { node: null, up: { row: -1, col: 0 }, right: { row: 0, col: 1 }, down: { row: 1, col: 0 }, left: { row: 0, col: -1 } }

window.onload = function () {

init(); //初始化

}

function init() {

if (rows * cols % 2 != 0) { //判断小方块总数是否为奇数，奇数就不执行

alert('展示数量不能为奇数')  //  弹出提示，阻塞js加载

}

initSquareSet();

}

function initSquareSet() {

// 方块默认长宽都是80px

wrap.style.height = rows * 80 + 'px';   // 外面盒子的总高度

wrap.style.width = cols * 80 + 'px';  // 外面盒子的总宽度

var oDiv = document.createElement('div')

var tmp = createRandomNum();  //生成随机数数组   我的图片名称是0.jpg~24.jpg 函数生成0~24随机数就可以通过字符串拼接动态的选择图片

squareSet = new Array(rows + 2);  // 生成小方块的数组   既有行又有列  我们就要利用for循环生成二维数组 57~60

for (var i = 0; i < squareSet.length; i++) {

squareSet[i] = new Array(cols + 2);

}

for (var i = 1; i <= rows; i++) {  // 生成行数

for (var j = 1; j <= cols; j++) { // 生成列数 同理

var temp = createSquare(tmp.pop(), i, j); // 参数每次取随机数数组的最后一位  i小方块在整体中行的位置j是列的位置   temp接收这个返回的DOM元素

squareSet[i][j] = temp;

wrap.append(temp);

temp.onclick = function () {

if (chooseOne == null || chooseOne.num != this.num) {   // 判断是第一次点击还是第二次 77~81 没有值或者说没有属性的都是第一次点击

chooseOne = this;

} else {

chooseTwo = this;

if (chooseOne != chooseTwo && chooseOne.num == chooseTwo.num ) { //判断第一次和第二次点击不是同一个 并且num值相等  以及是否在路径上可以消除

clearSquare(chooseOne.row, chooseOne.col);

clearSquare(chooseTwo.row, chooseTwo.col);

}

chooseOne = null;

chooseTwo = null;

}

render(); // 点击方块变换样式

}

}

}

}

function createRandomNum() {

var tmp = [] // 存放生成图片是  字符串拼接的数字

对

for (var i = 0; i < rows * cols / 2; i++) {

var num = Math.floor(Math.random() * type)  // 生成0~24的随机数

tmp.push(num);

次  所以push两遍 相当如每次push了相同的一对数，42次 正好84张图片

}

// console.log(tmp)  // 看看生成的数组  可以看到成对的随机数字数组

tmp.sort(function () {

return Math.random() - 0.5  //可以打乱数组

})

// console.log(tmp)  // 看看生成的数组  可以看到已经不成对的随机数字数组

return tmp           // 将数组返回回去

}

function createSquare(num, row, col) {

var temp = document.createElement('div');

temp.classList.add('square');

temp.style.backgroundImage = "url('./src/img/连连看/" + num + ".jpg')";

temp.style.top = row * 80 + 'px'; // 生成方块的位置 96,97

temp.style.left = col * 80 + 'px';

temp.num = num; //设置外汇返佣的随机数属性 到时候可以用来判断属性是否一样来判断是否消除小方块

return temp;   //返回了一个带着属性的DOM元素

}

function render() {

for (var i = 0; i < squareSet.length; i++) {  //做一个样式的切换

for (var j = 0; j < squareSet[i].length; j++) {

if (squareSet[i][j] && squareSet[i][j] == chooseOne) {

squareSet[i][j].style.opacity = '0.5';

} else if (squareSet[i][j]) {

squareSet[i][j].style.opacity = '1';

}

}

}

}

function clearSquare(x, y) {

wrap.removeChild(squareSet[x][y]); // 删除方块

squareSet[x][y] = null;

}

</script>

</body>

</html>

原文链接：https://blog.csdn.net/qq_42040061/article/details/103380903

js消除图片小游戏的更多相关文章

  1. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  2. js实现一个小游戏（飞翔的jj）

    js实现一个小游戏(飞翔的jj) 源代码+素材图片在我的仓库 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

  4. 使用JS实现2048小游戏

    JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...

  5. 原生js做h5小游戏之打砖块

    前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...

  6. JQuery&原生js ——实现剪刀石头布小游戏

    前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...

  7. 一个简单用原生js实现的小游戏----FlappyBird

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...

  8. js实现2048小游戏

    这是学完javascript基础,编写的入门级web小游戏 游戏规则:在玩法规则也非常的简单,一开始方格内会出现2或者4等这两个小数字,玩家只需要上下左右其中一个方向来移动出现的数字,所有的数字就会想 ...

  9. 原生js完成打地鼠小游戏

    :这是首页,有简单模式和地狱模式两种模式进行选择 这是选择完模式之后的游戏界面:30秒一局游戏倒计时,每打中一只老鼠加一分,没砸中减一分,没砸不加不减 首先准备几张图片 html代码: <!-- ...

随机推荐

  1. flask中间件请求流程

    from flask import Flask,session,url_for,request,flash,get_flashed_messages app = Flask(__name__) app ...

  2. FMXUI TEXTVIEW代码设置IMAGEINDEX

    FMXUI作为一个开源的控件,真是DELPHIER的福音,向作者致敬.​TEXTVIEW非常好用,在属性面板中有ImageIndex属性,可以方便设置图标,在实际应用中图标状态需要改变,但在代码设置时 ...

  3. 【PBFT】拜占庭容错

    共识机制堪称区块链的核心.我们知道,EOS.Hyperledger以及Stellar等著名的项目,都采用了BFT(拜占庭容错)共识机制,那么,BFT到底是什么鬼?和其它共识机制相比,又有什么优势和特点 ...

  4. 移动端与pc端的区别 及 ios的 兼容性问题

    前言:这里移动端主要指 hybrid app 中的H5页面.app 中对页面 样式和功能 的需求会更精细一点. 1.适配: 手机端的尺寸多样,3.5英寸的 iPhone4应该是最小的,只要考虑 兼容到 ...

  5. LG1440 求 m 区间内的最小值

    题目描述 一个含有 \(n\) 项的数列 (\(n≤ 2000000\)),求出每一项前的 \(m\) 个数到它这个区间内的最小值.若前面的数不足 \(m\) 项则从第 \(1\) 个数开始,若前面没 ...

  6. Luogu P1478 陶陶摘苹果

    Luogu P1478 陶陶摘苹果(升级版) 题目描述 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2 ...

  7. 使用nsenter进入docker容器后端报错 mesg: ttyname failed: No such file or directory

    通过nsenter 进入到docker容器的后端总是报下面的错,, [root@devdtt ~]# docker inspect -f {{.State.Pid}} mynginx411950 [r ...

  8. MySQL清除表数据而保留表结构TRUNCATE TABLE

    有时候我们会需要清除一个表格中的所有资料.要达到者个目的,一种方式是使用 DROP TABLE 指令,不过这样整个表格就消失,表无法再被用了.另一种方式就是运用 TRUNCATE TABLE 的指令. ...

  9. Shiro那些事儿（一）： Shiro初探

    引言 权限,可以简单的理解成你能干什么,不能干什么.在管理系统中,对权限的设计可以很简单,也可以很复杂.简单点的,基本都是基于角色扮演的方式,比如系统管理员角色可以操作哪些菜单,普通用户角色可以操作哪 ...

  10. Bootstrap 学习笔记2 栅格系统 辅助类下拉框

    辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单