用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>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>


<!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>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>

index.css


@CHARSET "UTF-8";

header{
display:block;
margin:0 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 = 0;
var top = 240;
$(document).ready(function(e){
newgame();
});

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();
for(var j = 0;j<4;j++){
board[i][j] = 0;
}
}

updateBoardView();//通知前端对board二位数组进行设定。
}

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));
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()*4));
var randy = parseInt(Math.floor(Math.random()*4));
while(true){
if (board[randx][randy] == 0)
break;
randx = parseInt(Math.floor(Math.random()*4));
randy = parseInt(Math.floor(Math.random()*4));
}
//随机一个数字
var randNumber = Math.random()<0.5 ?2 : 4;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
return true;
}

//事件响应循环
$(document).keydown(function(event){
switch (event.keyCode) {
case 37://left
if(moveLeft()){
//setTimeout("generateOneNumber()",210);
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();//300毫秒
}
break;
case 38://up
if(moveUp()){
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();
}
break;
case 39://right
if(moveRight()){
generateOneNumber();//每次新增一个数字就可能出现游戏结束
isgameover();
}
break;
case 40://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 = 0;i<4;i++)
for(var j = 1;j<4;j++){//第一列的数字不可能向左移动
if(board[i][j] !=0){
//(i,j)左侧的元素
for(var k = 0;k<j;k++){
//落脚位置的是否为空 && 中间没有障碍物
if(board[i][k] == 0 && noBlockHorizontal(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] && noBlockHorizontal(i , k, j, board)){
//move
showMoveAnimation(i, j,i,k);
//add
board[i][k] += board[i][j];
board[i][j] = 0;

continue;
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}

support2048.js


function getPosTop(i, j) {
return 20 + i * 120;
}

function getPosLeft(i, j) {
return 20 + j * 120;
}

function getNumberBackgroundColor(number) {
switch (number) {
case 2:
return "#eee4da";
break;
case 4:
return "#eee4da";
break;
case 8:
return "#f26179";
break;
case 16:
return "#f59563";
break;
case 32:
return "#f67c5f";
break;
case 64:
return "#f65e36";
break;
case 128:
return "#edcf72";
break;
case 256:
return "#edcc61";
break;
case 512:
return "#9c0";
break;
case 1024:
return "#3365a5";
break;
case 2048:
return "#09c";
break;
case 4096:
return "#a6bc";
break;
case 8192:
return "#93c";
break;
}
return "black";
}

function getNumberColor(number) {
if (number <= 4){
return "#776e65";
}
return "white";
}

//在随机生成数字的时候判断16宫格中是否还有空间
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 canMoveLeft( board ){
for(var i = 0;i<4;i++)
for(var j = 0;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 noBlockHorizontal(row, col1, col2, board){
for(var i = col1 + 1; i<col2; i++)
if(board[row][i]!=0)
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)
}, 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 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)
}, 50);
}

function showMoveAnimation(fromx, fromy, tox, toy){

var numberCell = $(‘#number-cell-‘+fromx +‘-‘+fromy);
numberCell.animate({top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)},200);
}

在功能代码上只做了向左滑动,向右,向上,向下的功能代码基本一致。读者可以自行编写。

如果有需要在上传完整项目代码。

时间: 2024-11-10 16:02:15

用javascript实现2048的小游戏的相关文章

一款JavaScript开发的扫雷小游戏

<style><!-- #FLM_main { margin:50px auto; padding:20px; background:#EEE; zoom:1; width:650px; } #FLM_main table { border-collapse:collapse; background:#EEE; float:left; } #FLM_main table td { border:1px solid #CCC; font-size:20px; width:38px; hei

使用JavaScript实现剪刀石头布的小游戏(由浅到深)

使用JavaScript实现剪刀石头布的小游戏 简单的解析: 剪刀石头布的原理类似于一个数组中数字大小的比较,当然我们也可以将其分别使用对应的数字来代表剪刀石头布,在这里我们将 0 - 剪刀, 1 – 石头 , 2 – 布 我们要得到自己胜利的方式有一下几种可能 ① 我们胜利 ② 和电脑平局 ③ 电脑胜利 思路一: 将剪刀石头布分别使用数字代替,将数字作为实参,传入一个进行比较的方法,由于数字的不同,也使得出现的组合就不同.(这里我能使用随机数来让电脑随机生成0,1,2三个数的任意一个) 假设我

大大维的游戏机计划2--一个自制的类似2048的小游戏

承接上篇,这几日,笔者本来打算写一个2048的,但写着写着,突然有个想法,能不能搞一个将2048和消消乐结合起来的游戏,于是,笔者便写出了如下这个小游戏. 值得一提的是,整个游戏完全由笔者独自写成,并没有参考任何网上的代码,这跟上次写贪吃蛇前学了老半天网上已有代码就显得独立了很多.看来贪食蛇的书写还是让笔者受益匪浅 定义的游戏规则如下: 1.采用类似2048的游戏规则合成数字 2.加入消消乐的点选作用(类似于在PC端模拟了一下触摸屏) 3.加入地图压缩规则 4.由于游戏像2048,就叫他NEW2

JavaScript之打飞机小游戏 html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

JavaScript之打飞机小游戏 js css

先引入    jquery-1.12.4.min.js 和    lodash.min.js css .container{ width: 320px; height: 568px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; } .start-page{ width: 320px; height: 568px; background: url('../images/start_bg.png'

javascript实现贪吃蛇小游戏

源码地址:https://github.com/qmdx00/Snake ,请不要吝啬star. 首先画出UML类图: 用es6的语法,创建项目结构: 配置webpack: const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: path.resolve(__di

2048小游戏

需求分析:NABCD N(Need,需求) 生活在21世纪的我们已经进入电子时代,比如平板.笔记本.手机等等.而随着时代的进步,生活学习压力也在不断加大,而越来越多的人都会热衷于玩手机,当你感到无聊的时候,可以上上网,看看新闻,累了之后可以玩玩小游戏缓解一下,所以我们设计了这款2048的小游戏,既开发智力,又缓解疲劳. A(Approach,做法) 我们的小游戏是基于安卓平台的,而且对于其中的功能我们有良好的界面设计.可以和别人进行联机对战:在玩的过程中,游戏的流畅度是非常好的,我们还有种多种背

JavaScript版拼图小游戏

慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 在线预览(Chrome):http://sandbox.runjs.cn/show/pcwfu7i5 拼图游戏其实挺简单,主要是涉及到一些细节的处理,以下是我的自己在实现中涉及到的问题: 图片的切割与拼接 如何随机布局 如何切换图片 拖动图片溢出处理 怎么知道图片是否还原成功 实现思路: 为了简单

用WPF做了几个小游戏

最近看书看累了,参考别人的代码(其实差不多就是把代码重新打了一遍o(╯□╰)o),用wpf做了个<2048>小游戏,顺便在<Git教程>学习下git,也顺便把在<写让别人能读懂的代码>收获的插件用起来(和之前用的VisualAssist功能有重复调了半天(╯‵□′)╯︵┻━┻,不过整合之后真心好用).之后又用这个界面写了几个其他游戏,虽然逻辑都非常简单(不如2048复杂),不过也算举一反三吧……代码都在GitHub <2048> 别踩白块 找不同 MORE…