<!DOCTYPE html>
<html>
<head>
<title>24点游戏</title>
<link type="text/css" rel="stylesheet" href="game.css"/>
</head>
<body>
<div id="main">
<div id="number_group"></div>
<div id="op_char_group">
<button class="op_char" id="add">加</button>
<button class="op_char" id="sub">减</button>
<button class="op_char" id="mul">乘</button>
<button class="op_char" id="divi">除</button>
</div>
<div class="button_group">
<button onclick="reset()">重置</button>
<button onclick="showAnswer()">看答案</button>
<button onclick="javascript:location.reload();">换一组</button>
</div>
</div>
</body>
<script type="text/javascript" src="jq/jquery.min.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript">
var GameData = {
num:null,
answer:null
};
var objA = null;
var showNumA = null;
var op = null;
startGame();
//开始游戏
function startGame() {
var num = getRandNum();
GameData.num = num;
showNum(num);
}
//重置
function reset(){
$('#number_group').html('');
$('#op_char_group').children().removeClass("curr");
showNum(GameData.num);
}
/** 显示题目 */
function showNum(num) {
for (var i = 0; i < 4; i++) {
$('#number_group').append('<div class="number"><p class="num_p">'+ num[i] +'</p></div>');
//console.log();
}
}
/** 获得有解的四个随机数 */
function getRandNum() {
var num = new Array();
do {
for (var i = 0; i < 4; i++) {
num[i] = Math.round(Math.random()*9+1);
}
} while (!isSolvable(num));
return num;
}
/** 计算解，并返回是否有解 */
function isSolvable(num) {
var res = valid(num);//调用24点算法计算
if (res == null || res.value == '') return false;
//console.log(res);
GameData.answer = res.value;
return true;
}
/**显示答案*/
function showAnswer(){
var num = '';
//var ans = '';
for (var i = 0; i < GameData.num.length; i++) num += GameData.num[i]+' ';
//if(GameData.answer != null) for (var i = 0; i < GameData.answer.length; i++) ans += GameData.answer[i]+'\n';
alert('数字：'+num+'\n解决方案：'+GameData.answer);
}
/**分数字符串转储为数字数组 */
function getArr(str) {
if (str.indexOf('/') > 0) {
var arr = str.split("/");
return [parseInt(arr[0]),parseInt(arr[1])];
}
else return [parseInt(str),1];
}
/** 分数计算算法 */
function getShowResult(showNumA, showNumB, op) {
var arrA = getArr(showNumA);
var arrB = getArr(showNumB);
var res = new Array(2);
if (op == 'add') {
if (arrA[1] == arrB[1]) {
res[0] = arrA[0] + arrB[0];
res[1] = arrA[1];
} else {
res[0] = arrA[0]*arrB[1] + arrB[0]*arrA[1];
res[1] = arrA[1] * arrB[1];
}
}
else if (op == 'sub') {
if (arrA[1] == arrB[1]) {
res[0] = arrA[0] - arrB[0];
res[1] = arrA[1];
} else {
res[0] = arrA[0]*arrB[1] - arrB[0]*arrA[1];
res[1] = arrA[1] * arrB[1];
}
}
else if (op == 'mul') {
res[0] = arrA[0]*arrB[0];
res[1] = arrA[1] * arrB[1];
}
else if (op == 'divi') {
res[0] = arrA[0]*arrB[1];
res[1] = arrA[1] * arrB[0];
}
return format(res);
}
/**化简与格式化分数*/
function format(res) {
var a = res[0], b = res[1], c;
while( !(a%b==0) ) {
c = a%b;
a = b;
b = c;
}
res[0] /= b;
res[1] /= b;
if (res[1] == 1) return res[0];
else return res[0]+'/'+res[1];
}
$(function (){
/** 数字块 事件绑定 */
$('#number_group').on('click', '.number',function(){
//满足计算条件否？
if (showNumA != null && op != null && !$(this).is(objA)) {
//移除numA
objA.hide();
//获得显示结果
var showNumB = $(this).children("p").text();
var showRes = getShowResult(showNumA, showNumB, op);
//alert(showRes);
//将结果显示在numB
$(this).children("p").text(showRes);
//是否只剩最后1个
if ($('#number_group').find('div:hidden').length == 3) {
//判断结果
if (parseInt(showRes) == 24) {
alert('恭喜，答对了！');
} else {
alert('很遗憾，答错了！');
}
}
objA = null;
showNumA = null;
op = null;
$('#op_char_group').children().removeClass("curr");
} else {
objA = $(this);
showNumA = $(this).children("p").text();
$(this).addClass("current").siblings().removeClass("current");
}
});
/** 运算符事件绑定 */
$('#op_char_group').on('click', '.op_char',function(){
if (showNumA == null) return;
op = $(this).attr('id');
$(this).addClass("curr").siblings().removeClass("curr");
});
});
</script>
</html>
JavaScript算24点小游戏
需积分: 50 136 浏览量
2017-12-13
15:51:23
上传
评论 2
收藏 36KB ZIP 举报
24点游戏-黄勇康2.zip （4个子文件） 
24点游戏-黄勇康 
game.html 4KB
game.css 1KB jq jquery.min.js 92KB game.js 2KB资源评论
如果名字不长一点ta就老说名字已存在
- 粉丝: 108
- 资源: 10
