【基于HTML技术的趣味“2048”小游戏】（效果+源代码）
目录
-
- 游戏运行效果粗览
- 代码
- 其他说明
游戏运行效果粗览
初始化界面：
动态游戏界面预览：
代码
demo.html
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js">script>
<script type="text/javascript" src="js/support.js">script>
<script type="text/javascript" src="js/show.js">script>
<script type="text/javascript" src="js/main.js">script>
head>
<body>
<div class="header">
<a href="javascript:newgame();" id="newgamebutton" onclick="newgame()">重新开始a>
<p>得分:<span id="score">0span>p>
div>
<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>
style.css
@charset "utf-8";
.header{display:block;margin:0px auto;width:100%;text-align:center;}
.header h1{font-family:Arial;font-size:30px;font-weight:bold;}
.header #newgamebutton{display:block;margin:0px 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:20px;margin:5px auto;}
/* grid-container */
#grid-container{width:460px;height:460px;padding:50px;margin:5px auto;background-color:#bbada0;
border-radius:10px;position:relative;}
.grid-cell{width:100px;height:100px;border-radius:6px;background-color:#ccc0b3;
position:absolute;}
.number-cell{border-radius:6px;width:100px;height:100px;font-family:Arial;font-weight:bold;font-size:60px;line-height:100px;text-align:center;
position:absolute;}
show.js
function showNumber(i,j,randNumber){
var numberCell=$("#number-cell-"+ i +"-" + j);
numberCell.css('background-color',getNumberBackgroundColor(randNumber));
numberCell.css('color',getNumberColor(randNumber));
numberCell.text(randNumber);
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);
}
main.js
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){
gridContainerWidth=500;
cellSapce=20;
cellSideLength=100;
}
$('#grid-container').css('width',gridContainerWidth-2*cellSapce);
$('#grid-container').css('height',gridContainerWidth-2*cellSapce);
$('#grid-container').css('padding',cellSapce);
$('#grid-container').css('border-radius',0.02*gridContainerWidth);
$('.grid-cell').css('width',cellSideLength);
$('.grid-cell').css('height',cellSideLength);
$('.grid-cell').css('border-radius',0.02*cellSideLength);
}
function newgame(){
init();
generateOneNumber();
generateOneNumber();
}
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('+i+'-'+j+'">');
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*0.5);
theNumberCell.css('left',getPosLeft(i,j)+cellSideLength*0.5);
theNumberCell.text("");
}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]);
}
hasConflicted[i][j]=false;
}
}
$('.number-cell').css('line-height',cellSideLength+'px');
$('.number-cell').css('font-size',0.6*cellSideLength+'px');
}
function generateOneNumber(){
if(nospace(board)){
return false;
}
var randx=parseInt(Math.floor(Math.random()*4));
var randy=parseInt(Math.floor(Math.random()*4));
var times=0;
while (times<50){
if (board[randx][randy]==0)
break;
var randx=parseInt(Math.floor(Math.random()*4));
var randy=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){
randx=i;
randy=j;
}
}
}
}
var randNumber=Math.random()<0.5? 2 : 4;
board[randx][randy]=randNumber;
showNumber(randx,randy,randNumber);
return true;
}
$(document).keydown(function(event){
switch (event.keyCode){
case 37:
event.preventDefault();
if(moveLeft()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 38:
event.preventDefault();
if(moveUp()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 39:
event.preventDefault();
if(moveRight()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
case 40:
event.preventDefault();
if(moveDown()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
break;
default:
break;
}
});
document.addEventListener('touchstart',function(event){
event.preventDefault();
startx=event.touches[0].pageX;
starty=event.touches[0].pageY;
});
//document.activeElement('touchmove',function(event){
// event.preventDefault();
//});
document.addEventListener();
document.addEventListener('touchend',function(event){
event.preventDefault();
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 ;
}
if(Math.abs(deltax)>Math.abs(deltay)){
if(deltax>0){
if(moveRight()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}else{
if(moveLeft()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}
}else{
if(deltay>0){
if(moveDown()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}else{
if(moveUp()){
setTimeout("generateOneNumber()",210);
setTimeout("isgameover()",300);
}
}
}
});
function isgameover(){
if(nospace(board)&& nomove(board)){
gameover();
}
}
function gameover(){
alert("Gameover!");
}
function moveLeft(){
if(!canMoveLeft(board)){
return false;
}
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&& noBlockHorizontal(i,k,j,board)){
showMoveAnimation(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
break;
}
else if(board[i][k]==board[i][j]&& noBlockHorizontal(i,k,j,board)&&!hasConflicted[i][k])
{
showMoveAnimation(i,j,i,k);
board[i][k]+=board[i][j];
board[i][j]=0;
hasConflicted[i][k]=true;
score=score+board[i][k];
updateScore(score);
break;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveUp(){
if(!canMoveUp(board)){
return false;
}
for(var i= 1 ;i<4;i++) {
for (var j = 0; j < 4; j++) {
if(board[i][j]!=0){
for(var k=0;k<i;k++){
if(board[k][j]==0&& noBlockVertical(j,k,i,board)){
showMoveAnimation(i,j,k,j);
board[k][j]=board[i][j];
board[i][j]=0;
break;
}
else if(board[k][j]==board[i][j]&& noBlockVertical(j,k,i,board)&&!hasConflicted[k][j])
{
showMoveAnimation(i,j,k,j);
board[k][j]+=board[i][j];
board[i][j]=0;
hasConflicted[k][j]=true;
score=score+board[k][j];
updateScore(score);
break;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveRight(){
if(!canMoveRight(board)){
return false;
}
for(var i= 0 ;i<4;i++) {
for (var j = 2; j >-1; j--) {
if(board[i][j]!=0){
for(var k=3;k>j;k--){
if(board[i][k]==0&& noBlockHorizontal(i,j,k,board)){
showMoveAnimation(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
break;
}
else if(board[i][k]==board[i][j]&& noBlockHorizontal(i,j,k,board)&&!hasConflicted[i][k])
{
showMoveAnimation(i,j,i,k);
board[i][k]+=board[i][j];
board[i][j]=0;
hasConflicted[i][k]=true;
score=score+board[i][k];
updateScore(score);
break;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveDown(){
if(!canMoveDown(board)){
return false;
}
for(var i=2 ;i>-1;i--) {
for (var j = 0; j < 4; j++) {
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;
break;
}
else if(board[k][j]==board[i][j]&& noBlockVertical(j,i,k,board)&&!hasConflicted[k][j])
{
showMoveAnimation(i,j,k,j);
board[k][j]+=board[i][j];
board[i][j]=0;
hasConflicted[k][j]=true;
score=score+board[k][j];
updateScore(score);
break;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
其他说明
此外，还有用到的额外JS小部件，这是不需要自己编写的，下载即可。我也将整个源文件上传到了“资源”中，欢迎喜欢的朋友下载呀！