JS——2048(支持触屏及键盘操作)
<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
JS——2048(支持触屏及键盘操作)的更多相关文章
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 支持触屏的jQuery轮播图插件
移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...
- 基于jQuery的移动轮播图（支持触屏）
移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...
- javascript如何判断访问网页的设备及是否支持触屏功能
var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac ...
- zepto.js swipe实现触屏tab菜单
今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...
- 原生js实现网页触屏滑动
前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...
- js移动端触屏事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- Bootstrap幻灯轮播如何支持触屏左右滑动手势？
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- 解决电脑访问Discuz!手机版（支持触屏版）
discuz电脑访问手机版的方法现在需要来修改一下2个文件,即可用电脑浏览discuz的手机版本:找到./source/function/function_core.php 文件,查找 : funct ...
随机推荐
- 小工具：批量导入导出主机上的docker镜像
工作需要,将主机上的部分镜像导出为tar文件,放便在其他主机上使用 用python实现了一个批量打包脚本: import re import os import subprocess if __nam ...
- [Luogu 2090]数字对
Description 对于一个数字对(a, b),我们可以通过一次操作将其变为新数字对(a+b, b)或(a, a+b). 给定一正整数n,问最少需要多少次操作可将数字对(1, 1)变为一个数字对, ...
- [ZJOI2008]瞭望塔
题目描述 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安. 我们将H村抽象为一维的轮廓.如下图所示 我们可以用一条山的上方轮廓折线(x1, y1), ...
- [AHOI2012]铁盘整理
题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1<=R<=100) 输出格式: ...
- Codeforces 547D Mike and Fish
Description 题面 题目大意:有一个的网格图,给出其中的 \(n\) 个点,要你给这些点染蓝色或红色,满足对于每一行每一列都有红蓝数量的绝对值之差不超过1 Solution 首先建立二分图, ...
- ●SPOJ LCS2Longest Common Substring II
题链: http://www.spoj.com/problems/LCS2/题解: 后缀自动机. 对第一个串建立后缀自动机, 然后把后面的每个串分别与该串的自动机去匹配,求出相应的数组val*[s]: ...
- ●CodeForces 429D Trick_Function
题链: http://codeforces.com/problemset/problem/429/D题解: 分治,最近点对 不难发现g(i,j)=sum[j]-sum[i], 那么f(i,j)=(i- ...
- 51 nod 1495 中国好区间
1495 中国好区间 基准时间限制:0.7 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 阿尔法在玩一个游戏,阿尔法给出了一个长度为n的序列,他认为,一段好的区间,它的长度是& ...
- hdu 2871 线段树(各种操作)
Memory Control Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- hdu5635 BestCoder Round #74 (div.2)
LCP Array Accepts: 131 Submissions: 1352 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 13 ...