拼图小游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.table {
margin: 30px auto;
}
td {
width: 60px;
height: 60px;
border: 0px solid blue;
text-align: center;
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="gameBox" onclick="moveTd(event)">
</div>
<script type="text/javascript">
//var len = 4;
var len = prompt("请输入一个大于3的整数：");
var gameBox = document.querySelector(".gameBox");
var table = document.createElement("table");
table.className = "table";
for (var m = 0; m < len; m++) {
var tr = document.createElement("tr");
for (var n = 0; n < len; n++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
gameBox.appendChild(table);
var td = document.getElementsByTagName("td");
var arrNum = new Array(td.length);
for (var i = 0; i < arrNum.length - 1; i++) {
arrNum[i] = i + 1;
arrNum[arrNum.length - 1] = "";
}
var index = arrNum.sort(function() {
return Math.random() - 0.5;
});
for (var j = 0; j < td.length; j++) {
td[j].innerText = index[j];
}
function moveTd(e) {
var e = e || window.event;
var obj = e.target || e.srcElement;
for (var k = 0; k < td.length; k++) {
var X = obj.offsetLeft - td[k].offsetLeft;
var Y = obj.offsetTop - td[k].offsetTop;
if (td[k].innerText == "") {
if (((X == 63 || X == -63) && Y == 0) ||
((Y == 63 || Y == -63) && X == 0)) {
td[k].innerText = obj.innerText;
obj.innerText = "";
}
}
}
}
</script>
</body>
</html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦