开发设计实现文档
一、编写目的
灵感来源于二十四点纸牌游戏，将生活中的纸牌游戏在电脑网页上实现。学会以后在空闲时可以玩一玩，锻炼一下速算能力。
二、项目目录
三、页面结构
页面设计得比较简单，上半是数字区，放着四张纸牌。
下半是运算符号区，分别是加、减、乘、除。
右侧是得分记录和两个操作按钮。
<div class="container"> <div class="gamezone"> <div class="poker"> <div for="(index, item) in current" class="card {{ item.css }}" show="{{ item.show }}" disabled="{{ item.disabled }}"> <image src="{{ item.shape }}" onclick="optnum(index)"></image> <text class="number">{{ item.text }}</text> </div> </div> <div class="sign"> <image for="(index, item) in operator" src="{{ item.src }}" class="operator {{ item.css }}" disabled="{{ operdis }}" onclick="setsign(index)"></image> </div> </div> <div class="side"> <text class="score">得分\n{{ score }}</text> <button class="btn" onclick="replace">换一批</button> <button class="btn" onclick="revert">重置</button> </div></div>
四、游戏逻辑
随机抽牌：这里分别写了两种随机抽牌逻辑。
一是将4×13共52张牌打乱顺序后抽取前四张；
二是52张牌的排序不变，随机生成4个不重复的数，以这四个数作为数组下标抽牌。
牌组替换与还原：因为抽牌是随机的，而并非所有的组合都是有解的，所以需要有操作按钮，可以让玩家主动替换或还原当前牌组。
选中样式：选中的数字或运算符需要有特别的样式提示，以提高游戏体验，所以需要给纸牌和运算符设置样式属性。
运算合法判定：在进行运算前，需要对运算的合法性进行判定。对于零不能作为除数，某些数不能被整除等情况，需要加以限制。当出现这些情况，撤销这次操作，恢复牌组状态，并弹出提示玩家。
得分判定：根据场上最后一张牌的数值进行得分判定，等于24则加分替换新牌组，否则将牌组重置为原状。
disorder() { let many, ran, temp = 0; for(many=0; many<26; many++) { ran = Math.floor(Math.random()*52); temp = this.pokers[many]; this.pokers[many] = this.pokers[ran]; this.pokers[ran] = temp; } this.origin = [0, 1, 2, 3]; }
getrandom() { this.origin = []; let compare = false; let temp = 0; while(4 > this.origin.length) { compare = false; temp = Math.floor(Math.random()*52); for(let i=0; i<this.origin.length; i++) { if(temp == this.origin[i]) { compare = true; break; } } if(false == compare) { this.origin.push(temp); } } }
replace() { console.log("—————————更换牌组—————————");// this.disorder(); this.getrandom(); this.initcards(); console.log("当前牌组为" + JSON.stringify(this.current)); }, revert() { console.log("—————————还原牌组—————————"); this.initcards(); console.log("还原当前牌组为" + JSON.stringify(this.current)); }
optnum(num_index) { if(null == this.operindex) { this.operdis = false; first = num_index; for(let i=0; i<4; i++) { this.current[i].css = ""; } this.current[num_index].css = "select"; } else { this.operdis = true; second = num_index; this.calculate(); } }, setsign(op_index) { if("" == this.operator[op_index].css) { for(let i=0; i<4; i++) { this.operator[i].css = ""; } this.operator[op_index].css = "select"; this.operindex = op_index; this.current[first].disabled = true; } else { this.operator[op_index].css = ""; this.current[first].disabled = false; this.operindex = null; } }
calculate() { if((3 == this.operindex) && (0 == this.current[second].num)) { prompt.showToast({ message: "0不能作为除数，请重新选择", duration: 1500, }); this.current[first].disabled = false; this.current[first].css = ""; this.operator[this.operindex].css = ""; this.operindex = null; this.operdis = true; first = second = 0; } else if((3 == this.operindex) && (0 != (this.current[first].num % this.current[second].num))) { prompt.showToast({ message: "无法被整除，请重新选择", duration: 1500, }); this.current[first].disabled = false; this.current[first].css = ""; this.operator[this.operindex].css = ""; this.operindex = null; this.operdis = true; first = second = 0; } else { switch (this.operindex) { case 0: this.current[first].num += this.current[second].num; break; case 1: this.current[first].num -= this.current[second].num; break; case 2: this.current[first].num *= this.current[second].num; break; case 3: this.current[first].num /= this.current[second].num; break; default: console.log("运算意外出错"); break; } this.current[first].text = this.current[first].num; this.current[first].shape = ""; this.current[first].disabled = false; this.current[first].css = ""; this.current[second].show = false; this.operator[this.operindex].css = ""; this.operindex = null; this.checkover(); } }
checkover() { let temp = 4; for(let i=0; i<4; i++) { if(false == this.current[i].show) { temp --; } } if(1 == temp) { if(24 == this.current[first].num) { prompt.showToast({ message: "答对啦，加分，换牌组", duration: 1500, }); this.score += 10; this.replace(); } else { prompt.showToast({ message: "答错啦……还原牌组", duration: 1500, }); this.revert(); } } }
标签：24,operindex,num,鸿蒙,current,second,小游戏,css,first From： https://www.cnblogs.com/Mumu111/p/16988782.html