canvas元素其实有些许效仿大小。在canvas元素大小及绘图表面大小不抱时。

好对canvas,但又发生同粒做游戏之心TT。然后记录转针对性canvas的学习吧,用一个仍方向键控制的稍圆点来开练习。(编程时用了部分es6的语法)

鼠标事件

canvas.onmousedown = function(e ) {//React to the mouse down event };

canvas.addEventListener(‘mousedown’, function(e ) { //React to the mouse
down event});

面一样种植艺术看起重新简单有,但是,如果需要往某只鼠标事件注册多单监听器的话,那么用addEventListener()方法会再贴切。

浏览器通过波目标传递给监听器的鼠标坐标,是窗口坐标(window
coordinate),而未是对立与canvas自身之坐标。而大部分景下,开发者需要掌握之是发出鼠标事件之触及相对于canvas的位置,而无是以总体窗口被的岗位,所以产生必不可少进行坐标变换。

function windowToCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect();

return { x: x – bbox.left * (canvas.width / bbox.width), y: y –
bbox.top * (canvas.height / bbox.height) }; }

上述办法,在canvas对象及调用getBoundingClientRect()方法,来获取canvas元素的边界框,该边界框的坐标是对立于一体窗口的。然后返回一个靶,该目标的x、y属性分别对应为鼠标在canvas之中的坐标。该方式不止是对少单坐标进行移动缩放,在canvas元素大小与绘图表面大小不吻合时,它还对这简单个坐标进行了缩放。

canvas元素实际上有星星点点效尺寸,一个是素本身的尺寸,还有一个凡是因素绘图表面(drawing
surface)的轻重。以内联方式设置width和height属性,实际上是同时装了元素本身的大小与素绘图表面的轻重缓急。然而,如果由此CSS来设定canvas元素的大大小小,那么就见面变动元素本身的分寸,而无会见潜移默化至绘图表面。

倘css设定的canvas元素大小域其绘图表面大小不等,浏览器就是见面针对绘图表面进行缩放,使该副元素的大大小小,类似于设定了图的宽和强,但是同图片本身尺寸不同,那么,图片会让拉伸平。

演示的html很简单,只出一个canvas元素:

键盘事件

canvas是一个不可得关节的要素,所以,在canvas上新加键盘事件监听器是缘木求鱼的。如果想如果检测键盘事件的话语,你该于document或window对象上新加键盘事件监听器才对。

keydown

keypress

keyup

keydown与keyup是根事件,几乎每次按键时都见面接触这些事件。

<html>
    <head>
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="js/commons.js" charset="utf-8"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <header></header>
        <canvas id="canvas" width=1000 height=500></canvas>
    </body>
</html>

触摸事件

挪动端触摸事件与桌面平台的鼠标事件来少数单根本的不同点

  1. 鼠标光标只生一个i额,而触摸点可能产生为数不少
  2. 鼠标光标可以停(hover),而触摸点则很

处理触摸事件的计,在广大地方跟处理鼠标事件相似,例如

canvas.ontouchstart = function(e ) { alert(“touch start”); };

canvas.addEventListener(“touchstart”, function(e ) { alert(“touch
start”); });

这边可以观看本人于canvas标签里直接定义了宽和大,这跟以css里面定义是殊的,canvas元素其实有零星套大小

触摸事件

事件类型

是否可以取消

是否走完整个冒泡式触发过程

描述

浏览器对该事件的默认处理方式

touchstart

用户将某个触摸点置于触摸界面上

未定义

touchmouve

在触摸界面上移动触摸点

未定义

touchend

触摸点离开了触摸区域

根据具体情况而定,可能将其视为:mousemove,mousedown、mouseup、click

touchcancel

触摸点的触摸动作被打断,或是触摸点个数超出了设备所能处理的范围

未定义

1.元素本身尺寸

touchevent对象的习性

属性名

属性值的数据类型

描述

touches

TouchList

由正在界面上触摸的各个触摸点所组成的列表

changedTouches

TouchList

与上次触摸事件相比,发生改变的各个触摸点,对于touchstart事件来说,它表示那些刚刚被激活的触摸点。对于touchmove事件来说,表示那些位置发生了移动的触摸点。对于touchend与touchcancel来说,表示那些不再停留于触摸界面之上的触摸点

targetTouches

TouchList

正在界面上触摸而且位于当前元素范围之内的那些触摸点。除非某个触摸点被拖到了元素范围之外,否则该列表就等同于touches列表

altKey ctrlKey metaKey shiftKey

boolen

如果在触摸事件发生时,与之对应的按键Alt Ctrl Meta或Shift处于被按下的状态,那么其值就是true,由于某些移动设备并没有物理键盘,所以这些属性的值可能是不确定的。

2.打表面大小

TouchList对象

TouchList对象有些许单属性

length

Touch identifiedTouch(identifier)

加以某个TouchList对象,可以得经length属性获取列表中所含Touch对象的个数

canvas.ontouchstart = function(e) {alert(“e.touches.length + ‘ touches
on the device’); };

足像操作数组那样,访问TouchList之中的各一个Touch元素

canvas.ontouchstart = function(e) { for var i=0;i<e.touches.length;
++i} { alert(“Touch at: ” + e.touches[i].pageX + “,” +
e.touches[i].pageY); } };

默认情况下canvas的写表面大小是300×150像从,在css设置富有和高只能修改元素本身尺寸,但画画表面大小非转换,这样即使会使浏览器对写表面进行缩放来适应元素本身的深浅。

Touch对象

触摸事件监听器最终还是得检讨Touch对象自我的习性。

属性名

属性值的数据类型

描述

clientX

long

触摸点相对于视窗的X坐标,该值不包含滚动条宽度

clientY

long

Y坐标,不包含滚动条高度

identifier

long

代表触摸点身份的独特标识符,同一个触摸点的身份标识符在不同的事件中保持不变

pageX

long

触摸点相对于视窗的X坐标,包含滚动条的宽度

pageY

long

相对于视窗的Y坐标,包含滚动条高度

screenX

long

触摸点相对于屏幕的X坐标

screenY

long

触摸点相对于屏幕的Y坐标

target

EventTarget

触摸动作开始时,触摸点所在的元素。就算该点其后被拖出了初始元素,target依然会指向一开始的那个元素。

 

tips:在事变目标上调用preventDefault()方法,可阻止浏览器对拖欠事件使像滚动网页等默认的处理动作。此办法好避各种开发者不思量见见的浏览器互动操作,如缩放页面、偶然选取了网页内容,以及div闪烁等。

于是只要定义宽和赛如定义在标签或者当js里面定义,如下。

手指缩放

对此项目也touchstart及touchmove的触摸事件,如果发现有一定量只点同时在触摸设备,而且其被最少发生一个职务来了别,那么即使判断用户在pinch屏幕。如果程序意识用户在pinch屏幕,用于拍卖touchstart事件的方法会计算两个触摸点之间的离,以及当前放大倍数与该离的比率。在touchmove事件之法门吗会盘算时简单独触摸点之间的相距,并且用该值乘以刚才计算好的比率,就好赢得新的放大倍数。

var canvas=document.getElementById("canvas");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

 

接下来我们吧逻辑的有的,其实比较简单,但当一个只是继续进步的游戏雏形,我们运用面向对象编程的想想

定义engine类,来代表游戏之输入,sprite类表示游戏被的目标,listener类来监听游戏之风波

 

遵照顺序逻辑,先看listener类:

class Listener{
  constructor(key,callback){
    this.key = key ;
    this.callback = callback ;
  }

  run(){
    this.callback() ;
  }

  getKey(){
    return this.key ;
  }
}

export {Listener}

重要出少单对象,一个凡是她的key值,用来验证其是怎么的监听器,另外是一个回调函数,用来点事件

 

sprite类

import {Listener} from './listener'

class Sprite{

  constructor(context,x,y,imgUrl,speed){
    this.x = x ;
    this.y = y ;
    this.imgUrl = imgUrl ;
    this.speed = speed||10 ;
    this.listeners = [] ;
    this.context = context ;
    this.drawImage() ;
    this.initListener() ;
  }

  drawImage(){
    this.context.fillStyle = 'black' ;
    this.context.beginPath();
    this.context.arc(this.x,this.y,5,0,2*Math.PI,true);//radius = 5
    this.context.closePath();
    this.context.fill();
  }

  update(x,y){
    this.context.clearRect(this.x-5,this.y-5,10,10);
    this.context.beginPath();
    this.context.arc(x,y,5,0,2*Math.PI,true);
    this.context.closePath();
    this.context.fill();
    this.x = x ;
    this.y = y ;
  }

  addListener(keyListener){
    this.keyListenerList.push(keyListener) ;
  }

  findKeyListener(key){
    for(let i in this.listeners){
      if(this.listeners[i].getKey()===key){
        return this.listeners[i] ;
      }
    }
    return null ;
  }
  //default listener
  initListener(){
    this.listeners['up'] = new Listener('up',()=>{
      this.update(this.x,this.y-this.speed) ;
    });
    this.listeners['down'] = new Listener('down',()=>{
      this.update(this.x,this.y+this.speed) ;
    });
    this.listeners['left'] = new Listener('left',()=>{
      this.update(this.x-this.speed,this.y) ;
    });
    this.listeners['right'] = new Listener('right',()=>{
      this.update(this.x+this.speed,this.y) ;
    });
  }

}

export {Sprite}

灵活类吃援了前定义之监听类,然后定义了“上下左右”这是单默认监听目标来加盟到者精灵自身的监听列表中,正常游玩是为此帧动画的,我们立即先用一个圆来代替~。

drawImage是打圆,在构造函数中调用,来显示形象。update函数来更新到之职,其实是将原来的圆清掉重画一不善,它为监听器触发。

findKeyListener这个函数是用来遍历自己的监听器列表的,里面值得说一下底凡循环我用的for
in,这是因自身于底下定义默认监听器的时键值用底stirng而无是数字。如果是常规的[0…..n]然因数字为索引的数组的话,建议用es6的for
of来遍历

for (var value of Array) {
  console.log(value);//不是key,而是值
}

 

engine类

import {Player} from './player'
import {Barrier} from './barrier'

class Engine{

  constructor(canvasId){
    this.canvas = document.getElementById(canvasId) ;
    this.context = this.canvas.getContext('2d') ;
    this.playerList = [] ;
    this.barrierList = [] ;
    this.keyListenerList = [] ;
    //time
    this.startTime = 0 ;
    this.lastTime = 0 ;
    this.currentTime = 0 ;
    this.FPS = 30 ;
    //height and width
    this.bgHeight = this.canvas.height ;
    this.bgWidth = this.canvas.width ;
  }

  start(){
   this.listenerStart() ;
  }

  //sprite
  addPlayer(x,y,radius,imgUrl,speed){
    var player = new Player(this.context,x,y,radius,imgUrl,speed)
    this.playerList.push(player) ;
  }

  addBarrier(x,y,width,height){
    var barrier = new Barrier(this.context,x,y,width,height) ;
    this.barrierList.push(barrier) ;
  }
  //keylistener
  keyPressed(keyCode,spriteList,barrierList){
    let listener = undefined ;
    let key = "" ;

    switch (keyCode){
      case 32: key = "space" ; break ;
      case 37: key = "left" ; break ;
      case 38: key = "up" ; break ;
      case 39: key = "right" ; break ;
      case 40: key = "down" ; break ;
      case 13: key = "enter" ; break ;
    }

    for(let sprite of spriteList){
      listener = sprite.findKeyListener(key) ;
      if(listener){
        sprite.getBarrierList(barrierList) ;
        listener.run() ;
      }
    }
  }

  listenerStart(){
    console.log('listener start') ;
    let keyPressed = this.keyPressed ;
    let spriteList = this.playerList ;
    let barrierList = this.barrierList ;
    let keyList = [] ;
    let preesedTimer = null ;
    $(document).keydown((e)=>{
      if($.inArray(e.keyCode, keyList)==-1){
        keyList.push(e.keyCode) ;
      }
      clearInterval(preesedTimer) ;
      keyPressed(e.keyCode,spriteList,barrierList) ;
    });
    $(document).keyup((e)=>{
      if(keyList){
        if(e.keyCode==keyList[keyList.length-1]&&keyList.length!=1){
          keyList.pop();//先删除这个事件本身
          clearInterval(preesedTimer) ;
          let keyCode = keyList[keyList.length-1];//获得前一个事件
          //todo 持续触发keyPressed
          preesedTimer = setInterval(function(){
            keyPressed(keyCode, spriteList, barrierList);
          },30);
        }else{
          //松开的键是之前进栈的键,就直说把它从栈里删掉
          let idx = $.inArray(e.keyCode, keyList) ;
          keyList.splice(idx,1) ;
          if(keyList.length==0){
            clearInterval(preesedTimer) ;
          }
        }
      }
      console.log("up"+keyList.length) ;
    });
  }

}

export {Engine}

以engine类里定义添加精灵的道,并拍卖外盛传的轩然大波,里面或产生局部定义了可没因此到之变量,以后会为此到的,不过engine就是全方位娱乐之输入,总而言之在mian.js中使引入engine就能叫一切职能跑起。

ps:一上马自我是管键盘监听放到main.js里面的,后来意识逻辑不对,因为我们平常玩游戏的讲话时会面众多只方向键一起遵循,比如说你当玩赛车类游戏,你只要拐弯的时光一定不见面松油门,所以您是在按了↑的功底及又以了→。当你拐弯成功之后您晤面下→键让车继续直行,这中其实有一个仓库的涉,先叫按照的键会被抑制进,当别的键松开之早晚重新起栈里弹出来。关键在你按键的当儿调用的是keydown函数,这个函数是默认在keyup之前还是为30ms循环调用,当一个按键事件从栈里弹出来的下你免克叫她一直调用keydown函数(js的建制)。所以为了模仿这个keydown我还要写了一个定时器。总的来说我按键监听写的有些复杂。。。

 

最后的main.js

import {Engine} from './gameEngine'

$(function(){
  init() ;
});

function init(){
  initGame() ;
}

function initGame(){

var engine = new Engine('canvas') ;
engine.addPlayer(10,10,10,null,10) ;
engine.addBarrier(100,100,50,200) ;
engine.start() ;

}

 最后还有一个还有遗留问题就是,我以圆点作为像,删除的上用clearRect,其判断的实际触及及矩阵内切圆不均等。。导致擦除的时段会生出黑线。。大家好行使rect和arc画一个矩阵和内切圆试试

相关文章