Canvas制作RPG手机版游戏(一)：

最新推荐文章于 2022-03-27 20:59:57 发布

扬子鳄008

最新推荐文章于 2022-03-27 20:59:57 发布

阅读量1.8k

点赞数 1

分类专栏： Canvas 文章标签： canvas HTML5 Scratch RPG 手机游戏

本文链接：https://blog.csdn.net/yuehua00/article/details/85244707

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近想写一个简单的手机RPG游戏，现在的RPG制作工具多为PC版，但Web版RPG制作太少了。网上的Scratch制作虽然简单好用，但却用的是flash,对手机来说是很不良好的。

打算写一个Canvas的RPG游戏，HTML5游戏对手机游戏制作好处不多说。

首先，创建一个Canvas。

标签meta,这个对手机开发来说是需要的。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta charset="utf-8">
	<title>YHH Game</title>
	<style>
	  body{
	   overflow:hidden
	  }
	  #gameCanvas{
	   display:block;
	   //border: 8px solid #123;
	  }
	  
	  
	</style>
</head>
<body>
	
	<canvas id="gameCanvas" ></canvas>
	
	<script type="text/javascript" src="js/game.js" ></script>
</body>
</html>

然后，设置这个canvas

var main_canvas = document.getElementById("gameCanvas");
var main_context = main_canvas.getContext("2d");

var width = screen.width*0.92; //最大屏宽度
var height = screen.height*0.8; //最大屏高度
main_canvas.width = width;
main_canvas.height = height;

使用RequestAnimationFrame，这个是重点，按当前显示屏刷新次数运到，一般的电脑屏是60Hz,就是每秒刷新60次，大概16.6m运行一次。

比起setTimeout和setInterval，RequestAnimationFrame不需要设置时间间隔，与显示器刷新相同，运行更加流畅。

//main
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
var now = Date.now();
var then = Date.now();
var main = function () {
	now = Date.now();
	var delta = now - then; //时间间隔
	then = now; 
	
    //写运行内容
	
	requestAnimationFrame(main);
};



main();