Skip to content

Instantly share code, notes, and snippets.

@Arguseye

Arguseye/dabblet.css

Created July 13, 2014 11:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Arguseye/ffa5f77a1c4d3745d26c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Arguseye/ffa5f77a1c4d3745d26c to your computer and use it in GitHub Desktop.
Download ZIP
reset css
Raw
dabblet.css
/**
* reset css
*/
body {
margin: 0;
padding: 0;
}
/**
* colorful css
*/
.background2{
background: #eee4da;
color: #7c736a;
}
.background4{
background: #ece0c8;
color: #7c736a;
}
.background8{
background: #f2b179;
color: #7c736a;
}
.background16{
background: #f59563;
color: #fff7eb;
}
.background32{
background: #f57c5f;
color: #fff7eb;
}
.background64{
background: #f65d3b;
color: #fff7eb;
}
.background128{
background: #edce71;
color: #fff7eb;
}
.background256{
background: #edcc61;
color: #fff7eb;
}
.background512{
background: #9c0;
color: #fff7eb;
}
.background1024{
background: #33b5e5;
color: #fff7eb;
}
.background2048{
background: #9c0;
color: #fff7eb;
}
/*
* base css
*/
#panel{
width: 600px;
/*height: 700px;*/
background: #faf8ef;
margin: 0 auto;
padding-bottom: 15px;
}
#header {
height: 125px;
}
#main{
width: 500px;
height: 500px;
margin: 0 auto;
background: #aaa195 url(../panelbd.jpg);
padding: 35px 25px 25px 35px;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
position: relative;/*important*/
}
#game_logo,
#game_start,
#score {
width: 100px;
height: 100px;
background: #fe0100;
position: relative;
left: 85px;
top: 12px;
color: #fff;
line-height: 100px;
font-size: 35px;
text-align: center;
float: left;
cursor: pointer;
}
#score {
left: 205px;
background: #000;
display: none;
filter:alpha(opacity=40);
-moz-opacity:0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}
#game_start {
left: 205px;
background: #000;
filter:alpha(opacity=40);
-moz-opacity:0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}
.main_grid {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
background: #beb5a9;
line-height: 100px;
color: #fff7eb;
text-align: center;
font-size: 47px;
/*transition: ease-out .1s;*/
transition: .2s ease-in;
position: absolute;
}
.main_grid:last-child{
margin-bottom: 0;
margin-right: 0;
}
Raw
dabblet.html
<div id="panel">
<div id="header">
<div id="game_logo">2048</div>
<div id="game_start">Start</div>
<div id="score">0</div>
</div>
<div id="main">
&nbsp;
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
alert(1);
$("#game_start").click(function(event){
Game2048.initGrid();
$("#game_start").hide();//最好能翻转
$("#score").show();
})
$(document).keydown(function(event){
//up 38 down 40 left 37 right 39
var keyCode = event.keyCode;
if( keyCode === 38 ){
Game2048.moveGrid_vertial("up");
}
if( keyCode === 40 ){
Game2048.moveGrid_vertial("down");
}
if( keyCode === 37 ){
Game2048.moveGrid_horizontal("left");
}
if( keyCode === 39 ){
Game2048.moveGrid_horizontal("right");
}
})
})
</script>
Raw
dabblet.js
var Game2048 = (function(w){
var Game2048 = {},
grid_arr = [],//cache数组中存储对象
score = 0,
button_status = true;
var config = {
"padding_outer" : 35,
"margin_inner" : 10,
"size" : 100
}
Game2048.reset = function(){
for(var i=0; i<4; i++){
grid_arr[i] = [];
for(var j=0; j<4; j++){
grid_arr[i][j] = {
dataset : {
number : 0
}
} ;
}
}
}
Game2048.createNumber = function(){
//generate 2 or 4 in random
var genergate = [2,2,2,2,4],
index ;
index = Math.floor(Math.random()*genergate.length);
return genergate[index];
}
Game2048.insertNumber = function(location, number){
var htmlStr = "<div data-index='n" + location.y + "" + location.x + "' class='main_grid background" + number + "' style='left:" + (location.x*(config.margin_inner + config.size) + config.padding_outer) + "px;top:" + (location.y*(config.margin_inner + config.size) + config.padding_outer) + "px;' data-number=" + number + ">" + number + "</div>";
var element = $(htmlStr).appendTo("#main");
//更新数组
grid_arr[location.y][location.x] = element[0];
}
Game2048.clearDomElement = function(){
setTimeout(function(){
var number_random = Game2048.createNumber();
var location_new = Game2048.selectLocation();
location_new && Game2048.insertNumber(location_new, number_random);
var ele_arr = $("#main").find("div[data-number=0]").remove();
for(var i=0;i<ele_arr.length;i++){
var index = ele_arr[i].dataset.index;
var number_new = parseInt( ele_arr[i].innerHTML) * 2;
$("#main").find("div[data-index='"+index+"']")
.removeClass()
.addClass("main_grid background" + number_new)
.html( number_new )
}
$("#score").html(score);
if( Game2048.gameover() ){
alert("Gameover!");
}
},200)
}
Game2048.selectLocation = function(){
//select locate in random
var empty_arr = [];
for(var x = 0 ; x < 4; x++){
for(var y = 0; y < 4; y++){
if( grid_arr[x][y].nodeType != 1){
var temp_location = {
"x" : y,
"y" : x
};
empty_arr.push( temp_location );
}
}
}
var location_new = empty_arr[Math.floor(Math.random()*empty_arr.length)];
return location_new;
}
Game2048.isUsed_btn = function(){
}
Game2048.moveGrid_vertial = function(direction){
var tmp_arr,
flag ;
function animateGrid_exchange(obj, top, attr, text){//DOM function
$(obj).css("top", top)
.attr(attr)
//.html(text);//滑动的假象
}
function animateGrid_occupy(obj, top, attr){
$(obj).css("top", top)
.attr(attr);
}
if( direction == "up"){
if( button_status== false){
return;
}else{
button_status = false;
}
for(var i = 0;i < 4;i++){
flag = 0;
for(var j = 1;j < 4;j++){
if( grid_arr[j][i].dataset.number == 0){
continue;
}
for(var p = flag; p < j;){
if( grid_arr[p][i].dataset.number == grid_arr[j][i].dataset.number ){
if( grid_arr[p][i].dataset.number != 0 ){
grid_arr[p][i].dataset.number = grid_arr[p][i].dataset.number << 1;
score += parseInt( grid_arr[p][i].dataset.number );
//滑动效果
animateGrid_exchange(grid_arr[j][i], flag*(config.margin_inner + config.size) + config.padding_outer + "px", {"data-index":"n" + p + "" + i, "data-number":0},
grid_arr[p][i].dataset.number);
//最后显示的数字
$(grid_arr[p][i]).attr({"data-number":grid_arr[p][i].dataset.number})
//.html(grid_arr[p][i].dataset.number);
grid_arr[j][i] = {
dataset : {
number : 0
}
};
//flag 需要更新一个1
p = flag = flag + 1;
}else{
break;
}
}else{
if( grid_arr[p][i].dataset.number == 0 && grid_arr[j][i].dataset.number != 0){
tmp = grid_arr[p][i];
grid_arr[p][i] = grid_arr[j][i];
grid_arr[j][i] = tmp;
animateGrid_occupy(grid_arr[p][i], flag*(config.margin_inner + config.size) + config.padding_outer + "px", {"data-index":"n"+p+""+i});
p = p + 1;
}else if( grid_arr[p][i].dataset.number != 0 && grid_arr[j][i].dataset.number != 0){
p = flag = flag + 1;
}else{
p = p + 1;
}
}
}
}
}
button_status = true;
}
if( direction == "down"){
if( button_status== false){
return;
}else{
button_status = false;
}
for(var i = 0;i < 4;i++){
flag = 3;
for(var j = 2;j >= 0;j--){
if( grid_arr[j][i].dataset.number == 0){
continue;
}
for(var p = flag; p > j;){
if( grid_arr[p][i].dataset.number == grid_arr[j][i].dataset.number ){
//
if( grid_arr[p][i].dataset.number != 0 ){
grid_arr[p][i].dataset.number = grid_arr[p][i].dataset.number << 1;
score += parseInt( grid_arr[p][i].dataset.number );
animateGrid_exchange(grid_arr[j][i], flag*(config.margin_inner + config.size) + config.padding_outer + "px", //出现数字了
{"data-index":"n" + p + "" + i,"data-number":0}, grid_arr[p][i].dataset.number);
$(grid_arr[p][i]).attr({"data-number":grid_arr[p][i].dataset.number})
//.html(grid_arr[p][i].dataset.number);
grid_arr[j][i] = {
dataset : {
number : 0
}
};
p = flag = flag - 1;
}else{
break;
}
}else{
if( grid_arr[p][i].dataset.number == 0 && grid_arr[j][i].dataset.number != 0){
tmp = grid_arr[p][i];
grid_arr[p][i] = grid_arr[j][i];
grid_arr[j][i] = tmp;
animateGrid_occupy(grid_arr[p][i], flag*(config.margin_inner + config.size) + config.padding_outer + "px", {"data-index":"n"+p+""+i});
p = p - 1;
}else if( grid_arr[p][i].dataset.number != 0 && grid_arr[j][i].dataset.number != 0){
p = flag = flag - 1;
}else{
p = p - 1;
}
}
}
}
}
button_status = true;
}
this.clearDomElement();
}
Game2048.moveGrid_horizontal = function(direction){
var tmp_arr,
flag ;
function animateGrid_exchange(obj, left, attr, text){//DOM function
$(obj).css("left", left)
.attr(attr)
//.html(text);
}
function animateGrid_occupy(obj, left, attr){//DOM function
$(obj).css("left", left)
.attr(attr);
}
if( direction == "left"){
if( button_status== false){
return;
}else{
button_status = false;
}
for(var i = 0;i < 4;i++){
flag = 0;
for(var j = 1;j < 4;j++){ //i or p---j 在数组中
if( grid_arr[i][j].dataset.number == 0){
continue;
}
for(var p = flag; p < j;){
//alert(""+i+p);
//alert(""+i+j);
//alert(parseInt(grid_arr[i][p].dataset.number) == parseInt(grid_arr[i][j].dataset.number));
if( grid_arr[i][p].dataset.number == grid_arr[i][j].dataset.number ){
if( parseInt(grid_arr[i][p].dataset.number) != 0 ){
//alert(1);
grid_arr[i][p].dataset.number = parseInt(grid_arr[i][p].dataset.number) << 1;
grid_arr[i][j].dataset.number = 0;
score += parseInt( grid_arr[i][p].dataset.number);
animateGrid_exchange(grid_arr[i][j], flag*(config.margin_inner + config.size) + config.padding_outer + "px", {"data-index":"n"+i+""+p,"data-number":0}, grid_arr[i][p].dataset.number);
$(grid_arr[i][p]).attr({"data-number":grid_arr[i][p].dataset.number});
grid_arr[i][j] = {
dataset : {
number : 0
}
};
p = flag = flag + 1;
}else{
break;
}
}else{
if( grid_arr[i][p].dataset.number == 0 && grid_arr[i][j].dataset.number != 0){
tmp = grid_arr[i][p];
grid_arr[i][p] = grid_arr[i][j];
grid_arr[i][j] = tmp;
//$(grid_arr[i][p]).css("left", flag*(config.margin_inner + config.size) + config.padding_outer + "px").attr("data-index","n"+i+""+p);
animateGrid_occupy(grid_arr[i][p], flag*(config.margin_inner + config.size) + config.padding_outer + "px", {"data-index":"n" + i + "" + p});
p = p + 1;
}else if( grid_arr[i][p].dataset.number != 0 && grid_arr[i][j].dataset.number != 0){
p = flag = flag + 1;
}else{
p = p + 1;
}
}
}
}
}
button_status = true;
}
if( direction == "right"){
if( button_status== false){
return;
}else{
button_status = false;
}
for(var i = 0;i < 4;i++){
flag = 3;
for(var j = 2;j >= 0;j--){
if( grid_arr[i][j].dataset.number == 0){
continue;
}
for(var p = flag; p > j;){
if( grid_arr[i][p].dataset.number == grid_arr[i][j].dataset.number ){
if( grid_arr[i][p].dataset.number != 0 ){
grid_arr[i][p].dataset.number = grid_arr[i][p].dataset.number << 1;
grid_arr[i][j].dataset.number = 0;
score += parseInt( grid_arr[i][p].dataset.number );
animateGrid_exchange(grid_arr[i][j], flag*(config.margin_inner + config.size) + config.padding_outer + "px", {"data-index":"n"+i+""+p,"data-number":0}, grid_arr[i][p].dataset.number);
$(grid_arr[i][p]).attr({"data-number":grid_arr[i][p].dataset.number})
//.html(grid_arr[i][p].dataset.number);
grid_arr[i][j] = {
dataset : {
number : 0
}
};
p = flag = flag - 1;
}else{
break;
}
}else{
if( grid_arr[i][p].dataset.number == 0 && grid_arr[i][j].dataset.number != 0){
tmp = grid_arr[i][p];
grid_arr[i][p] = grid_arr[i][j];
grid_arr[i][j] = tmp;
animateGrid_occupy(grid_arr[i][p], flag*(config.margin_inner + config.size) + config.padding_outer + "px", {"data-index":"n" + i + "" + p});
p = p - 1;
}else if( grid_arr[i][p].dataset.number != 0 && grid_arr[i][j].dataset.number != 0){
p = flag = flag - 1;
}else{
p = p - 1;
}
}
}
}
}
button_status = true;
}
this.clearDomElement();
}
Game2048.gameover = function(){
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
if( grid_arr[i][j].dataset.number == 0 || grid_arr[i][j+1].dataset.number == 0){//0就直接返回吧
return false;
}
if( grid_arr[i][j].dataset.number == grid_arr[i][j+1].dataset.number ){//0 or 相等
return false;
}
}
}
//up to down
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
if( grid_arr[j][i].dataset.number == 0 || grid_arr[j+1][i].dataset.number == 0){
return false;
}
if( grid_arr[j][i].dataset.number == grid_arr[j+1][i].dataset.number ){
return false;
}
}
}
return true;
}
Game2048.initGrid = function(){
Game2048.reset();
var loc = this.selectLocation(),
number_start = 2;
this.insertNumber(loc, number_start);
}
return Game2048;
}(window));
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment