自己抽时间把以前的东西都整理一下 一个2048
2048.css代码如下:
header{
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}
header h1{
font-family: Arial;
font-size: 40px;
font-weight: bold;
}
header #newgameButton{
display: block;
margin: 20px auto;
width: 100px;
padding: 10px 10px;
background-color:#8f7a66;
font-family: Arial;
color: white;
border-radius: 10px;
text-decoration: none;
}
header #newgameButton:hover{
background-color: #9f8b77;
}
header p{
font-family: Arial;
font-size: 25px;
margin: 20px auto;
}
#grid-container{
width: 460px;
height: 460px;
padding: 20px;
margin: 50px auto;
background-color: #bbaba0;
border-radius: 10px;
position: relative;
}
.grid-cell{
width: 100px;
height:100px;
border-radius: 6px;
background-color: #ccc0b3;
position: absolute;
}
.number-cell{
border-radius: 6px;
font-family: Arial;
font-weight: bold;
font-size: 60px;
line-height: 100px;
text-align: center;
position: absolute;
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>2048</title>
<link rel="stylesheet" type="text/css" href="2048.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js" ></script>
<script type="text/javascript" src="support2048.js"></script>
<script type="text/javascript" src="showanimation2048.js"></script>
<script type="text/javascript" src="main2048.js"></script>
</head>
<body>
<header>
<h1>梦三国版2048</h1>
<a href="javascript:newgame()" id="newgameButton">New Game</a>
<p>score: <span id="score">0</span></p>
</header>
<div id="grid-container">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</body>
</html>/**
* Created by Administrator on 2014/10/8.
*/
var board = new Array();
var score = 0;
var hasConflicted =new Array();
var startx=0;
var starty=0;
var endx=0;
var endy=0;
$(document).ready(function() {
prepareForMobile();
newgame();
});
function prepareForMobile(){
if(documentWidth>500){
gridContrainerWidth=500;
cellSpace=20;
cellSideLength=100;
}
$("#grid-container").css('width',gridContrainerWidth-2*cellSpace);
$("#grid-container").css('height',gridContrainerWidth-2*cellSpace);
$("#grid-container").css('padding',cellSpace);
$("#grid-container").css('border-radius',0.02*gridContrainerWidth);
$(".grid-cell").css("width",cellSideLength);
$(".grid-cell").css("height",cellSideLength);
$(".grid-cell").css("border-radius",0.02*cellSideLength);
}
function newgame() {
// 初始化棋盘格
init();
// 随机绘制两个格子
generatorOneNumber();
generatorOneNumber();
}
function init() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
var gridCell = $("#grid-cell-" + i + "-" + j);
gridCell.css("top", getPosTop(i, j));
gridCell.css("left", getPosLeft(i, j));
}
}
for (var i = 0; i < 4; i++) {
board[i] = new Array();
hasConflicted[i] =new Array();
for (var j = 0; j < 4; j++) {
board[i][j] = 0;
hasConflicted[i][j]=false;
}
}
updateBoardView();
score=0;
}
function updateBoardView() {
$(".number-cell").remove();
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
$("#grid-container").append(
'<div class="number-cell" id="number-cell-' + i + '-' + j
+ '"></div>');
var theNumberCell = $('#number-cell-' + i + '-' + j);
if (board[i][j] == 0) {
theNumberCell.css("width", "0px");
theNumberCell.css("height", "0px");
theNumberCell.css("top", getPosTop(i, j) + cellSideLength/2);
theNumberCell.css("left", getPosLeft(i, j) + cellSideLength/2);
} else {
theNumberCell.css("width", cellSideLength);
theNumberCell.css("height", cellSideLength);
theNumberCell.css("top", getPosTop(i, j));
theNumberCell.css("left", getPosLeft(i, j));
theNumberCell.css("background-color",
getNumberBackgroundColor(board[i][j]));
theNumberCell.css("color", getNumberColor(board[i][j]));
// theNumberCell.text(board[i][j]);
theNumberCell.text(getNumberText(board[i][j]));
}
hasConflicted[i][j]=false;
}
}
$(".number-cell").css("line-height",cellSideLength+"px");
$(".number-cell").css("font-size",0.2*cellSideLength+"px"); //修改显示字体大小
}
function generatorOneNumber() {
if (nospace(board)) {
return false;
}
// 随机一个位置
var randomx = parseInt(Math.floor(Math.random() * 4));
var randomy = parseInt(Math.floor(Math.random() * 4));
var times=0;
while (times<50) {
if (board[randomx][randomy] == 0) {
break;
}
randomx = parseInt(Math.floor(Math.random() * 4));
randomy = parseInt(Math.floor(Math.random() * 4));
times++;
}
if(times==50){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
if(board[i][j]==0){
randomx=i;
randomy=j;
break;
}
}
}
}
// 随机一个数字
var randomNumber = Math.random() < 0.5 ? 2 : 4;
// 在随机位置显示随机数字
board[randomx][randomy] = randomNumber;
showNumberWithAnimation(randomx, randomy, randomNumber);
return true;
}
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37: // left
event.preventDefault(); //阻止原来的默认行为
if (MoveLeft()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 38: // up
event.preventDefault(); //阻止原来的默认行为
if (MoveUp()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 39: // right
event.preventDefault(); //阻止原来的默认行为
if (MoveRight()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 40: // down
event.preventDefault(); //阻止原来的默认行为
if (MoveDown()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
default: // default
break;
}
});
document.addEventListener("touchstart",function(event){
startx=event.touches[0].pageX;
starty=event.touches[0].pageY;
});
document.addEventListener("touchmove",function(event){
event.preventDefault();
});
document.addEventListener("touchend",function(event){
endx=event.changedTouches[0].pageX;
endy=event.changedTouches[0].pageY;
var deltax = endx-startx;
var deltay = endy-starty;
if(Math.abs(deltax)<0.3*documentWidth && Math.abs(deltay) < 0.3*documentWidth ){
return;
}
//X方向滑动的
if(Math.abs(deltax) >= Math.abs(deltay)){
//向右滑动
if(deltax>0){
if (MoveRight()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
}else{
if (MoveLeft()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
}
} else{
//向下滑动
if(deltay>0){
if (MoveDown()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
}else{
if (MoveUp()) {
setTimeout("generatorOneNumber()",210);
setTimeout("isgameover()",300);
}
}
}
});
//判断游戏结束
function isgameover() {
if(nospace(board) && onmove(board)){
gameover();
}
}
function gameover(){
alert("gameover!");
}
function MoveLeft() {
if (!canMoveLeft(board)) {
return false;
}
// moveLeft 对每个数字的左侧位置进行判断，看是否可以为落脚点
// 1.落脚位置是否为空 2.落脚位置数字和待判定元素数字相等 3.移动中不能有障碍物
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
for (var k = 0; k < j; k++) {
if (board[i][k] == 0 && noBlockHorizontial(i, k, j, board)) {
// move
showMoveAnimation(i, j, i, k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
} else if (board[i][k] == board[i][j]
&& noBlockHorizontial(i, k, j, board)&&!hasConflicted[i][k]) {
// move
showMoveAnimation(i, j, i, k);
// add
board[i][k] += board[i][j];
board[i][j] = 0;
// add score
score +=board[i][k];
updateScore(score);
hasConflicted[i][k]=true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()", 200);
return true;
}
function MoveRight() {
if (!canMoveRight(board)) {
return false;
}
// moveLeft 对每个数字的左侧位置进行判断，看是否可以为落脚点
// 1.落脚位置是否为空 2.落脚位置数字和待判定元素数字相等 3.移动中不能有障碍物
for (var i = 0; i < 4; i++) {
for (var j = 2; j >= 0; j--) {
if (board[i][j] != 0) {
for (var k = 3; k > j; k--) {
if (board[i][k] == 0 && noBlockHorizontial(i, j, k, board)) {
// move
showMoveAnimation(i, j, i, k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
} else if (board[i][k] == board[i][j]
&& noBlockHorizontial(i, j, k, board)&&!hasConflicted[i][k]) {
// move
showMoveAnimation(i, j, i, k);
// add
board[i][k] *= 2;
board[i][j] = 0;
// add score
score +=board[i][k];
updateScore(score);
hasConflicted[i][k]=true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()", 200);
return true;
}
function MoveUp() {
if (!canMoveUp(board)) {
return false;
}
for (var j = 0; j < 4; j++) {
for (var i = 1; i < 4; i++) {
if (board[i][j] != 0) {
for (var k = 0; k < i; k++) {
if (board[k][j] == 0 && noBlockVertical(j, k, i, board)) {
// move
showMoveAnimation(i, j, k, j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
} else if (board[k][j] == board[i][j]
&& noBlockVertical(j, k, i, board)&&!hasConflicted[k][j]) {
// move
showMoveAnimation(i, j, k, j);
// add
board[k][j] *= 2;
board[i][j] = 0;
// add score
score +=board[k][j];
updateScore(score);
hasConflicted[k][j]=true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()", 200);
return true;
}
function MoveDown() {
if (!canMoveUp(board)) {
return false;
}
for (var j = 0; j < 4; j++) {
for (var i = 2; i >= 0; i--) {
if (board[i][j] != 0) {
for (var k = 3; k > i; k--) {
if (board[k][j] == 0 && noBlockVertical(j, i, k, board)) {
showMoveAnimation(i, j, k, j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
} else if (board[k][j] == board[i][j]
&& noBlockVertical(j, i, k, board)&&!hasConflicted[k][j]) {
showMoveAnimation(i, j, k, j);
board[k][j] *= 2;
board[i][j] = 0;
// add score
score +=board[k][j];
updateScore(score);
hasConflicted[k][j]=true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()", 200);
return true;
}
/**
* Created by Administrator on 2014/10/8.
*/
function showNumberWithAnimation(i,j,randomNumber){
var numberCell=$("#number-cell-"+i+"-"+j);
numberCell.css("background-color",getNumberBackgroundColor(randomNumber));
numberCell.css("color",getNumberColor(randomNumber));
numberCell.text(randomNumber); //显示数字
numberCell.text(getNumberText(randomNumber)); //显示文字
numberCell.animate({
width:cellSideLength,
height:cellSideLength,
top:getPosTop(i,j),
left:getPosLeft(i,j)
},50);
}
function showMoveAnimation(fromx,fromy,tox,toy){
var numberCell=$("#number-cell-"+fromx+"-"+fromy);
numberCell.animate({
top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)
},200);
}
function updateScore(score){
$("#score").text(score);
}support2048.js
/**
* Created by Administrator on 2014/10/8.
*/
documentWidth=window.screen.availWidth;
gridContrainerWidth=0.92*documentWidth;
cellSideLength=0.18*documentWidth;
cellSpace=0.04*documentWidth;
function getPosTop(i,j){
return cellSpace+i*(cellSideLength+cellSpace);
}
function getPosLeft(i,j){
return cellSpace+j*(cellSideLength+cellSpace);
}
function getNumberBackgroundColor(number){
switch(number){
case 2: return "#eee4da";break;
case 4: return "#ede0c8";break;
case 8: return "#f2b179";break;
case 16: return "#f59563";break;
case 32: return "#f67e5f";break;
case 64: return "#f65esb";break;
case 128: return "#edcf72";break;
case 256: return "#edcc61";break;
case 512: return "#9c0";break;
case 1024: return "#33b5e5";break;
case 2048: return "#09c";break;
case 4096: return "#a6c";break;
case 8192: return "#93c";break;
}
return "black";
}
function getNumberText(number){
switch(number){
case 2:return "前将军"; break;
case 4:return "五虎上将"; break;
case 8:return "镇国将军"; break;
case 16:return "大都督"; break;
case 32:return "骠骑将军"; break;
case 64:return "三军元帅"; break;
case 128:return "太守"; break;
case 256:return "刺史"; break;
case 512:return "州牧"; break;
case 1024:return "诸侯"; break;
case 2048:return "世子"; break;
case 4096:return "王"; break ;
case 8192:return "皇帝"; break;
}
return "black";
}
function getNumberColor(number){
if(number<=4){
return "#776e65";
}
return "white";
}
function nospace( board ){
for( var i = 0 ; i < 4 ; i ++ ){
for( var j = 0 ; j < 4 ; j ++ ){
if( board[i][j] == 0 ){
return false;
}
}
}
return true;
}
function noBlockHorizontial(row,col1,col2,board){
for(var i =col1+1;i<col2;i++){
if(board[row][i] != 0){
return false;
}
}
return true;
}
function noBlockVertical( col , row1 , row2 , board ){
for( var i = row1 + 1 ; i < row2 ; i ++ ){
if( board[i][col] != 0 ){
return false;
}
}
return true;
}
//左边是否没有数字
//左边数字是否和自己相等
function canMoveLeft(board){
for(var i=0;i<4;i++){
for(var j=1;j<4;j++){
if(board[i][j]!=0){
//判断附近的格子数字是否一样
if(board[i][j-1] ==0 || board[i][j-1]==board[i][j]){
return true;
}
}
}
}
return false;
}
//右边是否没有数字
//右边数字是否和自己相等
function canMoveRight(board){
for(var i=0;i<4;i++){
for(var j=2;j>=0;j--){
if(board[i][j]!=0){
//判断附近的格子数字是否一样
if(board[i][j+1] == 0|| board[i][j+1]==board[i][j]){
return true;
}
}
}
}
return false;
}
//上边是否没有数字
//上边数字是否和自己相等
function canMoveUp(board){
for(var j=0;j<4;j++){
for(var i=1;i<4;i++){
if(board[i][j]!= 0){
//判断附近的格子数字是否一样
if(board[i-1][j] == 0 || board[i-1][j]==board[i][j]){
return true;
}
}
}
}
return false;
}
//下边是否没有数字
//下边数字是否和自己相等
function canMoveDown(board){
for(var j=0;j<4;j++){
for(var i=2;i>=0;i--){
if(board[i][j] !=0){
//判断附近的格子数字是否一样
if(board[i+1][j] == 0 || board[i+1][j]==board[i][j]){
return true;
}
}
}
}
return false;
}
function onmove(board){
if(canMoveDown(board)
||canMoveLeft(board)
||canMoveRight(board)
||canMoveUp(board)){
return false;
}
return true;
}
2210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
