<!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. 前端-PC端瀑布流【10张图】

    .HTML 利用封装的 jquerywaterfall.js 方法 完成 <!DOCTYPE html> <html lang="en"> <head ...

  2. Hadoop编程调用HDFS（JAVA）

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 Hadoop环境: Cloudera QuickStart 2.GITHUB地址 http ...

  3. DOS基础使用专题（强烈推荐）2

    DOS下硬件设备的使用与设置 由于电脑的普及和应用的日益深入,为了满足人们的需要,电脑的功能随着它的发展变得越来越强大,硬件设备也越来越多,如从原来的ISA及PCI声卡.调制解调器等到现在的USB硬盘 ...

  4. JS中算法之排序算法

    1.基本排序算法 1.1.冒泡排序 它是最慢的排序算法之一. 1.不断比较相邻的两个元素,如果前一个比后一个大,则交换位置. 2.当比较完第一轮的时候最后一个元素应该是最大的一个. 3.按照步骤一的方 ...

  5. BZOJ 4238 电压 解题报告

    BZOJ 4238 电压 考虑一条边成为答案以后,删去Ta后剩下的图是一个或很多个二分图,即没有奇环 则一条边可以成为答案,当且仅当自己在所有奇环的交上且不在偶环上. 考虑建出dfs树,那么返祖边一定 ...

  6. 【BZOJ3052&UOJ58】糖果公园（树上带修莫队）

    题意:给定一个n个点的树,每个结点上有一种颜色c[i] 定义一条简单路径的偷税指数为simga (sigma w[i](i=0..a[j]))*v[j](j=0..m),其中a[i]为第i种颜色在路径 ...

  7. 控制透明度（兼容IE FF）

    filter:alpha(opacity=70);opacity:0.7;

  8. 实验三 《敏捷开发与XP实践》实验报告

    一.实验内容 任务一 1.参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECCODESTANDARD 安装alibaba 插件,解决代码中的规范问题 ...

  9. （转）VirtualBox下安装CentOS7系统

    转:https://www.cnblogs.com/hihtml5/p/8217062.html 本文假定你已经知道如何安装VirtualBox虚拟机软件,并且已经安装好了. 首先我们需要准备好cen ...

  10. SQL案例

    1.字符串去掉空格 原因:(1)空格 (2)制表符 )); ); ); INSERT INTO #temp SELECT '明天我就结婚了 '; DROP TABLE #temp; --1.2 采用A ...