HTML文件
<!DOCTYPE HTML> <html lang="zh-en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="css/idnex.css" /> <script src="js/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <canvas id="cav" width="500px" height="500px"></canvas> <div>雷的數量:<span class="mine" style="margin-right:50px;"></span>非雷區域:<span class="empty"></span></div> <div>鼠標右鍵只能標記地雷,否則遊戲將結束</div> <div class="retry">重新開始</div> </body> </html>
JS文件
var Img0 = new Image();
Img0.src = './img/0.png';
var Img1 = new Image();
Img1.src = './img/1.png';
var Img2 = new Image();
Img2.src = './img/2.png';
var Img3 = new Image();
Img3.src = './img/3.png';
var Img4 = new Image();
Img4.src = './img/4.png';
var Img5 = new Image();
Img5.src = './img/5.png';
var Img6 = new Image();
Img6.src = './img/6.png';
var Img7 = new Image();
Img7.src = './img/7.png';
var Img8 = new Image();
Img8.src = './img/8.png';
var Img9 = new Image();
Img9.src = './img/9.png';
var ImgMine = new Image();
ImgMine.src = './img/mine.png';
function Mine() {
this.canvas = $('#cav').get(0).getContext('2d');
this.step = 20;
this.width = 500;
this.height = 500;
this.mimeNumber = 25;
//繪製圖形
this.draw = function () {
this.drawGridline();
}
//繪製網格線
this.drawGridline = function () {
this.canvas.fillRect(0,0,this.width,this.height);
this.canvas.strokeStyle = this.lineStyle;
for(var i=0;i<=this.stepW;i++) {
this.canvas.beginPath();
this.canvas.moveTo(0,i * this.step);
this.canvas.lineTo(this.width,i* this.step);
this.canvas.stroke();
}
for(var i=0;i<=this.stepH;i++) {
this.canvas.beginPath();
this.canvas.moveTo(i * this.step,0);
this.canvas.lineTo(i* this.step,this.width);
this.canvas.stroke();
}
}
//顯示結果
this.showMine = function () {
for(var i=0;i<this.stepW;i++) {
for(var j=0;j<this.stepH;j++) {
this.canvas.drawImage(this.ChangeToImg(this.data[i][j].num),i*this.step+this.step/4,j*this.step+this.step/4,this.step/2,this.step/2);
}
}
}
//生成數據
this.createData = function () {
for(var i=0;i<this.stepW;i++) {
this.data[i] = new Array();
for(var j=0;j<this.stepH;j++) {
this.data[i][j] = {
num : 0,
open : 'false',
};
}
}
//生成地雷區域數據
for(var i=0;i<this.mineCount;i++) {
var x = 1 + Math.floor(Math.random() * (this.stepW - 2));
var y = 1 + Math.floor(Math.random() * (this.stepH - 2));
if(this.data[x][y].num == 0) {
this.data[x][y].num = this.fillString;
}
}
//生成非地雷區域數據
for(var i=0;i<this.stepW;i++) {
for(var j=0;j<this.stepH;j++) {
if(this.data[i][j].num != this.fillString) {
var count=0;
if(i-1 >= 0 && j-1 >=0 && this.data[(i-1)][(j-1)].num == this.fillString) count +=1;
if(j-1 >=0 && this.data[i][(j-1)].num == this.fillString) count +=1;
if(i+1 < this.stepW && j-1 >=0 && this.data[(i+1)][(j-1)].num == this.fillString) count +=1;
if(i-1 >= 0 && this.data[(i-1)][j].num == this.fillString) count +=1;
if(this.data[i][j].num == this.fillString) count +=1;
if(i+1 < this.stepW && this.data[(i+1)][j].num == this.fillString) count +=1;
if(i-1 >= 0 && j+1 < this.stepH && this.data[(i-1)][(j+1)].num == this.fillString) count +=1;
if(j+1 < this.stepH && this.data[i][(j+1)].num == this.fillString) count +=1;
if(i+1 < this.stepW && j+1 < this.stepH && this.data[(i+1)][(j+1)].num == this.fillString) count +=1;
this.data[i][j].num = count;
}
}
}
}
//顯示四周爲0的方格
this.showEmpty = function (i,j) {
if(this.data[i][j].num == 0) {
var min_I = i-1 >= 0 ? i-1 : 0;
var min_J = j-1 >= 0 ? j-1 : 0;
var max_I = i+1 < this.stepW ? i + 1 : this.stepW;
var max_J = j+1 < this.stepH ? j + 1 : this.stepH;
for(var x=min_I;x< max_I;x++) {
for(var y=min_J;y<max_J;y++) {
if(this.data[x][y].open == 'true' ) continue;
this.canvas.drawImage(this.ChangeToImg(this.data[x][y].num),x*this.step+this.step/4,y*this.step+this.step/4,this.step/2,this.step/2);
this.data[x][y].open = 'true';
this.hideNumber -= 1;
$('.empty').html(this.hideNumber);
this.nextLevel();
this.showEmpty(x,y);
}
}
}
}
//獲取鼠標點擊方格位置
this.mouseClick = function (i,j,key) {
if(key == 'left') {
if(i >= 0 && j >= 0 && i < this.stepW && j < this.stepH) {
if(this.data[i][j].num == this.fillString) {
this.showMine();
} else {
if(this.data[i][j].open == 'true' ) return;
if(this.data[i][j].num == 0) {
this.showEmpty(i,j);
}else {
this.canvas.drawImage(this.ChangeToImg(this.data[i][j].num),i*this.step+this.step/4,j*this.step+this.step/4,this.step/2,this.step/2);
this.data[i][j].open = 'true';
this.hideNumber -= 1;
$('.empty').html(this.hideNumber);
this.nextLevel();
}
}
}
} else {
if(i >= 0 && j >= 0 && i < this.stepW && j < this.stepH) {
if(this.data[i][j].num != this.fillString) {
this.showMine();
} else {
if(this.data[i][j].open == 'true' ) return;
this.canvas.drawImage(this.ChangeToImg(this.data[i][j].num),i*this.step+this.step/4,j*this.step+this.step/4,this.step/2,this.step/2);
this.data[i][j].open = 'true';
}
}
}
}
//將數值轉換爲圖片
this.ChangeToImg = function (number) {
var ImgPic = new Image();
switch (number) {
case 0:
ImgPic = Img0;
break;
case 1:
ImgPic = Img1;
break;
case 2:
ImgPic = Img2;
break;
case 3:
ImgPic = Img3;
break;
case 4:
ImgPic = Img4;
break;
case 5:
ImgPic = Img5;
break;
case 6:
ImgPic = Img6;
break;
case 7:
ImgPic = Img7;
break;
case 8:
ImgPic = Img8;
break;
case 9:
ImgPic = Img9;
break;
case 'mine' :
ImgPic = ImgMine;
break;
}
return ImgPic;
}
this.nextLevel = function () {
if(this.hideNumber > 0) return;
if(this.step >= 20) {
this.step = Math.floor(this.step * 0.9);
}
this.mimeNumber = Math.ceil(this.mimeNumber * 1.2);
this.init();
return;
}
this.init = function () {
//清空畫布
this.canvas.clearRect(0,0,this.width,this.height);
//初始化配置信息
this.width = Math.floor(this.width / this.step) * this.step;
this.height = Math.floor(this.height / this.step) * this.step;
this.stepW = Math.floor(this.width / this.step);
this.stepH = Math.floor(this.height / this.step);
this.data = [];
this.open = [];
this.fillString = 'mine';
this.canvas.fillStyle = '#fff';
this.canvas.lineStyle = '#333';//背景網格顏色
this.mineCount = Math.floor(Math.random() * 5) + this.mimeNumber;//初始地雷數量
this.mineCount = this.mineCount/(this.stepW * this.stepH) >= 0.5 ? Math.floor(this.stepW * this.stepH/2) : this.mineCount;
this.hideNumber = this.stepW * this.stepH - this.mineCount;//非地雷的數量
this.draw();
this.createData();
$('.mine').html(this.mineCount);
$('.empty').html(this.hideNumber);
var that = this;
$('#cav').mousedown(function(e){
var x = (e.pageX || e.clientX + e.document.body.scrollLeft) - $('#cav').offset().left;
var y = (e.pageY || e.clientY + e.document.body.scrollTop) - $('#cav').offset().top;
x = Math.floor(x / that.step);
y = Math.floor(y / that.step);
if((e.button == 0) || (e.button == 1)){
that.mouseClick(x,y,'left');
}else if(e.button == 2) {
e.preventDefault();
that.mouseClick(x,y,'right');
}
});
$('#cav').on("contextmenu",function(e){
return false;
});
}
}
window.onload = function () {
var mine = new Mine();
mine.init();
$('.retry').click(function(){
location.reload();
});
}CSS文件
@charset "utf-8";
html,body,div,canvas,span {
padding:0;
margin: 0;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.retry {
font-size: 30px;
color: #00f;
cursor: pointer;
}IMG文件
