PDA

View Full Version : Cài đặt trò xếp kim cương lên web của bạn nào !!!



anhchanghaudau
23-10-2010, 01:17
http://3.bp.blogspot.com/_-GHT-kgNuYI/TMHOETi2HbI/AAAAAAAAAD8/rvhTF46YTJY/s1600/bejeweled-origin.jpg
Game xếp kim cương 2 nguyên bản của Popcap
Đối với mỗi người chúng ta, dòng game xếp kim cương của hãng Popcap đã không còn xa lạ nữa. Nhớ lại cái thời người người chơi xếp kim cương, nhà nhà chơi xếp kim cương (hì hì, nói hơi quá nhưng thực ra thì các bạn nữ mê trò này lắm). Hôm nay mình xin trình bày cách cài đặt một game xếp kim cương lên website, blog, forum hoặc bất cứ đâu, miễn là nơi đó có hỗ trợ javascript, vì game này được viết bằng javascript mà.

Cài đặt
Việc đầu tiên cần làm là bạn chèn đoạn mã sau vào website của bạn:

<script type="text/javascript" src="http://1020475178062894934-a-1802744773732722657-s-sites.googlegroups.com/site/linq2js/bejeweled.js"></script>

Đây là tập tin chứa thông tin mã nguồn và những thư viện liên quan của game, tất cả đóng gói trong một tập tin duy nhất, khỏi phải tải nhiều lần. Và cũng xin đảm bảo rằng đoạn mã này là hoàn toàn trong sạch, không mã hack, không mã theo dõi, không quảng cáo .v.v.

Tiếp đó, bạn sẽ đặt đoạn mã khởi động trò chơi này tại nơi mong muốn, ở đây mình giả định là có một nút nhấn, khi nhấn vào sẽ bắt đầu chơi

<input type="button" value="Bắt đầu" onclick="playBejeweledGame()" />
<script type="text/javascript">
function playBejeweledGame() {
var win = window.open('about:blank');
win.document.open();
win.document.clear();
win.document.write(window.bejeweledData ? window.bejeweledData : 'Tải trò chơi xếp kim cương không thành công, bạn vui lòng thử lại sau.');
win.document.close();
win.focus();
}
</script>

Giải thích
Mình sẽ giải thích sơ qua công dụng của đoạn mã:
Dòng 4 là khởi tạo một cửa sổ mới (mở bung ra một cửa sổ) , sau đó nhận về thông tin cửa sổ đó và lưu vào biến win
Dòng 5, sử dụng đối tượng document của cửa sổ, kích hoạt chế độ ghi (document.open)
Dòng 6 là xóa sạch nội dung cũ của document, đảm bảo rằng document không có gì cả, khi mở ra một cửa sổ mới thường thì cửa số sẽ có chứa một số thẻ cơ bản <html></body></body></html> .v.v.
Đặc biệt là dòng 7, ở dòng này ta sử dụng biến window.bejeweledData, biến này là nơi mà mã nguồn trò chơi khi tải về sẽ lưu thông tin vào, chúng ta sẽ kiểm tra xem dữ liệu đã được tải hay chưa (kiểm tra bằng biểu thức tam phân <điều kiện> ? <giá trị hay biểu thức khi điều kiện đúng> : <giá trị hay biểu thức khi điều kiện sai>) nếu chưa thì xuất ra thông báo lỗi
Dòng 8 là hoàn tất quá trình ghi của document
Dòng 9 là đặt tiêu điểm ngay cửa sổ mới

Thử hàng
Và bây giờ bạn đã có thể thưởng thức trò chơi rồi, chúc bạn vui vẻ


http://3.bp.blogspot.com/_-GHT-kgNuYI/TMHSXYLX1nI/AAAAAAAAAEA/cI39HltJSvk/s1600/bejeweled-remake.jpg
Hàng "chế" lại
Đoạn mã đầy đủ
Bạn có thể chạy thử đoạn mã bằng công cụ của blog

<script type="text/javascript" src="http://1020475178062894934-a-1802744773732722657-s-sites.googlegroups.com/site/linq2js/bejeweled.js"></script>
<input type="button" value="Bắt đầu" onclick="playBejeweledGame()" />
<script type="text/javascript">
function playBejeweledGame() {
var win = window.open('about:blank');
win.document.open();
win.document.clear();
win.document.write(bejeweledData);
win.document.close();
win.focus();
}
</script>

Xem chi tiết tại http://linq2js.blogspot.com/2010/10/choi-xep-kim-cuong-that-tren-web-cua.html