karlew > 移动端网页开发 > 触屏设备游戏的几种输入控制方式

触屏设备游戏的几种输入控制方式

6-12 4,325 views

在移动端游戏开发中(app或是网页)，对于输入控制有好几种方式实现：

 

1.点击事件(onclick,tap)

最常见的方式，且分成两种使用形式：像笨鸟先飞一类不需要判断点击位置的，以及像消消乐一类需要判断点击位置的。

  1. document.getElementById(ele).onclick = function(event){
  2.     x=event.clientX;
  3.     y=event.clientY;
  4.     //some js code
  5. }

 

2.拖动控制(touchmove)

庄园类或装扮类游戏使用较多，有个缺点是拖动时手指会遮住原物体及目标区域。

  1. document.addEventListener("touchmove", function(event){
  2.     x = event.touches[0].pageX;
  3.     y = event.touches[0].pageY;
  4.     //some js code
  5. } , false);

 

3.重力感应(deviceorientation)

一些平衡类或坚持类游戏比较常见，个人觉得操作空间最大的方式，例如控制的物体速度可以取决于设备偏移角度。但重力感应控制有一点不太方便：对玩家拿设备的姿势有要求。。。

  1. window.addEventListener("deviceorientation", function(event){
  2.     alpha = event.alpha;
  3.     beta = event.beta;
  4.     gamma = event.gamma;
  5.     //some js code
  6. }, true);

alpha,beta,gamma代表什么，可手机上打开http://wx.karlew.com/g/看看

 

4.虚拟按键

在网页边缘或角落放入可点击html元素模拟按键。个人觉得虚拟按键占地方，且对点击准确性有要求。虚拟按键一直得到跑酷或打斗游戏的垂青。

 

5.触控手势(例如touch.js的swipe)

在一些益智类拼图游戏像2048、华容道会用到方向滑动，更复杂的手势用的比较少。

  1. touch.on(ele, 'swipeleft', function(event){
  2.     //some js code
  3. });

需要引入touch.js

 

6.键盘事件(onkeydown,onkeyup)

貌似目前很少有移动游戏会绑定键盘事件。。。不过谁也说不定以后手机会不会都支持外接键盘。

  1. document.onkeydown = function (event) {
  2.     var keyCode = event.keyCode;
  3.     switch (keyCode) {
  4.         case 37:
  5.             //some js code
  6.             break;
  7.         default:
  8.             break;
  9.     }
  10. }

版权属于: karlew

原文地址: https://www.karlew.com/archives/540

转载时必须以链接形式注明原始出处及本声明。

欢迎留言