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) ;

  });

}

canvas游戏小试：画一个按方向键移动的圆点的更多相关文章

  1. 7.利用canvas和js画一个渐变的

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  3. 有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...

  4. 如何用Photoshop画一个发光金币（unity游戏素材教程）

    做好的发光金币预览图: 以下为如何用Photoshop画一个发光金币教程: [1]如上图1-2,新建,名称改为Coin,宽度20像素,高度20像素,分辨率72,背景白色: [2]使用Alt+Shift ...

  5. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  6. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  7. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  8. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

随机推荐

  1. excel2013添加坐标轴名称label

    图画好了,x.y轴没有名称,怎么办那 点击左上角有个---添加图标元素----里面有轴标题应该就是

  2. js005-引用类型

    js005-引用类型 数据类型分为基本类型和引用类型:基本类型值如下:Undefined.Null.Bollean.Number.String 本章内容: 1.使用对象 2.创建并操作数组 3.理解基 ...

  3. C++中int,float,string,char*的转换（待续）

    //float转string char a[100]; float b = 1.234; sprintf(a, "%f", b); string result(a); //int转 ...

  4. Light Pre-Pass相关链接

    Key Words: Light Pre-Pass, Deferred Lighting http://mquandt.com/blog/2010/03/light-pre-pass-round-2/ ...

  5. MySQL出错：ERROR 1045 (28000)的解决方法

    MySQL突然不能用了,症状如下: [root@bogon ok]# mysql ERROR (): Access denied for user 'root'@'localhost' (using ...

  6. IE安全分析

    IE安全问题,这个话题似乎很古老了,但是问题又是层出不穷~ 对于IE的安全,我个人认为有两点需要关注,一个是上网的安全,二个是IE解析代码的安全 对于IE上网安全,这是最基本的,也是最常用的了 附上一 ...

  7. _SYS_LIB="-lm -lnsl -ldl"

    -lm  是指连接libm.so     意思是连接数学库, -lnsl  如果涉及RPC编程,必然需要libnsl.so,因此必须在编译选项里加入 -lnsl.      gcc 编译选项 -L是要 ...

  8. Java中native关键字

    Java中native关键字 标签: Java 2016-08-17 11:44 54551人阅读 评论(0) 顶(23453) 收藏(33546)   今日在hibernate源代码中遇到了nati ...

  9. Linux下vim查看文件名

    在vim下编辑时,有时候看不到文件名,不知道编辑的是那个文件,怎么呢,可以按照下面的方法试试. 查看文件名 在正常模式下: :f 或CTRL+G 查看文件的路径 用 :!pwd 可以看当前的详细路径. ...

  10. ThinkPHP3.2对接开发支付宝即时到帐接口

    ThinkPHP3.2对接开发支付宝即时到帐接口 在做一些商城.自动发卡网站.会员积分充值.金币充值等等这类网站都时候,我们极大可能需要使用到第三方都支付接口.不管是财付通.支付宝.银联.贝宝.易宝这 ...