Cách giữ điểm trong JavaScript

Chúng tôi sử dụng JavaScript để kiểm soát hành vi của một trang web. Chúng tôi làm điều này bằng cách thêm các sự kiện vào trang của chúng tôi. Ví dụ sẽ là "lắng nghe" khi nhấp chuột hoặc khi chuột di chuyển qua hình ảnh hoặc khi người dùng nhấn một phím trên bàn phím của họ, v.v. Quá trình của các sự kiện là chúng tôi chỉ định một sự kiện và sau đó “lắng nghe” phản hồi mong muốn từ người dùng

Để thêm một trình lắng nghe sự kiện, chúng tôi sử dụng phương thức addEventListen, đây là những gì chúng tôi sẽ thảo luận chi tiết hơn trong bài đăng này và thậm chí sử dụng chúng để tạo một trò chơi nhỏ. Cú pháp cho addEventListen được hiển thị bên dưới trong đó loại biểu thị loại sự kiện (nhấp chuột, di chuột, v.v.) và hàm là mã mà bạn muốn thực thi khi sự kiện xảy ra

element.addEventListener(type, functionToCall);

Một ví dụ về một sự kiện hoàn chỉnh có thể được nhìn thấy trong đoạn mã sau. Trước tiên, chúng tôi chọn mục (trong trường hợp này là một nút) bằng cách sử dụng một biến mới, sau đó thêm một trình xử lý sự kiện thực thi khi ai đó nhấp vào một nút

var button = document.querySelector("button");
button.addEventListener("click", function() {
  console.log("SOMEONE CLICKED THE BUTTON!");
});

Để triển khai điều này vào một trang web, phần sau đây sẽ được sử dụng trong trang HTML

Click Me
No One Has Clicked Me Yet

Đây là mã được sử dụng trong tệp JavaScript

var button = document.querySelector("button");
var paragraph = document.querySelector("#example");

//SETUP CLICK LISTENER
button.addEventListener("click", function() {
  paragraph.textContent = "Someone Clicked the Button!";
});

Đoạn mã trên sẽ lắng nghe khi người dùng nhấp vào nút (trong mã HTML) và sau đó thay đổi văn bản bằng phương thức textContent (như đã thảo luận trong bài đăng 4 Khu vực thao tác DOM trong JavaScript) cho biết thực tế là ai đó đã nhấp vào

Là một phần của dự án mã hóa mà tôi đang thực hiện, tôi được thông báo rằng tôi cần viết mã “người ghi điểm” bằng JavaScript. Đây là một chương trình đơn giản cho phép hai người bạn theo dõi điểm số trong một trò chơi mà họ đang chơi hoặc bất cứ thứ gì. Phần mềm ghi điểm mà tôi đã thực hiện được hiển thị bên dưới

0 đến 0

Đang chơi. 10

// GHI CHÚ. trò chơi không hoàn hảo, bạn vẫn có thể lấy điểm thấp hơn 0 và tiếp tục đến vô cùng nếu bạn hạ thấp ngưỡng điểm chiến thắng khi chơi nhưng đó là một minh họa tốt về chức năng của các phương pháp đang được thảo luận

Khi bạn nhấp vào nút của người chơi 1 hoặc người chơi 2, điểm số phù hợp sẽ được hiển thị. Giới hạn điểm số có thể được thay đổi và khi người chơi đạt đến giới hạn điểm số, trò chơi sẽ kết thúc. Trò chơi có thể được đặt lại bất cứ lúc nào, điều này cũng sẽ đặt lại giới hạn điểm số (về 10 mặc định)

Có một số cách mà điều này có thể được thực hiện và cách tôi thực hiện hơi khác so với các phương pháp được thảo luận trong giải pháp trong khóa học nhưng tôi muốn cách của tôi hoạt động hơi khác một chút (vì vậy tôi đã thực hiện theo cách đó)

Điều đầu tiên tôi làm là chọn các nút tăng điểm số của người chơi để tôi có thể cập nhật văn bản trong thẻ h2 với điểm số của từng người chơi bằng JavaScript. Điều này đã được thực hiện bằng cách sử dụng tài liệu. querySelector để đảm bảo rằng tôi sử dụng “#” vì tôi đang sử dụng bộ chọn truy vấn để tìm ID (Tôi đã bao gồm phần tử HTML đầy đủ của chương trình này được hiển thị ở cuối bài đăng này nếu bạn đang muốn xem cách thực hiện

var p1Button = document.querySelector("#p1Button");
var p2Button = document.querySelector("#p2Button");

Khi các nút đã được thêm, một trình xử lý sự kiện lắng nghe nhấp chuột của người dùng đã được thêm vào sau khi các biến bắt buộc sau đây được tạo

// Initialise score variables
var p1Score = 0
var p2Score = 0
var gameOver = false;
var limit = 10;

Các biến cuối cùng cần thiết là bộ chọn hiển thị điểm của người dùng (được biểu thị bằng thẻ span trong mã HTML được hiển thị ở trên)

// Next select the span tags so we can update the players score
var p1Display = document.querySelector("#p1Score");
var p2Display = document.querySelector("#p2Score");

Các biến này sau đó được sử dụng để thêm trình xử lý sự kiện vào các nút

// Add event listner on "click" that changes the score (button 1)
p1Button.addEventListener("click", function() {
	if (!gameOver){
		p1Score += 1;
		p1Display.textContent = p1Score;
		if (p1Score === limit){
			p1Display.classList.add("winner");
			gameOver = true;
		}
	}
});

Về cơ bản nó nói. Nếu ai đó nhấp vào nút (p1 hoặc p2), nếu trò chơi chưa kết thúc thì hãy tăng điểm cho người chơi đó lên một. Khi điểm đã được tăng lên, chúng tôi sẽ thực hiện kiểm tra xem người chơi đã đạt được Điểm chiến thắng hay chưa. Nếu anh ta đã thay đổi hạng của thẻ h2 thành “người chiến thắng” (đổi nó thành màu xanh lục) và tuyên bố rằng trò chơi đã kết thúc (ngăn không cho thêm bất kỳ điểm nào nữa vào màn hình)

________số 8

Điều tiếp theo đã được thực hiện là cho phép người dùng thay đổi giới hạn điểm số. Lần này, thay vì sử dụng trình nghe "nhấp chuột", một trình nghe "thay đổi" đã được sử dụng, điều đó có nghĩa là giá trị sẽ được cập nhật theo giá trị của văn bản nhập (bất kể nó được nhập hay tăng qua các lần nhấp)

// Add event listener on "change" that changes the score (button 2)
input.addEventListener("change", function() {
	scoreLimit.textContent = this.value;
	limit = Number(this.value);
});	

// GHI CHÚ. “cái này” như trong “cái này. giá trị” đã được sử dụng thay vì “đầu vào. value” để minh họa ví dụ về từ “this” trong JavaScript

Điều tiếp theo (một khi nó đã hoạt động) là làm cho nút đặt lại hoạt động. Điều này đã được thực hiện (một lần nữa) bằng cách thêm trình xử lý sự kiện vào nút “đặt lại” và đặt lại trò chơi khi nhấn nút này

var button = document.querySelector("button");
button.addEventListener("click", function() {
  console.log("SOMEONE CLICKED THE BUTTON!");
});

Phần tử resetGame của người nghe được triển khai bằng một chức năng (vì vậy nó có thể được sử dụng khi người chơi thay đổi giới hạn điểm nhưng tôi đã loại bỏ điều đó khỏi trò chơi – tôi muốn có thể thay đổi giới hạn điểm trong trò chơi) như hình bên dưới

Làm cách nào để thêm điểm trong Java?

Trình theo dõi điểm số là gì?