canvas游戏小试：画一个按方向键移动的圆点
自己对canvas，但又有一颗做游戏的心TT。然后记录一下对canvas的学习吧，用一个按方向键控制的小圆点来做练习。（编程时用了一些es6的语法）
示例的html很简单，只有一个canvas元素:
<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>
这里可以看到我在canvas标签里直接定义了宽和高，这和在css里面定义是不同的，canvas元素其实有两套大小
1.元素本身大小
2.绘画表面大小
默认情况下canvas的绘画表面大小是300x150像素，在css设置宽和高只能修改元素本身大小，但绘画表面大小不变，这样就会使浏览器对绘画表面进行缩放来适应元素本身的大小。
所以要定义宽和高要定义在标签或者在js里面定义，如下。
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 {Sprite} from './sprite'
class Engine{
constructor(canvasId){
this.canvas = document.getElementById(canvasId) ;
this.context = this.canvas.getContext('2d') ;
this.spriteList = [] ;
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 ;
}
//sprite
addSprite(x,y,imgUrl,speed){
var sprite = new Sprite(this.context,x,y,imgUrl,speed)
this.spriteList.push(sprite) ;
}
//keylistener
keyPressed(e){
let listener = undefined ;
let key = "" ;
switch (e.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 this.spriteList){
listener = sprite.findKeyListener(key) ;
if(listener){
listener.run() ;
}
}
}
}
export {Engine}
在engine类里定义添加精灵的方法，并处理外界传来的事件，里面可能有一些定义了但没用到的变量，以后会用到的，不过engine就是整个游戏的入口，总而言之在mian.js中只要引入engine就能让整个效果跑起来。
最后的main.js
import {Engine} from './gameEngine'
$(function(){
init() ;
});
function init(){
initGame() ;
}
function initGame(){
var engine = new Engine('canvas') ;
engine.addSprite(10,10,null,10) ;
$(document).keydown(function (e) {
engine.keyPressed(e) ;
});
}