效果
第三方库
hammer.js：旋转 拖拽 移动 缩放
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连字</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
</head>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
#myBox {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 20%;
display: flex;
flex-wrap: wrap;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
.fontBox {
width: 85%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-radius: 7px;
}
</style>
<body>
<div id="myBox" >
</div>
</body>
<script type="text/javascript" src="./js/hammer.js"></script>
<script>
const fontColor = [
'#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe',
'#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'
]
const fontArr = [
{
allFont: [
'号', '指', '环', '王', '游', '仙', '境', '侠',
'克', '加', '勒', '爱', '梦', '阿', '蝙', '蝠',
'尼', '坦', '比', '丽', '丝', '凡', '达', '玩',
'器', '泰', '海', '盗', '员', '动', '总', '具',
'圣', '亡', '死', '特', '人', '冰', '雪', '奇',
'复', '仇', '与', '比', '霍', '战', '大', '缘',
'联', '者', '特', '波', '利', '哈', '球', '星',
'盟', '刚', '金', '形', '变', '钢', '铁', '侠',
],
name: [
'泰坦尼克号','加勒比海盗','指环王','爱丽丝梦游仙境','蝙蝠侠','阿凡达','玩具总动员','冰雪奇缘',
'钢铁侠','哈利波特与死亡圣器','霍比特人','变形金刚','复仇者联盟','星球大战'
],
firstFont: ['泰','加','指','爱','蝙','阿','玩','冰','钢','哈','霍','变','复','星']
}
];
var gameLevel = 0; // 游戏闯关等级
var myBox = document.getElementById('myBox');
const myBoxWidth = document.documentElement.clientWidth - 30;
myBox.style.width = myBoxWidth + 'px';
myBox.style.height = myBoxWidth + 'px';
var allBox = '';
for(var i = 0; i < 64; i++) {
allBox += `
<div class="box box${i}">
<div class="fontBox fontBox${i}">${fontArr[0].allFont[i]}</div>
</div>
`;
}
myBox.innerHTML = allBox;
const boxWidth = (document.documentElement.clientWidth - 30) / 8;
var posArr = []; // 每一个字体box的边界
const boxArr = document.getElementsByClassName('box');
for(var i = 0; i < boxArr.length; i++) {
boxArr[i].style.width = boxWidth + 'px';
boxArr[i].style.height = boxWidth + 'px';
}
for(var i = 0; i < boxArr.length; i++) {
var boxDom = boxArr[i].getBoundingClientRect();
var boxPos = {
top: boxDom.top,
left: boxDom.left,
bottom: boxDom.bottom,
right: boxDom.right
}
posArr.push(boxPos);
}
var selectedFont = []; // 被选中的字
var selectedFontNum = []; // 被选中的字编号
var selectedResult = true; // 是否是正确的词
var selectedSuccessCharNum = 0; // 成功的数量
var selectedSuccessCharCode = []; // 已被成功选中的字编码
var mc = new Hammer(myBox);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on('pan', (ev) => {
posArr.forEach((j, idx) => {
if(!(selectedSuccessCharCode.indexOf(idx) === -1)) {
return;
}
if(j.top < ev.center.y && j.bottom > ev.center.y && j.left < ev.center.x && j.right > ev.center.x) {
document.getElementsByClassName(`fontBox${idx}`)[0].style.backgroundColor = fontColor[selectedSuccessCharNum];
// console.log(fontArr[0].allFont[idx], ev);
// 判断是否已被选中，没有添加
if(selectedFont.indexOf(fontArr[gameLevel].allFont[idx]) === -1) {
selectedFont.push(fontArr[gameLevel].allFont[idx]);
selectedFontNum.push(idx);
}
}
})
});
// 监听拖动开始
mc.on('panstart', (ev) => {
})
// 监听拖动结束
mc.on('panend', (ev) => {
// 判断选择字的第一个是否在首字数组中
if(fontArr[gameLevel].firstFont.indexOf(selectedFont[0]) === -1) {
selectedFail();
return;
}
var selectedChar = '';
selectedFont.forEach(i => {
selectedChar += i;
})
if(fontArr[gameLevel].name.indexOf(selectedChar) === -1) {
selectedChar = '';
selectedFail();
return;
}
selectedSuccessCharNum++;
console.log("成绩："+selectedSuccessCharNum); // 成绩
selectedSuccessCharCode = [...selectedSuccessCharCode, ...selectedFontNum];
selectedChar = '';
selectedFont = [];
selectedFontNum = [];
})
// 选择的字不正确
function selectedFail() {
selectedFontNum.forEach(i => {
document.getElementsByClassName(`fontBox${i}`)[0].style.backgroundColor = '';
});
selectedResult = false;
selectedFont = [];
selectedFontNum = [];
}
</script>
</html>
