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

16/04/2020 | Bài thực hành, Blog | 0 Lời bình

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

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é!

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

Tạo và sử dụng USER FUNCTION

Tạo và sử dụng USER FUNCTION

Với các vấn đề mà các FUNCTION không giải quyết được. Thì chúng ta phải tự tạo ra một FUNCTION để sử dụng, hay còn gọi là USER FUNCTION.

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

GỌI NGAY

098 953 44 58

Nhận tư vấn, định hướng 1-1

Điền và gửi thông tin cá nhân để được tư vấn miễn phí về các chương trình học.

15 + 4 =