最近想做个网页版扑克牌游戏,于是就开始探索最后实现如下效果
html5源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>510k</title>
<script src="./superMaker.js"></script>
<script type="text/javascript" >
/**
* 定义一副牌,数组存放
* @type {Array}
*/
var p=new Array();
var szp=new Array();//分配到手中的扑克
var img=new Image();
img.src="b.jpg";//舞台背景
new Stage(800,600,"stage",img);
var scan=new Scane();
scan.playflag=true;
scan.frame="1";
scan.nextframe="2";
scan.loopflag=true;
var p4 = new player("img");
p4.img = new Image();
p4.img.src = "puke/0.jpg";
p4.x =680;
p4.y = 200;
p4.w = 59;
p4.h = 90;
p4.edit=true;
p4.mousedown=function(){
p4.ckg=true;
if(p4.ckg){
p4.w=50;
p4.h=80;
}
}
p4.mouseup=function(){
p4.ckg=false;
if(!p4.ckg){
p4.w=59;
p4.h=90;
}
}
scan.add(p4);
var p5 = new player("img");
p5.img = new Image();
p5.img.src = "puke/pass.jpg";
p5.x =680;
p5.y = 100;
p5.w = 59;
p5.h = 90;
p5.edit=true;
p5.mousedown=function(){
p5.ckg=true;
if(p5.ckg){
p5.w=50;
p5.h=80;
}
}
p5.mouseup=function(){
p5.ckg=false;
if(!p5.ckg){
p5.w=59;
p5.h=90;
}
}
scan.add(p5);
/**
* 定义扑克牌
* @param a
* @param b
* @param c
*/
function pei(a,b,c){
this.huase=a;
this.value=b;
this.val=c;
this.src="";
this.player=new player("img");
}
/*
* 定义一副扑克
*
* */
function zhupai(){
var p1=new pei("大红","大王",100);
p1.src="./puke/1.jpg";
var p2=new pei("大黑","小王",99);
p2.src="./puke/2.jpg";
p.push(p1);
p.push(p2);
var s=["3","4","5","6","7","8","9","10","J","Q","K","A","2"];
for(var j=0;j<4;j++) {
for (var i = 0; i < 13; i++) {
if(j==0) {
var pp = new pei("黑桃", s[i], (i+3));
pp.src="./puke/"+(i+3)+".jpg";
p.push(pp);
}
if(j==1) {
var pp = new pei("红桃", s[ i], (i+3));
pp.src="./puke/"+(16+i)+".jpg";
p.push(pp);
}
if(j==2) {
var pp = new pei("梅花", s[ i], (i+3));
pp.src="./puke/"+(29+i)+".jpg";
p.push(pp);
}
if(j==3) {
var pp = new pei("方块", s[ i],(i+3));
pp.src="./puke/"+(42+i)+".jpg";
p.push(pp);
}
}
}
console.log(p);
}
/**
* 向舞台台添加扑克
*/
function addpuke(){
for(var i=0;i<szp.length;i++){
szp[i].player.img=new Image();
szp[i].player.img.src=szp[i].src;
szp[i].player.ckg=false;
szp[i].player.edit=true;
szp[i].player.x =10+i*55;
szp[i].player.y = 350;
szp[i].player.w = 49;
szp[i].player.h = 80;
szp[i].player.mousedown=function() {
this.ckg ? this.ckg = false : this.ckg = true;
if (this.ckg) {
this.y = 300;
} else {
this.y = 350;
}
}
scan.add(szp[i].player);
}
}
/**
*
* 分配扑克
*/
function fp(){
var i=0;
while(i<13) {
var pa = Math.floor(Math.random() * 54);
var d = p[pa];
if (szp.find(d) ==null) {
szp.add(d);
i++;
}
}
sort();
for(var k in szp) {
console.log("hhhh" + szp[k].huase+szp[k].value+szp[k].val);
}
}
/**
* 扑克排序
*/
function sort(){
for(var i=0;i<szp.length;i++){
for(var j=0;j<szp.length-1;j++) {
var max=szp[j].val;
var zy=null;
if ((max - szp[j + 1].val) > 0) {
zy = szp[j];
szp[j] = szp[j + 1];
szp[j + 1] = zy;
}
}
}
// console.log(szp);
}
function init() {
zhupai();
fp();
addpuke();
}
init();
document.addEventListener("mousedown",function(e){
if(scaneArray.length>0) {
for (var ks in scaneArray) {
if (scaneArray[ks].playflag == true && scaneArray[ks].layer.array.length > 0) {
for (var kp in scaneArray[ks].layer.array) {
if (scaneArray[ks].layer.array[kp].edit) {
scaneArray[ks].layer.array[kp].hitx = getMousePos(canvas, e).x;
scaneArray[ks].layer.array[kp].hity = getMousePos(canvas, e).y;
scaneArray[ks].layer.top(scaneArray[ks].layer.array[kp]);
if (scaneArray[ks].layer.array[kp].editflag) {
scaneArray[ks].layer.array[kp].mousedown(e);
}
}
}
}
}}
});
document.addEventListener("mousemove",function(e){
if(scaneArray.length>0) {
for (var ks in scaneArray) {
if (scaneArray[ks].playflag == true && scaneArray[ks].layer.array.length > 0) {
for (var kp in scaneArray[ks].layer.array) {
if (scaneArray[ks].layer.array[kp].edit) {
scaneArray[ks].layer.array[kp].hitx = getMousePos(canvas, e).x;
scaneArray[ks].layer.array[kp].hity = getMousePos(canvas, e).y;
if (scaneArray[ks].layer.array[kp].editflag) {
scaneArray[ks].layer.array[kp].mousemove(e);
}
}
}
}
}
}
});
document.addEventListener("mouseup",function(e){
if(scaneArray.length>0) {
for (var ks in scaneArray) {
if (scaneArray[ks].playflag == true && scaneArray[ks].layer.array.length > 0) {
for (var kp in scaneArray[ks].layer.array) {
if (scaneArray[ks].layer.array[kp].edit) {
scaneArray[ks].layer.array[kp].hitx = getMousePos(canvas, e).x;
scaneArray[ks].layer.array[kp].hity = getMousePos(canvas, e).y;
if (scaneArray[ks].layer.array[kp].editflag) {
scaneArray[ks].layer.array[kp].mouseup(e);
}
}
}
}
}
}
});
</script>
</head>
<body bgcolor="gray" style="text-align: center">
<h1 style="color:snow">五十K争霸赛</h1>
<div style="text-align: center;" id="stage"></div>
</body>
</html>
这只是一个不完整的客户端,以后会把完整的客户端和服务端都上传上来!