扑克牌游戏-HTML5拖放API实践
- 实验要求
-
- HTML代码
- style.css
- function.js
实验要求
设计一款扑克牌拖放小游戏。在网页中插入A框和B框。
要求用户拖动从A框拖动5张连续的扑克牌至B框，完成游戏。具体要求：
1.初始时，A框包含13张随机乱序后的同花色扑克牌，以背面显示。
2.用户可任意拖动其中一张扑克牌至B框，扑克牌以正面展示。
3.用户也可将扑克牌从B框拖至A框，扑克牌会自动回到初始的位置，且背面展示。
4.B框最多能够容纳5张扑克牌。在接收到5张扑克牌后，如果满足顺子要求，则提示用户游戏结束并显示用户成绩（拖动次数）。若不满足要求，用户必须先将其中不满足的牌拖回A框，游戏方可继续。
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>扑克游戏</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="./js/function.js"></script>
</head>
<p>已拖放次数: <span id="counter">0</span></p>
<body onload="imgset()">
<div id="boxA" ondrop="drop2(event)" ondragover="allowDrop(event)">A框<br>
<img src="" id="1" draggable="true" ondragstart="drag(event)" onerror="event.target.src='./image/pk/pkb.jpg'">
<img src="" id="2" draggable="true" ondragstart="drag(event)" onerror="event.target.src='./image/pk/pkb.jpg'">
<img src="" id="3" draggable="true" ondragstart="drag(event)" onerror="event.target.src='./image/pk/pkb.jpg'">
<img src="" id="4" draggable="true" ondragstart="drag(event)" onerror="event.target