手写的简单2048小游戏

wulihubery31 发表于 2024-3-20 17:36

以下是本人手写的2048，曾发表在csdn
<!DOCTYPE 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=;
}
var x1,x2,y1,y2;
x1=Math.round(Math.random()*3);
y1=Math.round(Math.random()*3);
arr =2;
while(true){
x2=Math.round(Math.random()*3);
y2=Math.round(Math.random()*3);
if(x1!=x2 || y1!=y2){
arr =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;
var num = arr;
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!=0){
//有效数据
td.innerHTML = arr;
}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!=0){
temp = arr;
index++;
}
}
//2. 相邻相同数据, 相加 , 后续数据前移一位
for(j=0;j<temp.length-1;j++){
if(temp==temp){
temp*=2;
//记录住第一个要被覆盖的下标
var k = j+1;
while(k<arr.length-1){
temp = temp;

}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp = 0;
}
}
arr = 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;
//00102030
for(j=0;j<arr.length;j++){
if(arr!=0){
temp = arr;
index++;
}
}
//2. 相邻相同数据, 相加 , 后续数据上移一位
for(j=0;j<temp.length-1;j++){
if(temp==temp){
temp*=2;
//记录住第一个要被覆盖的下标
var k = j+1;
while(k<arr.length-1){
temp = temp;

}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp = 0;
}
}
//arr = temp;
for(j=0;j<arr.length;j++){
arr = temp;
}
}

//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;
//00102030
for(j=3;j>=0;j--){
if(arr!=0){
temp = arr;
index--;
}
}
//2. 相邻相同数据, 相加 , 后续数据上移一位
for(j=3;j>0;j--){
if(temp==temp){
temp*=2;
//记录住第一个要被覆盖的下标
var k = j-1;
while(k>0){
temp = temp;

}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp = 0;
}
}
//arr = temp;
for(j=3;j>=0;j--){
arr = temp;
}
}

//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!=0){
temp = arr;
index--;
}
}
//2. 相邻相同数据, 相加 , 后续数据前移一位
for(j=3;j>0;j--){
if(temp==temp){
temp*=2;
//记录住第一个要被覆盖的下标
var k = j-1;
while(k>0){
temp = temp;

}
//一旦产生合并 , 最后一个位置, 一定要赋值为0
temp = 0;
}
}
arr = 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==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==0){
break;
}
}
//产生一个随机数字
while(true){
var num = Math.round(Math.random()*6);
if(num==2||num==4){
arr = 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>

EthenGong 发表于 2024-3-25 17:02

复制了一下代码,发现动不了,仔细看了一下代码发现好像没有哪里触发init()函数,加上了就能用了,不知道是不是复制代码不全还是...{:1_918:}

hackerSQL 发表于 2024-3-20 17:48

whmm2009 发表于 2024-3-20 17:52

厉害无敌

cd22082110 发表于 2024-3-20 17:57

不错不错，学习了

blindcat 发表于 2024-3-20 18:00

看看，跟着学习一下

wulihubery31 发表于 2024-3-20 18:06

hackerSQL 发表于 2024-3-20 17:48
学习一下，有没有用c语言写这个2048游戏的源码

C语言应该没有样式处理吧，感觉不太好实现

von1943 发表于 2024-3-20 18:24

推荐楼主用类封装下，这样翻译成其他语言种类，会容易些。不过还是很感谢楼主分享的

haoqixin 发表于 2024-3-20 18:27

厉害无敌值得学习

mytomsummer 发表于 2024-3-20 20:17

怎么玩啊?有些不是很了解.

Sydyanlei0 发表于 2024-3-20 20:31

好厉害，学习学习

页: [1] 2 3 4

吾爱破解 - 52pojie.cn's Archiver

手写的简单2048小游戏