标签：
代码如下：如果需要源码打包资源 我已经上传到资源里了 大家可以去下载
下载完如果觉得不错 请给好评哟亲
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="2048.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
var btn = document.getElementById("id1");
<!--quanju变量是用来判断是否允许产生新图片，因为当前三行全部沾满的时候是不能向上移动产生新图片的-->
function init(){
var oTable = document.getElementById("mytab");
var myrows= oTable.rows;
for(var i=0;i<4;i++){
var eachrow=oTable.rows[i];
for(var j=0; j<4;j++){
eachrow.cells[j].value=0;
}
}
}
function kaishi()
{
alert("Hi! 大家好，我是静媛~"+"\n"+"要开始玩2048吗？OK，请操作键盘上下左右键。 ")
prd();
}
function prd(){
var oTable = document.getElementById("mytab");
var myrows= oTable.rows;
var rowno=Math.floor(Math.random()*4);
var cellno= Math.floor(Math.random()*4);
var itemnum=Math.round(Math.random()-0.35);
<!--window.alert(myrows[0].cells[1]);-->
<!--window.alert(myrows[0].cells[1].innerText);-->
if(!myrows[rowno].cells[cellno].innerHTML){
if(itemnum==0){
myrows[rowno].cells[cellno].innerHTML="<img src='2.png'/>";
myrows[rowno].cells[cellno].value=2;
}else {
myrows[rowno].cells[cellno].innerHTML="<img src='4.png'/>";
myrows[rowno].cells[cellno].value=4;
}
}else{
<!--window.alert("YOU");-->
<!--验证重复的时候是否跳过-->
<!--window.alert(myrows[rowno].cells[cellno].value);-->
isfull();
prd();
<!--myrows[rowno].cells[cellno].innerHTML="<img src='8.png'/>";-->
}
}
function isfull(){
var flag=0;
var oTable = document.getElementById("mytab");
for(var i=0;i<4;i++){
<!--window.alert(oTable.rows[i]);-->
var eachrow=oTable.rows[i];
for(var j=0; j<4;j++){
<!--window.alert(eachrow.cells[j].value);-->
if(!eachrow.cells[j].value){
flag=1;
}
}
}
if(flag==0)
{
window.alert("你失败了");
document.getElementByName("id1").onclick = function(){};
}
}
function press(e){
if(e.keyCode==37)
{
moveleft();
}else if(e.keyCode==38)
{
moveup();
}else if(e.keyCode==39)
{
moveright();
}else if(e.keyCode==40)
{
movedown();
}
}
function moveleft(){
var quanju=0;
var oTable = document.getElementById("mytab");
for(var i=0;i<4;i++){
var eachrow=oTable.rows[i];
for(var j=0; j<4;j++){
if(eachrow.cells[j].value){
var tmp=j;
for(var k=tmp-1;k>=0;k--)
{
<!--这里是判断是否要合并的-->
if(eachrow.cells[k].value){
if(eachrow.cells[k].value==eachrow.cells[k+1].value)
{
eachrow.cells[k].value=eachrow.cells[k].value+eachrow.cells[k].value;
conbinevalue(eachrow.cells[k].value,i,k);
eachrow.cells[k+1].value=null;
eachrow.cells[k+1].innerHTML=null;
quanju=1;
}
break;
}else {
eachrow.cells[k].value=eachrow.cells[k+1].value;
eachrow.cells[k+1].value=null;
eachrow.cells[k].innerHTML=eachrow.cells[k+1].innerHTML;
eachrow.cells[k+1].innerHTML=null;
quanju=1;
}
}
}
}
}
if(quanju==1)
{
prd();
}
}
function moveright(){
var quanju=0;
var oTable = document.getElementById("mytab");
for(var i=0;i<4;i++){
var eachrow=oTable.rows[i];
for(var j=3; j>=0;j--){
if(eachrow.cells[j].value){
var tmp=j;
for(var k=tmp+1;k<4;k++)
{
if(eachrow.cells[k].value){
if(eachrow.cells[k].value==eachrow.cells[k-1].value)
{
eachrow.cells[k].value=eachrow.cells[k].value+eachrow.cells[k].value;
conbinevalue(eachrow.cells[k].value,i,k);
eachrow.cells[k-1].value=null;
eachrow.cells[k-1].innerHTML=null;
quanju=1;
}
break;
}else {
eachrow.cells[k].value=eachrow.cells[k-1].value;
eachrow.cells[k-1].value=null;
eachrow.cells[k].innerHTML=eachrow.cells[k-1].innerHTML;
eachrow.cells[k-1].innerHTML=null;
quanju=1;
}
}
}
}
}
if(quanju==1)
{
prd();
}
}
function moveup(){
var quanju=0;
var oTable = document.getElementById("mytab");
for(var i=0;i<4;i++){
var tmp = i;
var eachrow=oTable.rows[i];
for(var j=0; j<4;j++){
if(eachrow.cells[j].value){
for(var k=tmp-1;k>=0;k--)
{
if(oTable.rows[k].cells[j].value){
if(oTable.rows[k].cells[j].value==oTable.rows[k+1].cells[j].value)
{
oTable.rows[k].cells[j].value=oTable.rows[k].cells[j].value+oTable.rows[k].cells[j].value;
conbinevalue(oTable.rows[k].cells[j].value,k,j);
oTable.rows[k+1].cells[j].value=null;
oTable.rows[k+1].cells[j].innerHTML=null;
quanju=1;
}
break;
}else {
oTable.rows[k].cells[j].value=oTable.rows[k+1].cells[j].value
oTable.rows[k+1].cells[j].value=null;
oTable.rows[k].cells[j].innerHTML=oTable.rows[k+1].cells[j].innerHTML;
oTable.rows[k+1].cells[j].innerHTML=null;
quanju=1;
}
}
}
}
}
if(quanju==1)
{
prd();
}
}
function movedown(){
var quanju=0;
var oTable = document.getElementById("mytab");
for(var i=3;i>=0;i--){
var tmp = i;
var eachrow=oTable.rows[i];
for(var j=0; j<4;j++){
if(eachrow.cells[j].value){
for(var k=tmp+1;k<4;k++)
{
if(oTable.rows[k].cells[j].value){
if(oTable.rows[k].cells[j].value==oTable.rows[k-1].cells[j].value)
{
oTable.rows[k].cells[j].value=oTable.rows[k].cells[j].value+oTable.rows[k].cells[j].value;
conbinevalue(oTable.rows[k].cells[j].value,k,j);
oTable.rows[k-1].cells[j].value=null;
oTable.rows[k-1].cells[j].innerHTML=null;
quanju=1;
}
break;
}else {
oTable.rows[k].cells[j].value=oTable.rows[k-1].cells[j].value
oTable.rows[k-1].cells[j].value=null;
oTable.rows[k].cells[j].innerHTML=oTable.rows[k-1].cells[j].innerHTML;
oTable.rows[k-1].cells[j].innerHTML=null;
quanju=1;
}
}
}
}
}
}
function conbinevalue(value,ith,jth){
var oTable = document.getElementById("mytab");
switch(value){
case 4:
oTable.rows[ith].cells[jth].innerHTML="<img src='4.png'/>";
break;
case 8:
oTable.rows[ith].cells[jth].innerHTML="<img src='8.png'/>";
break;
case 16:
oTable.rows[ith].cells[jth].innerHTML="<img src='16.png'/>";
break;
case 32:
oTable.rows[ith].cells[jth].innerHTML="<img src='32.png'/>";
break;
case 64:
oTable.rows[ith].cells[jth].innerHTML="<img src='64.png'/>";
break;
case 128:
oTable.rows[ith].cells[jth].innerHTML="<img src='128.png'/>";
break;
case 256:
oTable.rows[ith].cells[jth].innerHTML="<img src='256.png'/>";
break;
case 512:
oTable.rows[ith].cells[jth].innerHTML="<img src='512.png'/>";
break;
case 1024:
oTable.rows[ith].cells[jth].innerHTML="<img src='1024.png'/>";
break;
case 2048:
oTable.rows[ith].cells[jth].innerHTML="<img src='2048.png'/>";
break;
default:
window.alert("2048!!!");
break;
}
}
</script>
</head>
<body id="id1" style="width:595px;height:595px;background-color:white;border:3px pink solid" onkeyup="press(event)" onLoad="kaishi()">
<table id="mytab" border=0px blue solid>
<tr style="width:142px;height:144px"><td></td><td></td><td></td><td></td></tr>
<tr style="width:142px;height:144px"><td></td><td></td><td></td><td></td></tr>
<tr style="width:142px;height:144px"><td></td><td></td><td></td><td></td></tr>
<tr style="width:142px;height:144px"><td></td><td></td><td></td><td></td></tr>
<table>
<!--<input type="button" onClick="test()"/>-->
<!--<img src="2.png">
<img src="2.png">
<img src="2.png">
<img src="2.png" >-->
</body>
</html>
2048 Web游戏 基于HTML+CSS+JavaScript
标签：
原文地址：http://blog.csdn.net/caicaijingyuan/article/details/43086257
