Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html lang="zh-CN" manifest='./offline.appcache'>
<head>
<meta charset="UTF-8">
<title>还是三合一呀</title>
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="img/scar.png" />
<link rel="apple-touch-icon-precomposed" href="/img/scar.png" />
<link rel="icon" href="img/favicon.ico" />
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://www.bootcss.com/p/buttons/css/buttons.css" />
<style>
body {
background-color: #CCCCCC;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
margin-top: 10px;
}
#content {
margin-top: 20px;
}
#soundControl {
width: 26px;
height: 26px;
border: 2px solid black;
border-radius: 50%;
float:right;
right: 40px;
top:30px;
margin-top: 5px;
text-align: center;
line-height: 160%;
cursor: pointer;
}
.disable {
color:grey;
}
.cl0{
background-color: #CCFFCC;
color: #CCFFCC;
}
.cl1{
background-color: #FFFF99;
}
.cl2{
background-color: #FFCC99;
}
.cl3{
background-color: #FF9999;
}
.cl4{
background-color: #CCCC99;
}
.cl5{
background-color: #CC9999;
}
.cl6{
background-color: #99CC99;
}
.cl7{
background-color: #9999CC;
}
.cl8{
background-color: #99CCFF;
}
.cl9{
background-color: #999966;
}
.cl-1{
background-color: #336699;
color:#ffffff;
}
.cl-2{
background-color: #336666;
color:#ffffff;
}
.cl-3{
background-color: #333333;
color:#ffffff;
}
.cl-4{
background-color: #000033;
color:#ffffff;
}
#nextOne{
line-height: 36px;
border: 2px solid #000000;
font-weight: 300;
font-size: 16px;
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-decoration: none;
text-align: center;
vertical-align: middle;
padding: 0 20px;
margin: 0 10px;
transition-duration: .3s;
}
.button{
padding: 0 20px;
}
/* 地图样式 */
#playground{
cursor: pointer;
width: 100%;
}
#playground > div {
width: 100%;
}
.line{
width: 100%;
margin: 0 auto;
}
.pot{
display: inline-block;
border: 1px solid whitesmoke;
font-weight: 300;
font-size: 16px;
vertical-align: middle;
text-align: center;
transition-duration: .3s;
}
/* 分数显示区域 */
.panel {
font-weight: 300;
font-size: 16px;
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-decoration: none;
text-align: center;
vertical-align: middle;
padding: 0 2px;
margin: 10px 1px 0;
}
#scorePanel {
margin-bottom: 10px;
}
/* 暂存区 */
.temp-hub {
text-align: left;
padding: 5px 10px;
}
.temp-hub>p {
margin-bottom: 0;
}
</style>
</head>
<body>
<div id="content" class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-md-offset-3 col-lg-offset-4" ng-app="myApp" ng-controller="myCtrl">
<div>
<audio id="gameSound" ng-hide="true">
<source src="media/2487.wav" type="audio/wav">
</audio>
</div>
<div id="soundControl">
<span class="glyphicon glyphicon-volume-down" ng-hide="settings.soundPlay" ng-click="changeSoundState()"></span>
<span class="glyphicon glyphicon-volume-off" ng-show="settings.soundPlay" ng-click="changeSoundState()"></span>
</div>
<div id="head">
<div>
<button class="btn button dim button-border button-rounded button-primary"
ng-repeat="item in [2]" ng-click="changeDim(item)">
重新开始
</button>
<span>
<label id="nextOne" class="button-rounded" ng-class="'cl'+data.now">下一个:{{data.now}}</label>
</span>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 panel" id="scorePanel">
<div ng-hide="true">
<h4>当前维度:
<label class="label label-info"> {{dim}}</label>
</h4>
</div>
<p class="score-panel">
<span class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
得分:{{data.score}}
</span>
<span class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
步数:{{data.step}}
</span>
<p ng-hide="true">
坐标:
[ <span ng-repeat="item in data.locations track by $index"><i ng-hide="$index==0">, </i>{{item}}</span> ]
</p>
</p>
</div>
<div id="playground">
<div id="thead" ng-hide="true">
<div name="tr" class="line">
<span class="pot">#</span>
<span class="pot" ng-repeat="col in data.cols track by $index">{{col}}</span>
</div>
</div>
<div id="tbody">
<div class="line" ng-repeat="row in data.sandbox track by $index">
<span class="pot" ng-hide="true">{{$index + 1}}</span>
<span class="pot" ng-repeat="pot in row track by $index" ng-class="'cl'+pot.val"
ng-click="goStep(pot)">{{pot.val}}</span>
</div>
</div>
</div>
<!-- temp hub -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 panel temp-hub" ng-hide="data.tempHub.length < 1">
<p>
暂存区:
<span ng-repeat="item in data.tempHub track by $index"
class="pot" ng-class="'cl'+item" ng-click="swapTempHub($index)">
{{item}}
</span>
</p>
</div>
<!-- best score -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 panel">
<p class="score-panel">个人最好成绩</p>
<p class="score-panel">
<span class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
得分:{{best.score}}
</span>
<span class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
步数:{{best.step}}
</span>
<span class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
数字:{{best.number}}
</span>
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" ng-hide="true">
<div>
<table class="table table table-hover table-bordered">
<tr>
<td>+</td>
<td ng-repeat="item in data.locations track by $index" ng-class="{'disable':$index<2}" ng-click="changePlane($index, 1)">
<span class="glyphicon glyphicon-arrow-up"></span>
</td>
</tr>
<tr>
<td>位面调整</td>
<td ng-repeat="item in data.locations track by $index" ng-class="{'disable':$index<2}">
{{item}}
</td>
</tr>
<tr>
<td>-</td>
<td ng-repeat="item in data.locations track by $index" ng-class="{'disable':$index<2}" ng-click="changePlane($index, 0)">
<span class="glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script>
"use strict";
const DIM_BASE = 2;
var ll = function(){
for(var i in arguments)
console.log(arguments[i])
console.log('-----')
};
var lsNameArray = {
map: 'afoighj',
best: 'bepjhik'
};
var config = {
prob:{ // 各数字的权重
1:525,
2:75,
3:25,
4:6,
'-1': 81,
'-2': 9,
'-3': 1
},
defaultDim: 2, // 默认维度
gameStatus:{
'ready': 0,
'running': 1,
'end':2,
'sys_pause': 3
},
upLimit:9, // 数字上限
downLimit:-4, // 数字下限
pauseTime:100, // 数字落下后暂停时间
scoreFactor: 2, // 每多一个增加2倍分数
scoreFactorLevel: 3, // 每多一层增加3倍分数
mapSize: 7, // 地图尺寸
tempHubNum: 2, // 临时存储区大小
alertTime: 3, // 警告提示次数
};
// 随机生成棋盘内容
function generator(probs) {
var all = 0;
for(var i in probs) {
all += probs[i];
}
var mod = Math.floor(Math.random()*all);
for(var i in probs) {
mod -= probs[i]
if( mod < 0 ) {
return parseInt(i);
}
}
return 1;
}
// 初始生成地图, 增加了0
function initGenerator() {
var probs = deepCopy(config.prob);
probs[0] = 800;
return generator(probs)
}
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
function deepCopy(source) {
if(isArray(source)){
var arr = [];
source.forEach(function(v, k) {
arr[k] = deepCopy(v)
});
return arr;
}else if(typeof source === 'object'){
var result={};
for (var key in source) {
result[key] = typeof source[key] === 'object'? deepCopy(source[key]): source[key];
}
return result;
}else {
return source;
}
}
function base64Encoder(e){
var t,n,o,r,a,i,u="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
e += "";
for(o=e.length,n=0,t="";o>n;){
if(r=255&e.charCodeAt(n++), n==o) {
t+=u.charAt(r>>2), t+=u.charAt((3&r)<<4), t+="==";
break;
}
if(a=e.charCodeAt(n++),n==o){
t+=u.charAt(r>>2),t+=u.charAt((3&r)<<4|(240&a)>>4),t+=u.charAt((15&a)<<2),t+="=";
break;
}
i=e.charCodeAt(n++),t+=u.charAt(r>>2),t+=u.charAt((3&r)<<4|(240&a)>>4),t+=u.charAt((15&a)<<2|(192&i)>>6),t+=u.charAt(63&i)
}return t
}
function base64Decoder(str){
var c1, c2, c3, c4;
var base64DecodeChars = [
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57,
58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1,
-1, -1];
var i=0, len = str.length, string = '';
while (i < len){
do{
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff]
} while (
i < len && c1 == -1
);
if (c1 == -1) break;
do{
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff]
} while (
i < len && c2 == -1
);
if (c2 == -1) break;
string += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
do{
c3 = str.charCodeAt(i++) & 0xff;
if (c3 == 61)
return string;
c3 = base64DecodeChars[c3]
} while (
i < len && c3 == -1
);
if (c3 == -1) break;
string += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
do{
c4 = str.charCodeAt(i++) & 0xff;
if (c4 == 61) return string;
c4 = base64DecodeChars[c4]
} while (
i < len && c4 == -1
);
if (c4 == -1) break;
string += String.fromCharCode(((c3 & 0x03) << 6) | c4)
}
return string;
}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var forbidLocInfoTime = config.alertTime;
var gameStatus = config.gameStatus; // 游戏状态
var defaultDim = config.defaultDim;
// 地图初始化
var map = [];
// 升级层数, 用于计算分数
var rangeLevel = 0;
$scope.settings = {
soundPlay: true
};
$scope.dimBase = DIM_BASE; // 地图是二维的
$scope.size = config.mapSize; // 地图尺寸
$scope.dim = defaultDim; // 游戏维度
$scope.data = {
cols:[],
sandbox:[], // 地图在当前坐标下的内容
now:0, // 下一个出现的内容
score:0, // 得分
step:0, // 步数
tempHub: [],
locations: [], // 地图左上角坐标, 前两个是固定的
};
$scope.best = {
number:0,
score:0,
step:0
};
// 加载个人最好成绩
readScore();
// 临时存储区初始化
function initTempHub() {
for(var i =0;i< config.tempHubNum; i++) {
$scope.data.tempHub.push(0);
}
}
/**
* 临时存储区交换
* @param index 临时存储区下标
*/
$scope.swapTempHub = function(index) {
var t = $scope.data.tempHub[index];
$scope.data.tempHub[index] = $scope.data.now;
if(t === 0) {
// 原来暂存区是空的, 则重新生成一个
generateNextChess();
}else {
$scope.data.now = t;
}
saveStatus();
};
// 修改维度
$scope.changeDim = function(dim) {
if(gameStatus === config.gameStatus.running) {
var ret = confirm("将重新开始, 确认?");
if(!ret) {
return;
}
}
$scope.dim = dim;
init(true);
};
$scope.changeSoundState = function() {
$scope.settings.soundPlay = !$scope.settings.soundPlay;
saveStatus();
};
function initMap(dim, size) {
function generateMap(level, location) {
if(level === dim) {
var number = initGenerator();
updateBest(number);
return {
val: number,
loc: location
};
}else {
var tmpMap = [];
for(var i =0; i< size;i++) {
var tmpLoc = deepCopy(location);
tmpLoc.push(i);
tmpMap[i] = generateMap(level+1, tmpLoc)
}
return tmpMap;
}
}
// 生成地图
var newMap = generateMap(0, []);
// 重置位面
changePlane(newMap);
map = newMap;
}
// 更新位面/ 更新页面上的数字
function changePlane(map) {
var location = $scope.data.locations;
var tmpMap = map;
for(var i=0, len = location.length-DIM_BASE;i<len;i++) {
tmpMap = tmpMap[location[i]];
}
$scope.data.sandbox = tmpMap;
}
// 更新位面
$scope.changePlane = function(index, ifUp) {
var t = $scope.data.locations[index];
if(ifUp) {
t ++;
}else{
t --;
}
$scope.data.locations[index] = (t+config.mapSize*10) % config.mapSize;
changePlane(map);
};
// 点击响应
$scope.goStep = function(pot) {
if(gameStatus === config.gameStatus.sys_pause) {
return;
}else if(gameStatus === config.gameStatus.end) {
var ret = confirm('重新开始游戏?');
if(!ret) {
return;
}else{
init(true);
}
}
gameStatus = config.gameStatus.running;
if(pot.val !== 0) {
if(forbidLocInfoTime-- > 0) {
alert('有数字位置不能放置数字,只能落在空地上.');
}
return;
}
$scope.data.step += 1;
chessIn(pot.loc);
updateBest(pot.val);
};
// 计算分数, 跟当前合成的元素和合成的个数有关
function countScore(val, size) {
var factor = 5+config.scoreFactor * (size -3)+ config.scoreFactorLevel*rangeLevel;
if(val === config.downLimit) {
// 负数合成消失的时候加分, 平时减分
factor *= -1;
}
$scope.data.score += factor * val;
}
// 每个棋子的进阶
function chessNextLevel(target) {
if(target<0){
target --;
}else{
target ++;
}
if(target>config.upLimit || target < config.downLimit){
return 0;
}
return target;
}
// 数字放下响应
function chessIn(location) {
rangeLevel = 0;
var chessNum = deepCopy($scope.data.now);
// 生成下一个数字
generateNextChess();
setTargetChess(location, chessNum);
changePlane(map);
// 数字放下停顿0.1s
gameStatus = config.gameStatus.sys_pause;
var everConbined = false;
while(true) {
var val = getTargetChess(location);
var scorePoints = chessInProcess(location, val);
var len = scorePoints.length;
if(len < 3) {
break;
}
everConbined = true;
for(var i=0;i<len;i++) {
setTargetChess(scorePoints[i], 0);
}
// 计算分数
countScore(val, len);
// 计算进阶数字
var next = chessNextLevel(val);
setTargetChess(location, next);
rangeLevel ++;
// 更新最好成绩
updateBest(next);
}
// 播放音效
if(everConbined && $scope.settings.soundPlay) {
document.getElementById('gameSound').play();
}
changePlane(map);
setTimeout(function(){
gameStatus = config.gameStatus.running;
if(!checkAlive()) {
gameStatus = config.gameStatus.end;
alert('游戏结束!');
}
}, 100)
}
function chessInProcess(location, val) {
// 周围相邻的点, 已经出现过
var seeds = {};
var key = locToKey(location);
seeds[key] = location;
// 相同的点
var score = {};
// 周围相邻的点, 未使用
var unusedPoints = {};
unusedPoints[key] = location;
while(true) {
for(var name in unusedPoints) {
var loc = unusedPoints[name];
delete unusedPoints[name];
// 指定位置的数字与当前落子位置的数字相同
if(getTargetChess(loc) === val) {
var locStr = locToKey(loc);
score[locStr] = loc;
for(var i=0;i<$scope.dim;i++) {
var a = loc[i] -1, b = loc[i] +1;
// 相邻的位置在范围内
if(a>=0&&a<$scope.size) {
var tmpLoc = deepCopy(loc);
tmpLoc[i] = a;
var keyStr = locToKey(tmpLoc);
if(seeds[keyStr] === undefined) {
seeds[keyStr] = tmpLoc;
unusedPoints[keyStr] = tmpLoc;
}
}
if(b>=0&&b<$scope.size) {
tmpLoc = deepCopy(loc);
tmpLoc[i] = b;
keyStr = locToKey(tmpLoc);
if(seeds[keyStr] === undefined) {
seeds[keyStr] = tmpLoc;
unusedPoints[keyStr] = tmpLoc;
}
}
}
}
}
var size = 0;
for(var item in unusedPoints) {
size ++;
}
if(size<1) {
break;
}
}
var scorePoints = [];
for(var item in score) {
scorePoints.push(score[item]);
}
return scorePoints;
}
// 坐标转换为键值
function locToKey(loc) {
return loc.join(',');
}
// 检查游戏能否继续
function checkAlive() {
// 保存地图信息
saveStatus();
var alive = false;
function traversal(node) {
if(alive){
return;
}
if(node['val'] === undefined) {
for(var i=0, len=node.length;i<len;i++) {
traversal(node[i]);
}
}else{
if(node['val'] === 0) {
alive = true;
return;
}
}
}
traversal(map);
return alive;
}
// 设置指定位置的数
function setTargetChess(location, val) {
var tmpMap = map, len = location.length;
for(var i=0;i<len-DIM_BASE;i++) {
tmpMap = tmpMap[location[i]];
}
var x = location[len-2], y = location[len-1];
tmpMap[x][y]['val'] = val;
}
// 获得指定位置的数
function getTargetChess(location) {
var tempMap = deepCopy(map);
if(location.length !== $scope.dim){
alert('系统bug!建议刷新重试');
}
for(var i=0, len=location.length;i<len;i++) {
tempMap = tempMap[location[i]]
}
return tempMap.val;
}
// 生成下一个数
function generateNextChess() {
var probs = deepCopy(config.prob);
$scope.data.now = generator(probs);
}
/**
* 游戏初始化
* @param restart 是否完全重启, 不从localStorage 中加载数据
*/
function init(restart) {
$scope.data.score = 0;
$scope.data.step = 0;
$scope.data.cols = [];
$scope.data.locations = [];
for(var i = 0;i<$scope.size;i++) {
$scope.data.cols.push(String.fromCharCode(65+i));
$scope.data.sandbox.push([])
}
for(var i = 0;i<$scope.dim;i++) {
$scope.data.locations.push(0);
}
// 暂存区初始化
initTempHub();
// 状态初始化
if(restart || loadStatus() === null) {
// 重新生成地图
initMap($scope.dim, $scope.size);
generateNextChess();
}else {
// 从ls 里加载地图, 配置, 分数等
loadStatus();
if(map.length != $scope.size) {
initMap($scope.dim, $scope.size);
}
if($scope.data.tempHub === undefined ||$scope.data.tempHub.length != config.tempHubNum) {
$scope.data.tempHub = [];
// 暂存区初始化
initTempHub();
}
}
// 更新地图
changePlane(map);
// 地图重绘
setInterval(potSize, 500);
// 保存地图状态
saveStatus();
}
init(false);
// 数字的大小不用css, 用js 获取棋盘大小, 重新设置
function potSize() {
var length = $('#playground').width();
var size = config.mapSize;
var width = Math.floor(length/size);
$('.pot').css('width', width + 'px')
.css('height', width + 'px')
.css('line-height', width + 'px');
if(width>50) {
width = 50;
$('.temp-hub .pot').css('width', width + 'px')
.css('height', width + 'px')
.css('line-height', width + 'px');
}
}
// 保存游戏状态
function saveStatus() {
var mapObj = {
map: map,
next: $scope.data.now,
score: $scope.data.score,
step: $scope.data.step,
tempHub: $scope.data.tempHub,
settings: $scope.settings,
forbidLocInfoTime: forbidLocInfoTime,
gameStatus: gameStatus,
};
var jsonMap = JSON.stringify(mapObj);
var mapStr = base64Encoder(jsonMap);
localStorage.setItem(lsNameArray.map, mapStr);
return localStorage.getItem(lsNameArray.map) === null;
}
// 加载游戏状态
function loadStatus() {
if(localStorage.getItem(lsNameArray.map)=== null) {
return null;
}
var mapStr = localStorage.getItem(lsNameArray.map);
var jsonMap = base64Decoder(mapStr);
var obj = JSON.parse(jsonMap);
map = obj.map;
$scope.data.now = obj.next;
$scope.data.score = obj.score;
$scope.data.step = obj.step;
$scope.data.tempHub = obj.tempHub;
$scope.settings = obj.settings;
if(obj['forbidLocInfoTime']!== undefined) {
forbidLocInfoTime = obj.forbidLocInfoTime;
}else{
forbidLocInfoTime = 1;
}
if(obj['gameStatus']!== undefined) {
gameStatus = obj.gameStatus;
}else{
gameStatus = config.gameStatus.running;
}
}
// 保存最好成绩
function updateBest(number) {
if($scope.data.step > $scope.best.step) {
$scope.best.step = $scope.data.step;
}
if($scope.data.score > $scope.best.score) {
$scope.best.score = $scope.data.score;
}
if(number > $scope.best.number) {
$scope.best.number = number;
}
var jsonBest = JSON.stringify($scope.best);
var strBest = base64Encoder(jsonBest);
localStorage.setItem(lsNameArray.best, strBest);
return localStorage.setItem(lsNameArray.best, strBest) === null;
}
// 读出最好成绩
function readScore() {
if(localStorage.getItem(lsNameArray.best) === null) {
return;
}
var str = localStorage.getItem(lsNameArray.best);
var jsonBest = base64Decoder(str);
$scope.best = JSON.parse(jsonBest);
}
});
</script>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )