您的位置：首页 > Web前端 > JavaScript

JS——2048(支持触屏及键盘操作)

2016-10-04 23:23 429 查看

<html>
<head>
<title>2048</title>
<style type="text/css">
table { table-layout: fixed }
table tr td{
background-color: #D7CE80;
border:#666666;
font-size:48px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<style id="style-1-cropbar-clipper">
.en-markup-crop-options {
top: 18px !important;
left: 50% !important;
margin-left: -100px !important;
width: 200px !important;
border: 2px rgba(255,255,255,.38) solid !important;
border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
margin-left: 0px !important;
}
</style>
</head>
<body youdao="bind">
<div id="version"></div>
<table cellspacing="5px" frame="border">
<tbody>
<tr>
<td id="0" style="width: 148.5px; height: 148.5px;"></td>
<td id="1" style="width: 148.5px; height: 148.5px;">2</td>
<td id="2" style="width: 148.5px; height: 148.5px;">2</td>
<td id="3" style="width: 148.5px; height: 148.5px;"></td>
</tr>
<tr>
<td id="4" style="width: 148.5px; height: 148.5px;"></td>
<td id="5" style="width: 148.5px; height: 148.5px;">4</td>
<td id="6" style="width: 148.5px; height: 148.5px;"></td>
<td id="7" style="width: 148.5px; height: 148.5px;"></td>
</tr>
<tr>
<td id="8" style="width: 148.5px; height: 148.5px;"></td>
<td id="9" style="width: 148.5px; height: 148.5px;"></td>
<td id="10" style="width: 148.5px; height: 148.5px;"></td>
<td id="11" style="width: 148.5px; height: 148.5px;"></td>
</tr>
<tr>
<td id="12" style="width: 148.5px; height: 148.5px;"></td>
<td id="13" style="width: 148.5px; height: 148.5px;"></td>
<td id="14" style="width: 148.5px; height: 148.5px;"></td>
<td id="15" style="width: 148.5px; height: 148.5px;"></td>
</tr>
</tbody>
</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>

—–下面有个“顶”字，你懂得O(∩_∩)O哈哈~

—–乐于分享，共同进步！

—–更多文章请看：http://blog.csdn.net/duruiqi_fx

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航