Xuất phát từ bài tập kinh điển khi cải thiện khả năng xử lý bi rời, bi xa, các huấn luyện viên bida thường quăng 3 bi trên bàn, cho 3 trái chạy lòng vòng, sau đó huấn luyện viên sẽ cho bạn chọn trái bi khó nhất để giải quyết hình bi đó sao cho hợp lý nhất. Tuy nhiên cách thủ công này còn 1 vài hạn chế: hiếm khi có 1 bi nằm sát băng, thường lặp lại các hình bi quen thuộc, hiếm xảy ra các hình bi mà 3 bi ở 3 góc. Để giải quyết các bài toán này NTT đã viết ra phần mềm để máy tính tự phát sinh ra các vị trí bi ngẫu nhiên, sau khi NTT thử nghiệm, cảm thấy rằng, các thế bi được tạo ra có độ khó cực cao, cao hơn rất nhiều so với cách quăng bi cổ điển.
1. Hôm nay NTT sẽ hướng dẫn cho các bạn cách tự viết phần mềm này và mã nguồn đi kèm nhé. Đầu tiên cấu trúc thư mục sẽ như sau:
var BIDA8 = BIDA8 || {};
BIDA8.BallPositionGeneration = BIDA8.BallPositionGeneration || {};
BIDA8.BallPositionGeneration = (function () {
'use strict';
var redBall,
yellowBall,
whiteBall,
generateButton;
var randomTopPosition = function () {
return Math.floor((Math.random() * 326) + 41);
};
var randomLeftPosition = function () {
return Math.floor((Math.random() * 670) + 45);
};
var randomBallPosition = function (ball) {
var top = randomTopPosition();
var left = randomLeftPosition();
ball.style.top = top + 'px';
ball.style.left = left + 'px';
};
var generateBallPositions = function () {
randomBallPosition(redBall);
randomBallPosition(yellowBall);
randomBallPosition(whiteBall);
};
var bindEvents = function () {
generateButton.addEventListener('click', generateBallPositions);
};
var initObjects = function () {
redBall = document.getElementById('redBall');
yellowBall = document.getElementById('yellowBall');
whiteBall = document.getElementById('whiteBall');
generateButton = document.getElementById('generateButton');
};
var init = function () {
initObjects();
bindEvents();
};
return {
init: init
};
})();
BIDA8.BallPositionGeneration.init();
3. Mã nguồn của file CSS BallPositionGeneration.css:
.header {
font-weight: bold;
margin: 20px auto;
text-align: center;
}
.table-container {
margin-left: 100px;
}
.table {
background-image: url('../Images/table.png');
height: 432px;
position: relative;
width: 777px;
}
.generate-wrapper {
margin-top: 20px;
}
.red-ball {
left: 250px;
position: absolute;
top: 200px;
}
.yellow-ball {
left: 350px;
position: absolute;
top: 100px;
}
.white-ball {
left: 500px;
position: absolute;
top: 300px;
}
4. Và cuối cùng là mã nguồn của page HTML chính BallPositionGeneration.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="Styles/BallPositionGeneration.css" />
</head>
<body>
<div class="header">
Random Ball Position Generation | Bản quyền thuộc <a href="http://bida8.vn">http://bida8.vn</a>
</div>
<div class="table-container">
<div class="table">
<img class="red-ball" id="redBall" src="Images/red-ball.png" />
<img class="yellow-ball" id="yellowBall" src="Images/yellow-ball.png" />
<img class="white-ball" id="whiteBall" src="Images/white-ball.png" />
</div>
<div class="generate-wrapper">
<input id="generateButton" type="button" value="Generate Ball Positions" /> (Đừng quên bi chủ là bi trắng nhé !!!)
</div>
</div>
<script type="text/javascript" src="Scripts/BallPositionGeneration.js"></script>
</body>
</html>
Chúc các bạn thành công !!!
Không có nhận xét nào:
Đăng nhận xét