你的位置:首页 > Java教程

[Java教程]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) ; });}