用javascript实现2048的小游戏
前段时间，看了一个视频，用javascript实现的2048小游戏，发现不难，都是一些基出的语法和简单逻辑。
整个2048游戏没有很多的数据，所有，实现起来还是很有成就感的。
先上图，简直就和原版游戏一样一样的。
下面分享一下整个2048游戏的代码逻辑：
首先，搭建游戏框架
其次，开始我们的代码编写
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网页版2048</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript"
src="http://libs.baidu.com/jquery/1.9.0/jquery.min.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></h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>
score:<span id="score"></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>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网页版2048</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript"
src="http://libs.baidu.com/jquery/1.9.0/jquery.min.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></h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>
score:<span id="score"></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>
index.css
@CHARSET "UTF-8";
header{
display:block;
margin: auto;
width:500px;
text-align:center;
}
header h1{
font-family:Arial, Helvetica, sans-serif;
font-size:60px;
font-weight:bold;
}
header #newgamebutton{
width:100px;
padding:10px;
background:#8f7a66;
font-family:Arial, Helvetica, sans-serif;
color:white;
border-radius:10px;
text-decoration:none;
}
header #newgamebutton:hover{
background:#9f8b77;
}
header p{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
margin:20px auto;
}
#grid-container{
width:460px;
height:460px;
padding:20px;
margin:50px auto;
background:#bbada0;
border-radius:10px;
position:relative;
}
.grid-cell{
width:100px;
height:100px;
border-radius:6px;
background:#ccc0b3;
position:absolute;
}
.number-cell{
width:100px;
height:100px;
border-radius:6px;
line-height:100px;
font:Arial, Helvetica, sans-serif;
font-size:60px;
font-weight:bold;
text-align: center;
position:absolute;
}
main2048.js
var board = new Array();
var score = ;
var top = ;
$(document).ready(function(e){
newgame();
}); function newgame(){
//初始化棋盘格
init();
//在随机两个各自声称的数字
generateOneNumber();
generateOneNumber();
} function init(){
for(var i = ;i<;i++){
for(var j = ;j<;j++){
var gridCell = $("#grid-cell-"+i+"-"+j);
gridCell.css("top",getPosTop(i,j));
gridCell.css("left",getPosLeft(i,j));
}
} for(var i = ; i<;i++){
board[i] = new Array();
for(var j = ;j<;j++){
board[i][j] = ;
}
} updateBoardView();//通知前端对board二位数组进行设定。
} function updateBoardView(){
$(".number-cell").remove();
for(var i = ;i<;i++){
for ( var j = ; j < ; j++) {
$("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');
var theNumberCell = $('#number-cell-'+i+'-'+j);
if(board[i][j] == ){
theNumberCell.css('width','0px');
theNumberCell.css('height','0px');
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
}else{
theNumberCell.css('width','100px');
theNumberCell.css('hegiht','100px');
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
//NumberCell覆盖
theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));//返回背景色
theNumberCell.css('color',getNumberColor(board[i][j]));//返回前景色
theNumberCell.text(board[i][j]);
}
}
}
} function generateOneNumber(){
if (nospace(board))
return false; //随机一个位置
var randx = parseInt(Math.floor(Math.random()*));
var randy = parseInt(Math.floor(Math.random()*));
while(true){
if (board[randx][randy] == )
break;
randx = parseInt(Math.floor(Math.random()*));
randy = parseInt(Math.floor(Math.random()*));
}
//随机一个数字
var randNumber = Math.random()<0.5 ? : ;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
return true;
} //事件响应循环
$(document).keydown(function(event){
switch (event.keyCode) {
case ://left
if(moveLeft()){
//setTimeout("generateOneNumber()",210);
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();//300毫秒
}
break;
case ://up
if(moveUp()){
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();
}
break;
case ://right
if(moveRight()){
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();
}
break;
case ://down
if(moveDown()){
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();
}
break; }
}); function isgameover(){
if(nospace(board)&&nomove(board))
gameover();
} function gameover(){
alert("gameover");
} function moveLeft(){//更多地细节信息
//判断格子是否能够向左移动
if( !canMoveLeft(board))
return false; //真正的moveLeft函数//标准
for(var i = ;i<;i++)
for(var j = ;j<;j++){//第一列的数字不可能向左移动
if(board[i][j] !=){
//(i,j)左侧的元素
for(var k = ;k<j;k++){
//落脚位置的是否为空 && 中间没有障碍物
if(board[i][k] == && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
board[i][k] = board[i][j];
board[i][j] = ;
continue;
}
//落脚位置的数字和本来的数字相等 && 中间没有障碍物
else if(board[i][k] == board[i][j] && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
//add
board[i][k] += board[i][j];
board[i][j] = ; continue;
}
}
}
}
setTimeout("updateBoardView()",);
return true;
}
support2048.js
function getPosTop(i, j) {
return + i * ;
}
function getPosLeft(i, j) {
return + j * ;
}
function getNumberBackgroundColor(number) {
switch (number) {
case :
return "#eee4da";
break;
case :
return "#eee4da";
break;
case :
return "#f26179";
break;
case :
return "#f59563";
break;
case :
return "#f67c5f";
break;
case :
return "#f65e36";
break;
case :
return "#edcf72";
break;
case :
return "#edcc61";
break;
case :
return "#9c0";
break;
case :
return "#3365a5";
break;
case :
return "#09c";
break;
case :
return "#a6bc";
break;
case :
return "#93c";
break;
}
return "black";
}
function getNumberColor(number) {
if (number <= ){
return "#776e65";
}
return "white";
}
//在随机生成数字的时候判断16宫格中是否还有空间
function nospace(board) {
for ( var i = ; i < ; i++)
for ( var j = ; j < ; j++)
if (board[i][j] == )
return false;
return true;
}
//实现功能判断
function canMoveLeft( board ){
for(var i = ;i<;i++)
for(var j = ;j<;j++)
if( board[i][j] != )
if( board[i][j-] == || board[i][j-] == board[i][j])
return true;
return false;
}//判断水平方向是否有障碍物
function noBlockHorizontal(row, col1, col2, board){
for(var i = col1 + ; i<col2; i++)
if(board[row][i]!=)
return false;
return true;
}//最后收尾
function nomove(board){
if(canMoveLeft(board)|| canMoveRight(board))
return false;
return true;
}
showanimation2048.js
function showNumberWithAnimation(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 : "100px",
height : "100px",
top : getPosTop(i, j),
left : getPosLeft(i, j)
}, );
}
function showMoveAnimation(fromx, fromy, tox, toy){
var numberCell = $('#number-cell-'+fromx +'-'+fromy);
numberCell.animate({top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)},);
}
function showNumberWithAnimation(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 : "100px",
height : "100px",
top : getPosTop(i, j),
left : getPosLeft(i, j)
}, );
}
function showMoveAnimation(fromx, fromy, tox, toy){
var numberCell = $('#number-cell-'+fromx +'-'+fromy);
numberCell.animate({top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)},);
}
在功能代码上只做了向左滑动，向右，向上，向下的功能代码基本一致。读者可以自行编写。
如果有需要在上传完整项目代码。
用javascript实现2048的小游戏的更多相关文章
- JavaScript+HTML5 实现打地鼠小游戏
一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaS ...
- 使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
- JavaScript实现Fly Bird小游戏
1.分析页面结构,理清需求和功能 游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面. 1.1 开始界面 start.gif 游戏的大背景 上下移动的游戏标题和翅膀摆动的小鸟 start 按钮,点 ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- .Net Core ORM选择之路，哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- 用WPF做了几个小游戏
最近看书看累了,参考别人的代码(其实差不多就是把代码重新打了一遍o(╯□╰)o),用wpf做了个<2048>小游戏,顺便在<Git教程>学习下git,也顺便把在<写让别人 ...
- flappy pig小游戏源码分析(1)——主程序初探
闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...
- ios2048小游戏
最近突然想写一个2048的小游戏,由于全部是自定义控件,所以程序看起来冗杂,但是核心的算法部分还是很不错的,大家感兴趣的可以仔细看看. 声明部分: #import <UIKit/UIKit.h& ...
- HTML+CSS+JavaScript实现2048小游戏
相信很多人都玩过2048小游戏,规则易懂.操作简单,我曾经也“痴迷”于它,不到2048不罢休,最高成绩合成了4096,现在正好拿它来练练手. 我对于2048的实现,除了使用了现有2048小游戏的配色, ...
随机推荐
- 大约sql声明优化
最近做的mysql数据库优化,并sql声明优化指南.我写了一个小文件.这种互相鼓励有关! 数据库参数获得的性能优化升级都在一起只占数据库应用系统的性能改进40%左右.其余60%的系统性能提升所有来自相 ...
- myeclipse解决JSP文件script调整背景颜色
1进口MyEclipse主题后,打开jsp要么html文件,jsvascript部分原因遭遇了一层白色的.闪避这个时候.症状,如下面: watermark/2/text/aHR0cDovL2Jsb2c ...
- shell 监控局域网的主机是否up（转）
#!/bin/bash for ((i=30;i<60;i++)) ;do ping -c 3 172.31.0.$i>/dev/null #ping -c 172.31.0.30 ~17 ...
- Notepad++ 经常使用快捷键 (MEMO）
最近的一项研究Lua,使用Notepad++ 作为编译器. 今天早上无意中按下 Ctrl+D ,.突然认为Notepad++ 这东西非常奇妙. 网上查找了Notepad++的快捷键,尝试 Ctrl+Q ...
- Git与TortoiseGit基本操作（转）
1. GitHub操作 本节先简单介绍 git 的使用与操作, 然后再介绍 TortoiseGit 的使用与操作. 先看看SVN的操作吧, 最常见的是 检出(Check out ...), 更新 (U ...
- Visual studio 2013 bug:visual studio no editoroptiondefinition export found for the given option nam
昨天VS 2013打开项目,双击cs当文件,下面出现bug. Google没有理由.最后,在刚刚好清理C磁盘缓存用户文件夹. 然后就OK了. 详细的路径是:C:\Users\{当前用户}\AppDat ...
- Java依据Url下载图片
package com.ronniewang.downloadpicture; import java.io.DataInputStream; import java.io.File; import ...
- jQuery.extend()方法和jQuery.fn.extend()方法
jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例, ...
- java保存获取Web内容的文件
package com.mkyong; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.F ...
- cocos2d 缓存池 对象的再利用
1.简单的叙述说明池 例如,我们知道,游戏的游戏类型跑酷,游戏元素都在不断重复.游戏的内容将继续从屏幕右侧的创建,当元件在屏幕的左侧的,将消失.假设不变new 对象.release 对象 性能影响.怎 ...