<!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. 调试web worker （动态生成的worker）

    1.在worker.js源码文件中 写下debugger关键词 2. F12打开控制台,重新刷新页面,加载worker.js文件(注意之前的缓存,chrome推荐使用 ctrl + F5 刷新) 3. ...

  2. linux 下启动tomcat 时没有执行权限

    原因: 没有权限 解决 : chmod 777 *.sh Linux下启动tomcat

  3. linux 正则表达式与实践

    正则表达式基础 准备 (1)alias grep='grep --color=auto' 易于显示 (2)LC_ALL=C,字符集,设置环境变量,字符顺序 基础正则 1)^word  匹配以Word开 ...

  4. Sqlachemy的警告SAWarning: The IN-predicate on "sns_object.BIZ_ID" was invoked with an empty sequence. This results in a contradiction, which nonetheless can be expensive to evaluate.

    我在使用db_session.query,查询的时候idlist是个空值时候,执行下面的语句就会出现警告.其中后面delete(synchronize_session=False)是删除前面的一堆查询 ...

  5. python中常犯错误之字符串列表下标问题

    下标用得是中括号[] 不是小括号() 1,python中的小括号( ):代表tuple元组数据类型,元组是一种不可变序列.创建方法很简单,大多时候都是用小括号括起来的. 2.python中的中括号[ ...

  6. 杂项：电子表格程序-u

    ylbtech-杂项:电子表格程序-u 1.返回顶部 1.1 https://www.gemboxsoftware.com/spreadsheet 1.1 https://www.spreadshee ...

  7. 资源-DotNet-站点：DotNet 站点列表

    ylbtech-资源-DotNet-站点:DotNet 站点列表 1.ASP.NET Web返回顶部 1.1.问卷星 https://www.wjx.cn/sample/service.aspx 1. ...

  8. 提高redis cluster集群的安全性，增加密码验证

    节点设置密码 1.修改配置文件 在配置文件里面增加密码选项,一定要加上masterauth,不然Redirected的时候会失败. masterauth redispassword requirepa ...

  9. 安装SSH2拓展 PHP上传文件到远程服务器

    情景:客户端上传图片到服务器A,服务器A同步上传至另外一个静态资源服务器B 环境:php7 linux(ubuntu) 安装php的ssh2扩展 -dev sudo apt-get install p ...

  10. cabal替代脚本

    由于网络原因,直接使用cabal update不成功,只能自己写脚本直接从网上拖包下来,自己安装. 但是这样做的缺点是需要手动处理dependency,当然,也可以把脚本写的复杂些,自动来处理depe ...