Game làm bằng javascript
|
JavaScript có thể được sử dụng để phát triển nhiều loại trò chơi khác nhau. Và các trò chơi được tạo bằng JavaScript có thể chạy trên hầu hết mọi thiết bị có trình duyệt web Chúng tôi vừa xuất bản khóa học phát triển trò chơi JavaScript kéo dài 10 giờ trên freeCodeCamp. tổ chức kênh YouTube. Bạn sẽ học cách tạo trò chơi 2D bằng HTML, CSS & JavaScript gốc đơn giản, không sử dụng khung và không có thư viện Frank Dvorak đã phát triển khóa học này. Anh ấy đã tạo ra nhiều khóa học JavaScript phổ biến trên nhiều nền tảng khác nhau. Frank chuyên viết mã sáng tạo với vanilla JavaScript và HTML canvas Frank sẽ dạy bạn từng bước giải thích từng kỹ thuật trên một cơ sở mã độc lập nhỏ và sau đó anh ấy sẽ dạy bạn sử dụng mọi thứ bạn đã học để tạo một trò chơi cuối cùng Khóa học này được thực hiện trong số 9 dự án riêng biệt. Trong chuỗi dự án này, bạn sẽ tìm hiểu mọi thứ cần thiết để tạo trò chơi hoạt hình 2D của riêng mình, từ hoạt hình nhân vật đến quản lý trạng thái Dưới đây là các dự án và các phần đặc trưng trong khóa học này
Xem toàn bộ khóa học bên dưới hoặc trên freeCodeCamp. org kênh YouTube (10 giờ xem) QUẢNG CÁO QUẢNG CÁO Tôi là giáo viên và nhà phát triển với freeCodeCamp. tổ chức. Tôi chạy freeCodeCamp. tổ chức kênh YouTube Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu JavaScript đã chạy trong trình duyệt của bạn trên máy tính, trên máy tính bảng và trên điện thoại thông minh của bạn JavaScript miễn phí sử dụng cho mọi người Việc học của tôiTheo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning Tài liệu tham khảo JavaScriptW3Schools duy trì một tham chiếu JavaScript hoàn chỉnh, bao gồm tất cả các đối tượng trình duyệt và HTML Tài liệu tham khảo chứa các ví dụ cho tất cả các thuộc tính, phương thức và sự kiện và được cập nhật liên tục theo các tiêu chuẩn web mới nhất Chào mọi người, chắc ai đó trong số các bạn đã biết về trò chơi Freaking Math, hay tên đại loại kiểu của trò chơi select true false cho phép tính đơn giản rồi nhỉ? Mình viết bài này là để hướng dẫn mọi người làm một game tương tự như vậy đơn giản trong khoảng 30 phút chỉ với Javascripts (làm game Easy Math với Javascript) HTMLTrước tiên cũng cần 1 chút HTML để có cái mà xử lý trong js nhé mọi người, chúng ta cùng tạo 1 file index. html với nội dung
CSSChúng ta cần viết css cho một vài lớp để nhìn chúng đỡ “xấu xí” body{
font-family: 'Oswald', sans-serif;
font-size: 35px;
height: 100%;
}
#main{
width: 480px;
height: 800px;
background-color: white;
margin: 0 auto;
}
h1{
background-color: beige;
text-align: center;
margin: 0 0;
}
p{
width: 50%;
float: left;
box-sizing: border-box;
height: 10%;
margin: 0 0;
}
#score{
text-align: left;
padding-left: 10px;
background-color: aqua;
}
#level{
text-align: right;
padding-right: 10px;
background-color:aqua;
}
#time{
width: 100%;
height: 1%;
background-color: rgba(255, 0, 0, 0.47);
float: left;
}
#calculation{
float: left;
width: 100%;
height: 25%;
background-color: aquamarine;
text-align: center;
padding: 70px 0;
box-sizing: border-box;
}
#result{
float: left;
width: 100%;
height: 10%;
background-color: beige;
text-align: center;
}
#clickArea{
float: left;
width: 100%;
height: 30%;
background-color: bisque;
text-align: center;
}
button{
width: 120px;
height: 120px;
margin: 10px;
font-size: 45px;
font-weight: bold;
}
#true{
color: green;
}
#false{
color: red;
}Tốt rồi, giờ giao diện của chúng ta như sau  JavascriptChúng ta cùng đến với phần chính, JavaScript Đầu tiên chúng ta sẽ khai báo các biến chúng ta cần sử dụng trong bài viết này let score = 0; let level = 1; let time = 10;// Thời gian hiện tại let fullTime = 10;//Thời gian cho phép toán. let widthTime = 0;//Chiều dài thanh hiển thị thời gian Game về phép toán, chúng ta cần một hàm để tạo ra các phép toán, phải rồi, hàm ngẫu nhiên phép toán, chúng ta đặt tên cho nó là generateCalculation. ở đây chúng ta sử dụng thư viện Math của JS để tạo ra các số ngẫu nhiên thông qua câu lệnh Math. ngẫu nhiên() Toán tử biến đổi sẽ lưu lại các toán tử mà bạn muốn sử dụng trong trò chơi, để tăng độ khó mà bạn có thể sử dụng cả * và / =)) function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function getRandomOperator() {
let operators = ["+", "-", "*"];
let ran = Math.floor(Math.random() * operators.length);
return operators[ran];
}
function generateCalculation() {
let number1 = getRandomNumber(1*level, 5*level);
let number2 = getRandomNumber(1*level, 5*level);
let op = getRandomOperator();
let cal = number1 + " " + op + " " + number2;
document.getElementById("calculation").innerHTML = cal;
document.getElementById("result").innerHTML = getRandomResult();
}Bên trên chúng ta thấy có 1 hàm getRandomResult để lấy 1 kết quả ngẫu nhiên hiển thị trên màn hình, chúng ta sẽ thiết kế 1 hàm getRandomResult với tỷ lệ sai 50. 50, có thêm 2 chức năng phụ nữa là getResult để tạo kết quả đúng với việc sử dụng hàm eval để tính toán dãy số cho phép tính toán được sinh ra ở trên và getFakeResult để tạo kết quả sai với sai số là 10 function getRandomResult() {
let randomResult = Math.random() >= 0.5;//tỉ lệ đúng sai 50:50
return randomResult ? getResult() : getFakeResult();
}
function getResult() {
let cal = document.getElementById("calculation").innerHTML;
return eval(cal);
}
function getFakeResult() {
let fakeResult = getRandomNumber(getResult() - 10, getResult() + 10);
return (fakeResult === getResult()) ? getFakeResult() : fakeResult;
}Sau đó chúng ta gán sự kiện cho 2 nút True, False của chúng ta để kiểm tra xem người chơi lựa chọn đáp án đúng hay sai. Nếu như người chơi chọn đúng (check = true) thì chúng ta sẽ chuyển sang cấp độ tiếp theo, tăng điểm và đặt lại thời gian. nếu người chơi chọn sai, chúng tôi sẽ hiển thị thông báo kết thúc trò chơi kèm theo số điểm người chơi đạt được function check(btn) {
let result = +document.getElementById("result").innerHTML;
let check = false;
switch (btn) {
case "true":
if (result == getResult()) check = true;
break;
case "false":
if (result !== getResult()) check = true;
break;
}
check?nextLevel():gameOver();
}
function nextLevel() {
score += level;
level++;
time = fullTime;
document.getElementById("score").innerHTML = "Score: "+score;
document.getElementById("level").innerHTML = "Level: "+level;
document.getElementById("correct").play();
generateCalculation();
}
function gameOver() {
document.getElementById("true").style.display = "none";
document.getElementById("false").style.display = "none";
document.getElementById("wrong").play();
alert("Game Over. Your score is "+ score + ". Replay?");
location.reload();
}Để trò chơi thêm phần thú vị, chúng ta có thể thêm phần đếm ngược thời gian cho mỗi câu hỏi bằng cách sử dụng setInterval function countDown() {
let timeDiv = document.getElementById("time");
let run = setInterval(function () {
time -=0.1;
timeDiv.style.width = widthTime * time/fullTime + "px";
if(time <= 0){
clearInterval(run);
gameOver();
}
},100);
}Chức năng đếm ngược sẽ đếm ngược sau khi người chơi chọn trả lời cho phép toán đầu tiên và tự động đặt lại cho mỗi phép toán mới, người chơi có 10 giây để chọn trả lời cho phép toán tiếp theo Cuối cùng là đoạn mã tạo game của chúng ta sẽ chạy được =)) function startGame() {
time = fullTime;
widthTime = document.getElementById("time").offsetWidth;
document.getElementById("score").innerHTML = "Score: "+score;
document.getElementById("level").innerHTML = "Level: "+level;
generateCalculation();
countDown();
}TADA… vậy là chúng ta đã hoàn thành các bước làm trò chơi Easy Math with Javascript rồi. You only work index. html trên 1 trình duyệt web nào đó để có thể chơi game nhé. hãy gửi cho bạn bè cùng chơi để xem ai tính giỏi hơn nào =))))) |
