实验目的:1. 理解元素拖放流程
2. 理解CSS定位规则
- 熟悉DOM添加和删除子元素流程
实验要求:设计一款扑克牌拖放小游戏。在网页中插入A框和B框。
要求用户拖动从A框拖动5张连续的扑克牌至B框,完成游戏。具体要求:
1.初始时,A框包含13张随机乱序后的同花色扑克牌,以背面显示。
2.用户可任意拖动其中一张扑克牌至B框,扑克牌以正面展示。
3.用户也可将扑克牌从B框拖至A框,扑克牌会自动回到初始的位置,且背面展示。
4.B框最多能够容纳5张扑克牌。在接收到5张扑克牌后,如果满足顺子要求,则提示用户游戏结束并显示用户成绩(拖动次数)。若不满足要求,用户必须先将其中不满足的牌拖回A框,游戏方可继续。
代码展示:
<!DOCTYPE html>