`
blessdyb
  • 浏览: 235263 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Canvas做游戏实践分享(二)

JavaScriptcanvashtml5gamesweb 
阅读更多

2.游戏中的数学知识

  在游戏的开发中，数学知识特别是其中的三角函数使用特别广泛

2.1 角度

       在使用canvas来制作动画的过程中，我们使用到的角度都是以弧度为单位的,角度与弧度之间的换算单位如下：

radians=degrees*Math.PI/180

 

同时，在canvas中的坐标系是以右上角为原点(0,0),向左为x轴增加方向，向下为y轴增加方向。因此，需要特别注意canvas中角度是以顺时针为方向的，这与我们在生活中角度为逆时针相反。如下图：


在三角函数中，最常用的有三个，Math.cos,Math.sin与Math.atan2,注意计算反正切的有两个函数Math.atan与Math.atan2，后者需要传入对边dy与邻边dx来求得精确的角度（在[-180，180]中正切值相同的角度会有两个）。如下:



 可以看出，对D角使用Math.atan2来得到的值将为-153.43。因此，如果我们需要求得任意一点P(x,y)与原点连线的角度，使用Math.atan2(y,x)即可。

2.2 旋转

      在游戏开发中，我们经常会碰到对于画布中对象的旋转，即使用到context.rotate方法，而其角度大多数情况下通过上述的Math.atan2(dy,dx)获得。计算一个动点与一个静点之间的实时角度，假设静点为originX,originY，动点为x,y.  则

α=Math.atan2(y-originY,x-originX)

 

如果给静点的rotation方法传入α后重绘，就会出现实时地让静点指向动点。如下即为一个随着鼠标移动而随时指向鼠标的箭头实现。

//箭头类
function Arrow(){
        //定义位置属性
	this.x=0;
	this.y=0;
        //定义旋转角度及缩放
	this.rotation=0;
	this.scaleX=1;
	this.scaleY=1;
        //定义填充色及画笔宽度
	this.color='#00ff00';
	this.lineWidth=1;
}
//绘制方法
Arrow.prototype.paint=function(context){
        //保存场景
	context.save();
        //坐标系转换，缩放及旋转
	context.translate(this.x,this.y);
	context.scale(this.scaleX,this.scaleY);
	context.rotate(this.rotation);
        //定义填充色及画笔
	context.fillStyle=this.color;
	context.lineWidth=1;
        //绘制箭头
	context.beginPath();
	context.moveTo(-50,-25);
	context.lineTo(0,-25);
	context.lineTo(0,-50);
	context.lineTo(50,0);
	context.lineTo(0,50);
	context.lineTo(0,25);
	context.lineTo(-50,25);
	context.closePath();
        //填充
	context.fill();
	if(context.lineWidth>0){
		context.stroke();
	}
	context.restore();
}

 

2.3 波动

    正弦与余弦的曲线都是一条规律性的波动曲线，游戏中很多对象的往复运动就是按正余弦规律来进行的。使用canvas我们很容易就能绘制出一条正弦曲线。如下：

 

//绘制Sin曲线，给定起始点坐标及波动高与宽
function getSinWave(context,x,y,width,height){
	context.save();
	context.translate(x,y);
	context.beginPath();
	for(var i=0;i<360;i+=0.1){   context.lineTo(i*width,Math.sin(i*width*Math.PI/180)*height);
	context.stroke();
	context.restore();
}

 弹簧振子往复运动
        对于物理学中的弹簧振子来说，其在一个坐标轴中的运动就是正余弦曲线在Y轴上的投影。如下为一个小球的运动。

//小球类，给定半径及填充色
function Ball(radius,color){
        //设置球心及缩放，边缘线宽
	this.x=0;
	this.y=0;
	this.radius=radius||20;
	this.color=color||'#ffff00';
	this.scaleX=1;
	this.scaleY=1;
	this.lineWidth=1;
}
//定义绘制方法
Ball.prototype.paint=function(context){
	context.save();
        //坐标转换
	context.translate(this.x,this.y);
	context.scale(this.scaleX,this.scaleY);
	context.fillStyle=this.color;
	context.lineWidth=this.lineWidth;
	context.beginPath();
        //绘制球
	context.arc(0,0,this.radius,0,Math.PI*2,true);
	context.closePath();
	context.fill();
	if(context.lineWidth>0){
		context.stroke();
	}
	context.restore();
};

 如下为具体的呈现HTML文档，在utils.js中定义了window.requestAnimFrame的实现类（详见分享一).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ball</title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400"></canvas>
		<script type="text/javascript" src="utils.js"></script>
		<script type="text/javascript" src="ball.js"></script>
		<script type="text/javascript">
			window.onload=function(){
                               //获取canvas标签引用及canvas绘图上下文context
                                var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
                               //实例化小球
				var ball=new Ball();
				ball.x=canvas.width/2;
				ball.y=canvas.height/2;
                                //初始化角度及角度增加系数
				var angle=0;
				var vr=1*Math.PI/180;
				(function animationLoop(){
					window.requestAnimFrame(animationLoop,canvas);
					context.clearRect(0,0,canvas.width,canvas.height);
                                        //以60帧的速度来绘制弹簧振子小球的运动
					ball.x=canvas.width/2*(1-Math.cos(angle));
					angle+=vr;
					ball.paint(context);
				})();
			};
		</script>
	</body>
</html>

 

线性垂直波动

    如果给以正余弦方式垂直运动的对象加上一个横向的线速度，那就会动态地绘制出一个正余弦曲线。我们为ball添加vx,vy属性。

(function aniamtionLoop(){
	window.requestAnimation(animationLoop,canvas);
	context.clearRect(0,0,canvas.width,canvas.height);
	ball.x+=ball.vx;
	angle+=ball.vy*Math.PI/180;
	ball.y=Math.cos(angle)*canvas.height/2;
	ball.paint(context);
})();

 脉冲效果
        除了为对象在X与Y轴方向上添加正余弦变化的速度外，也可以为对象的其它属性，    如尺寸添加一个按正弦变化的值，这将会产生一种脉冲效果。

ball.scaleX=ball.scaleY=Math.PI*angle/180;

 此处使用的是同一个变化量，其实也可以为不同的属性指定不同的角度。

 

圆周运动
       对一个圆周上运动的对象来说，其任意时刻在圆周上的位置可以使用半径与三角函数来表示。即P(x,y)=P(r1*cosα,r2*sinα)。如果r1=r2，则运动对象的轨迹为一个正圆，否则其轨迹为一个椭圆。

ball.x=canvas.width/2+Math.cos(angle)*radiusX;
ball.y=canvas.height/2+Math.sin(angle)*radiusY;

三角函数在动画中计算坐标，最常见的一定是使用余弦Math.cos来计算横坐标x,使用正弦Math.sin来计算纵坐标y。

 

勾股定理及距离计算

       距离的计算相当常见，我们只需要在坐标系中使用勾股定理，即A(x0,y0)到B(x1,y1)之间的距离为

var dx=B.x-A.x;
var dy=B.y-A.y;
var distance=Math.sqrt(dx*dx+dy*dy);
  • 大小: 5.1 KB
  • 大小: 3.2 KB
1
顶
0
踩
分享到：
| Canvas做游戏实践分享(一)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5 Canvas游戏开发实战

    9. **最佳实践**：分享HTML5 Canvas开发的最佳实践，包括代码组织、调试技巧以及如何确保兼容性。 10. **社区与资源**：可能还会介绍一些HTML5和Canvas的在线社区、工具、库和框架，帮助读者持续学习和提高。 总的...

    HTML5 Canvas核心技术图形、动画与游戏开发 PDF扫描版[71MB].rar

    在这个"HTML5 Canvas核心技术图形、动画与游戏开发"的PDF扫描版中，读者可以深入学习到Canvas的核心概念和实践技巧。 首先，Canvas的基本使用方法是通过JavaScript API来实现的。这个API提供了大量的绘图命令，如`...

    canvas简单实例详解

    二、获取Canvas上下文 要进行绘图，我们需要获取Canvas的2D渲染上下文。通过JavaScript的`getContext()`方法可以实现： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas....

    小程序canvasDemo

    在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在...以上就是关于"小程序canvasDemo"项目中涉及的主要技术点，通过学习和实践，你可以掌握微信小程序中canvas的使用技巧，进一步提升你的小程序开发能力。

    canvas+js写的绘图小程序

    首先，canvas是一个二维绘图表面，通过JavaScript可以对这个表面进行像素级的操作。创建canvas元素很简单，只需要在HTML中添加一个`&lt;canvas&gt;`标签，并指定其id以便后续JavaScript代码能够找到它： ```html &lt;canvas ...

    html5_canvas_塔防游戏

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。在这个“html5_canvas_...这样的实现不仅方便分享，也为开发者提供了一个学习和实践Canvas API的好平台。

    canvas截图.zip

    这个功能在很多场景下都非常有用，比如网页分享、游戏截图、在线编辑器保存草图等。 首先，我们要了解canvas的基本用法。canvas是一个矩形画布，通过JavaScript来控制它的内容。我们可以通过`&lt;canvas&gt;`标签在HTML中...

    HTML5 Canvas实战pdf下载

    9. **保存和导出**：Canvas上的内容可以导出为图像，或者使用toDataURL方法生成数据URL，方便分享和存储。 10. **实际应用**：书中实例可能涵盖游戏开发、图表绘制、数据可视化、地图应用等多个实际场景，帮助...

    html5 canvas核心技术

    HTML5 Canvas是Web开发中的一个关键技术，...通过学习和实践这些HTML5 Canvas的核心技术，开发者可以构建出交互性强、视觉效果丰富的Web应用程序，无论是数据可视化、游戏开发还是艺术创作，Canvas都能提供强大的支持。

    canvas画图测试

    这篇博客"canvas画图测试"可能涉及了使用Canvas进行图形绘制的基础知识和实践技巧。Canvas API的使用通常包括以下几个核心知识点： 1. **Canvas元素**：在HTML中，`&lt;canvas&gt;`标签定义了一个可编程的画布，通过...

    《HTML5 Canvas 开发详解（第2版）》PDF

    8. **性能优化**：分享关于Canvas性能的技巧，如批处理绘图操作、使用图像数据缓冲区和避免不必要的重绘。 9. **高级应用**：深入探讨更复杂的用例，如粒子系统、游戏开发、图表绘制和数据可视化。 10. **实践案例...

    android游戏源码分享

    2. 用户界面（UI）：Android游戏通常使用自定义View或SurfaceView来实现游戏画面，结合Canvas进行绘制。UI的设计也包括菜单、暂停、设置等交互元素。 3. 图形渲染：游戏可能使用OpenGL ES进行高性能的2D或3D图形...

    H5游戏源码分享-跑酷游戏熊出没

    二、“熊出没”跑酷游戏源码解析 “熊出没”跑酷游戏是一款典型的横版动作类游戏，玩家控制角色躲避障碍物，收集道具，挑战高分。其源码主要由以下几个部分组成： 1. HTML结构：HTML文件是游戏的基础框架，包含了...

    Unity制作的二维游戏

    《Unity制作的二维游戏开发详解》 Unity3D是一款强大的跨平台游戏开发工具，尤其在2D游戏领域，它的灵活性和高效性深受开发者喜爱。本篇文章将深入探讨使用Unity制作2D游戏的关键技术和流程，结合提供的文件名，...

    HTML5 Canvas学习笔记(6)拼图游戏（数字版）

    在“HTML5 Canvas学习笔记(6)拼图游戏（数字版）”这篇博文中，作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**： - Canvas是一个基于矢量图形的画布元素...

    html5 canvas 视频网站文字弹幕动画特效

    这个技术的引入极大地扩展了网页的交互性和动态性，尤其在创建复杂的动画效果和游戏场景时表现得尤为出色。在这个特定的场景中，我们讨论的是如何使用HTML5 Canvas实现视频网站的文字弹幕动画特效。 首先，我们要...

    H5游戏源码分享-跳得更高

    H5游戏源码的分享，对于学习者来说是一次宝贵的实践机会，可以了解游戏逻辑、动画效果、用户交互等核心元素的实现方法。 【标签】"游戏"：游戏是软件的一种类型，它可以提供娱乐、挑战或教育功能。H5游戏作为游戏的...

    H5自写的小游戏源码分享

    HTML5的游戏开发主要依赖于其内置的Canvas元素，这是一个二维绘图表面，允许开发者用JavaScript进行像素级别的图像操作。此外，Web Audio API使得在游戏中添加音效和背景音乐成为可能，而Web Storage和IndexedDB则...

    games:使用canvas api开发一堆HTML游戏以使其更好，并且仅使用HTMLCSSJS堆栈构建游戏

    - **绘图上下文**：Canvas API通过`&lt;canvas&gt;`元素提供了一个二维绘图上下文，通过JavaScript访问。 - **绘图方法**：如`fillRect()`, `strokeRect()`, `beginPath()`, `moveTo()`, `lineTo()`, `arc()`, `fill()`,...

    jquery html5微信分享游戏围住神经猫游戏源码下载

    【标题】：“jQuery HTML5微信分享游戏：围住神经猫游戏源码下载” 【描述】：这个资源提供了基于jQuery和HTML5技术开发的微信分享...对于希望从事移动互联网游戏开发的初学者来说，这是一个非常有价值的实践案例。

Magicbox
Global site tag (gtag.js) - Google Analytics