VUE+Canvas 간단 한 오목 게임 의 전 과정 실현
포석 에 있어 오목 은 무 작위 운동 을 하 는 게임 에 비해 실현 하기 가 상대 적 으로 간단 하고 사고방식 도 뚜렷 하 다.모두 다음 과 같다.
(1)바둑판 그리 기;
(2)사건 을 감청 하여 흑백 바둑 알 그리 기;
(3)매번 탈락 한 후에 5 자가 연결 되 는 지 판단 하고 있 으 면 이긴다.
가장 복잡 한 것 은 아마도 오목 이 이 겼 다 고 판단 하 는 것 일 것 입 니 다.그러면 간단 한 것 부터 시작 해서 바둑판 을 그 려 보 세 요~
1.바둑판 그리 기
바둑판 은 매우 간단 하 다.우 리 는 15*15 의 바둑판 을 그 려 서 횡선 과 세로 선 이 서로 교차 된다.
drawCheckerboard() {
//
let _this = this;
_this.ctx.beginPath();
_this.ctx.fillStyle = "#fff";
_this.ctx.rect(0, 0, 450, 450);
_this.ctx.fill();
for (var i = 0; i < 15; i++) {
_this.ctx.beginPath();
_this.ctx.strokeStyle = "#D6D1D1";
_this.ctx.moveTo(15 + i * 30, 15); // 15 ， 30px;
_this.ctx.lineTo(15 + i * 30, 435);
_this.ctx.stroke();
_this.ctx.moveTo(15, 15 + i * 30); // 15 ， 30px;
_this.ctx.lineTo(435, 15 + i * 30);
_this.ctx.stroke();
_this.resultArr.push(new Array(15).fill(0));
}
}
2.감청 클릭 이벤트 흑백 바둑 알 그리 기
자,dom 을 가 져 오 는 김 에 click 사건 을 감청 하여 바둑 알 을 그립 니 다.
let container = document.getElementById("gobang");
container.addEventListener("click", _this.handleClick);
handleClick(event) {
let x = event.offsetX - 70;
let y = event.offsetY - 70;
if (x < 15 || x > 435 || y < 15 || y > 435) {
//
return;
}
this.drawChess(x, y);
if(this.winGame){
this.drawResult();
return;
}
this.whiteTurn = !this.whiteTurn;
this.drawText();
}
drawChess(x, y) {
let _this = this;
let xLine = Math.round((x - 15) / 30); // x
let yLine = Math.round((y - 15) / 30); // y
if(_this.resultArr[xLine][yLine] !== 0){
return;
}
let grd = _this.ctx.createRadialGradient(
xLine * 30 + 15,
yLine * 30 + 15,
4,
xLine * 30 + 15,
yLine * 30 + 15,
10
);
grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
_this.ctx.beginPath();
_this.ctx.fillStyle = grd;
_this.ctx.arc(
xLine * 30 + 15,
yLine * 30 + 15,
10,
0,
2 * Math.PI,
false
);
_this.ctx.fill();
_this.ctx.closePath();
_this.setResultArr(xLine, yLine);
_this.checkResult(xLine, yLine);
}
setResultArr(m, n) {
let _this = this;
_this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 1； 2
}
3.오목 의 승부 결 과 를 검사한다.
승 부 는 어떻게 판단 합 니까?육안 으로 보면 현재 낙 자 를 0,0 원점 으로 좌표 계 를 만 든 다음 에 0°,180°,45°와 135°네 개의 선 에 연속 5 자가 있 는 지 판단 하 는 것 이다.직접 옮 겨 다 니 는 것 보다 네 개의 온라인 데 이 터 를 꺼 내 연 결 된 5 개의 1 이나 2 문자 가 있 는 지 판단 하 는 것 이 좋다.
우리 가 떨 어 진 배열 의 좌 표 는[m,n]이 라 고 가정 하 자.
(1)횡선 결과 배열 문자열:this.resultArr[m].join(');
(2)세로 선의 결과 배열 문자열:
for(let i = 0; i<15; i++){
lineHorizontal.push(_this.resultArr[i][n]);
}
(4)45 도(왼쪽 아래 에서 오른쪽 위):j 는 0-15 에서 각각 this.resultArr[m 를 취한 다. + j][n -j]결과 unshift 는 임시 배열 의 머리 에 들 어가 this.resultArr[m 를 가 져 옵 니 다. - j][n + j]임시 배열 의 꼬리 부분 에 놓 고 결 과 를 이룬다.
물론 이 안 에는 배열 의 경 계 를 판단 해 야 한다.
결과 문자열 을 얻 은 후에 우 리 는'22222'나'11111'같은 문자열 이 존재 하 는 지 판단 하고 승 리 를 설명 합 니 다.
checkResult(m ,n){ // 5
let _this = this;
let checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
// [m,n]
let lineVertical = _this.resultArr[m].join('');
if(lineVertical.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let lineHorizontal = [];
for(let i = 0; i<15; i++){
lineHorizontal.push(_this.resultArr[i][n]);
}
lineHorizontal = lineHorizontal.join('');
if(lineHorizontal.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line135 = [];
for(let j = 0; j < 15; j++){
if(m - j >= 0 && n - j >= 0){ //
line135.unshift(_this.resultArr[m - j][n -j]);
}
if(j > 0 && m + j < 15 && n + j < 15){ //
line135.push(_this.resultArr[m + j][n + j]);
}
}
line135 = line135.join('');
if(line135.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line45 = [];
for(let j = 0; j < 15; j++){
if(m + j < 15 && n - j >= 0){ //
line45.unshift(_this.resultArr[m + j][n -j]);
}
if(j > 0 && m - j >=0 && n + j < 15){ //
line45.push(_this.resultArr[m - j][n + j]);
}
}
line45 = line45.join('');
if(line45.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
}
이로써 간단 한 흑백 바둑 게임 이 완성 되 었 습 니 다~~~~
낡은 규칙,원본 코드 붙 이기:
<template>
<div class="gobang">
<canvas id="gobang" width="800" height="600"></canvas>
</div>
</template>
<script>
const CheckStrWhite = "11111";
const CheckStrBlack = "22222";
export default {
name: "Gobang",
data() {
return {
ctx: null,
winGame: false,
whiteTurn: false, // ；true-
resultArr: [] //
};
},
mounted() {
let _this = this;
let container = document.getElementById("gobang");
container.addEventListener("click", _this.handleClick);
_this.ctx = container.getContext("2d");
_this.ctx.translate(70,70);
_this.drawCheckerboard();
},
computed:{
chessText(){
return this.whiteTurn ? ' ' : ' ';
}
},
methods: {
drawCheckerboard() {
//
let _this = this;
_this.ctx.beginPath();
_this.ctx.fillStyle = "#fff";
_this.ctx.rect(0, 0, 450, 450);
_this.ctx.fill();
for (var i = 0; i < 15; i++) {
_this.ctx.beginPath();
_this.ctx.strokeStyle = "#D6D1D1";
_this.ctx.moveTo(15 + i * 30, 15); // 15 ， 30px;
_this.ctx.lineTo(15 + i * 30, 435);
_this.ctx.stroke();
_this.ctx.moveTo(15, 15 + i * 30); // 15 ， 30px; 14*14；
_this.ctx.lineTo(435, 15 + i * 30);
_this.ctx.stroke();
_this.resultArr.push(new Array(15).fill(0));
}
_this.drawText();
},
drawChess(x, y) {
let _this = this;
let xLine = Math.round((x - 15) / 30); // x
let yLine = Math.round((y - 15) / 30); // y
if(_this.resultArr[xLine][yLine] !== 0){
return;
}
let grd = _this.ctx.createRadialGradient(
xLine * 30 + 15,
yLine * 30 + 15,
4,
xLine * 30 + 15,
yLine * 30 + 15,
10
);
grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
_this.ctx.beginPath();
_this.ctx.fillStyle = grd;
_this.ctx.arc(
xLine * 30 + 15,
yLine * 30 + 15,
10,
0,
2 * Math.PI,
false
);
_this.ctx.fill();
_this.ctx.closePath();
_this.setResultArr(xLine, yLine);
_this.checkResult(xLine, yLine);
},
setResultArr(m, n) {
let _this = this;
_this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 1； 2
},
checkResult(m ,n){ // 5
let _this = this;
let checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
// [m,n]
let lineVertical = _this.resultArr[m].join('');
if(lineVertical.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let lineHorizontal = [];
for(let i = 0; i<15; i++){
lineHorizontal.push(_this.resultArr[i][n]);
}
lineHorizontal = lineHorizontal.join('');
if(lineHorizontal.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line135 = [];
for(let j = 0; j < 15; j++){
if(m - j >= 0 && n - j >= 0){ //
line135.unshift(_this.resultArr[m - j][n -j]);
}
if(j > 0 && m + j < 15 && n + j < 15){ //
line135.push(_this.resultArr[m + j][n + j]);
}
}
line135 = line135.join('');
if(line135.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
let line45 = [];
for(let j = 0; j < 15; j++){
if(m + j < 15 && n - j >= 0){ //
line45.unshift(_this.resultArr[m + j][n -j]);
}
if(j > 0 && m - j >=0 && n + j < 15){ //
line45.push(_this.resultArr[m - j][n + j]);
}
}
line45 = line45.join('');
if(line45.indexOf(checkStr) > -1){
_this.winGame = true;
return;
}
},
drawText(){
let _this = this;
_this.ctx.clearRect(435 + 60, 0, 100, 70);
_this.ctx.fillStyle = "#fff";
_this.ctx.font="20px Arial";
_this.ctx.fillText(' ：' + _this.chessText, 435 + 70, 35);
},
drawResult(){
let _this = this;
_this.ctx.fillStyle = "#ff2424";
_this.ctx.font="20px Arial";
_this.ctx.fillText(_this.chessText+' ！', 435 + 70, 70);
},
handleClick(event) {
let x = event.offsetX - 70;
let y = event.offsetY - 70;
if (x < 15 || x > 435 || y < 15 || y > 435) {
//
return;
}
this.drawChess(x, y);
if(this.winGame){
this.drawResult();
return;
}
this.whiteTurn = !this.whiteTurn;
this.drawText();
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.gobang {
#gobang {
background: #2a4546;
}
}
</style>VUE+Canvas 가 간단 한 오목 게임 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 VUE+Canvas 오목 게임 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
