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 ...
随机推荐
- 多线程编程、java图形用户界面编程、Java I / O系统
线程概述 进程:是一种 “自包容”的运行程序 线程是进程当中的一个概念,最小处理单位 THread类.Runnable接口.Object类 创建新执行线程有两种方法:1:一种方法是将类声明为Threa ...
- 单例模式详解及java常用类
[单例模式] 确保某一个类,只能产生一个实例. 设计思路: ====将构造函数私有化,确保类外部,不能使用new关键字自行创建对象. ====在类内部实例化一个对象,并通过静态方法返回. ( ...
- 20 个 Laravel Eloquent 必备的实用技巧
Eloquent ORM 看起来是一个简单的机制,但是在底层,有很多半隐藏的函数和鲜为人知的方式来实现更多功能.在这篇文章中,我将演示几个小技巧. 1. 递增和递减 要代替以下实现: $article ...
- 如何让服务端同时支持WebSocket和SSL加密的WebSocket（即同时支持ws和wss）？
自从HTML5出来以后,使用WebSocket通信就变得火热起来,基于WebSocket开发的手机APP和手机游戏也越来越多.我的一些开发APP的朋友,开始使用WebSocket通信,后来觉得通信不够 ...
- Jenkins持续集成演示
1.去我们的仓库修改一下代码 为了节约时间,我直接在网页上改了. 我们把布局页的footer信息改一下: 然后提交. 2.切换到Jenkins可以看到已经在构建了 等待构建完成. 3.访问我们部署的地 ...
- [LeetCode] Stickers to Spell Word 贴片拼单词
We are given N different types of stickers. Each sticker has a lowercase English word on it. You wou ...
- 机器学习基石：16 Three Learning Principles
三个理论上界: 三个线性模型: 三个关键工具: 三条学习规则: 1.奥卡姆剃刀定律 先从简单模型开始, 训练后出现欠拟合, 再尝试复杂点模型. 2.采样误差 训练.验证.测试数据尽量同分布. 3.数据 ...
- [HAOI 2007]上升序列
Description 对于一个给定的S={a1,a2,a3,…,an},若有P={ax1,ax2,ax3,…,axm},满足(x1 < x2 < … < xm)且( ax1 < ...
- ●HDU 6021 MG loves string
题链: http://acm.hdu.edu.cn/showproblem.php?pid=6021 题解: 题意:对于一个长度为 N的由小写英文字母构成的随机字符串,当它进行一次变换,所有字符 i ...
- 测试修改gcs_server_processes参数
RAC部署前提是要求各节点的主机硬件一致的,但实际如果碰上一些不规范的客户,经费有限或是扩容时已买不到同样的机器,那么采购的机器会有一些区别,比如RAC各节点的CPU核数有区别,那么默认的gcs_se ...