效果图:
这个简单的游戏是由html和js实现的。大家应该都玩过2048这款游戏,也清楚是由四行四列组成,一共十六格。实现思路:定义数组,值是1~16。定义随机方法,随机在十六个格子中的空格子生成值为二的格子,通过定义键盘上下左右事件控制相同抵消相加,不相同则移动。
代码实现:
Html:
<div class="container">
<div class="row">
<div class="fritter" style="background:#ae937a;"id="x1"></div>
<div class="fritter" style="background:#ae937a;"id="x2"></div>
<div class="fritter" style="background:#ae937a;"id="x3"></div>
<div class="fritter" style="background:#ae937a;"id="x4"></div>
</div>
<div class="row">
<div class="fritter" style="background:#ae937a;"id="x5"></div>
<div class="fritter" style="background:#ae937a;"id="x6"></div>
<div class="fritter" style="background:#ae937a;"id="x7"></div>
<div class="fritter" style="background:#ae937a;"id="x8"></div>
</div>
<div class="row">
<div class="fritter" style="background:#ae937a;"id="x9"></div>
<div class="fritter" style="background:#ae937a;"id="x10"></div>
<div class="fritter" style="background:#ae937a;"id="x11"></div>
<div class="fritter" style="background:#ae937a;"id="x12"></div>
</div>
<div class="row">
<div class="fritter" style="background:#ae937a;"id="x13"></div>
<div class="fritter" style="background:#ae937a;"id="x14"></div>
<div class="fritter" style="background:#ae937a;"id="x15"></div>
<div class="fritter" style="background:#ae937a;"id="x16"></div>
</div>
</div>
css:
* {
margin:0 0;
padding:0 0;
font-family:FangSong;
font-size:35px;
}
.container{
width:370px;
height:370px;
background:#beb0a3;
}
.row {
width:370px;
height:90px;
}
.fritter {
width:80px;
height:80px;
float:left;
margin-top:10px;
margin-left:10px;
border-radius:5px;
}
Js:
页面一打开就加载,调用随机生成方法。
//加载事件
window.onload = function () {
RandomExtraction(0);
}
定义数组,分为十六格,随机生成值为2的格子。
//定义数组,分为十六格
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
//var arr1 = [2];
function RandomExtraction(k) {
if (k == 0) {
for (var i = 1; i < 4; i++) {
//获取随机数
var index = Math.floor((Math.random() * arr.length));
//获取值
var text = document.getElementById("x" + arr[index]).innerHTML;
//判断值是否为空
if (text == "") {
//获取格子编号
var idx2 = document.getElementById("x" + arr[index]);
// var index1 = Math.floor((Math.random() * arr1.length));
//格子值为2
idx2.innerHTML = "2";
//样式
idx2.style = "background:#00ffff;text-align:center;line-height:80px;";
} else {
continue;
}
}
} else {
}
}
定义键盘事件,通过上下左右键控制格子移动。
document.onkeydown = function (e) {
e = window.event || e;
switch (e.keyCode) {
case 37: //左键
//currentCol--;
changeItem(e.keyCode);
break;
case 38: //向上键
//currentLine--;
changeItem(e.keyCode);
break;
case 39: //右键
//currentCol++;
changeItem(e.keyCode);
break;
case 40: //向下键
//currentLine++;
changeItem(e.keyCode);
break;
default:
break;
}
}
//方向键调用
function changeItem(k) {
if (k == 37) {//左键
//按一下左键,全部向左边移动,相同的合并数字相加,
LeftKeyMovement(4);
LeftKeyMovement(8);
LeftKeyMovement(12);
LeftKeyMovement(16);
RandomExtraction(0);
}
if (k == 38) {//上键
KeyShift(13);
KeyShift(14);
KeyShift(15);
KeyShift(16);
RandomExtraction(0);
}
if (k == 39) {//右键
RightClickMovement(1);
RightClickMovement(5);
RightClickMovement(9);
RightClickMovement(13);
RandomExtraction(0);
}
if (k == 40) {//下键
DownKeyMovement(1);
DownKeyMovement(2);
DownKeyMovement(3);
DownKeyMovement(4);
RandomExtraction(0);
}
}
每次移动要判断以下情况:
//1 2
//1 3
//1 4
//2 3
//2 4
//3 4
//1 2 3 12、3 1、23 1、2、3
//1 2 4 12、4 1、24 1、2、4
//1 3 4 13、4 1、34 1、3、4
//2 3 4 23、4 2、34 2、3、4
//1 2 3 4 (12、34) (1、23 、4) (1、2、34) (12、3、4)
键移动,相同相加,不相同则移动。一行每个相差一,列每个相差四,向右移动,以第一列开始向右移动,移动一格子就加一了,左移则是相反,是以最后一列开始,移动一格子就减一了。向下移动,以第一行开始,移动一格子就加四了,上移则是减四。
// 1 2 3 4
// 5 6 7 8
// 9 10 11 12
//13 14 15 16
因为上下左右键基本相同,就不一一展示,以右键为例。
右键:
//右键移动
function RightClickMovement(k) {
var txtH1 = "";
var txtH2 = "";
var txtH3 = "";
var txtH4 = "";
//循环获取格子值
for (var i = k; i < k+4; i++) {
if (i==k) {
txtH1 = document.getElementById("x"+i).innerHTML;
}
if (i==k+1) {
txtH2 = document.getElementById("x" + i).innerHTML;
}
if (i ==k + 2) {
txtH3 = document.getElementById("x" + i).innerHTML;
}
if (i == k + 3) {
txtH4 = document.getElementById("x" + i).innerHTML;
}
}
//第一个有值,其它三个没值 1
if (txtH4 == "" && txtH3 == "" && txtH2 == "" && txtH1 != "") {
//调用方法
EmptyingStyle(k);//清空样式
AddStyle(k+3, txtH1);//添加样式
}
//第二个有值,其它三个没值 2
if (txtH4 == "" && txtH3 == "" && txtH2 != "" && txtH1 == "") {
EmptyingStyle(k+1);
AddStyle(k+3, txtH2);
}
//第三个有值,其它三个没值 3
if (txtH4 == "" && txtH3 != "" && txtH2 == "" && txtH1 == "") {
EmptyingStyle(k + 2);
AddStyle(k + 3, txtH3);
}
//4 3
if (txtH4 != "" && txtH3 != "" && txtH2 == "" && txtH1 == "") {
if (txtH4 == txtH3) {
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), parseInt(txtH3*2));
}
}
//2 1
if (txtH4 == "" && txtH3 == "" && txtH2 != "" && txtH1 != "") {
if (txtH1 == txtH2) {
EmptyingStyle(k);
EmptyingStyle(k + 1);
AddStyle(parseInt(k + 3), parseInt(txtH1 * 2));
} else {
EmptyingStyle(k);
EmptyingStyle(k + 1);
AddStyle(parseInt(k + 3), txtH2);
AddStyle(parseInt(k + 2), txtH1);
}
}
//3 1
if (txtH4 == "" && txtH3 != "" && txtH2 == "" && txtH1 != "") {
if (txtH3 == txtH1) {
EmptyingStyle(k);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), parseInt(txtH1 * 2));
} else {
EmptyingStyle(k);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), txtH3);
AddStyle(parseInt(k + 2), txtH1);
}
}
//4 1
if (txtH4 != "" && txtH3 == "" && txtH2 == "" && txtH1 != "") {
if (txtH4 == txtH1) {
EmptyingStyle(k);
EmptyingStyle(k + 3);
AddStyle(parseInt(k + 3), parseInt(txtH1 * 2));
} else {
EmptyingStyle(k);
AddStyle(parseInt(k + 2), txtH1);
}
}
//3 2
if (txtH4 == "" && txtH3 != "" && txtH2 != "" && txtH1 == "") {
if (txtH3 == txtH2) {
EmptyingStyle(k+1);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), parseInt(txtH3 * 2));
} else {
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), txtH3);
AddStyle(parseInt(k + 2), txtH2);
}
}
//4 2
if (txtH4 != "" && txtH3 == "" && txtH2 != "" && txtH1 == "") {
if (txtH4 == txtH2) {
EmptyingStyle(k + 1);
EmptyingStyle(k + 3);
AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
} else {
EmptyingStyle(k + 1);
AddStyle(parseInt(k + 2), txtH2);
}
}
//4 3 2
if (txtH4 != "" && txtH3 != "" && txtH2 != "" && txtH1 == "") {
if (txtH4 == txtH3) {//2、34
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
EmptyingStyle(k + 3);
AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
AddStyle(parseInt(k + 2), txtH2);
} else {
if (txtH3 == txtH2) {//23、4
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 2), parseInt(txtH3 * 2));
}
}
}
//1 2 3,
if (txtH4 == "" && txtH3 != "" && txtH2 != "" && txtH1 != "") {
if (txtH3 == txtH2) {//1、23
EmptyingStyle(k);
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), parseInt(txtH3 * 2));
AddStyle(parseInt(k + 2),txtH1);
} else {
if (txtH2 == txtH1) {//12、3
EmptyingStyle(k);
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), txtH3);
AddStyle(parseInt(k + 2), parseInt(txtH2 * 2));
}
}
if (txtH3 != txtH2 && txtH2 != txtH1) {//1、2、3
EmptyingStyle(k);
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 3), txtH3);
AddStyle(parseInt(k + 2), txtH2);
AddStyle(parseInt(k + 1), txtH1);
}
}
//1 2 4,
if (txtH4 != "" && txtH3 == "" && txtH2 != "" && txtH1 != "") {
if (txtH4 == txtH2) {//1、24
EmptyingStyle(k);
EmptyingStyle(k + 1);
EmptyingStyle(k + 3);
AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
AddStyle(parseInt(k + 2), txtH1);
} else {
if (txtH2 == txtH1) {//12、4
EmptyingStyle(k);
EmptyingStyle(k + 1);
AddStyle(parseInt(k + 2), parseInt(txtH2 * 2));
}
}
if (txtH4 != txtH2 && txtH2 != txtH1) {//1、2、4
EmptyingStyle(k);
EmptyingStyle(k + 1);
AddStyle(parseInt(k + 2), txtH2);
AddStyle(parseInt(k + 1), txtH1);
}
}
//1 3 4,
if (txtH4 != "" && txtH3 != "" && txtH2 == "" && txtH1 != "") {
if (txtH4 == txtH3) {//1、34
EmptyingStyle(k);
EmptyingStyle(k + 2);
EmptyingStyle(k + 3);
AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
AddStyle(parseInt(k + 2), txtH1);
} else {
if (txtH3 == txtH1) {//13、4
EmptyingStyle(k);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 2), parseInt(txtH3 * 2));
}
}
if (txtH4 != txtH3 && txtH3 != txtH1) {//1、3、4
EmptyingStyle(k);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 2), txtH3);
AddStyle(parseInt(k + 1), txtH1);
}
}
//1 2 3 4,
if (txtH4 != "" && txtH3 != "" && txtH2 != "" && txtH1 != "") {
if (txtH4 == txtH3) {//1、2、34
if (txtH2 == txtH1) {//12、34
EmptyingStyle(k);
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
EmptyingStyle(k + 3);
AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
AddStyle(parseInt(k + 2), parseInt(txtH2 * 2));
} else {//1、2、34
EmptyingStyle(k);
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
EmptyingStyle(k + 3);
AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
AddStyle(parseInt(k + 2), txtH2);
AddStyle(parseInt(k + 1), txtH1);
}
} else {
if (txtH3 == txtH2) {//1、23、4
EmptyingStyle(k);
EmptyingStyle(k + 1);
EmptyingStyle(k + 2);
AddStyle(parseInt(k + 2), parseInt(txtH3 * 2));
AddStyle(parseInt(k + 1), txtH1);
} else {
if (txtH2 == txtH1) {//12、3、4
EmptyingStyle(k);
EmptyingStyle(k + 1);
AddStyle(parseInt(k + 1), parseInt(txtH2 * 2));
}
}
}
}
}
添加样式:
//添加样式
function AddStyle(k,t) {
var id = document.getElementById("x" + k);
id.innerHTML = t;
id.style = "background:#00ffff;text-align:center;line-height:80px;";
}
清空样式:
//清空样式
function EmptyingStyle(k) {
var id = document.getElementById("x"+k);
id.innerHTML = "";
id.style = "background:#ae937a;";
}