Trang chủ » Blog » [Thực hành] Tạo bàn cờ caro đơn giản

[Thực hành] Tạo bàn cờ caro đơn giản

bởi CodeGym | 26/12/2023 17:16 | Bài thực hành | Blog

Mục đích

Luyện tập tạo bàn cờ caro đơn giản- mảng hai chiều với vòng lặp for, truy cập và thay đổi các phần tử trong mảng 2 chiều.

Mô tả bài toán- tạo bàn cờ caro đơn giản

Xây dựng game caro đơn giản. Bàn cờ hiển thị đơn giản gồm N dòng và M cột. Mỗi giá trị trong cột nhận giá trị mặc định là 0.

Tạo bàn cờ caro đơn giản

Khi người dùng click vào nút “Change Value” sẽ hiển thị hộp thoại yêu cầu nhập vị trí phần tử cần thay đổi và giá trị phần tử cần thay đổi. Sau khi thay đổi màn hình hiển thị lại bàn cờ như sau:

Để hoàn thành bài thực hành, bạn cần:

  • Đưa mã nguồn lên GitHub
  • Dán link của repository lên phần nộp bài trên CodeGymX

Hướng dẫn

Bước 1: Tạo file carosimple.html.

Bước 2: Tạo giao diện sử dụng thẻ html

<!DOCTYPE html>
<html lang="en">

<body>
    <h3>Caro Game Simple</h3>
    <p id="carogame" />
    <input type="button" value="Change Value" onclick="changeValue()">
</body>

</html>

Bước 3: Hiển thị bàn cờ

<script>
let b = document.getElementById("carogame ");

let board = [];
let data = "";
for (let i = 0; i < 5; i++) {
    board[i] = new Array(0, 0, 0, 0, 0);
}

for (let i = 0; i < 5; i++) {
    data += "<br/>";
    for (let j = 0; j < 5; j++) {
        data += board[i][j] + "&nbsp;&nbsp;";
    }
}

data += "<br/><br/><input type='button' value='Change Value' onclick='changeValue()'>"
b.innerHTML = data;
</script>

Bước 4: Xử lý sự kiện khi người dùng click chuột vào nút “Change Value”

function changeValue() {
    let positionX = prompt("X: ");
    let positionY = prompt("Y: ");
    data = "";
    board[positionX][positionY] = "x";
    for (let i = 0; i < 5; i++) {
        data += "<br/>";
        for (let j = 0; j < 5; j++) {
            data += board[i][j] + "&nbsp;&nbsp;&nbsp;&nbsp;";
        }
    }
    data += "<br/><br/><input type='button' value='Change Value' onclick='changeValue()'>"
    b.innerHTML = "<hr/>" + data;
}

Bước 5: Chạy chương trình và thay đổi vị trí trên bàn cờ. Quan sát kết quả.

Trên đây CodeGym đã cùng với bạn luyện tập mảng hai chiều với vòng lặp for, truy cập và thay đổi các phần tử trong mảng 2 chiều. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!

Download - Giáo trình thuật toán

6 + 1 =

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

2 + 11 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM