<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none
}
/* / */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* 设置最小高度为视口高度 */
/* background-color: greenyellow; */
}
.big {
flex-wrap: wrap;
display: flex;
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.small {
width: 20%;
height: 20%;
background-color: aqua;
}
.player {
position: absolute;
top: 0;
left: 0;
}
.black {
background-color: black;
}
</style>
<body>
<!-- 游戏主页面 -->
<div class="big">
<!-- 玩家 -->
<div class="player">
<img src="./img/小人图(1).png" alt="">
</div>
</div>
</body>
<script>
//渲染25个格子
const bigbox = document.querySelector('.big')
for (let i = 1; i < 26; i++) {
const smallbox = document.createElement('div')
smallbox.className = `small data-${i}`
bigbox.appendChild(smallbox)
}
//随机生成一个黑格子
const randomInt = Math.floor(Math.random() * 25) + 1;
const black = document.querySelector(`.data-${randomInt}`)
black.classList.add('black')
//小人移动
const player = document.querySelector('.player')
let offsetX = 0;
let offsetY = 0;
function move(e) {
const step = 5; // 移动步长
switch (e.key) {
case 'w':
if (offsetY != 0) {
offsetY -= step;
}
boxmove()
break;
case 's':
if (offsetY != 450) {
offsetY += step;
}
boxmove()
break;
case 'a':
if (offsetX != 0) {
offsetX -= step;
}
boxmove()
break;
case 'd':
if (offsetX != 450) {
offsetX += step;
}
boxmove()
break;
}
player.style.top = offsetY + 'px';
player.style.left = offsetX + 'px';
}
//事件执行
document.addEventListener("keydown", move)
//盒子移动判定
let new_randomInt = randomInt
function boxmove() {
const blackbox = document.querySelector(".black");
//黑方块左边
if (offsetX + 50 === blackbox.offsetLeft && new_randomInt % 5 !== 0 && offsetY >= blackbox.offsetTop && offsetY + 50 <= blackbox.offsetTop + 100) {
blackbox.classList.remove('black');
new_randomInt += 1;
const newBlack = document.querySelector(`.data-${new_randomInt}`);
newBlack.classList.add('black');
console.log("1111");
}
//黑方块右边
if (offsetX === blackbox.offsetLeft + 100 && new_randomInt % 5 !== 1 && offsetY >= blackbox.offsetTop && offsetY + 50 <= blackbox.offsetTop + 100) {
blackbox.classList.remove('black');
new_randomInt -= 1;
const newBlack = document.querySelector(`.data-${new_randomInt}`);
newBlack.classList.add('black');
console.log("2222");
}
//黑方块上边
if (offsetY + 50 === blackbox.offsetTop && new_randomInt <= 20 && offsetX >= blackbox.offsetLeft && offsetX + 50 <= blackbox.offsetLeft + 100) {
blackbox.classList.remove('black');
new_randomInt += 5;
const newBlack = document.querySelector(`.data-${new_randomInt}`);
newBlack.classList.add('black');
console.log("3333");
}
//黑方块下边
if (offsetY === blackbox.offsetTop + 100 && new_randomInt >= 6 && offsetX >= blackbox.offsetLeft && offsetX + 50 <= blackbox.offsetLeft + 100) {
blackbox.classList.remove('black');
new_randomInt -= 5;
const newBlack = document.querySelector(`.data-${new_randomInt}`);
newBlack.classList.add('black');
console.log("4444");
}
}
</script>
</html>
新手练习-关于JS推箱子
最新推荐文章于 2024-10-16 16:26:58 发布