1.预备知识
(1)Canvas旋转的实现过程

			window.onload = function(){

				var ctx = document.getElementById('canvas1').getContext('2d')

				//旋转
ctx.save()
ctx.translate(200,200)//把(200,200)点作为临时的(0,0)点
ctx.rotate(30*Math.PI/180)//顺时针旋转30度所对应的弧度
ctx.fillRect(0,0,100,150)
ctx.restore() }

(2)抛物线运动中的重力加速度的模拟实现模型

			/*
抛物线运动
这个版本做了修改,为了减少一次角度和弧度之间的转换计算(通过Math.atan2可以直接算出弧度),
构造参数中的角度改成了弧度
deleted:
angle = angle, //初始角度
radians = angle*Math.PI/180, //初始弧度 object ParabolicMotion
@velocity:初始速度
@radians:初始弧度
@gravity:初始加速度{x:0,y:2}
*/
function ParabolicMotion(velocity,radians,gravity){
var velocity = velocity,
radians = radians,
gravity = gravity var offsetX = velocity*Math.cos(radians),
offsetY = -velocity*Math.sin(radians) function next(offset,gravity){
var offset1 = offset
var offset2 = offset+gravity return {offset:offset2,dv:(offset1+offset2)*.5}
} return { /*
获取运动轨迹到下一个时间点,x,y轴所偏移的距离
*/
moveNext : function(){
var offsetXD = next(offsetX,gravity.x)
var offsetYD = next(offsetY,gravity.y) offsetX = offsetXD.offset
offsetY = offsetYD.offset //console.log(offsetX+','+offsetY) return {x:offsetXD.dv,y:offsetYD.dv}
} }
}

2.实现思路
涉及的对象,包括球(Ball),弹弓(Slingshot),抛物线运动(ParabolicMotion)。
操作过程是,鼠标键按下拖拽小球,和弹弓的作用点成一定的角度,鼠标键按起后,小球做抛物线运动

3.主要代码

			/*弹弓*/
function Slingshot(){ var opts,
ctx,
crtBall,
ballSelected = false function refresh(){
ctx.clearRect(0,0,opts.width,opts.height) drawSling()
crtBall.draw()
} function drawSling(){
var point = opts.actionPoint ctx.beginPath()
ctx.moveTo(point.x,point.y)
ctx.lineTo(point.x,opts.height)
ctx.closePath()
ctx.stroke() if(crtBall!=null&&ballSelected){
//绘制连接球和弹弓的"橡皮筋"
ctx.beginPath()
ctx.moveTo(point.x,point.y)
ctx.lineTo(crtBall.x,crtBall.y)
ctx.closePath()
ctx.stroke()
}
} function isBallSelected(offsetX,offsetY){
var point = opts.actionPoint
var a = Math.abs(point.x-offsetX)
var b = Math.abs(point.y-offsetY)
//var c = Math.sqrt(a*a+b*b) return (a*a+b*b)<=crtBall.radius*crtBall.radius
} // 添加拉弹弓事件
function initEvents(){
var canvas = opts.canvas
/*
addEventListener函数的第3个参数,
false表示内层元素事件先触发,ture则表示外层的事件先触发 alert(e.offsetX+','+e.offsetY)
必须使用offsetX,offsetX是相对于canvas画布的距离(但firefox不支持) 事件参数e没有考虑浏览器兼容问题
*/
canvas.addEventListener('mousedown',function(e){
// 判断球是否被选中
ballSelected = isBallSelected(e.offsetX,e.offsetY) if(ballSelected){
crtBall.locate(e.offsetX,e.offsetY)
refresh()
}
},false) canvas.addEventListener('mousemove',function(e){
if(ballSelected){
crtBall.locate(e.offsetX,e.offsetY)
refresh()
}
},false) canvas.addEventListener('mouseup',function(e){
if(ballSelected){
ballSelected = false crtBall.locate(e.offsetX,e.offsetY)
refresh() //发射炮弹
fire(function(x,y){
//TODO 判断是否打中目标 })
}
},false)
} function fire(onCompleted){
// 获取当前的炮弹发射速度和弧度
var velocity = ($.square(opts.actionPoint.y-crtBall.y)+$.square(opts.actionPoint.x-crtBall.x))/100
var radians = -Math.atan2(opts.actionPoint.y-crtBall.y,opts.actionPoint.x-crtBall.x)//30*Math.PI/180
var gravity = {x:0,y:2} var parabolicMotion = new ParabolicMotion(velocity,radians,gravity)
var completed = false var timer = setInterval(function(){
// 在当前抛物线轨迹下,获取炮弹下一次单位时间内x,y轴需要偏移的单位长度
var offset = parabolicMotion.moveNext() crtBall.move(offset.x,offset.y)
refresh() // 检查是否超出画布边界
completed = (crtBall.x>=opts.width||crtBall.y>=opts.height) if(completed){
clearInterval(timer) if(typeof onCompleted=='function'){
onCompleted(crtBall.x,crtBall.y)
}
}
},100)
} return { init : function(options){
opts = $.extend(options,{
canvas : null,//画布
width : 1000,//画布长
height : 300,//画布高
actionPoint : {x:150,y:200}/*作用力点坐标*/
}) ctx = opts.canvas.getContext('2d')
drawSling() // 添加拉弹弓事件
initEvents() return this
}, loadBall : function(ball){
var point = opts.actionPoint crtBall = ball.init({ctx:ctx,x:point.x,y:point.y})
.draw() return this
} }
}
			// app
window.onload = function(){ var canvas = document.getElementById('canvas1')
var ball = new Ball(10)
var slingshot = new Slingshot().init({canvas:canvas}) // 装载一个炮弹
slingshot.loadBall(ball)
}

4.优化和完善
(1)需实现球打中目标物体后,目标物体进行旋转
(2)可以实现同时有多个小球发射,就像游戏里发射子弹的效果

【整理】HTML5游戏开发学习笔记(3)- 抛物线运动的更多相关文章

  1. 【整理】HTML5游戏开发学习笔记(1)- 骰子游戏

    <HTML5游戏开发>,该书出版于2011年,似乎有些老,可对于我这样没有开发过游戏的人来说,却比较有吸引力,选择自己感兴趣的方向来学习html5,css3,相信会事半功倍.不过值得注意的 ...

  2. 【整理】HTML5游戏开发学习笔记(5)- 猜谜游戏

    距上次学习笔记已有一个多月过去了,期间由于新项目赶进度,以致该学习计划给打断,十分惭愧.书本中的第六章的例子相对比较简单.所以很快就完成. 1.预备知识html5中video标签的熟悉 2.实现思路对 ...

  3. 【整理】HTML5游戏开发学习笔记(2)- 弹跳球

    1.预备知识(1)在画布上绘制外部图片资源(2)梯度(gradient):HTML5中的对象类型,包括线性梯度和径向梯度.如createLinearGradient,绘制梯度需要颜色组http://w ...

  4. 【整理】HTML5游戏开发学习笔记(4)- 记忆力游戏

    1.预备知识(1)Canvas绘制多边形(2)Canvas绘制文字 2.实现思路涉及的对象  (1)场景Scene  场景代表了画布上的一块区域,场景里的每个物体都是场景里的一个元素,其绘制统一由场景 ...

  5. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  6. [游戏开发-学习笔记]菜鸟慢慢飞(四)-Camera

    游戏开发中,主相机应该是最重要的GameObject之一,毕竟游戏呈现给玩家,就是通过它. 相机的使用,在不同的游戏中,有很大的不同.这里总结一下自己学到的一些相关知识. 固定位置-游戏过程中相机的T ...

  7. cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境

    打开用户文件夹下.bash_profile文件,配置环境 vim ~/.bash_profile //按键i,进行插入编辑(假设输错d进行删除一行) 环境配置过程例如以下: 1.首先配置下androi ...

  8. [Android游戏开发学习笔记]View和SurfaceView

    本文为阅读http://blog.csdn.net/xiaominghimi/article/details/6089594的笔记. 在Android游戏中充当主要角色的,除了控制类就是显示类.而在A ...

  9. Photon + Unity3D 线上游戏开发 学习笔记(一)

    大家好. 我也是学习Photon + unity3D 的新手 有什么说错的地方大家见谅哈. 我的开发环境是 unity3D 4.1.3  ,   Visual Studio 是2010 版本号的  p ...

随机推荐

  1. Qt QpushButton 实现长按下功能

    做项目需要一个按钮具备长时间按下的功能,才发现Qt原始的按钮是没有这个功能,不过Qt的原生按钮是存在按下和释放信号的,有了这两个信号,再来实现按钮长时间被按下,这就简单了,看下动画演示. 录成GIF效 ...

  2. p4语言编程环境安装

    p4语言主要是用来模拟交换机的交互,是新一代的SDN解决方案,可以让数据转发平面也具有可编程能力,让软件能够真正定义网络和网络设备.详细介绍 主要流程是:安装vmware.安装Ubuntu.下载Git ...

  3. 11.11 Daily Scrum

      Today's tasks  Tomorrow's tasks 丁辛 餐厅列表事件处理 餐厅列表事件处理             李承晗             实现指定地点搜索 整合已经完成的部 ...

  4. PHP后台支付的开发:微信支付和支付宝支付

    关于支付的流程之类的就不做解释,大家可以自行搜索! 微信支付 项目前提:本人用的是tp框架,PHP语言下载到微信平台提供的微信支付接口文件,放在了tp第三方类库vendor,命名为WxpayAPI, ...

  5. k8s 实验过程中遇到的两个小问题 端口 和 批量删除Error的pods

    1. 自己kubeadm搭建的一套k8s系统 然后进行做实验 发现了几个问题 jenkins 创建 salves的时候总是有问题.  提示注册不上 然后 我修改了下yaml文件 暴露端口 50000 ...

  6. tp3.2.3运用phpexcel将excel文件导入mysql数据库

    1,下载PHPExcel 2,配置将下载好的PHPExcel文件与PHPExcel.php 放到thinkphp 根目录 include/Library/Org/Util/下面 3,同时将PHPExc ...

  7. windows日志查看-非法关机判断方法

    日志文件,它记录着Windows系统及其各种服务运行的每个细节,对增强Windows的稳定和安全性,起着非常重要的作用.但许多用户不注意对它保护,一些“不速之客”很轻易就将日志文件清空,给系统带来严重 ...

  8. TClientDataSet[9]: 计算字段和 State

    TClientDataSet 中计算字段有两种: Calculated(计算字段).InternalCalc(内部计算字段). 两者区别是: Calculated 在每次需要时都要重新计算; Inte ...

  9. bzoj 1012: [JSOI2008]最大数maxnumber (线段树)

    1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 13081  Solved: 5654[Subm ...

  10. PL/SQL如何设置当前格局确保每次打开都给关闭前一样

    打开plsql  --> windows-->save layout 即可