码迷,mamicode.com
首页 > 其他好文 > 详细

利用canvas制作小游戏的关键点

时间:2019-07-01 13:53:24      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:ati   star   刷新   技术   一个   ram   利用   动画   mamicode   

主要就这四个思路: 

 

 

游戏图片素材需要全部加载完成后,才初始化游戏

            利用new Image(),

 

将所有数据存放在dataStore.js中,通过单例模式,让全局都可以调用同一个堆内存中的数据

    技术图片

 

canvas图片素材,是通过将图片剪切,放置在画布上,所以可以写成一个公用JS,ctx.drawImage(img,startX,startY,endX,endY,x,y,width,height)

技术图片 

 

小游戏绘制的刷新不再是用定时器,而是通过帧率的刷新方法,不停的刷新,给人视觉误差,看起来就像动画一样

let timer = requestAnimationFrame(fn);用法和定时器一样,会不停的调用fn

cancelAnimationFrame(timer); 停止动画

 

利用canvas制作小游戏的关键点

标签:ati   star   刷新   技术   一个   ram   利用   动画   mamicode   

原文地址:https://www.cnblogs.com/fanbulaile/p/11113378.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!