<style type="text/css">
#id {
background;
border:none;
}
</style>`
<body onkeydown="whichButton(event)">
<div style="width: 480px;height: 300px;border: 2px solid #000;position: absolute;">
<div class="lattice" id="lattice1" style="top: 0px;left: 0px;"><img src="${ctx}/jsp/9Ge/FengJing/1.jpg"></img></div>
<div class="lattice" id="lattice2" style="top: 0px;left: 160px;"><img src="${ctx}/jsp/9Ge/FengJing/2.jpg"></img></div>
<div class="lattice" id="lattice3" style="top: 0px;left: 320px;"><img src="${ctx}/jsp/9Ge/FengJing/3.jpg"></img></div>
<div class="lattice" id="lattice4" style="top: 100px;left: 0px;"><img src="${ctx}/jsp/9Ge/FengJing/4.jpg"></img></div>
<div class="lattice" id="lattice5" style="top: 100px;left: 160px;"><img src="${ctx}/jsp/9Ge/FengJing/5.jpg"></img></div>
<div class="lattice" id="lattice6" style="top: 100px;left: 320px;"><img src="${ctx}/jsp/9Ge/FengJing/6.jpg"></img></div>
<div class="lattice" id="lattice7" style="top: 200px;left: 0px;"><img src="${ctx}/jsp/9Ge/FengJing/7.jpg"></img></div>
<div class="lattice" id="lattice8" style="top: 200px;left: 160px;"><img src="${ctx}/jsp/9Ge/FengJing/8.jpg"></img></div>
<div class="lattice" id="lattice9" style="top: 200px;left: 320px;"></div>
</div>
<div style="width:200;height: 125px;border: 2px solid #000;position: absolute;left:500px;"><img src="${ctx}/jsp/9Ge/FengJing/FengJing1.jpg"></img></div>
<script type="text/javascript">
function whichButton(event) {
var ShuZu = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var i = 0;
//W
if (event.keyCode == 87) {
//W -- 9=1
if (lattice9.style.top == "0px" && lattice9.style.left == "0px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "0px") {
Value.style.top = "0px";
lattice9.style.top = "100px";
return;
}
}
}
//W -- 9=2
if (lattice9.style.top == "0px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "160px") {
Value.style.top = "0px";
lattice9.style.top = "100px";
lattice9.style.left = "160px";
return;
}
}
}
//W -- 9=3
if (lattice9.style.top == "0px" && lattice9.style.left == "320px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "320px") {
Value.style.top = "0px";
lattice9.style.top = "100px";
lattice9.style.left = "320px";
return;
}
}
}
//W -- 9=4
if (lattice9.style.top == "100px" && lattice9.style.left == "0px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "200px" && Value.style.left == "0px") {
Value.style.top = "100px";
lattice9.style.top = "200px";
return;
}
}
}
//W -- 9=5
if (lattice9.style.top == "100px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "200px" && Value.style.left == "160px") {
Value.style.top = "100px";
lattice9.style.top = "200px";
lattice9.style.left = "160px";
return;
}
}
}
//W -- 9=6
if (lattice9.style.top == "100px" && lattice9.style.left == "320px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "200px" && Value.style.left == "320px") {
Value.style.top = "100px";
lattice9.style.top = "200px";
lattice9.style.left = "320px";
return;
}
}
}
}
//A
if (event.keyCode == 65) {
//A -- 9=1
if (lattice9.style.top == "0px" && lattice9.style.left == "0px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "0px" && Value.style.left == "160px") {
Value.style.left = "0px";
lattice9.style.left = "160px";
return;
}
}
}
//A -- 9=2
if (lattice9.style.top == "0px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "0px" && Value.style.left == "320px") {
Value.style.left = "160px";
lattice9.style.left = "320px";
return;
}
}
}
//A -- 9=4
if (lattice9.style.top == "100px" && lattice9.style.left == "0px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "160px") {
Value.style.left = "0px";
lattice9.style.left = "160px";
return;
}
}
}
//A -- 9=5
if (lattice9.style.top == "100px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "320px") {
Value.style.left = "160px";
lattice9.style.left = "320px";
return;
}
}
}
//A -- 9=7
if (lattice9.style.top == "200px" && lattice9.style.left == "0px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "200px" && Value.style.left == "160px") {
Value.style.left = "0px";
lattice9.style.left = "160px";
return;
}
}
}
//A -- 9=8
if (lattice9.style.top == "200px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "200px" && Value.style.left == "320px") {
Value.style.left = "160px";
lattice9.style.left = "320px";
return;
}
}
}
}
//S
if (event.keyCode == 83) {
//S -- 9=4
if (lattice9.style.top == "100px" && lattice9.style.left == "0px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "0px" && Value.style.left == "0px") {
Value.style.top = "100px";
lattice9.style.top = "0px";
return;
}
}
}
//S -- 9=5
if (lattice9.style.top == "100px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "0px" && Value.style.left == "160px") {
Value.style.top = "100px";
lattice9.style.top = "0px";
return;
}
}
}
//S -- 9=6
if (lattice9.style.top == "100px" && lattice9.style.left == "320px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "0px" && Value.style.left == "320px") {
Value.style.top = "100px";
lattice9.style.top = "0px";
return;
}
}
}
//S -- 9=7
if (lattice9.style.top == "200px" && lattice9.style.left == "0px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "0px") {
Value.style.top = "200px";
lattice9.style.top = "100px";
return;
}
}
}
//S -- 9=8
if (lattice9.style.top == "200px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "160px") {
Value.style.top = "200px";
lattice9.style.top = "100px";
return;
}
}
}
//S -- 9=9
if (lattice9.style.top == "200px" && lattice9.style.left == "320px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "320px") {
Value.style.top = "200px";
lattice9.style.top = "100px";
return;
}
}
}
}
//D
if (event.keyCode == 68) {
//D -- 9=2
if (lattice9.style.top == "0px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "0px" && Value.style.left == "0px") {
Value.style.left = "160px";
lattice9.style.left = "0px";
return;
}
}
}
//D -- 9=3
if (lattice9.style.top == "0px" && lattice9.style.left == "320px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "0px" && Value.style.left == "160px") {
Value.style.left = "320px";
lattice9.style.left = "160px";
return;
}
}
}
//D -- 9=5
if (lattice9.style.top == "100px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "0px") {
Value.style.left = "160px";
lattice9.style.left = "0px";
return;
}
}
}
//D -- 9=6
if (lattice9.style.top == "100px" && lattice9.style.left == "320px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "100px" && Value.style.left == "160px") {
Value.style.left = "320px";
lattice9.style.left = "160px";
return;
}
}
}
//D -- 9=8
if (lattice9.style.top == "200px" && lattice9.style.left == "160px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "200px" && Value.style.left == "0px") {
Value.style.left = "160px";
lattice9.style.left = "0px";
return;
}
}
}
//D -- 9=9
if (lattice9.style.top == "200px" && lattice9.style.left == "320px") {
for (i = 0; i < ShuZu.length; i++) {
var Value = document.getElementById("lattice" + ShuZu[i]);
if (Value.style.top == "200px" && Value.style.left == "160px") {
Value.style.left = "320px";
lattice9.style.left = "160px";
return;
}
}
}
}
}
</script>
</body>
实现效果：
转载自原文链接, 如需删除请联系管理员。
原文链接：HTML 实现9宫格拼图小游戏，转载请注明来源！