<!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. Makefile中的$@ $< $^的意义

    $@  目标文件 $<   第一个依赖文件 $^  所有的依赖文件 $? 比目标还要新的依赖文件列表 $%  仅当目标是函数库文件中,表示规则中的目标成员名 $+  所有依赖目标的集合,与$^类 ...

  2. createElement 函数

    我们知道,vue函数的渲染其实是由render函数的回调函数createElement 来创建的虚拟dom,那么它到底是怎么创建组件的? 尚未理解透彻[捂脸],有待补充,参考如下: https://w ...

  3. springmvc把对象放到session中

    1:首先把创建的对象放到Map中, @RequestMapping("/testSession")    public String testSession(Map<Stri ...

  4. PHP curl_escape函数

    curl_escape — 对给定的字符串进行URL编码. 说明 string curl_escape ( resource $ch , string $str ) 该函数对给定的字符串进行URL编码 ...

  5. Kattis - gcpc (treap模板)

    ne hundred years from now, in 21172117, the International Collegiate Programming Contest (of which t ...

  6. Vue响应式原理的实现-面试必问

    Vue2的数据响应式原理 1.什么是defineProperty? defineProperty是设置对象属性,利用属性里的set和get实现了响应式双向绑定: 语法:Object.definePro ...

  7. PWN入门的入门——工具安装

    安装pwntool: 命令行运行: pip install pwntools python import pwn pwn.asm("xor eax,eax") 出现'1\xc0'  ...

  8. create-react-app 配置 修改

    1.端口号修改:https://www.jianshu.com/p/80a7603dda70(亲测有效)   在 根据 package.json 的启动,node_modules文件夹里面搜索reac ...

  9. DB：目录

    ylbtech-DB:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.cn ...

  10. python中6个序列的内置类型分别是什么,列表和元组的异同有哪些

    1.Python中6个序列的内置类型分别是什么? Python包含6中内建的序列,即列表.元组.字符串.Unicode字符串.buffer对象和 xrange 对象.序列通用的操作包括:索引.长度.组 ...