[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<!-- saved from url=(0049)file:///E:/java/web_game2048/WebContent/2048.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>2048小游戏</title>
<script type="text/javascript">
var arr;
//初始化游戏页面，需要在表格中随机生成一个2,一个4
function init(){
arr = new Array(4);
for(i=0;i<arr.length;i++){
arr[i]=[0,0,0,0];
}
var x1,x2,y1,y2;
x1=Math.round(Math.random()*3);
y1=Math.round(Math.random()*3);
arr[x1][y1] =2;
while(true){
x2=Math.round(Math.random()*3);
y2=Math.round(Math.random()*3);
if(x1!=x2 || y1!=y2){
arr[x2][y2] =4;
break;
}
}
display();
show();
}
function show(){
var count=0;
for(i=0;i<arr.length;i++){
for(j=0;j<arr.length;j++){
count += arr[i][j];
var num = arr[i][j];
var td = document.getElementById(i+""+j);
switch(num){
case 2:
td.style="background-color:#FFFFE1";
break;
case 4:
td.style="background-color:#FFEFD1";
break;
case 8:
td.style="background-color:#FEDFD5";
break;
case 16:
td.style="background-color:#FFDEAD";
break;
case 32:
td.style="background-color:#FFA07A";
break;
case 64:
td.style="background-color:#F08080";
break;
case 128:
td.style="background-color:#DB7093";
break;
case 256:
td.style="background-color:#FF69B4";
break;
case 512:
td.style="background-color:#DA70D6";
break;
case 1024:
td.style="background-color:#FF4500";
break;
case 2048:
td.style="background-color:#FF0000";
break;
default:
td.style="background-color:#87CEFA";
break;
}
if(num==2048){
var p = document.getElementById("p5");
p.innerHTML = "";
p.innerHTML = "恭喜你！已经获得2048胜利！可以继续挑战4096！";
}
if(num==4096){
var p = document.getElementById("p5");
p.innerHTML = "";
p.innerHTML = "恭喜你！已经获得4096胜利！";
}
}
}
var p = document.getElementById("p3");
p.innerHTML = "";
p.innerHTML = "Score :"+count;
}
function display(){
for(i=0;i<arr.length;i++){
for(j=0;j<arr.length;j++){
//查找对应下标的元素
var td = document.getElementById(i+""+j);
//将对应的数据显示到元素中
if(arr[i][j]!=0){
//有效数据
td.innerHTML = arr[i][j];
}else{
td.innerHTML = " ";
}
}
}
}
window.onkeydown = function(){
var code = event.keyCode;
switch (code) {
case 37://左
onleft();
show();
break;
case 38://上
ontop();
show();
break;
case 39://右
onright();
show();
break;
case 40://下
onbottom();
show();
break;
}
}
/**
* 当用户按下 ←
* @returns
*/
function onleft(){
for(i=0;i<arr.length;i++){
//1. 将每个数组中的有效数据 向左移动
//1.1 创建一个临时数组, 用于存储当前行的有效数据
var temp = new Array(0,0,0,0);
//记录每次有效数据存储的位置
var index = 0;
for(j=0;j<arr.length;j++){
if(arr[i][j]!=0){
temp[index] = arr[i][j];
index++;
}
}
//2. 相邻相同数据, 相加 , 后续数据前移一位
for(j=0;j<temp.length-1;j++){
if(temp[j]==temp[j+1]){
temp[j]*=2;
//记录住第一个要被覆盖的下标
var k = j+1;
while(k<arr.length-1){
temp[k++] = temp[k];
}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp[temp.length-1] = 0;
}
}
arr[i] = temp;
}
//3. 随机产生一个2/4 放在在一个空的位置
random();
//4. 显示
display();
}
/**
* 当用户按下↑
*/
function ontop(){
for(i=0;i<arr.length;i++){
//1. 将每个数组中的有效数据 向上移动
//1.1 创建一个临时数组, 用于存储当前列的有效数据
var temp = new Array(0,0,0,0);
//记录每次有效数据存储的位置
var index = 0;
//00 10 20 30
for(j=0;j<arr.length;j++){
if(arr[j][i]!=0){
temp[index] = arr[j][i];
index++;
}
}
//2. 相邻相同数据, 相加 , 后续数据上移一位
for(j=0;j<temp.length-1;j++){
if(temp[j]==temp[j+1]){
temp[j]*=2;
//记录住第一个要被覆盖的下标
var k = j+1;
while(k<arr.length-1){
temp[k++] = temp[k];
}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp[temp.length-1] = 0;
}
}
//arr[i] = temp;
for(j=0;j<arr.length;j++){
arr[j][i] = temp[j];
}
}
//3. 随机产生一个2/4 放在在一个空的位置
random();
//4. 显示
display();
}
function onbottom(){
for(i=0;i<arr.length;i++){
//1. 将每个数组中的有效数据 向上移动
//1.1 创建一个临时数组, 用于存储当前列的有效数据
var temp = new Array(0,0,0,0);
//记录每次有效数据存储的位置
var index = 3;
//00 10 20 30
for(j=3;j>=0;j--){
if(arr[j][i]!=0){
temp[index] = arr[j][i];
index--;
}
}
//2. 相邻相同数据, 相加 , 后续数据上移一位
for(j=3;j>0;j--){
if(temp[j]==temp[j-1]){
temp[j]*=2;
//记录住第一个要被覆盖的下标
var k = j-1;
while(k>0){
temp[k--] = temp[k];
}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp[0] = 0;
}
}
//arr[i] = temp;
for(j=3;j>=0;j--){
arr[j][i] = temp[j];
}
}
//3. 随机产生一个2/4 放在在一个空的位置
random();
//4. 显示
display();
}
function onright(){
for(i=0;i<arr.length;i++){
//1. 将每个数组中的有效数据 向左移动
//1.1 创建一个临时数组, 用于存储当前行的有效数据
var temp = new Array(0,0,0,0);
//记录每次有效数据存储的位置
var index = 3;
for(j=3;j>=0;j--){
if(arr[i][j]!=0){
temp[index] = arr[i][j];
index--;
}
}
//2. 相邻相同数据, 相加 , 后续数据前移一位
for(j=3;j>0;j--){
if(temp[j-1]==temp[j]){
temp[j]*=2;
//记录住第一个要被覆盖的下标
var k = j-1;
while(k>0){
temp[k--] = temp[k];
}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp[0] = 0;
}
}
arr[i] = temp;
}
//3. 随机产生一个2/4 放在在一个空的位置
random();
//4. 显示
display();
}
function random(){
//1. 循环遍历所有数据, 查询是否存在0 , 不存在,则直接结束游戏!
// 用于记录使用可以继续产生随机数字
var flag = false;
for(i=0;i<arr.length;i++){
for(j=0;j<arr.length;j++){
if(arr[i][j]==0){
flag = true;
break;
}
}
}
if(!flag){
alert("兄弟, 游戏结束!!");
return;
}
//产生一个随机位置
var x,y;
while(true){
x = Math.round(Math.random()*3);
y = Math.round(Math.random()*3);
if(arr[x][y]==0){
break;
}
}
//产生一个随机数字
while(true){
var num = Math.round(Math.random()*6);
if(num==2||num==4){
arr[x][y] = num;
break;
}
}
}
</script>
<style type="text/css">
div{
margin-top:30px;
width:900px;
margin:0 auto;
border:2px solid #666;
border-radius:5px;
background-color:#E0FFFF;
}
#p2{
margin:0 auto;
font-size:40px;
text-align:center;
}
table{
width:400px;
height:400px;
background-color:#F0FFFF;
border:1px solid #aaa;
text-align:center;
margin:0 auto;
border-radius:1%;
font-size:28px;
}
tr,td{
width:18%;
height:18%;
background-color:#87CEFA;
border:1px solid #ddd;
border-radius:2%;
}
#p1{
margin:0 auto;
text-align:center;
padding-bottom:50px;
}
body{
width:100%;
height:600px;
}
#p3{
width:90%;
display:inline-block;
height:40px;
font-size:22px;
text-align:right;
padding-right:40px;
margin-bottom:0;
}
input{
width:100px;
height:30px;
margin-right:80px;
}
#p4{
width:100%;
text-align:right;
margin-top:0;
}
#p5{
color:red;
text-weight:bold;
width:100%;
text-align:right;
margin-top:0;
}
</style>
</head>
<body>
<div>
<br>
<p id="p2">2048游戏</p>
<br>
<hr>
<br>
<p id="p5"></p>
<p id="p3">Score :6</p>
<p id="p4"><input type="button" value="开始新游戏"></p>
<table>
<tbody><tr><td id="00" style="background-color: rgb(135, 206, 250);"> </td><td id="01" style="background-color: rgb(135, 206, 250);"> </td><td id="02" style="background-color: rgb(135, 206, 250);"> </td><td id="03" style="background-color: rgb(135, 206, 250);"> </td></tr>
<tr><td id="10" style="background-color: rgb(255, 255, 225);">2</td><td id="11" style="background-color: rgb(135, 206, 250);"> </td><td id="12" style="background-color: rgb(135, 206, 250);"> </td><td id="13" style="background-color: rgb(255, 239, 209);">4</td></tr>
<tr><td id="20" style="background-color: rgb(135, 206, 250);"> </td><td id="21" style="background-color: rgb(135, 206, 250);"> </td><td id="22" style="background-color: rgb(135, 206, 250);"> </td><td id="23" style="background-color: rgb(135, 206, 250);"> </td></tr>
<tr><td id="30" style="background-color: rgb(135, 206, 250);"> </td><td id="31" style="background-color: rgb(135, 206, 250);"> </td><td id="32" style="background-color: rgb(135, 206, 250);"> </td><td id="33" style="background-color: rgb(135, 206, 250);"> </td></tr>
</tbody></table>
<br>
<hr>
<p id="p1">游戏规则：使用← ↑ → ↓ 操作，相邻相同的数字会相加，当和为2048时，游戏胜利！</p>
</div>
</body></html>
发表于 2024-3-20 17:36
|
发表于 2024-3-20 18:06
