<!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. "||" 在sql中有什么用

    双竖线表示字符串拼接 比如: 'abc' || 'cba' 结果: 'abccba'

  2. 输入流之顶层抽象InputStream

    该类是所有二进制输入流的的抽象父类 类中主要方法解释说明如下 (1)public abstract int read() throws IOException; 该方法是从输入流中读取下一个字节,返回 ...

  3. LDD3 第11章 内核的数据类型

    考虑到可移植性的问题,现代版本的Linux内核的可移植性是非常好的. 在把x86上的代码移植到新的体系架构上时,内核开发人员遇到的若干问题都和不正确的数据类型有关.坚持使用严格的数据类型,并且使用-W ...

  4. 【HDOJ6599】I Love Palindrome String（PAM，manacher）

    题意:给出一个由小写字母组成的长为n的字符串S,定义他的子串[L,R]为周驿东串当且仅当[L,R]为回文串且[L,(L+R)/2]为回文串 求i=[1,n] 所有长度为i的周驿东串的个数 n<= ...

  5. C#版简易RSS阅读器

    C#版简易RSS阅读器.由VB版修改完成,感谢aowind的技术支持! 源代码: using System; using System.Drawing; using System.Collection ...

  6. php获取linux服务器CPU、内存、硬盘使用率的实现代码

    define("MONITORED_IP", "172.16.0.191"); //被监控的服务器IP地址 也就是本机地址 define("DB_SE ...

  7. [CSP-S模拟测试]:画作（BFS+数学）

    题目描述 小$G$的喜欢作画,尤其喜欢仅使用黑白两色作画.画作可以抽象成一个$r\times c$大小的$01$矩阵.现在小$G$构思好了了他的画作,准备动笔开始作画.初始时画布是全白的,他每一次下笔 ...

  8. python中的装饰器基本理论

    装饰器 : 本质上 是一个 函数 原则 : 1,不修改原函数的源代码 2,不修改原函数的调用方式. 装饰器的知识储备 装饰器 = 高阶函数 + 函数嵌套 +闭包 我的理解是,函数名也是一个变量,将函数 ...

  9. STL排序函数

    Qsort,Sort,Stable_sort,Partial_sort,List::sort 参考

  10. Workflow：Workflow 百科

    ylbtech-Workflow:Workflow 百科 工作流(Workflow),指“业务过程的部分或整体在计算机应用环境下的自动化”.是对工作流程及其各操作步骤之间业务规则的抽象.概括描述.在计 ...