canvas黑白块游戏

 

今天手把手教大家写canvas黑白块小游戏

其实canvas基本代码都是在js中写的，我写这个是如果带入到网页中 最好用手机版查看。

首先是css和html

css:

html,body{
    		width: 100%;
    		height: 100%;
    		margin: 0;
    		padding: 0;
    		text-align: center;
    		overflow: hidden;
}

html:

<canvas id="mycan" width="" height=""></canvas>

然后开始写js

//获取宽高
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;

//canvas对象
var canvas = document.getElementById("mycan");

//获取绘制的环境
var ctx = canvas.getContext("2d");

//设置画布宽高
canvas.width = w;
canvas.height = h;

这时候在浏览器中查看，也是一片空白，然后我们在画布中加点自己想要的东西，

比如先画三条线

/*
	 			mw mh 和mx my是一样的 为什么要写2次，
				 主要是w，h 是宽高
				xy 是坐标 所以写2个 做个区分
				其实也没啥区别，只写一个也没关系，
				至于为什么加1，主要是为了让边框显示出来不至于0,0坐标的方块left和top 没有框
			 * */
			var mw = parseInt(w/4)+1;
			var mh = parseInt(h/5)+1;
			var mx = parseInt(w/4)+1;
			var my = parseInt(h/5)+1;
			
			function drawline(x,y){
				//beginPath主要是为了重新绘制的时候不至于被上一个所影响或者，不被下一个所消除
				ctx.beginPath();
				//设置颜色
				ctx.strokeStyle = 'black';
				//开始划线
				ctx.moveTo(x,y);
				ctx.lineTo(x,h-1);
				ctx.stroke();
			}
					
			function setline(){
				for(var i = 1;i <= 3; i++){
					drawline(mw*i,1);
				}
			}
			
			setline();

然后看看效果：

线画好了，然后开始画框

//new一个数组
var list = new Array();
for(var i = 0; i < 6; i++) {
    //内部添加数组长度为2   1个是用于存储 x 值 另一个用于存储 颜色的true和flase 
    var arr = new Array(2);
    //应该随机一个值  0-3
    var n = Math.floor(Math.random() * 4);
    console.log("n",n);
    arr[0] = n;
    arr[1] = true;
    //刚开始的时候 如果y值 大于屏幕的高度，就将y值放到最上面去至于为什么是6 
    //因为高度是分成5分的  所以必须加1 才能保证方块沾满屏幕
    if(my*i > h){
	    list[i] = new kuang(my*i -  my*6, arr);
    }else{
	    list[i] = new kuang(my*i, arr);
    }
}
					
function drawmian(){
	/*
	 没什么用这个canvas.width = canvas.width;
	其实每次画布都是清空重画，每次设置画布的宽高的时候画布自动清空，所以先清空画布，在从新绘制 
	 * */
	canvas.width = canvas.width;
	//当然如果全是白色也太单调了，我选择加上一张背景图片
			
	//创建 img对象
	var Img=document.createElement('img');
	//设置img的路径
				                        Img.src='http://images.17173.com/2010/newgame/2010/07/08/allan07081500_11s.jpg';
//将图片绘制到画布上去
	ctx.drawImage(Img,0,0,w,h);
				
	//因为画布清空了一次，所以需要将划线写到内部
	setline();
	for(var i = 0; i < list.length ;i++){
	    ctx.beginPath();
		//设置颜色
		if(list[i].arr[1]){
			//绿色	不要吐槽我的审美，我毫无审美观，随便写的颜色
			ctx.fillStyle = "rgba(155, 187, 89, 1)"; 
		}else{
			//灰色
			ctx.fillStyle = "rgba(192,192,192, 1)"; 
		}
		//画方块然后填充自己设置的颜色
	ctx.fillRect(mw*list[i].arr[0]