joyme
2014-05-28 12:33:14
证
javascript实现html网页版的2048游戏源代码
在这里看到了很多有意思的代码。本着分享的精神把自己写的2048的代码也贴出来。当然本人是一个超级菜鸟，有些地方没有完善。欢迎各位大神解决。（界面很丑，不要介意）
支持触屏及电脑键盘操作(wasd四个按键)
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>2048</title>
<style type="text/css">
table { table-layout: fixed }
table tr td{
background-color: #D7CE80;
border:#666666;
font-size:48px;
}
</style>
</head>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<body>
<div id="version"></div>
<table cellspacing="5px" frame="border">
<tr>
<td id="0">
</td>
<td id="1">
</td>
<td id="2">
</td>
<td id="3">
</td>
</tr>
<tr>
<td id="4">
</td>
<td id="5">
</td>
<td id="6">
</td>
<td id="7">
</td>
</tr>
<tr>
<td id="8">
</td>
<td id="9">
</td>
<td id="10">
</td>
<td id="11">
</td>
</tr>
<tr>
<td id="12">
</td>
<td id="13">
</td>
<td id="14">
</td>
<td id="15">
</td>
</tr>
</table>
<script type="text/javascript" src="setHeight.js"></script>
<script type="text/javascript">
var startX = 0, startY = 0,d=-1;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
}
catch (e) {
alert('touchSatrtFunc：' + e.message);
}
}
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//判断滑动方向
if((y-startY)>0&&Math.abs((y-startY)/(x-startX))>1)
{
d=0;
}
else if(y-startY<0&&Math.abs((y-startY)/(x-startX))>1)
{
d=1;
}
else if((x-startX)>0&&Math.abs((y-startY)/(x-startX))<1)
{
d=2;
}
else
{
d=3;
}
}
catch (e)
{
alert('touchMoveFunc：' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
if(d==0)
{
down();//下
}
else if(d==1)
{
up();//上
}
else if(d==2)
{
right();//右
}
else if(d==3)
{
left();//左
}
}
catch (e) {
alert('touchEndFunc：' + e.message);
}
}
//绑定事件
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice()
{
// document.getElementById("version").innerHTML = navigator.appVersion;
document.createEvent("TouchEvent");
bindEvent(); //绑定事件
}
document.onkeypress=function(evt)
{
var evt=window.event?window.event:evt;
if (evt.keyCode=='119' )
{
up();//上
}
if(evt.keyCode=='115')
{
down();//下
}
if(evt.keyCode=='100')
{
right();
}
if(evt.keyCode=='97')
{
left();
}
}
window.onload = isTouchDevice;
</script>
</body>
</html>
setHeight.js
// JavaScript Document
$(document).ready( function(){
x=$(window).width();
y=$(window).height();
if(x<=y)
{
$("td").css("width",x/6)
.css("height",x/6);
}
else
{
$("td").css("width",y/6)
.css("height",y/6);
}
});
num=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
i=Math.floor(Math.random()*16);
num[i]=2;
i=Math.floor(Math.random()*16);
num[i]=2;
strArr=num.toString();
ga(strArr);
donum();
canvas.js
// JavaScript Document
getArr=new Array();
function ga(str)
{
getArr = str.split(",");
}
function donum()
{
for(i=0;i<16;i++)
{
if(getArr[i]!=0)
{
document.getElementById(i).innerText=getArr[i];
}
else
{
document.getElementById(i).innerText="";
}
}
}
function randnum()
{
var num;
for(j=0;j<16;j++)
{
if(getArr[j]!=0)
{
num++;
}
}
if(num!=16)
{
while(1)
{
i=Math.floor(Math.random()*16);
if(getArr[i]==0)
{
var rn=Math.ceil(Math.random()*10);
if(rn>0&&rn<=6)
{
getArr[i]=2;
}
else if(rn>6&&rn<=9)
{
getArr[i]=4;
}
else
{
getArr[i]=8;
}
break;
}
}
}
donum();
}
function down()
{
for(var num=12;num<=15;num++)
{
if(getArr[num]==getArr[num-4])
{
getArr[num]=parseInt(getArr[num-4])+parseInt(getArr[num]);
getArr[num-4]=0;
if(getArr[num-8]==getArr[num-12])
{
getArr[num-8]=parseInt(getArr[num-8])+parseInt(getArr[num-12]);
getArr[num-12]=0;
}
}
else if(getArr[num-4]==getArr[num-8])
{
getArr[num-4]=parseInt(getArr[num-8])+parseInt(getArr[num-4]);
getArr[num-8]=0;
}
else if(getArr[num-8]==getArr[num-12])
{
getArr[num-8]=parseInt(getArr[num-12])+parseInt(getArr[num-8]);
getArr[num-12]=0;
}
for(var j=num;j>=num-8;j=j-4)
{
if(getArr[j]==0)
{
for(var i=j-4;i>=0;i=i-4)
{
if(getArr[i]!=0)
{
getArr[j]=getArr[i];
getArr[i]=0;
break;
}
}
}
}
}
donum();
randnum();
}
function up()
{
for(var num=3;num>=0;num--)
{
if(getArr[num]==getArr[num+4])
{
getArr[num]=parseInt(getArr[num+4])+parseInt(getArr[num]);
getArr[num+4]=0;
if(getArr[num+8]==getArr[num+12])
{
getArr[num+8]=parseInt(getArr[num+8])+parseInt(getArr[num+12]);
getArr[num+12]=0;
}
}
else if(getArr[num+4]==getArr[num+8])
{
getArr[num+4]=parseInt(getArr[num+8])+parseInt(getArr[num+4]);
getArr[num+8]=0;
}
else if(getArr[num+8]==getArr[num+12])
{
getArr[num+8]=parseInt(getArr[num+12])+parseInt(getArr[num+8]);
getArr[num+12]=0;
}
for(var j=num;j<=num+8;j=j+4)
{
if(getArr[j]==0)
{
for(var i=j+4;i<=15;i=i+4)
{
if(getArr[i]!=0)
{
getArr[j]=getArr[i];
getArr[i]=0;
break;
}
}
}
}
}
donum();
randnum();
}
function right()
{
for(var num=15;num>=3;num=num-4)
{
if(getArr[num]==getArr[num-1])
{
getArr[num]=parseInt(getArr[num-1])+parseInt(getArr[num]);
getArr[num-1]=0;
if(getArr[num-2]==getArr[num-3])
{
getArr[num-2]=parseInt(getArr[num-2])+parseInt(getArr[num-3]);
getArr[num-3]=0;
}
}
else if(getArr[num-1]==getArr[num-2])
{
getArr[num-1]=parseInt(getArr[num-2])+parseInt(getArr[num-1]);
getArr[num-2]=0;
}
else if(getArr[num-2]==getArr[num-3])
{
getArr[num-2]=parseInt(getArr[num-3])+parseInt(getArr[num-2]);
getArr[num-3]=0;
}
for(var j=num;j>=num-2;j=j-1)
{
if(getArr[j]==0)
{
for(var i=j-1;i>=num-3;i=i-1)
{
if(getArr[i]!=0)
{
getArr[j]=getArr[i];
getArr[i]=0;
break;
}
}
}
}
}
donum();
randnum();
}
function left()
{
for(var num=0;num<=12;num=num+4)
{
if(getArr[num]==getArr[num+1])
{
getArr[num]=parseInt(getArr[num+1])+parseInt(getArr[num]);
getArr[num+1]=0;
if(getArr[num+2]==getArr[num+3])
{
getArr[num+2]=parseInt(getArr[num+2])+parseInt(getArr[num+3]);
getArr[num+3]=0;
}
}
else if(getArr[num+1]==getArr[num+2])
{
getArr[num+1]=parseInt(getArr[num+2])+parseInt(getArr[num+1]);
getArr[num+2]=0;
}
else if(getArr[num+2]==getArr[num+3])
{
getArr[num+2]=parseInt(getArr[num+3])+parseInt(getArr[num+2]);
getArr[num+3]=0;
}
for(var j=num;j<=num+2;j=j+1)
{
if(getArr[j]==0)
{
for(var i=j+1;i<=num+3;i=i+1)
{
if(getArr[i]!=0)
{
getArr[j]=getArr[i];
getArr[i]=0;
break;
}
}
}
}
}
donum();
randnum();
}
演示地址:http://myway5.com/html5/2048
由最代码官方编辑于2016-10-16 10:41:32
猜你喜欢
相关代码
- 使用java和javascript判断当前浏览者的操作系统
- 证 javascript简单调色板工具
- js进度条(原创可用于学习)
- {Tonfay}[js动态报表][兼容IE6+/火狐/360/谷歌/等各大浏览器][可手动设置间隔时间读取数据/并且显示在图表上]
- 证 5个小javascript特效实例
- 正则表达式的JS验证
- 证 js canvas无限生成国风水墨画
- js打印,预览的功能.希望采纳.
- 证 JavaScript写的贷款计算器源代码下载
- 证 纯js开发的时钟,带秒钟
- 证 js万年历查询设置工作日前端源代码分享
- 仿淘宝 css，js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp
最近下载
最近浏览
爱吃懒羊羊123
6月16日
暂无贡献等级
dushine LV3
4月14日
onemee LV36
2024年7月1日
meilanrourou LV3
2024年6月24日
7456321 LV1
2024年4月22日
微信网友_6793785677565952 LV1
2023年12月25日
去死吧aaa LV1
2023年6月20日
微信网友_6508807560073216
2023年6月7日
暂无贡献等级
entity_bn LV1
2023年5月15日
微信网友_6467998946840576 LV2
2023年5月9日
