canvas 接粉丝游戏研究（v0.2）

最新推荐文章于 2025-12-16 22:54:59 发布

原创最新推荐文章于 2025-12-16 22:54:59 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#游戏 #webkit #prototype #CSS

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的HTML5游戏开发过程，包括HTML布局、CSS样式、JavaScript编程等关键技术。着重讲解了游戏主循环、碰撞检测、积分系统的实现方法。

新鲜出炉的v0.2版本…………

1，html代码，增加了积分器的div~~为了布局，在外面套了个壳·~就是#gameBox

<div id="gameBox">
	<canvas id="canvas" width="350" height="430"></canvas>
	<div id="score">0</div>
</div>

2，css部分，没什么好说的，大概的放了个布局。

body{margin:0;}
#gameBox{margin:20px auto;width:600px;background:#e0e0e0;position:relative;padding:20px;}
canvas{background:#0FC;border:4px solid #333;-webkit-border-radius:10px;-moz-border-radius:10px;display:block;}
#score{background:#ccc;font:42px Georgia, serif;width:120px;height:60px;position:absolute;right:60px;top:40px;text-align:center;}

3，JS部分的代码。

v0.2计划实现canvas整个擦除重绘。并重新梳理的v0.1的代码~将碰撞检测，一部分绘制原件的功能从主函数中提取出一部分，使代码可读性更高，并且增加了一些必要的注释。

其中，主函数部分如下，主要是创建绘图环境，设置了一些公共参数及函数调用。

/*主函数*/

//创建画布
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

document.title = document.getElementById("gameBox").offsetLeft;
//头像的属性
var headImg = new Image(); 
headImg.src = 'http://tp1.sinaimg.cn/1409181652/50/1290411958/0'; 

var headW = 50;				//头像宽度
var headH = 50;				//头像高度
var headX = 40;				//头像横坐标
var headY = 0;				//头像纵坐标
var headStatus = true;		//是否到达底部的布尔变量


//筐的属性
var boxW = 120;				//筐的宽度
var boxH = 30;				//筐的高度
//筐的横坐标
var boxX = (canvas.width - boxW)/2 ;
var boxY = canvas.height - boxH;	//筐的纵坐标

ctx.fillRect(boxY, boxY, boxW, boxH);


//鼠标事件
canvas.onmousemove = function(event){
	msX = event.clientX - document.getElementById("gameBox").offsetLeft;
	msY = event.clientY;
	ctx.clearRect( boxX, boxY, boxX + boxW, boxY + boxH); 
	drawBox();
};
	
setInterval(animateCanvas, 60);

接下来的代码是每次画布擦除重绘的函数~~这次每次都是擦掉整个画布并重绘掉落的头像及在当前鼠标坐标下的“筐”。并在每次执行函数后调用碰撞检测函数~~并通过碰撞函数返回的布尔变量执行碰撞后的函数。这里为碰撞后积分器数值 +20。

function animateCanvas(){
	ctx.clearRect( 0, 0, canvas.width, canvas.height); 
	//绘制头像
	headY = headY + 5;  //每次头像向下移动8像素
	ctx.drawImage (headImg, headX, headY);
	
	//在筐的当前位置重绘筐
	drawBox();
	//碰撞检测
	var isCollision = collision();
	if (isCollision == true){
		collSuccess();
	}		
}

下面这个是用来做碰撞检测的。。逻辑与v0.1基本相同。只是生成一个函数，最后返回布尔变量判断是否碰撞成功。

//判断碰撞
function collision(){
	if(headStatus){
		if( headY + headH < canvas.height - boxH){
			return false;
		}
		else {
			if (headX >= boxX && headX + 50 <= boxX + 150){
				headStatus = false;
				return true;
			}
			else {
				headStatus = false;
				return false;	
			}
		}
	}
		
}

下面两个小小的function

碰撞成功后的执行函数（计数器）

//碰撞后的函数调用
function collSuccess(){
	var score = document.getElementById("score");
	score.innerHTML = parseInt(score.innerHTML) + 20;
}

画筐的函数

//重绘筐
function drawBox(){
	boxX = msX - canvas.offsetLeft - boxW/2;
	ctx.fillRect(boxX, boxY, boxW, boxY);
}

v0.2遇到问题及日后改进~~~~

1，我本来以为擦除画布一次就够了呢~结果擦除了一次大的。。鼠标移动时候又小范围擦除一次，郁闷。难道思路又错了？据说传说中的双缓冲区可以解决问题。。。但是双缓冲区神马玩意~~~

2，碰撞函数的具体规则。。今天没空了~~~判断重心~~啊啊啊

3，多头像随机 x 值掉落~~~这个会补充~~或许做成prototype~~~如我这种初学者~还没入门的。看prototype好高级啊~~~~表被嘲笑~~~

4，倒计时~~1分钟。。。。

5，设计啊设计啊。。。。懒得开ps了~~勾了个筐的路径，ps还死了，没保存，奔泪~~~·~

啊~~睡觉了~~~~~~~~~

啊~~还是晚上自己写代码的时光最欢乐了~~~~~