<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 300px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 400px auto;
}
.box p {
width: 20px;
height: 20px;
box-sizing: border-box;
border: 1px solid rgb(243, 243, 243);
font-size: 12px;
background-color: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
}
.tree{
background-color: rgb(232, 247, 217) !important;
}
</style>
<script type="text/javascript">
var box = document.querySelector('.box');
var arr = new Array();
var keys = [];
var row = 10;
var col = 10;
// 生成表格并填充数组
box.style.width = row * 20 + 'px';
box.style.height = col * 20 + 'px';
for (let i = 0; i < row; i++) {
for (let j = 0; j < col; j++) {
box.innerHTML += `<p></p>`;
}
}
var pList = document.querySelectorAll('p');
for (let i = 0; i < pList.length; i++) {
if (i % col == 0) {
arr.push(new Array());
}
pList[i].count = 0;
arr[parseInt(i / col)].push(pList[i]);
}
console.log(arr)
var pelL = 1;
var pelT = 1;
arr[pelT][pelL].classList = 'pel';
var pel = document.querySelector('.pel');
pel.innerHTML = '🐌';
arr[5][5].innerHTML = '🌲';
arr[5][6].innerHTML = '🌲';
arr[5][7].innerHTML = '🌲';
arr[6][5].innerHTML = '🌲';
arr[6][6].innerHTML = '🌲';
arr[6][7].innerHTML = '🌲';
function clear() {
for (let i = 0; i < pList.length; i++) {
pList[i].classList.remove('pel');
}
}
function leftMove() {
pelL = pelL - 1;
if (pelL < 0) {
pelL = 0;
}
if(arr[pelT][pelL].innerHTML != ''){
pelL = pelL + 1;
}
arr[pelT][pelL].classList = 'pel';
}
function rightMove() {
pelL = pelL + 1;
if (pelL > row - 1) {
pelL = row - 1;
}
if(arr[pelT][pelL].innerHTML != ''){
pelL = pelL - 1;
}
arr[pelT][pelL].classList = 'pel';
}
function topMove() {
pelT = pelT - 1;
if (pelT < 0) {
pelT = 0;
}
if(arr[pelT][pelL].innerHTML != ''){
pelT = pelT + 1;
}
arr[pelT][pelL].classList = 'pel';
}
function bottomMove() {
pelT = pelT + 1;
if (pelT > col - 1) {
pelT = col - 1;
}
if(arr[pelT][pelL].innerHTML != ''){
pelT = pelT - 1;
}
arr[pelT][pelL].classList = 'pel';
}
function leftTop() {
if(pelL == 0){
arr[pelT][pelL].classList = 'pel';
}else{
// || arr[pelT+1][pelL].innerHTML != ''
if(arr[pelT-1][pelL].innerHTML != '' || arr[pelT][pelL-1].innerHTML != ''){
arr[pelT][pelL].classList = 'pel';
console.log(789);
}else{
pelL = pelL - 1;
pelT = pelT - 1;
if (pelT < 0) {
pelT = 0;
}
if (pelL < 0) {
pelL = 0;
}
if(arr[pelT][pelL].innerHTML != ''){
pelL = pelL + 1;
pelT = pelT + 1;
}
}
arr[pelT][pelL].classList = 'pel';
}
}
function leftBottom() {
if(pelL == 0){
arr[pelT][pelL].classList = 'pel';
}else{
if(arr[pelT][pelL-1].innerHTML != '' || arr[pelT+1][pelL].innerHTML != ''){
arr[pelT][pelL].classList = 'pel';
}else{
pelL = pelL - 1;
pelT = pelT + 1;
if (pelT > col - 1) {
pelT = col - 1;
}
if (pelL < 0) {
pelL = 0;
}
if(arr[pelT][pelL].innerHTML != ''){
pelL = pelL + 1;
pelT = pelT - 1;
}
}
arr[pelT][pelL].classList = 'pel';
}
}
function rightTop() {
if(pelL == 9){
arr[pelT][pelL].classList = 'pel';
}else{
if(arr[pelT-1][pelL].innerHTML != '' || arr[pelT][pelL+1].innerHTML != ''){
arr[pelT][pelL].classList = 'pel';
}else{
pelL = pelL + 1;
pelT = pelT - 1;
if (pelL > row - 1) {
pelL = row - 1;
}
if (pelT < 0) {
pelT = 0;
}
if(arr[pelT][pelL].innerHTML != ''){
pelL = pelL - 1;
pelT = pelT + 1;
}
}
arr[pelT][pelL].classList = 'pel';
}
}
function rightBottom() {
if(pelL == 9){
arr[pelT][pelL].classList = 'pel';
}else{
if(arr[pelT+1][pelL].innerHTML != '' || arr[pelT][pelL+1].innerHTML != ''){
arr[pelT][pelL].classList = 'pel';
}else{
pelL = pelL + 1;
pelT = pelT + 1;
if (pelL > row - 1) {
pelL = row - 1;
}
if (pelT > col - 1) {
pelT = col - 1;
}
if(arr[pelT][pelL].innerHTML != ''){
pelL = pelL - 1;
pelT = pelT - 1;
}
}
arr[pelT][pelL].classList = 'pel';
}
}
document.addEventListener('keydown', function (event) {
pel.innerHTML = '';
keys.indexOf(event.keyCode) < 0 && keys.push(event.keyCode);
keys.sort((a, b) => a - b);
clear();
switch (keys.join()) {
case "65": leftMove(); break;
case "68": rightMove(); break;
case "87": topMove(); break;
case "83": bottomMove(); break;
case "65,87": leftTop(); break;
case "65,83": leftBottom(); break;
case "68,87": rightTop(); break;
case "68,83": rightBottom(); break;
}
pel.innerHTML = '🐌';
})
document.addEventListener('keyup', function (event) {
keys.splice(keys.indexOf(event.keyCode), 1);
});
</script>
</html>
浙公网安备 33010602011771号