2048小游戏（javascript代码）
来源：互联网 发布：好看的网站源码 编辑：程序博客网 时间：2024/06/07 01:47
<html><head> <title>2048</title> <meta http-equiv='content-type' content='text/html;charset=gb2312' /> <style type="text/css"> body, div, ul, li, p { padding: 0; margin: 0; border-radius: 10px; } body { font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif; background: #FFFCEC; } .game_box { margin: 20px auto; width: 400px; } .info { height: 60px; color: #333; font-size: 32px; } .main_box { border: 2px solid #8E8E8E; background-color: #8E8E8E; height: 396px; color: #333; font-size: 36px; font-weight: 700; text-align: center; line-height: 100px; } .main_box li { float: left; background: #d0d0d0; border: 4px solid #8E8E8E; height: 91px; width: 91px; } .rule { color: #333; font-size: 16px; } </style></head><body onload="init();" onkeyup="run();"> <div class="game_box"> <div class="info"> <p style="float:right;">得分：<span id="score">0</span></p> 最大值：<span id="max_value">0</span> </div> <ul class="main_box"> <li id="11"></li> <li id="12"></li> <li id="13"></li> <li id="14"></li> <li id="21"></li> <li id="22"></li> <li id="23"></li> <li id="24"></li> <li id="31"></li> <li id="32"></li> <li id="33"></li> <li id="34"></li> <li id="41"></li> <li id="42"></li> <li id="43"></li> <li id="44"></li> </ul> <div style="clear:both;"></div> <p class="rule">玩法：</p> <p class="rule">1.用键盘上下左右键控制数字走向</p> <p class="rule">2.当点击了一个方向时，格子中的数字会全部往那个方向移动，直到不能再移动，如果有相同的数字则会合并</p> <p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p> </div></body><script type="text/javascript"> var table = { 11: 0, 12: 0, 13: 0, 14: 0, 21: 0, 22: 0, 23: 0, 24: 0, 31: 0, 32: 0, 33: 0, 34: 0, 41: 0, 42: 0, 43: 0, 44: 0 };//整个表格 var cur_queue = null;//由于移动时是一行或一列移动的，此变量代表需要处理的当前行和列 var direction = 0;//当前操作移动的方向 var max_value = 0;//最大值 var score = 0;//最高分数 function is_num_exist() {//判断当前处理行（列）是否有数字，有则进行处理，无则不用处理 if (table[cur_queue[1]] + table[cur_queue[2]] + table[cur_queue[3]] + table[cur_queue[4]] > 0) { return true; } else { return false; } } function need_move() {//当前行（列）是否需要移动（不包括合并） if (Boolean(table[cur_queue[4]]) >= Boolean(table[cur_queue[3]]) && Boolean(table[cur_queue[3]]) >= Boolean(table[cur_queue[2]]) && Boolean(table[cur_queue[2]]) >= Boolean(table[cur_queue[1]])) { return false; } else { return true; } } function need_merge() {//当前行（列）是否需要合并 if ((table[cur_queue[4]] == table[cur_queue[3]]) && table[cur_queue[4]] && table[cur_queue[3]] || (table[cur_queue[3]] == table[cur_queue[2]]) && table[cur_queue[3]] && table[cur_queue[2]] || (table[cur_queue[2]] == table[cur_queue[1]]) && table[cur_queue[2]] && table[cur_queue[1]]) { return true; } else { return false; } } function move() {//对当前行（列）的数字进行移动 for (var i = 4; i >= 2; i--) { if (Boolean(table[cur_queue[i]] < Boolean(table[cur_queue[i - 1]]))) { table[cur_queue[i]] = table[cur_queue[i - 1]]; table[cur_queue[i - 1]] = 0; break; } } } function merge() {//对当前行（列）的数字进行合并 for (var i = 4; i >= 2; i--) { if (table[cur_queue[i]] == table[cur_queue[i - 1]]) { score = score + table[cur_queue[i]]; table[cur_queue[i]] = table[cur_queue[i]] + table[cur_queue[i - 1]]; table[cur_queue[i - 1]] = 0; document.getElementById("score").innerHTML = score;//更新最高分 break; } } } function run() {//点击上下左右键时开始执行 var done = false; if (event.keyCode >= 37 && event.keyCode <= 40) {//只有 set_direction();//设置移动方向参数 for (var i = 1; i <= 4; i++) {//由于一个方向上移动时有4行（列）所以需要逐行处理 set_cur_queue(i);//设置当前行（列） if (is_num_exist()) { if (need_move() || need_merge()) { done = true;//此变量用来限制每次只合并一次 } while (need_move()) {//如果可以移动则一直移动 move(); } if (need_merge()) {//如果需要合并 if (table[cur_queue[1]] == table[cur_queue[2]] && table[cur_queue[3]] == table[cur_queue[4]]) {//特例，当一行（列）上四个数字全部相同时候，进行两次合并 merge(); while (need_move()) { move(); } merge(); } else { merge(); while (need_move()) { move(); } } } } } //var empty_box = find_empty_box();//获取当前空格子集合 //if(empty_box.length==0&&!need_merge()) {//如果没有没有空位且不能合并 //alert('Game over'); //return; //} if (done) {//如果此次有移动或合并，即有效操作，则生成新的数字 create_and_set_num(); } update_max_value();//更新最大值 draw();//重新绘制表格用于显示 } } function update_max_value() { max_value = 0; for (var i in table) { if (table[i] > max_value) { max_value = table[i]; } } document.getElementById("max_value").innerHTML = max_value; } function set_cur_queue(queue_num) { if (direction == 37) { cur_queue = { 1: queue_num * 10 + 4, 2: queue_num * 10 + 3, 3: queue_num * 10 + 2, 4: queue_num * 10 + 1 }; } else if (direction == 38) { cur_queue = { 1: 40 + queue_num, 2: 30 + queue_num, 3: 20 + queue_num, 4: 10 + queue_num }; } else if (direction == 39) { cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 }; } else if (direction == 40) { cur_queue = { 1: 10 + queue_num, 2: 20 + queue_num, 3: 30 + queue_num, 4: 40 + queue_num }; } else { cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 }; } } function draw() {//整体刷新16个格子 for (var i = 10; i <= 40; i += 10) { for (var j = 1; j <= 4; j++) { if (table[i + j] != 0) { document.getElementById(i + j).innerHTML = table[i + j]; } else { document.getElementById(i + j).innerHTML = ''; } } } } function set_direction() {//设置此次移动的方向 direction = event.keyCode; } function set_new_num(empty_box) {//生成新的数字 var num = 0; var ranNum = Math.random() * 100; if (ranNum > 80) { num = 4; } else { num = 2; } var box_num = Math.floor(Math.random() * (empty_box.length)); table[empty_box[box_num]] = num; } function find_empty_box() {//获得所有的空格子，即值为0的格子集合 var empty_box = []; for (var num in table) { if (table[num] == 0) { empty_box.push(num); } } return empty_box; } function init() { create_and_set_num(); for (var i = 1; i <= 4; i++) { set_cur_queue(i); draw(); } update_max_value(); } function create_and_set_num() { var empty_box; empty_box = find_empty_box(); set_new_num(empty_box); }</script></html><pre class="javascript" name="code">//自己重新写了一遍，收获不少<html> <head> <title>4096</title> <meta http-equiv="content-type" content="test/html; charset=gb2312" /> <style type="text/css"> body,p,ul,li,div { padding:0; margin:0; border-radius:10px; } body { font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif; background-image:url(image/backimage.jpg); } .game_box { margin:20px auto; width:400px; } .info { height:60px; color:red; font-size:32px; } .main_box { border:2px solid #8e8e8e; background-color:#8e8e8e; height:396px; color:black; font-size:32px; font-weight:800; text-align:center; line-height:90px; } .main_box li { float:left; background-color:#d0d0d0; border:4px solid #8e8e8e; height:91px; width:91px; } .rule { font-size:32px; color:#ffd800; } </style> </head> <body onload="init();" onkeyup="run();"> <div class="game_box"> <div class="info"> <p style="float:right;">得分：<span id="score">0</span></p> 最大值：<span id="max_value">0</span> </div> <ul class="main_box"> <li id="11">11</li> <li id="12">12</li> <li id="13">13</li> <li id="14">14</li> <li id="21">21</li> <li id="22">23</li> <li id="23">23</li> <li id="24">24</li> <li id="31">31</li> <li id="32">32</li> <li id="33">33</li> <li id="34">34</li> <li id="41">41</li> <li id="42">42</li> <li id="43">43</li> <li id="44">44</li> </ul> <div style="clear:both;"></div> <p class="rule">玩法</p> <p class="rule">1.用键盘上下左右键控制数字走向</p> <p class="rule">2.当点击了一个方向时，格子中的数字会全部往那个方向移动，直到不能再移动，如果有相同的数字则会合并</p> <p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p> <div> </body></html><script type="text/javascript"> var table = { 11: 0, 12: 0, 13: 0, 14: 0, 21: 0, 22: 0, 23: 0, 24: 0, 31: 0, 32: 0, 33: 0, 34: 0, 41: 0, 42: 0, 43: 0, 44: 0 }; var cur_queue = null; var score = 0; var direction = 0; var max_value = 0; function is_num_exist() { var sum = 0; for(var i=1;i<=4;i++) { sum += table[cur_queue[i]]; } if(sum>0) { return true; } else { return false; } } function need_move() { for(var i=4;i>=2;i--) { if (Boolean(table[cur_queue[i]]) >= Boolean(table[cur_queue[i - 1]])) continue; else break; } if(i==1) { return false; } else { return true; } } function need_merge() { var flag = false; for(var i=4;i>=2;i--) { if (table[cur_queue[i]] == table[cur_queue[i - 1]] && table[cur_queue[i]] && table[cur_queue[i - 1]]) { flag = true; break; } } if(flag) { return true; } else { return false; } } function move() { for(var i=4;i>=2;i--) { if(Boolean(table[cur_queue[i]])<Boolean(table[cur_queue[i-1]])) { table[cur_queue[i]] = table[cur_queue[i - 1]]; table[cur_queue[i - 1]] = 0; break; } } } function merge() { for(var i=4;i>=2;i--) { if(table[cur_queue[i]]==table[cur_queue[i-1]]) { table[cur_queue[i]] += table[cur_queue[i - 1]]; score += table[cur_queue[i]]; table[cur_queue[i - 1]] = 0; document.getElementById("score").innerHTML = score; break; } } } function set_direction() { direction = event.keyCode; } function set_cur_queue(num) { if(direction==37) { cur_queue = { 1: num * 10 + 4, 2: num * 10 + 3, 3: num * 10 + 2, 4: num * 10 + 1 }; } else if(direction==38) { cur_queue = { 1: 40 + num, 2: 30 + num, 3: 20 + num, 4: 10 + num }; } else if(direction==39) { cur_queue = { 1: num * 10 + 1, 2: num * 10 + 2, 3: num * 10 + 3, 4: num * 10 + 4 }; } else if(direction==40) { cur_queue = { 1: 10 + num, 2: 20 + num, 3: 30 + num, 4: 40 + num }; } else { cur_queue = { 1: num * 10 + 1, 2: num * 10 + 2, 3: num * 10 + 3, 4: num * 10 + 4 }; } } function update_max_value() { max_value = 0; for(var i in table) { if(table[i]>max_value) { max_value = table[i]; } } document.getElementById("max_value").innerHTML = max_value; } function draw() { for(var i=10;i<=40;i+=10) { for(var j=1;j<=4;j++) { if(table[i+j]!=0) { document.getElementById(i + j).innerHTML = table[i + j]; } else { document.getElementById(i + j).innerHTML = ''; } } } } function find_empty_box() { var empty_box = []; for(var num in table) { if(table[num]==0) { empty_box.push(num); } } return empty_box; } function set_new_num(empty_box) { var num = 0; var rannum = Math.random() * 100; if(rannum>80) { num = 4; } else { num = 2; } var box_num = Math.floor(Math.random() * empty_box.length) table[empty_box[box_num]] = num; } function creat_and_set_num() { var empty_box; empty_box = find_empty_box(); set_new_num(empty_box); } function init() { creat_and_set_num(); for(var i=1;i<=4;i++) { set_cur_queue(i); draw(); } update_max_value(); } function run() { var down = false; if(event.keyCode>=37&&event.keyCode<=40) { set_direction(); for(var i=1;i<=4;i++) { set_cur_queue(i); if(is_num_exist()) { if (need_move() || need_merge()) { down = true; } while(need_move()) { move(); } if(need_merge()) { if(table[cur_queue[1]]==table[cur_queue[2]]&&table[cur_queue[3]]==table[cur_queue[4]]) { merge(); while(need_move()) { move(); } merge(0); } else { merge(); while(need_move()) { move(); } } } } } if(down) { creat_and_set_num(); } update_max_value(); draw(); } }</script><pre class="javascript" name="code">//详细解释<html><head> <title>2048</title> <meta http-equiv='content-type' content='text/html;charset=gb2312' /> <style type="text/css"> body, div, ul, li, p { padding: 0; margin: 0; border-radius: 10px; } body { /*设置body体的格式*/ font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif; background-image: url(image/backimage.jpg); } .game_box { /*设置游戏大(外)格子（4*4的正方形）的格式*/ margin: 20px auto; width: 400px; } .info { /*设置积分的格式*/ height: 60px;/*字体距离格子的高度*/ color: #ff0000;/*字体颜色*/ font-size:32px;/*字体大小*/ } .main_box { /*设置小（内）格子的样式*/ border: 2px solid #8E8E8E; /*小格子与大格子之间的边框宽度和颜色*/ background-color: #8E8E8E; /*格子之间空隙处的颜色*/ height: 400px;/*游戏格子（4*4的）的高度*/ color: #333; /*数字颜色*/ font-size: 32px;/*数字的大小*/ font-weight: 700;/*字体加粗程度*/ text-align: center;/*字体出现的位置*/ line-height: 90px;/*距离小格子上边框距离*/ } .main_box li {/*小格子的格式*/ float: left; background: #d0d0d0;/*小格子的背景色*/ border: 4px solid #8E8E8E;/*小格子之间的边框宽度和颜色*/ height: 91px;/*小格子的高和宽*/ width: 91px; } .rule {/*设置规则说明的格式*/ color: #333;/*字体颜色是黑色*/ font-size: 16px;/*字体大小*/ } </style></head><body onload="init();" onkeyup="run();"> <div class="game_box"> <div class="info"> <p style="float:right;">得分：<span id="score">0</span></p> 最大值：<span id="max_value">0</span> </div> <ul class="main_box"> <li id="11"></li> <li id="12"></li> <li id="13"></li> <li id="14"></li> <li id="21"></li> <li id="22"></li> <li id="23"></li> <li id="24"></li> <li id="31"></li> <li id="32"></li> <li id="33"></li> <li id="34"></li> <li id="41"></li> <li id="42"></li> <li id="43"></li> <li id="44"></li> </ul> <div style="clear:both;"></div> <p class="rule">玩法：</p> <p class="rule">1.用键盘上下左右键控制数字走向</p> <p class="rule">2.当点击了一个方向时，格子中的数字会全部往那个方向移动，直到不能再移动，如果有相同的数字则会合并</p> <p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p> </div></body></html><script type="text/javascript"> var table = //初始化整个表格，11：0表示id号为11的格子内的数为0； { 11: 0, 12: 0, 13: 0, 14: 0, 21: 0, 22: 0, 23: 0, 24: 0, 31: 0, 32: 0, 33: 0, 34: 0, 41: 0, 42: 0, 43: 0, 44: 0 }; var cur_queue = null;//由于移动时是一行或一列移动的，此变量代表需要处理的当前行和列 var direction = 0;//当前操作移动的方向 var max_value = 0;//最大值 var score = 0;//最高分数 function is_num_exist() { //判断当前处理行（列）是否有数字，有则进行处理，无则不用处理 if (table[cur_queue[1]] + table[cur_queue[2]] + table[cur_queue[3]] + table[cur_queue[4]] > 0) { return true; } else { return false; } } function need_move() { //当前行（列）是否需要移动（不包括合并） if (Boolean(table[cur_queue[4]]) >= Boolean(table[cur_queue[3]]) && Boolean(table[cur_queue[3]]) >= Boolean(table[cur_queue[2]]) && Boolean(table[cur_queue[2]]) >= Boolean(table[cur_queue[1]])) { return false; } else { return true; } } function need_merge() { //当前行（列）是否需要合并 if ((table[cur_queue[4]] == table[cur_queue[3]]) && table[cur_queue[4]] && table[cur_queue[3]] || (table[cur_queue[3]] == table[cur_queue[2]]) && table[cur_queue[3]] && table[cur_queue[2]] || (table[cur_queue[2]] == table[cur_queue[1]]) && table[cur_queue[2]] && table[cur_queue[1]]) { return true; } else { return false; } } function move() { //对当前行（列）的数字进行移动 for (var i = 4; i >= 2; i--) { if (Boolean(table[cur_queue[i]] < Boolean(table[cur_queue[i - 1]]))) { table[cur_queue[i]] = table[cur_queue[i - 1]]; table[cur_queue[i - 1]] = 0; break; } } } function merge() { //对当前行（列）的数字进行合并 for (var i = 4; i >= 2; i--) { if (table[cur_queue[i]] == table[cur_queue[i - 1]]) { table[cur_queue[i]] = table[cur_queue[i]] + table[cur_queue[i - 1]]; score = score + table[cur_queue[i]]; table[cur_queue[i - 1]] = 0; document.getElementById("score").innerHTML = score;//更新最高分 break; } } } function run() { //点击上下左右键时开始执行 var done = false; if (event.keyCode >= 37 && event.keyCode <= 40) { //只有上下左右四个键 set_direction();//设置移动方向参数 for (var i = 1; i <= 4; i++) { //由于一个方向上移动时有4行（列）所以需要逐行处理 set_cur_queue(i);//设置当前行（列） if (is_num_exist()) { if (need_move() || need_merge()) { done = true;//此变量用来限制每次只合并一次 } while (need_move()) { //如果可以移动则一直移动 move(); } if (need_merge()) { //如果需要合并 if (table[cur_queue[1]] == table[cur_queue[2]] && table[cur_queue[3]] == table[cur_queue[4]]) { //特例，当一行（列）上四个数字全部相同时候，进行两次合并 merge(); while (need_move()) { move(); } merge(); } else { merge(); while (need_move()) { move(); } } } } } //var empty_box = find_empty_box();//获取当前空格子集合 //if(empty_box.length==0&&!need_merge()) {//如果没有没有空位且不能合并 //alert('Game over'); //return; //} if (done) { //如果此次有移动或合并，即有效操作，则生成新的数字 create_and_set_num(); } update_max_value();//更新最大值 draw();//重新绘制表格用于显示 } } function update_max_value() { max_value = 0; for (var i in table) { if (table[i] > max_value) { max_value = table[i]; } } document.getElementById("max_value").innerHTML = max_value; } function set_cur_queue(queue_num) { if (direction == 37) //左 { cur_queue = { 1: queue_num * 10 + 4, 2: queue_num * 10 + 3, 3: queue_num * 10 + 2, 4: queue_num * 10 + 1 }; } else if (direction == 38) //上 { cur_queue = { 1: 40 + queue_num, 2: 30 + queue_num, 3: 20 + queue_num, 4: 10 + queue_num }; } else if (direction == 39) //右 { cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 }; } else if (direction == 40) //下 { cur_queue = { 1: 10 + queue_num, 2: 20 + queue_num, 3: 30 + queue_num, 4: 40 + queue_num }; } else { cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 }; } } function draw() { //整体刷新16个格子 for (var i = 10; i <= 40; i += 10) { for (var j = 1; j <= 4; j++) { if (table[i + j] != 0) { document.getElementById(i + j).innerHTML = table[i + j]; } else { document.getElementById(i + j).innerHTML = ''; } } } } function set_direction() { //设置此次移动的方向 direction = event.keyCode; } function set_new_num(empty_box) { //生成新的数字 var num = 0; var ranNum = Math.random() * 100;//产生0--100以内的随机数确定2和4出现的概率为4：1 if (ranNum > 80) { num = 4; } else { num = 2; } var box_num = Math.floor(Math.random() * (empty_box.length));//找到是空箱子的编号，floor向下取整 table[empty_box[box_num]] = num;//将这个空箱子赋值 } function find_empty_box() { //获得所有的空格子，即值为0的格子集合 var empty_box = []; for (var num in table) { if (table[num] == 0) { empty_box.push(num); } } return empty_box; } function init() { create_and_set_num(); for (var i = 1; i <= 4; i++) { set_cur_queue(i); draw(); } update_max_value(); } function create_and_set_num() { var empty_box; empty_box = find_empty_box(); set_new_num(empty_box); }</script> 0 0
- 2048小游戏（javascript代码）
- JavaScript 2048小游戏
- javascript实现2048小游戏
- javascript版 2048小游戏
- javascript小游戏
- JavaScript小游戏
- 小游戏代码
- html 5 (javascript) 17行代码,贪吃蛇小游戏
- 17行代码的贪吃蛇小游戏(JavaScript)
- HTML/CSS/JavaScript实现的2048小游戏
- 【web小游戏】HTML+CSS+JavaScript实现2048
- Android 小游戏2048 代码简单实现
- 2048小游戏部分代码，仅供参考哦
- 1000行代码写小游戏（一）
- 1000行代码写小游戏（二）
- 1000行代码写小游戏（三）
- 1000行代码写小游戏（四）
- 1000行代码写小游戏（五）
- leetcode 330. Patching Array-数组补丁|贪心算法
- 第十五周项目1——程序填空（范型程序设计）
- 阅读程序，分析结果 （3）
- 阅读程序（8）
- 类和指针程序阅读（2）
- 2048小游戏（javascript代码）
- （补）第十三周——分数的加减（运算符重载）
- map用法祥析
- 第八周项目一数组做数据成员
- 2016山东省赛H题
- 第十/十一周训练 项目5
- 数组在类中的运算
- 两次碰到编译错误: crosses initialization of...
- 是春哥啊
