javascript 2048游戏

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

 <title>无标题文档</title>

 <style>

 header{display:block; margin:0 auto; width:100%; text-align:center;}

 header h1{font-size:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}

 header #newgamebutton{display:block; margin:10px 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:10px auto;}

 #grid-container{width:460px; height:460px; padding:20px; margin:20px auto; background-color:#bbada0; border-radius:10px; position:relative;}

 .grid-cell{width:100px; height:100px; border-radius:6px; color:white;  background-color:#ccc0b3; position:absolute; font-family:Arial; font-weight:bold; font-size:60px; line-height:100px; text-align:center;}

 .gameover{display:block; margin:0 auto; width:500px; text-align:center; vertical-align:middle; position:absolute;}

 .gameover p {

     font-family: Arial;

     font-size: 50px;

     color: white;

     margin: 20px auto;

     margin-top: 150px;

 }

 .gameover span {

     font-family: Arial;

     font-size: 50px;

     color: white;

     margin: 20px auto;

 }

 #restartgamebutton {

     display: block;

     margin: 20px auto;

     width: 180px;

     padding: 10px 10px;

     background-color: #8f7a66;

     font-family: Arial;

     font-size: 30px;

     color: white;

     border-radius: 10px;

     text-decoration: none;

 }

 #restartgamebutton:hover {

     background-color: #9f8b77;

 }

 #showGameover{width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none; font-size:36px; position:absolute;}

 </style>

 <script>

 window.onload = function (){

     //newgame();

     var showScore = document.getElementById('score');

     score = 0;

     init();

     generateOneNumber();

     generateOneNumber();

     window.onkeydown = function (e){

         var e = e || window.event;

         switch(e.keyCode){

             case 37:

                 if(canMoveLeft(board)){

                     moveLeft();

                     generateOneNumber();

                     isgameover();

                 }

                 break;

             case 38:

                 if(canMoveUp(board)){

                     moveUp();

                     generateOneNumber();

                     isgameover();

                 }

                 break;

             case 39:

                 if(canMoveRight(board)){

                     moveRight();

                     generateOneNumber();

                     isgameover();

                 }

                 break;

             case 40:

                 if(canMoveDown(board)){

                     moveDown();

                     generateOneNumber();

                     isgameover();

                 }

                 break;

             default :

                 break;

         }

     };

 };

 function generateOneNumber() {

     if(!nospace(board)){

         var randx = parseInt(Math.floor(Math.random() * 4));

         var randy = parseInt(Math.floor(Math.random() * 4));

         while (true) {

             if (board[randx][randy] == 0) {

                 break;

             }

             var randx = parseInt(Math.floor(Math.random() * 4));

             var randy = parseInt(Math.floor(Math.random() * 4));

         }

         var randNumber = Math.random() < 0.5 ? 2 : 4;

         board[randx][randy] = randNumber;

         var gridCell = document.getElementById('grid-cell-'+randx+'-'+randy);

         gridCell.innerHTML = randNumber;

         //

     }

     else {

         gameover();

     }

 }

 function newgame() {

     window.location.reload();

 }

 var board = new Array();

 function init(){

     for(var i=0;i<4;i++){

         board[i] = new Array();

         for(var j=0;j<4;j++){

             board[i][j] = 0;

             var gridCell = document.getElementById('grid-cell-'+i+'-'+j);

             gridCell.style.top = (20+i*120)+'px';

             gridCell.style.left = (20+j*120)+'px';

         }

     }

 }

 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 "#f67c5f";break;

         case 64:return "#f65e3b";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;

     }

 }

 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 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 moveLeft() {

         for (var i = 0; i < 4; i++) {

             for (var j = 1; j < 4; j++) {

                 if (board[i][j] != 0) {

                     for (var k = j-1; k > -1; k--) {

                         if(board[i][k] == 0 || board[i][k] == board[i][j]){

                             board[i][k] = board[i][k] + board[i][j];

                             board[i][j] = 0;

                             var gridCell = document.getElementById('grid-cell-'+i+'-'+j);

                             gridCell.innerHTML = '';

                             var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);

                             gridCellk.innerHTML = board[i][k];

                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);

                             gridCell.style.backgroundColor = '#ccc0b3';

                             gridCellk.style.color = getNumberColor(board[i][k]);

                             gridCell.style.color = 'white';

                             score += board[i][k];

                             var showScore = document.getElementById('score');

                             showScore.innerHTML = score;

                             j = k;

                             //

                         }

                         else {

                             break;   //跳出 var k 的for循环

                         }

                     }

                 }

             }

         }

 }

 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 moveUp() {

         for (var j = 0; j < 4; j++) {

             for (var i = 1; i < 4; i++) {

                 if (board[i][j] != 0) {

                     for (var k = i-1; k > -1; k--) {

                         if(board[k][j] == 0 || board[k][j] == board[i][j]){

                             board[k][j] = board[k][j] + board[i][j];

                             board[i][j] = 0;

                             var gridCell = document.getElementById('grid-cell-'+i+'-'+j);

                             gridCell.innerHTML = '';

                             var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);

                             gridCellk.innerHTML = board[k][j];

                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);

                             gridCell.style.backgroundColor = '#ccc0b3';

                             gridCellk.style.color = getNumberColor(board[i][k]);

                             gridCell.style.color = 'white';

                             score += board[k][j];

                             var showScore = document.getElementById('score');

                             showScore.innerHTML = score;

                             i = k;

                             //

                         }

                         else {

                             break;   //跳出 var k 的for循环

                         }

                     }

                 }

             }

         }

 }

 function canMoveRight(board) {

     for (var i = 0; i < 4; i++) {

         for (var j = 2; j > -1; j--) {

             if (board[i][j] != 0) {

                 if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]) {return true; }

             }

         }

     }

     return false;

 }

 function moveRight() {

         for (var i = 0; i < 4; i++) {

             for (var j = 2; j > -1; j--) {

                 if (board[i][j] != 0) {

                     for (var k = j+1; k < 4; k++) {

                         if(board[i][k] == 0 || board[i][k] == board[i][j]){

                             board[i][k] = board[i][k] + board[i][j];

                             board[i][j] = 0;

                             var gridCell = document.getElementById('grid-cell-'+i+'-'+j);

                             gridCell.innerHTML = '';

                             var gridCellk = document.getElementById('grid-cell-'+i+'-'+k);

                             gridCellk.innerHTML = board[i][k];

                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);

                             gridCell.style.backgroundColor = '#ccc0b3';

                             gridCellk.style.color = getNumberColor(board[i][k]);

                             gridCell.style.color = 'white';

                             score += board[i][k];

                             var showScore = document.getElementById('score');

                             showScore.innerHTML = score;

                             j = k;

                             //

                         }

                         else {

                             break;   //跳出 var k 的for循环

                         }

                     }

                 }

             }

         }

 }

 function canMoveDown(board) {

     for (var j = 0; j < 4; j++) {

         for (var i = 2; i > -1; i--) {

             if (board[i][j] != 0) {

                 if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {return true; }

             }

         }

     }

     return false;

 }

 function moveDown() {

         for (var j = 0; j < 4; j++) {

             for (var i = 2; i > -1; i--) {

                 if (board[i][j] != 0) {

                     for (var k = i+1; k < 4; k++) {

                         if(board[k][j] == 0 || board[k][j] == board[i][j]){

                             board[k][j] = board[k][j] + board[i][j];

                             board[i][j] = 0;

                             var gridCell = document.getElementById('grid-cell-'+i+'-'+j);

                             gridCell.innerHTML = '';

                             var gridCellk = document.getElementById('grid-cell-'+k+'-'+j);

                             gridCellk.innerHTML = board[k][j];

                             gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);

                             gridCell.style.backgroundColor = '#ccc0b3';

                             gridCellk.style.color = getNumberColor(board[i][k]);

                             gridCell.style.color = 'white';

                             score += board[k][j];

                             var showScore = document.getElementById('score');

                             showScore.innerHTML = score;

                             i = k;

                             //

                         }

                         else {

                             break;   //跳出 var k 的for循环

                         }

                     }

                 }

             }

         }

 }

 function isgameover() {

     if (nospace(board) && nomove(board)) {

         gameover();

     }

 }

 function nomove(board) {

     if (canMoveDown(board) ||

     canMoveLeft(board) ||

     canMoveRight(board) ||

     canMoveUp(board)) {

         return false;

     }

     return true;

 }

 function bounce(obj,top){

     clearInterval(obj.timer);

     var nSpeed = 0;

     var acceleration = 9;

     var Flag = 0;

     obj.timer = setInterval(function (){

         nSpeed += acceleration;

         nSpeed *= 0.93;

         if(obj.offsetTop + nSpeed >= top){

             obj.style.top = top + 'px';

             nSpeed *= -1;

         }else{

             if(Math.abs(nSpeed) < 4 && Math.abs(top-obj.offsetTop)<1){

                 clearInterval(obj.timer);

             }

             else{

                 obj.style.top = obj.offsetTop + nSpeed + 'px';

             }

         }

     },30);

 }

 function gameover() {

     //alert("gameover!");

     var gameover = document.createElement('div');

     gameover.id = 'showGameover';

     gameover.innerHTML = 'GAME OVER';

     var gridContainer = document.getElementById('grid-container');

     gridContainer.appendChild(gameover);

     var showGameover = document.getElementById('showGameover');

     showGameover.style.left = (gridContainer.offsetWidth - showGameover.offsetWidth ) / 2 + 'px';

     bounce(showGameover,200);

 }

 </script>

 </head>

 <body>

     <header>

         <!--<h1> 2048 </h1>-->

         <a href="javascript:newgame();" id="newgamebutton"> New Game </a>

         <p> score: <span id="score">0</span></p>

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

     </header>

 </body>

 </html>

javascript 2048游戏的更多相关文章

最少javascript代码完成一个2048游戏
原生javascript代码写的2048游戏.建议在谷歌浏览器下跑.'WASD'控制方向.演示地址请移步:http://runjs.cn/detail/bp8baf8b 直接贴代码~ html: &l ...
用javascript制作2048游戏的思路（原创若转载请附上本链接）
一.项目已上传至github,地址:https://github.com/forjuan/2048game 二.学习了javascript基础后,想要捣鼓点东西做,做了一个自己以前很爱玩的2048游戏 ...
用javascript实现一个2048游戏
早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个如下图,按方向键开始玩吧. 如果觉得操作不方便,请直接打开链接玩吧: http://gujianbo.1kapp.com/2048/2048 ...
对弈类游戏的人工智能(5)--2048游戏AI的解读
前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对 ...
Cocos2d-html5入门之2048游戏
一.介绍 Cocos2d-JS是Cocos2d-x的Javascript版本,它的前身是Cocos2d-html5.在3.0版本以前叫做Cocos2d-html5,从3.0版本开始叫做Cocos2d- ...
powershell字符界面的，powershell加WPF界面的，2048游戏
------[序言]------ 1 2048游戏,有段时间很火,我在地铁上看有人玩过.没错,坐地铁很无聊,人家玩我就一直盯着看. 2 我在电脑上找了一个,试玩了以下,没几次格子就满了.我就气呼呼的放 ...
[python] python实现2048游戏，及代码解析。
我初学python,有不对之处望大家指教.转载请征得同意. 我在网络上也找了一些2048游戏代码的讲解,但都不是特别详细.所以我希望能够尽量详细的讲解.同时,有的地方我也不懂,希望大家能帮助补充.我会 ...
经典 HTML5 & Javascript 俄罗斯方块游戏
Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...
Android项目开发实战-2048游戏
<2048>是一款比较流行的数字游戏,最早于2014年3月20日发行.原版2048首先在GitHub上发布,原作者是Gabriele Cirulli,后被移植到各个平台.这款游戏是基于&l ...

随机推荐

Servlet基础-手工编写第一个servlet
[手工编写第一个servlet] [步骤] 1.继承HttpServlet 2.重写doGet()或者doPost()方法 //这个doGet或者doPost方法取决用户提交的方式 3.在web.x ...
PHP设计模式(三)
注册器模式这种模式比较简单好理解,在PHP框架中会经常用到,在某些比较大的PHP框架中,会在初始化时将一些常用的类实例放在注册器中,实际是存在注册器类中的一个静态数组中,以后想去用它的话,直接根据名 ...
数据结构作业——word（栈）
Description TonyY 是一个 word 小白,今天他对 word 中撤销和恢复功能特别感兴趣,玩耍了一个上午(mdzz~) ,现在他知道了它们的功能和快捷键:撤销:ctrl+z,可以撤销 ...
CF 439C Devu and Partitioning of the Array
题目链接: 传送门 Devu and Partitioning of the Array time limit per test:1 second memory limit per test: ...
wireshark过滤语法总结-重点偏移过滤
http://chenjiji.com/post/3371.html 作者: CHAN | 发布: 2013 年 10 月 24 日做应用识别这一块经常要对应用产生的数据流量进行分析. 抓包采用wi ...
BZOJ3282: Tree
传送门又是权限题= =,过了NOIp我就要去当一只权限狗! LCT裸题,get到了两个小姿势. 1.LCA操作应该在access中随时updata 2.Link操作可以更简单 void Link(i ...
IPsec 学习笔记
工作中需要,参考网上的资料对IPSecVPN进行学习,并通过博客记录下一些知识点作为学习记录和后续复习的材料. Transport Layer (TLS) 其中主要参考了以下文档: http://ww ...
Linux Basic --- The First Character in The File Properity
-rw-r--r-- [d]: content [-]: file [l]: link file [b]: interface device for storage in a device file ...
ecshop 批量生成订单信息
<?php /** * ecshop 给商品添加随机添加订单信息 * @author Abner * qq :346882795 * email: Abner3721@163.com * * * ...
PHP 数组（遍历）
数组定义$attr = array(); //定义一个空的数组$attr = array(1,2,3,4); //定义一个有值的数组$attr[0]="aa";$attr[1]=& ...

javascript 2048游戏

javascript 2048游戏的更多相关文章

随机推荐

热门专题