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 ...
随机推荐
- scrapy.Spider的属性和方法
scrapy.Spider的属性和方法 属性: name:spider的名称,要求唯一 allowed_domains:允许的域名,限制爬虫的范围 start_urls:初始urls custom_s ...
- 学习React系列（九）——高阶函数
定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...
- 使用Swoole测试MySQL在特定SQL下的并发性能
场景描述 从全文检索或者缓存中获取ID,根据ID查询数据库获取基础信息,进行页面展示 SQL:select * from table where id in(id1,id2,id3...id40) 此 ...
- 福利：100G Java全套学习视频免费送了
嗯 是的 众所周知 java工会自开办以来 一直致力于分享一些 java技术总结 学习方法..等等等 所以 从我做这个公众号以来 我的手机就没有消停过一天 因为 每天都有很多粉丝问我 "您好 ...
- springboot启动报错
新建springboot整合aop记录web日志的过程中启动失败 错误如下: ***************************APPLICATION FAILED TO START******* ...
- java中的多态案例
多态性实际上有两种: 1.方法的多态性: 1.1方法重载:相同的方法名,会根据传入的参数的类型和个数不同执行不同的方法 1.2方法覆写:同一个方法名称,会根据子类的不同实现不同的功能 2.对象的多态性 ...
- Java入门之JDK的安装和环境变量的配置
Java的版本 1. Java SEjava se 以前称为J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程序.Java SE是基础包,但是也包含了支持 Jav ...
- hdu 4638 树状数组 区间内连续区间的个数(尽可能长)
Group Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- hdu 5442 (后缀数组)
稍微学习了下第一次用后缀数组- - , 强行凑出答案 , 感觉现在最大的问题是很多算法都不知道 ,导致有的题一点头绪都没有(就像本题). /*推荐 <后缀数组——处理字符串的有力工具>— ...
- hdu 3954 线段树 (标记)
Level up Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...