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

随机推荐

dedeCMS /data/mysql_error_trace.php DB error raised PHP Code Injection Via /include/dedesql.class.php Log FIle Without Access Validation
目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 dedecms采用面向对象封装的方式实现了功能操作的模块集中化,例如对于数据库管理 ...
利用php制作简单的文本式留言板
del.php 代码如下: <html><head ><meta charset="utf-8"><title>我的留言板</ ...
JSP+Servlet+javabean+oracle实现页面多条件模糊查询
之前写过一篇JSP+Servlet+javabean+mysql实现页面多条件模糊查询使用的是mysql进行的分页查询,mysql用limit控制,而oracle则是用rownum,今天第一次写or ...
range和xrange梳理
一.python2.7 range 用户获取指定范围内的数,range([start,] stop[, step]) >>> range(1,5) #代表从1到5(不包含5) [1, ...
《JavaScript权威指南》学习笔记第四天数组
昨天学习了js的对象,了解了js的原型链.在js里面万事万物皆对象,只不过一些原始类型要经过包装对象的包装才能暂时变为对象.数组的本质是什么呢?数组其实就是一组数,也就是链表.每个数只是这个链表上的一 ...
10 months then free? 10个月，然后自由
Parole board to recommend Oscar Pistorius be released in August 假释委员会将建议奥斯卡·皮斯托瑞斯在8月份被释放 By Don Melv ...
Javascript setTimeout 带参数延迟执行闭包实现
不是原创,只是借鉴别人的成果,我在此纪念 1.htm function GetDateT() { var d,s; d = new Date(); s = d.getFullYear() + &qu ...
setInterval js
$('#start_scan').on('click',function(){ if(timer == undefined){ timer = setInterval(scan,1000) start ...
ubuntu 安装php7.1
sudo apt-get update sudo apt-get install -y language-pack-en-base locale-gen en_US.UTF-8 sudo apt-ge ...
thinkphp安装版本 3.1.3
基础版: 只有thinkphp基础运行功能完整版:基础运行能力,还有图片.上传等各种处理类(建议下载完整版) 重要的三个变量 define('APP_DEBUG',True); // 定义应用目录d ...

javascript 2048游戏

javascript 2048游戏的更多相关文章

随机推荐

热门专题