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

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

function test1(){
				//在画布上绘制外部图片资源
				var ctx = document.getElementById(‘ballCanvas‘).getContext(‘2d‘)
				var image =new Image()
				image.src = ‘football.jpg‘

				ctx.drawImage(image,0,0,360,300)
			}
			//test1()

			function test2(){
				/*
				梯度(gradient):HTML5中的对象类型,包括线性梯度和径向梯度。如createLinearGradient,
				绘制梯度需要颜色组
				http://www.w3school.com.cn/tags/canvas_createlineargradient.asp
				*/
				var ctx = document.getElementById(‘ballCanvas‘).getContext(‘2d‘)
				var gradient = ctx.createLinearGradient(10,10,200,10)
				var hue = [‘#FFF‘,‘#F00‘,‘#000‘]

				gradient.addColorStop(0,hue[0])
				gradient.addColorStop(0.5,hue[1])
				gradient.addColorStop(1,hue[2])

				ctx.fillStyle = gradient
				ctx.fillRect(10,10,200,100)
			}
			//test2()

2.实现思路
整个游戏中涉及的对象,包括运动的球(Ball),墙壁(Box),速度(Speed)。
同时,球必须在墙壁内部进行运动,碰到墙壁则会反弹。

当到球和墙壁碰撞的时候,运行方向会发生改变,这个改变对速度的绝对值没有变化,而是改变速度的正负。在实现过程中,我把方向的概念合并到

了速度对象中,主要是代码实现上的方便。

3.代码(片段)

			// Ball
			function Ball(){
				var opts,
						ctx,
						ballX,
						ballY

				function drawBall(){
					var ballOpts = opts.ballOpts
					ballX = ballOpts.x
					ballY = ballOpts.y

					ctx.lineWidth = ballOpts.lineWidth
					ctx.strokeStyle = ballOpts.strokeStyle

					ctx.beginPath()
					ctx.arc(ballX,ballY,ballOpts.radius,0,2*Math.PI,false)
					ctx.closePath()
					ctx.stroke()
				}

				return {

					init : function(options){
						opts = $.extend(options,{
							canvas : null,
							ballOpts : {
								x : 100,
								y : 100,
								radius : 50,
								lineWidth : 1,
								strokeStyle : ‘#000‘
							}
						})

						var canvas =	opts.canvas

						if(canvas==null){
							alert(‘canvas is null.‘)
							return
						}

						ctx = canvas.getContext(‘2d‘)
						drawBall()

						return this
					},			

					/*
						beginMove
							@return:void
							@speed:{offsetX:0,offsetY:0}
							@box:Box instance
					*/
					beginMove : function(speed,box){
						box.refresh()

						var boxSize = box.getSize(),
								ballOpts = opts.ballOpts,
								offsetX = speed.offsetX,
								offsetY = speed.offsetY,
								directionChanged = false

						// 判断球ball是在盒子box内边框(上,右,下,左)内
						var boxInnerBoundry = {	top:boxSize.y+boxSize.lineWidth,
																		right:boxSize.x+boxSize.lineWidth+boxSize.width,
																		bottom:boxSize.y+boxSize.lineWidth+boxSize.height,
																		left:boxSize.x+boxSize.lineWidth }

						var top = (ballY-ballOpts.radius-ballOpts.lineWidth)+offsetY,
								right = (ballX+ballOpts.radius+ballOpts.lineWidth)+offsetX,
								bottom = (ballY+ballOpts.radius+ballOpts.lineWidth)+offsetY,
								left = (ballX-ballOpts.radius-ballOpts.lineWidth)+offsetX

						if(top<boxInnerBoundry.top){
							ballY += top-boxInnerBoundry.top
							offsetY = -offsetY

							directionChanged = true
						}

						if(right>boxInnerBoundry.right){
							ballX += right-boxInnerBoundry.right
							offsetX = -offsetX

							directionChanged = true
						}

						if(bottom>boxInnerBoundry.bottom){
							ballY += offsetY - (bottom-boxInnerBoundry.bottom)
							offsetY = -offsetY

							directionChanged = true
						}						

						if(left<boxInnerBoundry.left){
							ballX	+= left-boxInnerBoundry.left
							offsetX = -offsetX

							directionChanged = true
						}

						ballX += offsetX
						ballY += offsetY

						/*
						必须变更当前速度speed,因为在定时器中传入的速度speed是个常量,
						而实际运动中速度(用加号和减号来表示的方向是会改变的)
						*/
						if(directionChanged){
							speed.changeSpeed(offsetX,offsetY)
						}

						//alert(ballOpts.x+offsetX+‘-‘+ballOpts.y+offsetY)

						ctx.beginPath()
						ctx.arc(ballX,ballY,ballOpts.radius,0,2*Math.PI,false)
						ctx.closePath()
						ctx.stroke()
					}

				}
			}

4.优化和完善
(1)主要还是在球和墙壁的判断上,通过大量的IF判断,实现得比较恶心
(2)速度实现为了类似的单例方式,不符合重用
(3)风格可以美化,加入外部图片资源等,比如美化成足球和球场
(4)引入加速度

时间: 2024-10-18 00:39:00

【整理】HTML5游戏开发学习笔记(2)- 弹跳球的相关文章

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

<HTML5游戏开发>,该书出版于2011年,似乎有些老,可对于我这样没有开发过游戏的人来说,却比较有吸引力,选择自己感兴趣的方向来学习html5,css3,相信会事半功倍.不过值得注意的是,该书的游戏是些小的游戏,内容相对比较基础,而且html5标准已经正式发布,可能会和书中所描述有少许出处.当然了,书中的小游戏还是比较不错的,适合我这样的前端开发不咋地的来练手,学习方式是在以自己的思路实现之后,再来看书中的实现思路,因为每个人有自己的开发习惯. 1.预备知识在做第一个骰子游戏开发前,必须知

【整理】HTML5游戏开发学习笔记(3)- 抛物线运动

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.r

cocos2dx游戏开发学习笔记3-lua面向对象分析

在lua中,可以通过元表来实现类.对象.继承等.与元表相关的方法有setmetatable().__index.getmetatable().__newindex. 具体什么是元表在这里就不细说了,网上很多介绍,这里主要讲与cocos2dx相关联的部分. 在lua-binding库中extern.lua里,有如下方法: --Create an class. function class(classname, super) local superType = type(super) local c

cocos2dx游戏开发学习笔记1-基本概念

这里主要讲构建整个游戏需要的基本元素,很大部分都摘自cocos2dx官网. 1.Director 导演 导演,顾名思义,就是对整个游戏进行整体控制的. "Director"是一个共享的(单元素集)对象,负责不同场景之间的控制.导演知道当前哪个场景处于活动状态,允许你改变场景,或替换当前的场景,或推出一个新场景.当你往场景堆中推出一个新场景时,"Director"会暂停当前场景,但会记住这个场景.之后场景堆中最顶层的场景跳离时,该场景又会继续活跃.此外"Di

cocos2dx游戏开发学习笔记2-从helloworld开始

一.新建工程 具体安装和新建工程的方法在cocos2dx目录下的README.md文件中已经有详细说明,这里只做简单介绍. 1.上官网下载cocos2dx-3.0的源码,http://www.cocos2d-x.org/ 2.安装python2.7 3.运行setup.py安装 4.执行cocos new helloworld -p helloworld -l cpp,生成新工程 二.新建工程中包含的东西 -Classes AppDelegate.cpp      -----游戏真正开始执行的地

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

本文为阅读http://blog.csdn.net/xiaominghimi/article/details/6089594的笔记. 在Android游戏中充当主要角色的,除了控制类就是显示类.而在Android中涉及到显示的是View类,及继承自它的SurfaceView类和SurfaceView的其他子类等. 这里先只说View和SurfaceView.SurfaceView的直接子类有GLSurfaceView和VideoView,可以看出GL和视频播放以及CAmera摄像头一般均使用Su

[游戏开发-学习笔记]菜鸟慢慢飞(一)

"菜鸟"就是我自己. 分享一下我从零开始学习游戏开发的过程,心得什么的.本篇先扯个开头,说说个人一些乱七八糟的想法. 从0开始 其实,只要有心,不管干哪一行,都不能算从零开始.总会有办法了解到行业的信息.我之前是干船舶电气的,一路过来,最大的感觉是:不怕你找不到资料,就怕你没时间.我要做的是分清楚自己想学什么,怎么样去提高自己,然后沿着自己路线"慢慢"朝前飞.比如:知乎就是个很好的地方,我最早接触游戏开发,是在这里.决定学这个,也是在知乎喝了鸡汤. 游戏开发 对我来

[游戏开发-学习笔记]菜鸟慢慢飞(二)-迷宫

简介:练手Demo,<走出迷宫>,文章主要说说如何创建迷宫. 学习Unity3D有一段时间了,自己想了一个项目来练手手.然后就有了这篇. 一.固定的格数,开局后随机生成. 说明:这个迷宫10*10,开始后随机生成,四周留下一个空做出口. 先说如何实现: 主要准备了三个Prefab:横墙,竖墙,柱子,墙高度是10,宽度是10,厚度是1,柱子高度是10.宽度和厚度都是10. 手动按照10*10排列(参考下图) 脚本 #region //初始化游戏 #endregion using System.C

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

游戏开发中,主相机应该是最重要的GameObject之一,毕竟游戏呈现给玩家,就是通过它. 相机的使用,在不同的游戏中,有很大的不同.这里总结一下自己学到的一些相关知识. 固定位置-游戏过程中相机的Transform属性不改变. 调整好位置后就不要动了,一般使用正交相机,即Camera-Projection选择Orthographic.Unity Manual-Camera 适用:2D游戏.比如飞机大战,消消乐. 游戏开始后,相机追踪某一物体,然后固定不动. 游戏开始后,我们才能确定追踪物体的位