js+canvas簡単な雷除去のミニゲームを実現します。
地雷除去のミニゲームはwindowsが持っているミニゲームとして多くの人に愛されています。今日はh5のcanvasを使ってjsを結合してこのミニゲームを実現してみます。
ゲームを書くには、まずゲームのルールを明確にして、掃海ゲームはマウスで操作したゲームです。ブロックをクリックして、ブロックの数字から雷の位置を推測して、すべての雷をマークして、すべてのブロックを開けます。つまり、ゲームが成功しました。
具体的なゲーム操作は以下の通りです。
1.隠しブロックをマウスの左ボタンで開けます。開いたら雷でなければ、4つの方向に広がります。
2.マウスの右ボタンで開いていないブロックをクリックして雷をマークし、2回目はキャンセルマークをクリックします。
3.開いている四角いボックスをマウスの右ボタンでクリックして、現在の四角い四角いマークが正しいかどうかを確認することができます。
コードの作成を開始します。
まずHTMLの構造を書きます。ここでは簡単にcanvasタグを使います。他の内容の拡張は後からできます。
上記のような写真はクリック時にクリックした位置で周囲に拡散し、その後上下の方向で拡散し続け、左右の方向は本方向以外にも上下方向に拡散し、数字に遭遇した時に停止します。
もちろんこれはゲームの初歩的な実現です。実はこのゲームは難易度の設定を加えたり、雷をイメージしたり、雷が鳴った時に音を増やすなど、もちろん難しくはありません。興味があれば、このゲームを最適化してみてください。
このブログが皆さんの役に立つことを願っています。私の不足を指摘してください。
醜爆のゲーム画面を添付します。
Jsゲームの素晴らしい文章について、テーマを調べてください。『JavaScript経典ゲームは止まらない』。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
ゲームを書くには、まずゲームのルールを明確にして、掃海ゲームはマウスで操作したゲームです。ブロックをクリックして、ブロックの数字から雷の位置を推測して、すべての雷をマークして、すべてのブロックを開けます。つまり、ゲームが成功しました。
具体的なゲーム操作は以下の通りです。
1.隠しブロックをマウスの左ボタンで開けます。開いたら雷でなければ、4つの方向に広がります。
2.マウスの右ボタンで開いていないブロックをクリックして雷をマークし、2回目はキャンセルマークをクリックします。
3.開いている四角いボックスをマウスの右ボタンでクリックして、現在の四角い四角いマークが正しいかどうかを確認することができます。
コードの作成を開始します。
まずHTMLの構造を書きます。ここでは簡単にcanvasタグを使います。他の内容の拡張は後からできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="play">
<canvas id="canvas"></canvas>
</div>
<script src="js/game.js"></script>
</body>
</html>
// canvas
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 480;
canvas.height = 480;
//
let R = 3; //
let L = 15; //
let P = 16; //
let row = 30; //
let col = 30; //
let N = 50; //
var wholeArr = drawInitialize(row, col, N, R, L, P);
var gameArr = wholeArr[0] //
var bombArr = wholeArr[1] //
var statusArr = zoneInitialize(row, col); // 0 1 2
var signArr = []; //
//
function drawInitialize(row, col, n, R, L, P) {
let arr = initialize(row, col, n);
for (let r = 0; r < row; r++) {
for (let c = 0; c < col; c++) {
drawRct(r * P, c * P, L, R, 'rgb(102,102,102)', context);// ，
}
}
return arr;
}
//
function initialize(row, col, n) {
let gameArr = zoneInitialize(row, col); //
let bomb = bombProduce(n, gameArr, row, col);
gameArr = signArrNum(bomb[0], bomb[1], n, row, col);
return [gameArr, bomb[1]];
}
//
function zoneInitialize(row, col) { // row col
let cArr = new Array(col);
let rArr = new Array(row);
cArr = cArr.fill(0); // 0
for (let i = 0; i < row; i++)
rArr[i] = [...cArr];
return rArr;
}
//
function bombProduce(n, arr, row, col) { // n
let count = 0;
let bombArr = [];
while (true) {
if (count === n)
break;
let r = Math.floor(Math.random() * row);
let c = Math.floor(Math.random() * col);
if (arr[c][r] === 0) {
arr[c][r] = -1;
bombArr[count] = strProduce(c, r);
count++;
}
}
return [arr, bombArr];
}
//
function signArrNum(gArr, bArr, n, row, col) {
for (let i = 0; i < n; i++) { //
let r = parseInt(analyseStr(bArr[i]).row);
let c = parseInt(analyseStr(bArr[i]).col);
if (r > 0 && gArr[c][r - 1] != -1)// ，
gArr[c][r - 1]++;
if (r < row - 1 && gArr[c][r + 1] !== -1)
gArr[c][r + 1]++;
if (c > 0 && gArr[c - 1][r] !== -1)
gArr[c - 1][r]++;
if (c < col - 1 && gArr[c + 1][r] !== -1)
gArr[c + 1][r]++;
if (r > 0 && c > 0 && gArr[c - 1][r - 1] != -1)
gArr[c - 1][r - 1]++;
if (r < row - 1 && c < col - 1 && gArr[c + 1][r + 1] != -1)
gArr[c + 1][r + 1]++;
if (r > 0 && c < col - 1 && gArr[c + 1][r - 1] != -1)
gArr[c + 1][r - 1]++;
if (r < row - 1 && c > 0 && gArr[c - 1][r + 1] != -1)
gArr[c - 1][r + 1]++;
}
return gArr;
}
//
function strProduce(r, c) {
return `row:${c}|col:${r}`;
}
//
function analyseStr(str) {
str = str.split('|');
str[0] = str[0].split(':');
str[1] = str[1].split(':');
return { row: str[0][1], col: str[1][1] };
}
//
function drawRct(x, y, l, r, color, container = context) {//x,y ，l ，r ，color
container.beginPath();
container.moveTo(x + r, y);
container.lineTo(x + l - r, y);
container.arcTo(x + l, y, x + l, y + r, r);
container.lineTo(x + l, y + l - r);
container.arcTo(x + l, y + l, x + l - r, y + l, r);
container.lineTo(x + r, y + l);
container.arcTo(x, y + l, x, y + l - r, r);
container.lineTo(x, y + r);
container.arcTo(x, y, x + r, y, r);
container.fillStyle = color;
container.closePath();
container.fill();
container.stroke();
}
//
function drawNum(x, y, l, r, alPha, color = 'rgb(0,0,0)', container = context) {// ，alPha
if (alPha === 0)
alPha = "";
container.beginPath();
container.fillStyle = color;
container.textAlign = 'center';
container.textBaseline = 'middle';
container.font = '8Px Adobe Ming Std';
container.fillText(alPha, x + l / 2, y + l / 2);
container.closePath();
}
//
function drawEnd(row, col, R, L, P) {
for (let r = 0; r < row; r++) {
for (let c = 0; c < col; c++) {//
let num = gameArr[r][c];
let color;
if (num === -1)
color = 'rgb(255,0,0)';
else
color = 'rgb(255,255,255)';
drawRct(r * P, c * P, L, R, color, context);
drawNum(r * P, c * P, L, R, num);
}
}
}上記のような写真はクリック時にクリックした位置で周囲に拡散し、その後上下の方向で拡散し続け、左右の方向は本方向以外にも上下方向に拡散し、数字に遭遇した時に停止します。
canvas.onclick = function(e) {
e = e || window.e;
let x = e.clientX - canvas.offsetLeft;
let y = e.clientY - canvas.offsetTop; // canvas
let posX = Math.floor(x / P);
let posY = Math.floor(y / P);//
if (gameArr[posX][posY] === -1 && statusArr[posX][posY] !== 2) { //
alert('error');
drawEnd(row, col, R, L, P);
} else if (statusArr[posX][posY] === 0) {
this.style.cursor = "auto";
statusArr[posX][posY] = 1;//
drawRct(posX * P, posY * P, L, R, 'rgb(255,255,255)', context);
drawNum(posX * P, posY * P, L, R, gameArr[posX][posY]);
outNum(gameArr, posY, posX, row, col, 'middle');
}
gameComplete();// ，
}
// ， ，
canvas.oncontextmenu = function(e) {
e = e || window.e;
let x = e.clientX - canvas.offsetLeft;
let y = e.clientY - canvas.offsetTop; // canvas
let posX = Math.floor(x / P);
let posY = Math.floor(y / P);
let str = strProduce(posX, posY);
if (gameArr[posX][posY] > 0 && statusArr[posX][posY] === 1) //
checkBomb(posX, posY);
if (statusArr[posX][posY] === 0) { //
drawRct(posX * P, posY * P, L, L / 2, 'rgb(255,0,0)');
statusArr[posX][posY] = 2;
signArr[signArr.length] = str;
} else if (statusArr[posX][posY] === 2) { //
drawRct(posX * P, posY * P, L, R, 'rgb(102,102,102)');
statusArr[posX][posY] = 0;
signArr = signArr.filter(item => {//
if (item === str)
return false;
return true;
})
}
gameComplete();
return false; //
}
//
function outNum(arr, x, y, row, col, status) {//arr ，x,y ，row,col ，status
if (status === 'middle') {
outNumHandle(arr, x - 1, y, row, col, 'left');
outNumHandle(arr, x + 1, y, row, col, 'right');
outNumHandle(arr, x, y - 1, row, col, 'top');
outNumHandle(arr, x, y + 1, row, col, 'down');
} else if (status === 'left') {
outNumHandle(arr, x - 1, y, row, col, 'left');
outNumHandle(arr, x, y - 1, row, col, 'top');
outNumHandle(arr, x, y + 1, row, col, 'down');
} else if (status === 'right') {
outNumHandle(arr, x + 1, y, row, col, 'right');
outNumHandle(arr, x, y - 1, row, col, 'top');
outNumHandle(arr, x, y + 1, row, col, 'down');
} else if (status === 'top') {
outNumHandle(arr, x, y - 1, row, col, 'top');
} else {
outNumHandle(arr, x, y + 1, row, col, 'down');
}
}
//
function outNumHandle(arr, x, y, row, col, status) {
if (x < 0 || x > row - 1 || y < 0 || y > col - 1) //
return;
if (arr[y][x] !== 0) {
if (arr[y][x] !== -1) {
drawRct(y * P, x * P, L, R, 'rgb(255,255,255)', context);
drawNum(y * P, x * P, L, R, arr[y][x]);
statusArr[y][x] = 1;
}
return;
}
drawRct(y * P, x * P, L, R, 'rgb(255,255,255)', context);
drawNum(y * P, x * P, L, R, arr[y][x]);
statusArr[y][x] = 1;
outNum(arr, x, y, row, col, status);
}
//
function checkBomb(r, c) {
//1.
//2. count
//3. count 0， return； count 0，
//4. ， ， ， return ， ，
let bombNum = gameArr[r][c];
let count = 0;
if (r > 0 && statusArr[r - 1][c] === 2) {
if (!(bombArr.includes(strProduce(r - 1, c)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (r < row - 1 && statusArr[r + 1][c] === 2) {
if (!(bombArr.includes(strProduce(r + 1, c)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (c > 0 && statusArr[r][c - 1] === 2) {
if (!(bombArr.includes(strProduce(r, c - 1)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (c < col - 1 && statusArr[r][c + 1] === 2) {
if (!(bombArr.includes(strProduce(r, c + 1)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (r > 0 && c > 0 && statusArr[r - 1][c - 1] === 2) {
if (!(bombArr.includes(strProduce(r - 1, c - 1)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (r < row - 1 && c < col - 1 && statusArr[r + 1][c + 1] === 2) {
if (!(bombArr.includes(strProduce(r + 1, c + 1)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (r > 0 && c < col - 1 && statusArr[r - 1][c + 1] === 2) {
if (!(bombArr.includes(strProduce(r - 1, c + 1)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (r < row - 1 && c > 0 && statusArr[r + 1][c - 1] === 2) {
if (!(bombArr.includes(strProduce(r + 1, c - 1)))) {
alert('error');
drawEnd(row, col, R, L, P);
return;
}
count++;
}
if (count !== bombNum)
return;
else {
outNotBomb(c, r);
}
}
//
function outNotBomb(c, r) {
if (r > 0 && statusArr[r - 1][c] === 0) {
drawRct((r - 1) * P, c * P, L, R, 'rgb(255,255,255)', context);
drawNum((r - 1) * P, c * P, L, R, gameArr[r - 1][c]);
statusArr[r - 1][c] = 1;
}
if (r < row - 1 && statusArr[r + 1][c] === 0) {
drawRct((r + 1) * P, c * P, L, R, 'rgb(255,255,255)', context);
drawNum((r + 1) * P, c * P, L, R, gameArr[r + 1][c]);
statusArr[r + 1][c] = 1;
}
if (c > 0 && statusArr[r][c - 1] === 0) {
drawRct(r * P, (c - 1) * P, L, R, 'rgb(255,255,255)', context);
drawNum(r * P, (c - 1) * P, L, R, gameArr[r][c - 1]);
statusArr[r][c - 1] = 1;
}
if (c < col - 1 && statusArr[r][c + 1] === 0) {
drawRct(r * P, (c + 1) * P, L, R, 'rgb(255,255,255)', context);
drawNum(r * P, (c + 1) * P, L, R, gameArr[r][c + 1]);
statusArr[r][c + 1] = 1;
}
if (r > 0 && c > 0 && statusArr[r - 1][c - 1] === 0) {
drawRct((r - 1) * P, (c - 1) * P, L, R, 'rgb(255,255,255)', context);
drawNum((r - 1) * P, (c - 1) * P, L, R, gameArr[r - 1][c - 1]);
statusArr[r - 1][c - 1] = 1;
}
if (r < row - 1 && c < col - 1 && statusArr[r + 1][c + 1] === 0) {
drawRct((r + 1) * P, (c + 1) * P, L, R, 'rgb(255,255,255)', context);
drawNum((r + 1) * P, (c + 1) * P, L, R, gameArr[r + 1][c + 1]);
statusArr[r + 1][c + 1] = 1;
}
if (r > 0 && c < col - 1 && statusArr[r - 1][c + 1] === 0) {
drawRct((r - 1) * P, (c + 1) * P, L, R, 'rgb(255,255,255)', context);
drawNum((r - 1) * P, (c + 1) * P, L, R, gameArr[r - 1][c + 1]);
statusArr[r - 1][c + 1] = 1;
}
if (r < row - 1 && c > 0 && statusArr[r + 1][c - 1] === 0) {
drawRct((r + 1) * P, (c - 1) * P, L, R, 'rgb(255,255,255)', context);
drawNum((r + 1) * P, (c - 1) * P, L, R, gameArr[r + 1][c - 1]);
statusArr[r + 1][c - 1] = 1;
}
}
//
function gameComplete() {
var count = new Set(signArr).size;
if (count != bombArr.length) //
{
return false;
}
for (let i of signArr) { //
if (!(bombArr.includes(i))) {
return false;
}
}
for (let i of statusArr) {
if (i.includes(0)) {
return false;
}
}
alert(' ');
canvas.onclick = null;
canvas.onmouseover = null;
canvas.oncontextmenu = null;
}
drawRct(0, 0, 800, 0, 'rgb(0,0,0)', context);もちろんこれはゲームの初歩的な実現です。実はこのゲームは難易度の設定を加えたり、雷をイメージしたり、雷が鳴った時に音を増やすなど、もちろん難しくはありません。興味があれば、このゲームを最適化してみてください。
このブログが皆さんの役に立つことを願っています。私の不足を指摘してください。
醜爆のゲーム画面を添付します。
Jsゲームの素晴らしい文章について、テーマを調べてください。『JavaScript経典ゲームは止まらない』。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。