Việc thêm một trò chơi đơn giản như trò chơi “Đào vàng” vào website WordPress không chỉ tăng tính tương tác mà còn giúp giữ chân người dùng trên trang web lâu hơn. Trong hướng dẫn này, chúng ta sẽ thực hiện từng bước chi tiết để triển khai game này thông qua shortcode và tích hợp một số tính năng đặc biệt như tạo mã giảm giá cho người chơi khi thu thập vàng, hoặc loại bỏ mã giảm giá khi thu thập đá.
Bước 1: Thêm shortcode để hiển thị game đào vàng
Tạo một hàm xử lý cho shortcode
WordPress sử dụng shortcode để giúp bạn nhúng các thành phần vào bài viết hoặc trang dễ dàng. Ở đây, chúng ta sẽ tạo một hàm PHP có tên gold_miner_game_shortcode
và sau đó đăng ký nó như một shortcode để có thể sử dụng trong bài viết hoặc trang.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | function gold_miner_game_shortcode() { ?> <style> /* CSS cho game đào vàng */ #game-container { width: 800px; height: 600px; border: 2px solid #000; position: relative; overflow: hidden; background-color: #f2e2ba; margin: 0 auto; } .object { width: 50px; height: 50px; position: absolute; background-size: cover; } .gold { background-image: url('https://porsche-vietnam.vn/wp-content/uploads/2021/12/WAP0400060M0MS-960x640.png'); /* Đường dẫn đến hình ảnh vàng */ } .rock { background-image: url('https://bomcosmetic.vn/wp-content/uploads/2022/11/221005lu_1796.png'); /* Đường dẫn đến hình ảnh đá */ } .bomb { background-image: url('https://phutai.com.vn/wp-content/uploads/2024/03/Vang-binh-dinh-granite-1.png'); /* Đường dẫn đến hình ảnh bom */ } #claw { width: 20px; height: 20px; background-color: gray; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; } </style> |
Giải thích:
- Đoạn code trên bao gồm HTML và CSS cho giao diện trò chơi. Chúng ta sử dụng thẻ
<div>
và<canvas>
để tạo ra game, kèm theo một số vật thể như vàng, đá, và bom. - Các vật thể được định dạng bằng CSS, mỗi loại vật phẩm có hình ảnh riêng biệt. Thẻ
<div>
#claw
tượng trưng cho móc câu trong game. - JavaScript được thêm để điều khiển trò chơi, từ việc di chuyển móc câu, tạo vật phẩm đến xử lý khi người chơi “gắp” được các vật phẩm.
Bạn có thể thích: Cách Xóa Toàn Bộ Ảnh Trong Website WordPress
Bước 2: Tạo các đối tượng trong trò chơi
Trong JavaScript, chúng ta cần tạo các vật thể (vàng, đá, bom) để người chơi có thể “gắp”. Các vật thể này sẽ xuất hiện ngẫu nhiên trên bản đồ game và mỗi loại vật phẩm sẽ có một hành động khác nhau khi được gắp.
Hàm tạo vật thể:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Hàm tạo vật phẩm function createObjects() { objects.forEach(obj => obj.remove()); objects = []; for (let i = 0; i < 55; i++) { let obj = document.createElement('div'); obj.classList.add('object'); let type = Math.random(); if (type < 0.2) { obj.classList.add('gold'); } else if (type < 0.3) { obj.classList.add('rock'); } else { obj.classList.add('bomb'); } obj.style.left = Math.random() * (gameContainer.clientWidth - 50) + 'px'; obj.style.top = Math.random() * (gameContainer.clientHeight - 100) + 100 + 'px'; gameContainer.appendChild(obj); objects.push(obj); } } |
Hàm này tạo 55 đối tượng ngẫu nhiên trên bản đồ game. Các đối tượng này có thể là vàng, đá hoặc bom dựa trên xác suất ngẫu nhiên. Mỗi vật thể sẽ có vị trí khác nhau trên bản đồ và người chơi sẽ phải “gắp” chúng.
Bước 3: Xử lý sự kiện gắp vật phẩm
Khi người chơi nhấn vào màn hình (kéo cần câu), chúng ta cần xử lý xem họ đã gắp được gì và cập nhật trò chơi tương ứng.
Có lẽ bạn sẽ thích:Hướng Dẫn Tự Động Cập Nhật SKU cho Sản Phẩm WooCommerce với Mã Tùy Chỉnh
Hàm xử lý gắp:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | // Hàm xử lý khi người dùng "gắp" function grabObject() { if (isGrabbing || grabbedObject || grabsLeft <= 0) return; isGrabbing = true; isSwinging = false; let clawY = grabberLength; // Di chuyển cần câu let grabInterval = setInterval(function() { clawY += grabSpeed; grabberLength = clawY; drawRope(); // Kiểm tra xem cần câu có chạm vào vật phẩm không objects.forEach(function(obj) { let objRect = obj.getBoundingClientRect(); let clawRect = claw.getBoundingClientRect(); if ( clawRect.left < objRect.right && clawRect.right > objRect.left && clawRect.top < objRect.bottom && clawRect.bottom > objRect.top ) { clearInterval(grabInterval); grabbedObject = obj; handleGrabbedObject(); } }); if (clawY > maxGrabberLength || clawY > gameContainer.clientHeight) { clearInterval(grabInterval); retractClaw(); } }, 20); } |
Khi người chơi nhấn vào màn hình, móc câu sẽ di chuyển xuống dưới. Nếu móc câu chạm vào vật phẩm, trò chơi sẽ dừng lại và xử lý tùy vào loại vật phẩm (vàng, đá, bom).
Bước 4: Tạo mã giảm giá khi gắp được vàng
Hàm AJAX để tạo mã giảm giá:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">funtion gold_miner_create_coupon() {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> $user_id = get_current_user_id();</span></span> // Tạo mã giảm giá ngẫu nhiên<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> $coupon_code = 'VÀNG' . strtoupper(wp_generate_password(6, false));</span></span> // Đăng ký mã giảm giá trong WooCommerce<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> $new_coupon_id = wp_insert_post(mảng(</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> 'post_title' => $mã_phiếu_giảm_giá,</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> 'post_type' => 'mã giảm giá cửa hàng',</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> 'post_status' => 'xuất bản',</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> ));</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> update_post_meta($new_coupon_id, 'discount_type', 'phần trăm');</span></span> update_post_meta($new_coupon_id, 'coupon_amount', 20); // Giảm giá 20%<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> wp_send_json_success(mảng('mã_phiếu_giảm_giá' => $mã_phiếu_giảm_giá));</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> }</span></span> |
- Khi người chơi gắp được vàng, một mã giảm giá ngẫu nhiên sẽ được tạo ra trong hệ thống WooCommerce. Mã này sẽ được lưu lại và có thể sử dụng cho lần mua sắm tiếp theo của họ.
Bước 5: Xử lý AJAX cho các sự kiện khác
Bạn cũng cần tạo các hàm xử lý khác cho việc xóa mã giảm giá (khi người chơi gắp đá) và xử lý khi gắp bom.
1 2 3 4 5 | <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">funtion gold_miner_remove_coupon() {</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> $user_id = get_current_user_id();</span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> $coupon_id = get_user_meta($user_id, 'current_coupon_id', đúng);</span></span> wp_delete_post($coupon_id, true); // Xóa mã giảm giá<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> }</span></span> |
- Cách Code Fake Số Lượng Hàng Đã Bán Trong Woocommerce (Không Cần Plugin)
- Sharecode Theme WordPress Giống Thiết Kế MuaThemeWP – Đẹp, Rẻ, Và Vô Cùng Chất Lượng!
- Cách Lập Kế Hoạch Nội Dung Để Duy Trì Traffic Liên Tục
- Cách Code Thông Báo Bằng Sweet2 WordPress
- Sharecode chức năng khi truy cập vào trang bất kỳ phải xác thực OTP gmail