js消除图片小游戏代码
js消除图片小游戏，效果如下所示：
做了一个简易的消除图片的小游戏，没有连线的规则。
<!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 = [] // 存放生成图片是 字符串拼接的数字
// rows * cols 可以算出需要多少张图片 然后除以2 因为每张图片都是成对出现的 即 7*12=84张图片 84/2=41算出有42对
for (var i = 0; i < rows * cols / 2; i++) {
var num = Math.floor(Math.random() * type) // 生成0~24的随机数
tmp.push(num);
tmp.push(num); // 循环了42次 所以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>
总结
以上所述是小编给大家介绍的js消除图片小游戏代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
JavaScript用200行代码制作打飞机小游戏实例
我去,我的图片分数被这个录屏软件的水印盖上了,扎心. 这个程序的文件以及代码全部上传到了github 程序下载链接传送门 这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了.所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西. 当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创. 代码部分我是通过一个大
-
js实现贪吃蛇小游戏（容易理解）
话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >
-
纯javascript模仿微信打飞机小游戏
七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示 源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov
-
原生js编写2048小游戏
效果图: 代码如下: <!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top: 0px; right: 0px; b
-
20行js代码实现的贪吃蛇小游戏
前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
javascript实现的猜数小游戏完整实例代码
本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
JavaScript实现打地鼠小游戏
在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
-
js消除图片小游戏代码
js消除图片小游戏,效果如下所示: 做了一个简易的消除图片的小游戏,没有连线的规则. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
js仿3366小游戏选字游戏
本文实例为大家分享了js仿3366小游戏中"你是色盲吗"游戏,大家先来挑战一下 游戏目标: 按画面中出现的文字的颜色来选择颜色,千万不要被颜色的困局打扰,眼睛一定要放亮哦,游戏开始时会有10分,每答对一题得一分,总共有10分,时间用完游戏会结束. 操作说明: 鼠标点击选择颜色 1.效果图: 原图: 模仿: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
-
js实现图片推拉门效果代码实例
初学者. 推拉门是网页中常见的一种形式,通过JS实现比较简单.主要是通过getElement找到节点元素,然后对其进行相应的赋值即可. 新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作"门"的图片),styles(用来存放css文件),scripts(用来存放js文件).然后在index.html中添加代码: <!doctype html> <html> <head> <meta charset=&quo
-
js实现翻牌小游戏
本文实例为大家分享了js实现翻牌小游戏的具体代码,供大家参考,具体内容如下 效果图 需求分析 1.生成两组顺序随机的1-8数据 2.卡片需要有翻转效果 3.两次翻转数据不相等,回复原状 4.两次翻转数据相等,卡片相等,不能再被点击 5.当所有卡片不能被点击游戏结束 6.限制最大点击次数50次 HTML结构 <div class="wrap"> <div> <p class="top"></p> <p class=
-
用js实现拼图小游戏
本文实例为大家分享了js实现拼图小游戏的具体代码,供大家参考,具体内容如下 一.js拼图是什么? 用js做得小游戏 二.使用步骤 1.先创建div盒子 <style> div,body{ margin: 0; height: 0; } #box{ width: 800px; height: 800px; background-color: burlywood; position: relative; } #box div { width: 200px; height: 200px; backg
-
JS原生2048小游戏源码分享(全网最新)
最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码: 效果: 代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048小游戏</title> <style> body,h1,div,tabl
-
Android实现老虎机小游戏代码示例
用 Android studio软件写的一个老虎机小游戏 先上MainActivity.java 的代码.这里我用得定时器,本想用java线程,奈何安卓还不太会,应用会闪退. package com.example.myapplication; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.os.Handler; import android.view.View;
-
Vue2+JS实现扫雷小游戏
目录 实现步骤 1.场景布局实现 2.初始化事件 3.游戏动作(action) 游戏收尾 总结 实现步骤 1.场景布局实现 布局就是经典的方格布局,对于场景的美观度可以自行找几个配色网站作为参考. 出现问题: 先初始化一个二维数组对应方块坐标,然后依次渲染 or 直接通过预期的行.列数渲染空白方块 区别: 直接初始化二维数组,可以对坐标进行一些属性操作,例如标记.是否为地雷等等,之后操作的时候会方便很多,缺点在初始化的时候需要进行大量的计算工作(因为在点开一个安全坐标时需要显示周围的地雷个数,还
-
java编写的简单移动方块小游戏代码
本文实例讲述了java编写的简单移动方块小游戏代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 第一次用java编写图形化的界面,还是有些青涩..以后继续努力!!具体代码如下: //Little Box Game by AlexYui //Game.java By 1093710210@ HIT import javax.swing.*; import java.awt.event.*; import java.awt.geom.*; import java.awt.*; import
-
Java实现猜数字小游戏代码
目录 ▲游戏规则: ▲实现思路: 实验结果: 总结 ▲游戏规则: 系统随机生成一个范围0——100的数,用户输入数字,判断该数字是大于,小于,还是等于随机生成的数字,等于的时候退出程序. ▲实现思路: 我们首先要解决的的是随机数,若这个数是我们人为设置的就没有意思了.在Java中的java.util包中提供了一个Random类,可以实现系统输入.随机数解决之后就成功了一半了,接下来看代码如何执行吧. import java.util.Random; import java.util.Scanne