web课堂（11/21）---变色方块选择游戏
常自怡
/*
Function :ColorGame-ex5
Author :Michelle
Build_Date:2017-10-30
Version :1.0
*/
//1. 公共变量声明块........................................................
var canvas=document.getElementById("canvas"),
ctx=canvas.getContext("2d");
const BIGRECT_WIDTH=300,
BIGRECT_HEIGHT=300,
MARGIN=5;
var rect={x:0,y:0,w:0,h:0};
var rect_right={x:0,y:0,w:0,h:0,step:50,color:"#fff"};
var style={color:"#000",
font_size:38,
align:"center",
valign:"middle",
font_family:"Arial"};
var text={text:"",x:0,y:0};
var iCanvasWidth=canvas.width,
iCanvasHeight=canvas.height;
var bFlag=false,iBlocks=2;
var bigRect={x:iCanvasWidth/2-BIGRECT_WIDTH/2,
y:iCanvasHeight/2-BIGRECT_HEIGHT/2,
w:BIGRECT_WIDTH,
h:BIGRECT_HEIGHT};
//2. 函数定义块...........................................................
function drawText(text,style,mode){
ctx.save();
ctx.textAlign = style.align;
ctx.textBaseline = style.valign;
ctx.font=style.font_size+"px "+style.font_family;
if(!mode){
ctx.strokeStyle = style.color;
ctx.strokeText(text.text, text.x, text.y);
}
else{
ctx.fillStyle = style.color;
ctx.fillText(text.text, text.x, text.y);
}
ctx.restore();
}
function drawRect(rect,style,mode){
ctx.beginPath();
ctx.rect(rect.x, rect.y, rect.w, rect.h);
ctx.save();
if(!mode){
ctx.strokeStyle = style.color;
ctx.stroke();
}
else{
ctx.fillStyle = style.color;
ctx.fill();
}
ctx.restore();
ctx.closePath();
}
function drawRects(nums){
// 清除屏幕
ctx.clearRect(0, 0, iCanvasWidth,iCanvasHeight);
// 绘制外部矩形
style.color="#000";
drawRect(bigRect,style,0);
// 绘制小矩形
iNumsInLine=Math.sqrt(nums);
rectWidth=(BIGRECT_WIDTH-(iNumsInLine+1)*MARGIN)/iNumsInLine;
rect.w=rectWidth;
rect.h=rect.w;
// hsl颜色模式
// h表示色相（0～360），s表示饱和度（0～100%），l表示亮度（0～100%）
h=parseInt(Math.random()*360);
s=100;
l=50;
iRight=parseInt(Math.random()*nums)+1;
hsl="hsl(" + h + "," + s+ "%," + l + "%)";
style.color=hsl;
// 答案方块色的递减值设置
rect_right.step-=nums;
// 游戏出口，当饱和度递减值为<=0，即和别的颜色相同了，就退出
if(rect_right.step<=0) {
ctx.clearRect(0, 0, iCanvasWidth, iCanvasHeight);
style.color="#000";
drawText(text,style,1);
return;
}
// hsl模式，饱和度s值递减
s-=rect_right.step;
// 生成新的不同于别的方块的颜色
rect_right.color="hsl(" + h + "," + s+ "%," + l + "%)";
// 生成答案色块的行列值
iRowNo=0;
iRowNo=parseInt(iRight/iNumsInLine);
if(iRight%iNumsInLine==0) iRowNo=parseInt(iRight/iNumsInLine)-1;
iColNo=iRight-iRowNo*iNumsInLine;
// 生成答案色块的位置和大小
rect_right.x=(iColNo-1)*rect.w+iColNo*MARGIN+bigRect.x;
rect_right.y=iRowNo*rect.h+iRowNo*MARGIN+bigRect.y;
rect_right.w=rect.w;
rect_right.h=rect.h;
// 2、循环法画小矩形
for(i=0;i<iNumsInLine;i++){
// 设置每一行方块的y值
rect.y=i*rect.w+bigRect.y+(i+1)*MARGIN;
for(j=0;j<iNumsInLine;j++){
// 设置一行中每一列方块x值
// 起始方块位置＋前面的方块宽度＋前面所有的margin值
rect.x=bigRect.x+j*rect.w+(j+1)*MARGIN;
// 设置答案方块的颜色值
if((i*iNumsInLine+j+1)==iRight){
bFlag=true;
style.color=rect_right.color;
}
// 绘制颜色方块
drawRect(rect,style,1);
// 将颜色值改回到其他方块颜色值
if(bFlag){
style.color=hsl;
bFlag=false;
}
}
}
}
//3. 事件注册块...........................................................
function onCanvasClick(event){
// console.log(event.clientX,event.clientY);
if((event.clientX>=rect_right.x &&
event.clientX<=rect_right.x+rect_right.w)
&&
(event.clientY>=rect_right.y &&
event.clientY<=rect_right.y+rect_right.h)){
iBlocks+=1;
drawRects(iBlocks*iBlocks);
}
}
canvas.οnclick=onCanvasClick;
// canvas.addEventListener("click",onCanvasClick);
//4. 初始化块............................................................
text.text="GAME OVER!";
text.x=iCanvasWidth/2;
text.y=iCanvasHeight/2;
drawRects(iBlocks*iBlocks);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css" media="screen">
canvas{
border:1px solid green;
}
</style>
<link rel="stylesheet" href="">
</head>
<body>
<canvas id="canvas" width="600" height="400" >
Your Browser does not support Canvas, please upgrade
</canvas>
<script type="text/javascript" src="example1030.js"></script>
</body>
</html>
类似资料：