html语言2048代码,javascript实现html网页版的2048游戏源代码

在这里看到了很多有意思的代码。本着分享的精神把自己写的2048的代码也贴出来。当然本人是一个超级菜鸟，有些地方没有完善。欢迎各位大神解决。(界面很丑，不要介意)

支持触屏及电脑键盘操作(wasd四个按键)

index.html

2048

table { table-layout: fixed }

table tr td{

background-color: #D7CE80;

border:#666666;

font-size:48px;

}

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.οnkeypress=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;