用js canvas实现的一个消灭星星的小游戏,目前没有设定关卡
调用只要用document.Starlight(dom,option)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
(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);