如何用python开发大富翁游戏小程序大富翁

转载

mob64ca13feda16 2024-08-29 15:13:20

文章标签 如何用python开发大富翁游戏 php 写一个大富翁游戏 Back ide css 文章分类 Python 后端开发

话不多说，先上效果图：

如何用python开发大富翁游戏小程序大富翁_Back

功能点：

礼品的位置

小怪兽位置的变化(走路、转身和回退)

小怪兽的跳跃弧度

确定好功能点，接下来就是逐个击破：

1、渲染奖品

获取奖品数据后，建一个数组存放奖品的位置，通过遍历数据把奖品循环输出到页面上对应的位置。

.gift{position:relative;}
.gift li{position: absolute;}
//获取奖品
(function getPrize(){
$.ajax({
url:'你家的奖品接口',
success:function(res){
if(res.length == 0)return;
let i=0 ;
for(;i
if(i<8){
positionList.push({top:0,left:i*86+258+margin_left,className:'monster-left'});
}else if(i<11){
positionList.push({top:positionList[i-1].top+86,left:positionList[i-1].left,className:'monster'});
}else if(i<13){
positionList.push({top:positionList[i-1].top,left:positionList[i-1].left-86,className:'monster-right'});
}else if(i<17){
positionList.push({top:positionList[i-1].top+86,left:positionList[i-1].left,className:'monster'});
}else if(i<25){
positionList.push({top:positionList[i-1].top,left:positionList[i-1].left-86,className:'monster-right'});
}else if(i<28){
positionList.push({top:positionList[i-1].top-86,left:positionList[i-1].left,className:'monster-back'});
}else if(i<30){
positionList.push({top:positionList[i-1].top,left:positionList[i-1].left+86,className:'monster-left'});
}else{
positionList.push({top:positionList[i-1].top-86,left:positionList[i-1].left,className:'monster-back'});
}
 gift_list += `
 
 ${i+1} 
 
`; 
 
}
$(".gift").append(gift_list);
},
error:function(){
}
})
})()

复制代码

2、小怪兽的位置变化：

摇完骰子后，判断位置的变化是前进还是后退。后台接口需要返回两个位置的数据，一个是第一次的位置，一个是第二次的位置。判断两个位置是否相等。如果相等，则小怪兽只前进，无后退。否则，小怪兽先到达第一个位置之后，函数回调传入第二个位置，小怪兽再跳到第二个位置。

转身动画。把每个位置小怪兽身体方向记录到奖品位置那个数组里面去，到达位置的同时，追加相应的css改变小怪兽身体的方向。

//obj移动的块，i位置一，tips跳到指定位置后要弹出的内容，gift获得的奖品，indet特殊情况再掷一次的标志，goBack位置二

function go(obj, i, tips, gift, ident, goBack) {
let step = parseInt(i);
if (cur_index > step && cur_index == 33) {
cur_index = 0;
}
setTimeout(function () {
$(obj).removeClass(function () {
return $(obj).attr('class').split(' ').slice(1).join(' '); //除了小怪兽的原来样式，其他转身效果的全部去掉
});
if (cur_index == step) {
setTimeout(function () {
$(obj).addClass('active');
if (ident == 'again') {
//恭喜您，可再掷一次
$(obj).data('tips', tips);
return;
}
if (gift != "") {
//抽中xx奖品
} else {
//没有抽中
}
}
}, 500);
if (goBack) { //有第二个位置
setTimeout(function () {
go($(obj), goBack, "", gift, ident);
}, 1000)
playing = true; //禁止点击开始游戏按钮的标志
return;
}
setTimeout(function () {
playing = false;
}, 1000)
return;
} else if (cur_index > step && step > 6) { //后退是不会大于6步的
fly($(obj), positionList[cur_index - 1], positionList[cur_index - 2]);
$(obj).addClass(positionList[cur_index - 1].className);
cur_index--;
go($(obj), step, tips, gift, ident, goBack);
return;
} else { // 前进
fly($(obj), positionList[cur_index - 1], positionList[cur_index]);
$(obj).addClass(positionList[cur_index].className);
cur_index++;
go($(obj), step, tips, gift, ident, goBack);
}
}, 500);
}
function fly(obj, startPosition, endPosition) { //obj运动的小怪兽
if (startPosition == undefined) {
startPosition = {
left: 0
}
}
if (startPosition.left < endPosition.left) {
setTimeout(function () {
$(obj).css({
'top': endPosition.top - 35,
'left': endPosition.left - 33
});
})
} else if (startPosition.left > endPosition.left) {
setTimeout(function () {
$(obj).css({
'top': endPosition.top - 35,
'left': endPosition.left + 33
});
})
} else {
}
setTimeout(function () {
$(obj).css({
'top': endPosition.top,
'left': endPosition.left
});
}, 200);
}

复制代码

3、小怪兽跳跃的弧度。

可以采用半步半步的跳法，运动轨迹如下可见。可以做到跳跃的效果。(注意：图中第四个坐标写错了，应该是(120，-40))

如何用python开发大富翁游戏小程序大富翁_Back_02