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 với chỉ javascripts
Mình sử dụng fiddle để trình bày source cho bài viết này
Mình sử dụng fiddle để trình bày source cho bài viết này
HTML
trước tiên cũng cần một chút html để có cái mà xử lý trong js nhé mọi người:
<body>
<h1>
Freaking Math
</h1>
<p>
current score: <span id="score">0</span>
</p>
<p class="float-left">
Time: <p class="float-left" id="time"></p>
</p>
<br/>
<br/>
<br/>
<br/>
<div class="main-container">
<div class="math big-text">
<span class="num1">.</span>
<span class="operator">.</span>
<span class="num2">.</span>
=
<span class='result'>.</span>
</div>
<button type='button' class='margin-left' value='true'>
True
</button>
<button type='button' value='false'>
False
</button>
</div>
</body>
CSS
chúng ta cần viết css cho một vài class để nhìn chúng đỡ "xấu xí"
#time {
height: 25px;
width: 300px;
background-color: red;
margin-left: 20px;
}
.float-left {
float: left;
}
.main-container {
clear: both;
}
button {
height: 100px;
width: 100px;
border-radius: 5px;
margin-top: 50px;
}
.big-text {
font-size: 50px;
margin-left: 50px;
}
.margin-left {
margin-left: 50px;
}
Tốt rồi, giờ giao diện của chúng ta như sau:
JAVASCRIPTS
Chúng ta cùng đến với phần chính, js:
Game về các phép toán, chúng ta cần một function để tạo ra các phép toán, phải rồi, function random phép toán:
function randNum(){
var num1 = Math.floor(Math.random()*20 + 1);
var num2 = Math.floor(Math.random()*20 + 1);
switch(operators[Math.floor(Math.random() * operators.length)]) {
case '+':
$('.operator').html('+');
true_result = num1 + num2;
show_result = true_result - Math.floor(Math.random() * 2);
break;
case '-':
$('.operator').html('-');
true_result = num1 - num2;
show_result = true_result + Math.floor(Math.random() * 2);
break;
}
$('.num1').html(num1);
$('.num2').html(num2);
$('.result').html(show_result);
}
Bài toán đặt ra ở đây là chúng ta cần tạo ra một phép toán, và kiểm tra xem người chơi chọn đáp án có đúng hay không ?
Function kiểm tra kết quả người chơi chọn:
Function kiểm tra kết quả người chơi chọn:
function check(arg){
if((arg == "true" && true_result == show_result) || (arg != "true" && true_result != show_result)){
var score = parseInt($('#score').text());
$('#score').text(score + 1);
$('#time').css('width', '300');
count_down();
randNum();
} else {
disable_all();
alert('GaMeOvEr');
}
}
Bên trên chúng ta thấy có 2 function count_down() và disable_all(), qua tên gọi các bạn chắc cũng hiểu công dụng của chúng:
function disable_all(){
$(document).find('button').attr('disabled', 'true');
}
và
function count_down(){
setInterval(function(){
$('#time').css('width', parseInt($('#time').css('width')) - 30);
if($('#time').css('width') == 0){
clearInterval(this);
disable_all();
alert('gAmEoVeR');
}
}, 100);
}
Function count_down sẽ đếm ngược sau khi người chơi chọn đáp án cho phép toán đầu tiên và tự động reset cho mỗi phép toán mới, người chơi có 1s để chọn đáp án cho các phép toán tiếp theo.
'
Cuối cùng là đoạn code khiến game của chúng ta sẽ chạy được =))
'
Cuối cùng là đoạn code khiến game của chúng ta sẽ chạy được =))
$(document).ready(function(){
$('#score').html('0');
randNum();
});
$(document).on('click', 'button', function(){
check($(this).attr('value'));
});
var operators = ['+', '-'];
var true_result = 0;
var show_result = 0;
Biến true_result vá show_result dùng để lưu lại đáp án đúng và đáp án được show ra, từ đó mà xét xem đáp án người dùng chọn là đúng hay sai
Biến operators 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ó bạn có thể sử dụng cả * và / =))
Biến operators 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ó bạn có thể sử dụng cả * và / =))
Bài hướng dẫn của mình đến đây là kết thúc. Mong nhận được sự yêu thích từ các bạn và những đóng gop ý kiến từ mọi người.
xem thêm : học lập trình php ở đâu
0 nhận xét:
Đăng nhận xét