Đăng nhập để hỏi chi tiết
- Tin Học
- Lớp 12
- 10 điểm
- vastuniverse20630 -
Mời các cao nhân java script chỉnh hộ mình lại cái mớ hỗn độn này :
HTML:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shipper</title>
</head>
<body>
<img id="anh" src="right.png" width="200" style="position:absolute;">
<img id="wall" src="wall.png" width="150" style="position:absolute;">
<img id="wall2" src="wall.png" width="150" style="position:absolute;">
<button id="left" style="position:absolute;">Đi sang trái</button>
<button id="right" style="position:absolute;">Đi sang phải</button>
<script src="quay.js"></script>
</body>
</html>
JAva script:
let anh = document.getElementById("anh");
let wall = document.getElementById("wall");
let wall2 = document.getElementById("wall2");
let left = document.getElementById("left");
let right = document.getElementById("right");
//Nút trái
let leftX = 490;
let leftY = 0;
left.style.right = leftX + "px";
left.style.top = leftY + "px";
//Nút phải
let rightX = 600;
let rightY = 0;
right.style.left= rightX + "px";
right.style.top = rightY + "px";
// Vị trí tường
let wall2X = 0;
let wall2Y = 0;
wall2.style.right = wall2X + "px";
wall2.style.top = wall2Y + "px";
// Vị trí tường
let wallX = 0;
let wallY = 0;
wall.style.left = wallX + "px";
wall.style.top = wallY + "px";
// Vị trí nhân vật
let x = 500;
let y = 230;
anh.style.left = x + "px";
anh.style.top = y + "px";
//ấn trái
left.onclick = function () {
anh.src = "left.png";
let dem = 0;
let timer = setInterval(function () {
x--;
anh.style.left = x + "px";
let nv = anh.getBoundingClientRect();
let wallRect = wall.getBoundingClientRect();
if (
nv.left > wallRect.right ||
nv.right < wallRect.left ||
nv.top > wallRect.bottom ||
nv.bottom < wallRect.top
) {
console.log("chưa chạm");
} else {
x++;
anh.style.left = x + "px";
}
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
};
// Nút phải
right.onclick = function () {
anh.src = "right.png";
let dem = 0;
let timer = setInterval(function () {
x++;
anh.style.left = x + "px";
if (
nv.left > wall.right ||
nv.right < wall.left ||
nv.top > wall.bottom||
nv.bottom < wall.top
){
console.log ("chưa chạm")
} else{
x--;
anh.style.left = x + "px";
dem++;
if (dem === 20) {
clearInterval(timer);
}
} }, 10);
}
// Bàn phím
document.onkeydown = function (event) {
if (event.key === "a") {
anh.src = "left.png";
let dem = 0;
let timer = setInterval(function () {
x--;
anh.style.left = x + "px";
if (
nv.left > wall.right ||
nv.right < wall.left ||
nv.top > wall.bottom||
nv.bottom < wall.top
){
console.log ("chưa chạm")
} else{
x++;
anh.style.right = x + "px";
dem++;
if (dem === 20) {
clearInterval(timer);
}
}}, 10);
}
if (event.key === "d") {
anh.src = "right.png";
let dem = 0;
let timer = setInterval(function () {
x++;
anh.style.left = x + "px";
if (
nv.left > wall.right ||
nv.right < wall.left ||
nv.top > wall.bottom||
nv.bottom < wall.top
){
console.log ("chưa chạm")
} else{
x--;
anh.style.left = x + "px";
dem++;
if (dem === 20) {
clearInterval(timer);
}
}}, 10);
}
if (event.key === "w") {
let dem = 0;
let timer = setInterval(function () {
y--;
anh.style.top = y + "px";
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
}
if (event.key === "s") {
let dem = 0;
let timer = setInterval(function () {
y++;
anh.style.top = y + "px";
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
}
}
Hãy luôn nhớ cảm ơn và vote 5*
nếu câu trả lời hữu ích nhé!
TRẢ LỜI
Code của bạn có nhiều file hình ảnh để trên máy mà bạn ko gửi lên ấy.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shipper</title>
</head>
<body>
<img src="right.png" width="200" style="position:absolute;">
<img src="wall.png" width="150" style="position:absolute;">
<img src="wall.png" width="150" style="position:absolute;">
<button style="position:absolute;">Đi sang trái</button>
<button style="position:absolute;">Đi sang phải</button>
<script>
let anh = document.getElementById("anh");
let wall = document.getElementById("wall");
let wall2 = document.getElementById("wall2");
let left = document.getElementById("left");
let right = document.getElementById("right");
// Nút trái
let leftX = 490;
let leftY = 0;
left.style.right = leftX + "px";
left.style.top = leftY + "px";
// Nút phải
let rightX = 600;
let rightY = 0;
right.style.left = rightX + "px";
right.style.top = rightY + "px";
// Vị trí tường 2
let wall2X = 0;
let wall2Y = 0;
wall2.style.right = wall2X + "px";
wall2.style.top = wall2Y + "px";
// Vị trí tường 1
let wallX = 0;
let wallY = 0;
wall.style.left = wallX + "px";
wall.style.top = wallY + "px";
// Vị trí nhân vật
let x = 500;
let y = 230;
anh.style.left = x + "px";
anh.style.top = y + "px";
// Ấn trái
left.onclick = function () {
anh.src = "left.png";
let dem = 0;
let timer = setInterval(function () {
x--;
anh.style.left = x + "px";
let nv = anh.getBoundingClientRect();
let wallRect = wall.getBoundingClientRect();
if (
nv.left > wallRect.right ||
nv.right < wallRect.left ||
nv.top > wallRect.bottom ||
nv.bottom < wallRect.top
) {
console.log("chưa chạm");
} else {
x++;
anh.style.left = x + "px";
}
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
};
// Nút phải
right.onclick = function () {
anh.src = "right.png";
let dem = 0;
let timer = setInterval(function () {
x++;
anh.style.left = x + "px";
let nv = anh.getBoundingClientRect();
let wallRect = wall.getBoundingClientRect();
if (
nv.left > wallRect.right ||
nv.right < wallRect.left ||
nv.top > wallRect.bottom ||
nv.bottom < wallRect.top
) {
console.log("chưa chạm");
} else {
x--;
anh.style.left = x + "px";
}
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
};
// Bàn phím
document.onkeydown = function (event) {
if (event.key === "a") {
anh.src = "left.png";
let dem = 0;
let timer = setInterval(function () {
x--;
anh.style.left = x + "px";
let nv = anh.getBoundingClientRect();
let wallRect = wall.getBoundingClientRect();
if (
nv.left > wallRect.right ||
nv.right < wallRect.left ||
nv.top > wallRect.bottom ||
nv.bottom < wallRect.top
) {
console.log("chưa chạm");
} else {
x++;
anh.style.left = x + "px";
}
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
}
if (event.key === "d") {
anh.src = "right.png";
let dem = 0;
let timer = setInterval(function () {
x++;
anh.style.left = x + "px";
let nv = anh.getBoundingClientRect();
let wallRect = wall.getBoundingClientRect();
if (
nv.left > wallRect.right ||
nv.right < wallRect.left ||
nv.top > wallRect.bottom ||
nv.bottom < wallRect.top
) {
console.log("chưa chạm");
} else {
x--;
anh.style.left = x + "px";
}
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
}
if (event.key === "w") {
let dem = 0;
let timer = setInterval(function () {
y--;
anh.style.top = y + "px";
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
}
if (event.key === "s") {
let dem = 0;
let timer = setInterval(function () {
y++;
anh.style.top = y + "px";
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
}
};
</script>
</body>
</html>Hãy giúp mọi người biết câu trả lời này thế nào?
52 vote
```\color{#00FFFF}{z}\color{#20FFDF}{a}\color{#40FFBF}{y}\color{#60FF9F}{k}\color{#80FF80}{a}```
Phần được sửa lại:
let anh = document.getElementById("anh");
let wall = document.getElementById("wall");
let wall2 = document.getElementById("wall2");
let left = document.getElementById("left");
let right = document.getElementById("right");
let leftX = 490;
let leftY = 0;
left.style.right = leftX + "px";
left.style.top = leftY + "px";
let rightX = 600;
let rightY = 0;
right.style.left = rightX + "px";
right.style.top = rightY + "px";
let wall2X = 0;
let wall2Y = 0;
wall2.style.right = wall2X + "px";
wall2.style.top = wall2Y + "px";
let wallX = 0;
let wallY = 0;
wall.style.left = wallX + "px";
wall.style.top = wallY + "px";
let x = 500;
let y = 230;
anh.style.left = x + "px";
anh.style.top = y + "px";
function vaCham() {
let nv = anh.getBoundingClientRect();
let w1 = wall.getBoundingClientRect();
let w2 = wall2.getBoundingClientRect();
let chamWall1 = !(
nv.left > w1.right ||
nv.right < w1.left ||
nv.top > w1.bottom ||
nv.bottom < w1.top
);
let chamWall2 = !(
nv.left > w2.right ||
nv.right < w2.left ||
nv.top > w2.bottom ||
nv.bottom < w2.top
);
return chamWall1 || chamWall2;
}
function diChuyen(dx, dy) {
let dem = 0;
let timer = setInterval(function () {
x += dx;
y += dy;
anh.style.left = x + "px";
anh.style.top = y + "px";
if (vaCham()) {
x -= dx;
y -= dy;
anh.style.left = x + "px";
anh.style.top = y + "px";
clearInterval(timer);
return;
}
dem++;
if (dem === 20) {
clearInterval(timer);
}
}, 10);
}
left.onclick = function () {
anh.src = "left.png";
diChuyen(-1, 0);
};
right.onclick = function () {
anh.src = "right.png";
diChuyen(1, 0);
};
document.onkeydown = function (event) {
if (event.key === "a") {
anh.src = "left.png";
diChuyen(-1, 0);
}
if (event.key === "d") {
anh.src = "right.png";
diChuyen(1, 0);
}
if (event.key === "w") {
diChuyen(0, -1);
}
if (event.key === "s") {
diChuyen(0, 1);
}
};Hãy giúp mọi người biết câu trả lời này thế nào?
52 vote
```\color{#FFB6C1}{z}\color{#FF8FA3}{a}\color{#FF6B81}{y}\color{#FF4766}{k}\color{#FF1744}{a}```
thanks:))))
Bạn muốn hỏi điều gì?
Đặt câu hỏiGroup ôn Thi ĐGNL & ĐGTD Miễn Phí
Bảng tin
Bạn muốn hỏi điều gì?
Đặt câu hỏi
Cơ quan chủ quản: Công ty Cổ phần Công nghệ Giáo dục Thành Phát
Inbox: m.me/hoidap247online
Trụ sở: Tầng 7, Tòa Intracom, số 82 Dịch Vọng Hậu, Cầu Giấy, Hà Nội.
Giấy phép thiết lập mạng xã hội trên mạng số 331/GP-BTTTT do Bộ Thông tin và Truyền thông.
0
189
0
cảm ơn bạn nhiều lắm :)))