可乐加糖

最近公司开始折腾web game，正好可以接触和使用html5了，开始记录自己的Html5学习曲线。看了N多的帖子，发现自己早就拉后别人一大截了，T_T ~~~~~~~~~~~~

今天写的是一个简单的 Html5 游戏，也是参考了李松峰前辈的博客写的，有兴趣的同学可以移步李松峰前辈的博客

好了，话不多说，今天做的是一个非常简单的功能。在画板上把图片画上去。

代码如下：

(function(){
	var x=y=0;
	var xDirection = 1;
	var yDirection = 1;
	var image = new Image();
	image.src = "jsplatformer1-smiley.jpg";
	var canvas = document.getElementById("canvas");
	var context2D = canvas.getContext('2d');
	//画图函数
	var drawImg = function(){
		clearCanvas();
		context2D.drawImage(image,x,y);
		//边界值判断
		x += xDirection;
		y += yDirection;
		console.log("xpoint is:"+x+",ypoint is:"+y);
		//判断画板边界值
		if(y>canvas.height-150){
			yDirection += -1;
		}else if(x>canvas.width-150){
			xDirection += -1;
		}else if(y<0){
			yDirection += 1
		}else if(x<0){
			xDirection += 1;
		}
	}
	//清理画布
	var clearCanvas = function(){
		context2D.clearRect(0,0,canvas.width,canvas.height);
	}
	//初始函数值
	var init = function(){
		window.setInterval(drawImg,1000/800);
	}
	init();
})();

其中，context2D.clearRect(0,0,canvas.width,canvas.height);  这个方法用于清空画板，众所周知，在 Html5 中是没有动画这个概念的，动画都是基于原始的帧在界面上的模拟。这个方法在动画的应用中是随处可见。也是画板的常用方法之一了。赶快更新代码来试试吧。