html+CSS+js 一个2048小游戏
这几天看js 的教程看到头晕，觉得这种方法不适合我，效率贼低。我还是有已丢丢的java基础，于是想做一个小东西提高自己，印证一下这几个星期的所学。
于是想写一个2048的小游戏。上网看了很多大神的代码，有点思路，最后成功啦！
GitHub连接：https://github.com/514870106/hjc
具体的思路是html方面利用table 创建一个4*4的矩阵，在js中创建一个二维数组与矩阵一一对应，写一个绘图函数通过二维数组中的内容更改矩阵样式和内容。
具体都做了注释：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2048小游戏</title>
<link rel="stylesheet" type="text/css" href="小游戏样式.css"/>
</head>
<body onload="read()">
<div ></script>
</body>
</html>
CSS：
#game{
border: 5px solid black;
height: 600px;
width: 500px;
margin:0 auto;
}
.h1{
text-align: center;
}
#p1{
text-align: center;
}
#p2{
text-align: center;
}
#button{
float: right;
margin-right: 200px;
width: 100px;
height: 60px;
}
#table{
width: 300px;
height: 300px;
text-align:center;
margin:0 auto;
}
tr,td{
width: 18%;
height: 18%;
}
js：
var x;
var c=0;
function read(){
// 创建一个4*4的二维数组x全部赋值为0
x=new Array(4);
for (i=0;i<x.length;i++) {
x[i]=[0,0,0,0];
}
//获得随机坐标，将数组x对应坐标内的数改为2
var a,b,a1,b1;
a=Math.round(Math.random()*3);
b=Math.round(Math.random()*3);
x[a][b] = 2;
//获得随机坐标，判断坐标不重复，将数组x对应坐标内的数改为4
while(1){
a1 = Math.round(Math.random()*3);
b1 = Math.round(Math.random()*3);
if(a1 != a || b2 != b){
x[a1][b1] = 4 ;
break;
}
}
//调用数字与图像书写函数
font();
color();
//变更<p>中的已尝试次数
document.getElementById("p2").innerHTML=("你已经尝试"+ c +"次")
c+=1;
}
//依次将数组x内数字填充到table中对应的td中，如果为0，则填写空；
function font(){
for (i=0;i<x.length;i++) {
for (j=0;j<x.length;j++) {
var td = document.getElementById(i+""+j);
if(x[i][j] != 0)
{
td.innerHTML = x[i][j];
}
else
{
td.innerHTML = " ";
}
}
}
}
// 遍历x数组,获得对应table 的 td,再通过值来更改对应 td 的背景颜色
function color(){
for (i=0;i<x.length;i++) {
for (j=0;j<x.length;j++) {
var td = document.getElementById(i+""+j);
var num = x[i][j];
switch(num){
case 2:
td.style="
break;
case 4:
td.;
break;
case 8:
td.style="
break;
case 16:
td.;
break;
case 32:
td.style="
break;
case 64:
td.;
break;
case 128:
td.style="
break;
case 256:
td.;
break;
case 512:
td.style="
break;
case 1024:
td.;
break;
default:
td.style="
break;
}
if(num==1024){
alert("恭喜你成功通关，获得香蕉君的友谊");
return;
}
}
}
}
//监听键盘按钮按下情况，根据keyCode返回值判断按下了哪个键并执行函数,再进行重新绘图（调用font（）、color（））
window.onkeydown = function(){
var boy = event.keyCode;
switch(boy){
case 37://左
onleft();
font();
color();
break;
case 38://上
ontop();
font();
color();
break;
case 39://右
onright();
font();
color();
break;
case 40://下
onbelow();
font();
color();
break;
}
}
//用户按了左
function onleft(){
for (i = 0;i < x.length; i++){
var x1 = new Array(0,0,0,0);//创建一个临时数组x1
var ace=0;
for(j = 0;j < x.length; j++){//将x数组当前行的 有效数组 赋值给x1
if(x[i][j] != 0){
x1[ace] = x[i][j];
ace+=1;
}
}
for(j=0;j<x1.length-1;j++){
if(x1[j] == x1[j+1]){ //判断相邻数是否相等，若相等则左边的数翻倍
x1[j]*=2;
var k=j+1; //记录相等数对右边数的下标
while(k<x1.length-1){//右边所有数向左移动
x1[k] = x1[k+1];
k+=1;
}
x1[3]=0; //将最后一位赋值为0，为了table满了不立即结束。
}
}
x[i]=x1;//将x数组更新
}
newnum();//随机出现2 或者 4 在数组内
}
//用户按了上
function ontop(){
for (i = 0;i < x.length; i++){
var x1 = new Array(0,0,0,0);
var ace=0;
for(j = 0;j < x.length; j++){
if(x[j][i] != 0){
x1[ace] = x[j][i];
ace+=1;
}
}
for(j=0;j<x1.length-1;j++){
if(x1[j] == x1[j+1]){
x1[j]*=2;
var k=j+1;
while(k<x1.length-1){
x1[k] = x1[k+1];
k+=1;
}
x1[3]=0;
}
}
for(j=0;j<x.length;j++){
x[j][i]=x1[j];
}
}
newnum();
}
//用户按了右
function onright(){
for (i = 0;i < x.length; i++){
var x1 = new Array(0,0,0,0);
var ace=3;
for(j = 3;j >= 0; j--){
if(x[i][j] != 0){
x1[ace] = x[i][j];
ace-=1;
}
}
for(j=3;j>0;j--){
if(x1[j-1] == x1[j]){
x1[j]*=2;
var k=j-1;
while(k>0){
x1[k] = x1[k-1];
k-=1;
}
x1[0]=0;
}
}
x[i]=x1;
}
newnum();
}
// 用户按了下
function onbelow(){
for (i = 0;i < x.length; i++){
var x1 = new Array(0,0,0,0);
var ace=3;
for(j = 3;j >=0 ; j--){
if(x[j][i] != 0){
x1[ace] = x[j][i];
ace-=1;
}
}
for(j=3; j>0 ;j--){
if(x1[j-1] == x1[j]){
x1[j]*=2;
var k=j-1;
while(k<0){
x1[k] = x1[k-1];
k-=1;
}
x1[0]=0;
}
}
for(j=0;j<x.length;j++){
x[j][i]=x1[j];
}
}
newnum();
}
function newnum(){
// 遍历数组x.若没有等于0的元素,游戏结束.输了
var flag = false;
for (i=0;i<x.length;i++) {
for (j=0;j<x.length;j++) {
if(x[i][j] == 0){
flag=true;
break;
}
}
}
if(flag==false){
alert("兄弟，智商堪忧啊");
return;
}
var a,b,q;
// 获得一个随机的坐标
while(true){
a = Math.round(Math.random()*3);
b = Math.round(Math.random()*3);
if(x[a][b]==0){
break;
}
}
// 获得一个2或者4，并赋值给所得到的随机坐标
while(true){
q =Math.round(Math.random()*6);
if(q==2|| q==4){
break;
}
}
x[a][b] = q;
}
- 上一篇 »java打飞机游戏完整代码
- 下一篇 »js,css 和 html 分离，见仁见智
