调用只要用document.Starlight(dom,option)
(
function (doc, win) {
var options =
{
lights: {}
};
var canvas;
var length = 400
;
var itemLength = 40
;
var lights =
{};
var star =
{};
var stepCount = 0
;
var char = ['★','☆'
];
doc.Create =
function (option) {
options = option =
extend(options, option);
// 这个方法必须放到某个dom的环境中去运行
//所以这里的this表示的是某个特定的dom,而不是document
//这里就是方法所创建的canvas
var context = canvas.getContext('2d'
);
context.clearRect(0, 0
, length, length);
function DrawLine(a, b, c, d,e) {
if (!
e) {
e = '#808080'
;
}
context.strokeStyle =
e;
context.beginPath();
context.moveTo(a, b);
context.lineTo(c, d);
context.stroke();
}
for (
var i = 0; i < length/itemLength; i++) {
var y = (i+1) *
itemLength;
DrawLine(0, y, length, y);
//画横线
DrawLine(y, 0
, y, length);
if (!
lights[i]) {
lights[i] =
{};
}
for (
var j = 0; j < length / itemLength; j++
) {
if (lights[i][j]) {
lights[i][j] = extend(lights[i][j], { beginLeft: i * itemLength, endLeft: itemLength * (i + 1), beginTop: itemLength * j, endTop: itemLength * (j + 1
) });
} else {
lights[i][j] = { beginLeft: i * itemLength, endLeft: itemLength * (i + 1), beginTop: itemLength * j, endTop: itemLength * (j + 1),isStar:
false };
}
if (lights[i][j]['isStar'
]) {
var charIndex = parseInt(Math.random() * 2
);
context.font = '50px Verdana'
;
context.fillText(char[charIndex], itemLength * i, itemLength * (j+1
));
}
}
}
canvas.onclick =
click();
};
doc.StarLight =
function (dom, option) {
canvas = doc.createElement('canvas'
);
if (!(canvas.getContext && canvas.getContext('2d'
))) {
throw new Error('浏览器不支持Canvas'
);
}
dom =
O(dom);
canvas.width = 400
;
canvas.height = 400
;
canvas.style.border = '1px solid red'
;
dom.appendChild(canvas);
doc.Create.call(dom, canvas);
};
function O(id) {
var a = ''
;
if (
typeof id == 'object'
) {
return id;
}
var reg =
new RegExp('#[a-z]+.?', 'ig'
);
if (reg.test(id)) {
return doc.getElementById(id.substring(1
,id.length));
}
var nameReg =
new RegExp('![a-z]+.?', 'ig'
)
if (nameReg.test(id)) {
return doc.getElementsByName(id.substring(1
, id.length));
}
var classReg =
new RegExp('@[a-z]+.?', 'ig'
);
if (classReg.test(id)) {
return doc.getElementsByClassName(id.substring(1
, id.length));
}
return doc.getElementsByTagName(id);
}
function extend() {
var result =
{};
if (arguments.length<=1
) {
return arguments[0
];
}
for (
var i = 0; i < arguments.length; i++
) {
for (
var o
in arguments[i]) {
result[o] =
arguments[i][o];
}
}
return result;
}
function click() {
return function () {
stepCount++
;
var left =event.x-
canvas.offsetLeft;
var top = event.y -
canvas.offsetTop;
var lc =parseInt( left /
itemLength);
var tc = parseInt(top /
itemLength);
//alert(doc.Format('您点的是第{0}行，第{1}列', tc + 1, lc + 1));
change(lc, tc);
change(lc + 1
, tc);
change(lc - 1
, tc);
change(lc, tc + 1
);
change(lc, tc - 1
);
doc.Create.call(canvas, options);
var flag =
true;
for (
var ls
in lights) {
for (
var l
in lights[ls]) {
var currentItem =
lights[ls][l];
if (currentItem['isStar'
]) {
flag =
false;
}
}
}
if (flag) {
alert(doc.Format('You win,use step {0}'
, stepCount));
stepCount = 0
;
}
};
}
function change(lc, tc) {
//tc++;
if (lights[lc]&&
lights[lc][tc]) {
if (lights[lc][tc]['isStar'
]) {
lights[lc][tc]['isStar'] =
false;
} else {
lights[lc][tc]['isStar'] =
true;
}
}
}
doc.Format =
function(str,args) {
var length =
arguments.length;
if (length<=1
) {
return arguments[0
];
}
var result = arguments[0
];
for (
var i = 1; i < length; i++
) {
result = result.replace('{'+(i-1)+'}'
,arguments[i])
}
return result;
}
})(document, window);
View Code
转载于:https://www.cnblogs.com/hmds/p/3233220.html
相关资源：开心消消乐-原生JS canvas实现版
