Javascrip+Canvas实现吸尘器模型

最新推荐文章于 2025-02-14 16:05:12 发布

Stark伟

最新推荐文章于 2025-02-14 16:05:12 发布

阅读量114

点赞数

本文介绍了一个使用HTML5 Canvas标签制作的小游戏——吸尘器。游戏中包含两类物体：吸尘器（红色小球）和垃圾（黑色小球）。垃圾随机分布在画布上，吸尘器跟随鼠标移动并吸走垃圾。

自从复旦学生网的前辈给我看了canvas标签用来做游戏的功能之后便一发不可收拾，做出了几个有意思的东西，这个吸尘器就是一个很简单的模型。

首先这个模型有两类物体：吸尘器（红色小球）、垃圾（黑色小球）。其中垃圾随机分布在画布中，吸尘器跟随鼠标移动。当吸尘器靠近垃圾的时候，垃圾会移动位置，逐渐靠近吸尘器，直到被吸入，从画布上删除。

首先定义基本属性如下：

<span style="font-size:18px;">var width = 1200;//画布宽
var height = 600;//画布高
var total = 1000;//小球总数</span>

整个模型是逐帧操作的最简单的MVC模型，每个小球无论红黑都是一个对象，其中黑球对象储存在数组中（是否有更佳的数据结构尚未研究），

var mainball={};
var allBalls = new Array();

对象里储存该小球的XY坐标，注意初始状态小球是随机分布在画布中的。

function Ball()//小球构造器函数
{
	this.x = width*Math.random();
	this.y = height*Math.random();
}

生成函数如下：

function create()//产生小球
{
	var cre ;
	for(cre=0;cre<total;cre++)
	{
		if(allBalls.length < total)
		{
			var ball = new Ball();
			allBalls.push(ball);
		}
	}
}

当鼠标移动的时候，获取鼠标在canvas上的坐标，在下一帧把红球坐标修改为鼠标坐标，即可实现红球跟随鼠标。

function movemainball(evt)
{
	if(!evt)
	{
		evt = window.event;
	}
	var xx=evt.clientX;
	var yy=evt.clientY;
	mainball.x = xx;
	mainball.y = yy;
}

同理，对于“吸入”效果，