wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-08-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add t2048

Browse Source
This commit is contained in:
unknown
2014-06-13 10:04:30 +08:00
parent 896ded87c0
commit 6c16a93168
11 changed files with 9687 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -9,6 +9,7 @@
<div id="main">
<div id="mycav">
<div id="fun_rate">vczero</div>
<div style="float:right;"><a href="t2048/t2048.html">T2048</a></div>
<canvas id="canvas" width="910" height="1500">
您好！您的浏览器不支持HTML5 Canvas。请更换其他浏览器。
</canvas>
main.js
+3 -2
View File
@@ -206,11 +206,11 @@ MyChart.prototype.drawBaseInfo = function(){
var baseinfo = [];
baseinfo.push('代号：vczero');
baseinfo.push('生日：1991-09-24');
baseinfo.push('公司：高德地图实习');
baseinfo.push('公司：高德地图');
baseinfo.push('毕业院校：CHZU');
baseinfo.push('专业：Geographic Information System');
baseinfo.push('爱好：打兵乓球');
baseinfo.push('实习安排：Node.js服务端&矢量地图');
baseinfo.push('从业：web app服务端&矢量地图');
baseinfo.push('E-amil：wlhmyit@126.com');
for(var i = 0; i < baseinfo.length; i++){
@@ -233,6 +233,7 @@ MyChart.prototype.drawBaseInfo = function(){
schoolShow.push('8. 2010年9月~2014年6月：担任学习委员、11级地信2班助理班主任');
schoolShow.push('9. 2012年6月~2013年6月：GIS首届会长、校技术创新团队MySpace组长');
schoolShow.push('10. 荣获2014年安徽省品学兼优毕业生');
schoolShow.push('11. 荣获校十佳大学生');
for(var n = 0; n < schoolShow.length; n++){
this.context.fillStyle ='#898788';
t2048/css/main.css
+157
View File
@@ -0,0 +1,157 @@
#main_ui{
width:500px;
height: 578px;
border:1px solid #E0E0E0;
position: relative;
margin: 30px auto;
background-color: #FBF8F0;
}
#main_title{
font-size: 20px;
margin: 10px auto;
width: 140px;
height: 30px;
line-height: 30px;
color: #FFF;
background-color: #FF8402;
text-align: center;
border-radius: 4px;
font-family: 'consolas';
}
#score{
width: 130px;
margin-left: 340px;
margin-bottom: 10px;
}
#score img{
width: 18px;
height: 18px;
}
#score span{
color: #1E6823;
font-weight: bold;
font-family: 'consolas';
font-size: 15px;
}
#play_game{
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
background-color: #F1A900;
margin:10px auto;
color: #FFF;
font-weight: bold;
}
#play_game:hover{
text-decoration: none;
cursor: pointer;
}
#main_ui_cell{
background-color: #B9B2A8;
width: 450px;
height: 450px;
margin: 0 auto;
border-radius: 8px;
position: relative;
}
.bk_cell{
width: 100px;
height: 100px;
background-color: #CCC0B4;
border-radius: 5px;
position: absolute;
}
.fr_cell{
border-radius: 5px;
font-size: 55px;
line-height: 100px;
font-weight: bold;
text-align: center;
position: absolute;
}
#author{
position:absolute;
right:20px;
top:20px;
font-size:13px;
font-weight:bold;
}
#author a{
text-decoration: none;
color:blue;
}
#author a:hover{
text-decoration: none;
}
#show_game_over{
position:absolute;
top:150px;
left:50px;
width:400px;
height:200px;
border:1px solid #EBECEF;
background-color:#FFF;
opacity:0.8;
}
#close_div{
width:30px;
height:30px;
float:right;
}
#close_div img{
width:30px;
height:30px;
}
#close_div:hover{
cursor: pointer;
}
#cry_girl{
width:140px;
margin:50px auto;
}
#game_game{
position: absolute;
left: 40px;
top: 90px;
font-size: 30px;
font-family: 'consolas';
color: #A6E22A;
}
#game_over{
position: absolute;
right: 40px;
top: 90px;
font-size: 30px;
font-family: 'consolas';
color: #A6E22A;
}
t2048/images/close.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

t2048/images/cry.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

t2048/images/doll.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

t2048/js/config.js
+13
View File
@@ -0,0 +1,13 @@
var text = [
"2",
"4",
"8",
"16",
"32",
"64",
"128",
"256",
"512",
"1024",
"2048"
];
t2048/js/jquery2.1.1.js
+9190
View File
File diff suppressed because it is too large Load Diff
t2048/js/main.js
+271
View File
@@ -0,0 +1,271 @@
$(function(){
t2048 = new T2048();
t2048.play();
$('#play_game').click(function(){
t2048 = new T2048();
t2048.play();
});
$('#show_game_over').hide();
$('#close_div').click(function(){
$('#show_game_over').hide();
t2048 = new T2048();
t2048.play();
});
});
//T2048类
var T2048 = function(){
//记录数字变化的二维数组
var bk_table = [];
//玩家分数
var myScore = 0;
//UI绘制
var createUI = function (){
for(var i = 0; i < 4; i++){
bk_table[i] = [];
for(var j = 0; j <4; j++){
bk_table[i][j] = 0;
var bk_cell = $('#bk_cell_'+ i + '_' + j);
bk_cell.css('top', getTop(i, j));
bk_cell.css('left', getLeft(i, j));
}
}
}
//产生并显示随机数
var initNumber = function (){
var xy1 = createPosition(bk_table);
//能够产生随机数，则产生随机数
if(xy1){
var number1 = createNumber();
//产生一个数
bk_table[xy1.x][xy1.y] = number1;
// var xy2 = createPosition(bk_table);
// var number2 = createNumber();
// bk_table[xy2.x][xy2.y] = number2;
showNumber(bk_table);
}
}
//产生随机数
var createNumber = function (){
return Math.random() *10 > 5 ? 4:2;
}
//获取下一个绘制的位置
var createPosition = function (table){
var x = Math.floor(Math.random() *4);
var y = Math.floor(Math.random() *4);
var i = 0;
while(i < 500){
if(table[x][y] === 0)
return {x:x, y:y};
x = Math.floor(Math.random() *4);
y = Math.floor(Math.random() *4);
i++;
}
for(i = 0; i < 4; i++){
for(var j = 0; j < 4; j++){
if(table[i][j] === 0)
return {x:i, y:j};
}
}
return false;
}
//将数字绘制出来
var showNumber = function (table){
$('.fr_cell').remove();
for(var i = 0; i < 4; i++){
for(var j = 0; j < 4; j++){
var fr_cell_str = '<div class="fr_cell" id=fr_cell_' + i + '_' + j +'>' + '</div>';
$('#main_ui_cell').append(fr_cell_str);
var fr_cell = $('#fr_cell_'+ i + '_' + j);
if(table[i][j] == 0){
fr_cell.css('width', '0');
fr_cell.css('height', '0');
fr_cell.css('top', getTop(i, j) + 50);
fr_cell.css('left', getLeft(i, j) + 50);
}else{
fr_cell.css('backgroundColor', getBackColor(table[i][j])); //设置背景色
fr_cell.css('color', getTextColor(table[i][j])); //设置文字颜色
fr_cell.css('width', '100px');
fr_cell.css('height', '100px');
fr_cell.css('top', getTop(i, j));
fr_cell.css('left', getLeft(i, j));
fr_cell.text(table[i][j]);
}
}
}
}
//获取背景色
var getBackColor = function (number){
switch(number){
case 2: return '#EEE4DA'; break;
case 4: return '#EEE4DA'; break;
case 8: return '#F3B079'; break;
case 16: return '#EB8E53'; break;
case 32: return '#FB795F'; break;
case 64: return '#EB573B'; break;
case 128: return '#00C6E5'; break;
case 256: return '#EDCA62'; break;
case 512: return '#FCD209'; break;
case 1024: return '#E12D2D'; break;
case 2048: return '#4CB649'; break;
default: break;
}
}
//获取文本颜色
var getTextColor = function (number){
if(number <= 4)
return '#665C52';
return '#FFF';
}
var getTop = function (i , j){
return i*110 + 10;
}
var getLeft = function (i, j){
return j*110 + 10;
}
//判断是否还可以移动（游戏是否结束）
var notMove = function (){
var full = (function (){
for(var i = 0; i < 4; i++){
for(var j = 0; j < 4; j++){
if(bk_table[i][j] === 0)
return false;
}
}
return true;
})();
var noLeftRight = (function (){
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
if(bk_table[i][j] === bk_table[i][j+1])
return false;
}
}
return true;
})();
var noTopBottom = (function (){
for(var j = 0; j < 4; j++){
for(var i = 0; i < 3; i++){
if(bk_table[i][j] === bk_table[i+1][j])
return false;
}
}
return true;
})();
return full & noLeftRight & noTopBottom;
}
//监听用户的键盘移动
var getKeyDowm = function (e){
var isOver = notMove();
if(!isOver){
switch(e.which){
case 37:
//left
//整体向左移 并合并相同的数字，i不变
for(var i = 0; i < 4; i++){
for(var j = 3; j > 0; j--){
if(bk_table[i][j-1] === 0 || (bk_table[i][j] === bk_table[i][j-1])){
bk_table[i][j-1] = bk_table[i][j] + bk_table[i][j-1];
myScore = myScore + bk_table[i][j-1];
bk_table[i][j] = 0;
}
}
}
//生成新的数字和UI
$('#my_score').text(myScore);
initNumber(bk_table);
break;
case 38:
//top
//j = 0不移，其余都移动 j不变
for(var j = 0; j < 4; j++){
for(var i = 3; i > 0 ; i--){
if(bk_table[i-1][j] === 0 || (bk_table[i][j] === bk_table[i-1][j])){
bk_table[i-1][j] = bk_table[i][j] + bk_table[i-1][j];
myScore = myScore + bk_table[i-1][j];
bk_table[i][j] = 0;
}
}
}
$('#my_score').text(myScore);
initNumber(bk_table);
break;
case 39:
//right
//整体向右移 并合并相同的数字，i不变
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
if(bk_table[i][j+1] === 0 || (bk_table[i][j] === bk_table[i][j+1])){
bk_table[i][j+1] = bk_table[i][j] + bk_table[i][j+1];
myScore = myScore + bk_table[i][j+1];
bk_table[i][j] = 0;
}
}
}
//生成新的数字和UI
$('#my_score').text(myScore);
initNumber(bk_table);
break;
case 40:
//bottom
for(var j = 0; j < 4; j++){
for(var i = 0; i < 3 ; i++){
if(bk_table[i+1][j] === 0 || (bk_table[i][j] === bk_table[i+1][j])){
bk_table[i+1][j] = bk_table[i][j] + bk_table[i+1][j];
myScore = myScore + bk_table[i+1][j];
bk_table[i][j] = 0;
}
}
}
$('#my_score').text(myScore);
initNumber(bk_table);
break;
default:
break;
}
}else{
$('#show_game_over').show();
document.onkeydown = null;
}
}
document.onkeydown = getKeyDowm;
//暴露paly
return {
play: function play(){
myScore = 0;
$('#my_score').text(0);
createUI();
initNumber(bk_table);
}
};
}
t2048/t2048.html
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<title>2048</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="main_ui">
<div id="main_title">
<span>TAILOR 2048</span>
</div>
<div id="score">
<img src="images/doll.png">
<span id="my_score">0</span>
</div>
<div id="main_ui_cell">
<div class="bk_cell" id="bk_cell_0_0"></div>
<div class="bk_cell" id="bk_cell_0_1"></div>
<div class="bk_cell" id="bk_cell_0_2"></div>
<div class="bk_cell" id="bk_cell_0_3"></div>
<div class="bk_cell" id="bk_cell_1_0"></div>
<div class="bk_cell" id="bk_cell_1_1"></div>
<div class="bk_cell" id="bk_cell_1_2"></div>
<div class="bk_cell" id="bk_cell_1_3"></div>
<div class="bk_cell" id="bk_cell_2_0"></div>
<div class="bk_cell" id="bk_cell_2_1"></div>
<div class="bk_cell" id="bk_cell_2_2"></div>
<div class="bk_cell" id="bk_cell_2_3"></div>
<div class="bk_cell" id="bk_cell_3_0"></div>
<div class="bk_cell" id="bk_cell_3_1"></div>
<div class="bk_cell" id="bk_cell_3_2"></div>
<div class="bk_cell" id="bk_cell_3_3"></div>
</div>
<div id="play_game">开始</div>
<div id="author"><a href="http://vczero.github.io/">developer:王利华</a></div>
<div id="show_game_over">
<div id="close_div"><img src="images/close.png"/></div>
<div id="cry_girl"><img src="images/cry.jpeg" /></div>
<div id="game_game">Game</div>
<div id="game_over">Over</div>
</div>
</div>
</body>
</html>
test.html
-16
View File
@@ -1,16 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<style type="text/css">
body{font-size:13px;margin-left: 0;margin-top: 0;margin-right: 0;margin-bottom: 0;}
.mainFrame{width: 960px;margin-right: auto;margin-left: auto;border:1px solid red;min-height: 900px;}
</style>
</head>
<body>
<div class="mainFrame">
</div>
</body>
</html>