为了账号安全,请及时绑定邮箱和手机立即绑定

拼图小游戏

<!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 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消