當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端之五子棋网页版小游戏

發布時間：2023/12/15 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端之五子棋网页版小游戏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

五子棋小游戲

這個五子棋小游戲，沒有寫成人機模式。

但大家可以嘗試下自己飾演兩個角色的五子棋，嘻嘻嘻

效果圖片

效果

代碼

index.html

<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>簡易五子棋游戲</title><link rel="stylesheet" href="css/main.css"><script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <h1>簡易版五子棋小游戲</h1> <h6>說明：體驗下自己飾演兩個角色的五子棋吧，嘻嘻。</h6><canvas id="canvas" width="450" height="450"></canvas><div class="mol-main"><div class="mol-header"><h2>五子棋小游戲</h2></div><div class="mol-success white">白棋獲勝</div><div class="mol-success black">黑棋獲勝</div><br><div><button class="btn">關閉</button></div></div> </body> <script type="text/javascript" src="js/main.js"></script> <script>$('.btn').click(function () {$('.mol-main').css('display','none');}); </script> </html>

main.css

body{margin:0;background: #ccc; } h1{text-align: center; }h6{text-align: center;color: darkslategray; }/*------------棋盤-------------------------*/ #canvas{display: block;margin: 20px auto;background:#fff; } .mol-main{width:180px;height: 160px;margin: 0 auto;padding: 10px;background:#eee;border-radius: 10px;opacity: 0.9;position: absolute;top:25%;left: 40%;display: none; } .mol-header h2{text-align: left;font-weight: bold; } .mol-success{color: firebrick;font-weight: bold; }.white{display: none; } .black{display: none; }.btn{cursor: pointer;width: 70px;height: 30px;border-radius: 5px;text-align: center;font-weight: bold;;background: cadetblue;color: #000; } .btn:hover{background: lightseagreen;color: #fff; }

main,js

/* *1、繪制棋盤*1.1繪制棋盤中直線 * 2、繪制棋子*2.1繪制棋子* 2.2實現交互,點擊下棋* 2.3黑白子棋交替操作* 2.4棋子落在棋盤交叉點上* 2.5設置已下棋處不得再進行操作 * 3、游戲勝負判斷*當前所下的棋子參與到勝負判斷中，此時下棋的人要么贏，要么不贏（輸/繼續進行）* 此時所下棋子的位置應當作為判斷點* 一條線上左右顏色連續累加超過5，那么這個顏色就獲勝*/ //----------------------------------------------------//獲取到html的canvas標簽 var canvas=document.querySelector('#canvas'); //獲取繪制環境 var ctx =canvas.getContext('2d');//創建棋子顏色數組 var chessColor=['#000','#fff'];//棋盤數組 var maparr=[];//判斷哪方贏 var mode=[[1,0],//水平方向[0,1],//垂直方向[1,1],//右下左上[1,-1]//右上左下 ];//---------------------------------- //將棋盤上所有交叉點創建全為0的數組 //如果當數組為1時，說明已經有棋子了 for(var i=0;i<14;i++){maparr[i]=[];for(var j=0;j<14;j++){maparr[i][j]=0;} }//---設置游戲進行的步數-----為了實現黑白棋子交替進行操作-- var step=0; /*----------繪制棋盤中直線-------------- *描述繪制路徑 * 開始繪制 */ function init() {//----------繪制15條垂直和水平直線---------------------for(var i=1;i<15;i++){//----繪制15條垂直直線------//在格子（30，30）處開始畫線ctx.moveTo(30*i,30);//線畫到（30，420）的位置ctx.lineTo(30*i,420);//----繪制15條水平直線-----//在格子（30，30）處開始畫線ctx.moveTo(30,30*i);//線畫到（420,30）的位置ctx.lineTo(420,30*i);}//-----開始繪制線--------------ctx.stroke(); }init();//--------繪制棋子--------------------- function drawChess(x,y,color){//修改填充顏色ctx.fillStyle=color;//畫圓---圓心坐標軸（x,y）--半徑15--起始點角度0--終點角度為2派---ctx.beginPath();ctx.arc(x,y,15,0,Math.PI*2,false);//ctx.fill()填充ctx.fill();ctx.stroke(); }//-----下棋----并使棋子都在起哦安交叉線上----------------------------- canvas.addEventListener('click',function(e){// console.log('點擊棋盤');//--------------------------------------//e.offsetX和offsetY可以獲取到點擊時的坐標// console.log(e.offsetX,e.offsetY);//--------實現所有棋子都在棋盤的交叉線上---------//math.floor()向下取整//+15---點下去的位置向右偏移15-----//----即使得在一個小正方形象限內位置任意點棋子都在那個交叉點出var dx =Math.floor((e.offsetX+15)/30)*30;var dy =Math.floor((e.offsetY+15)/30)*30;//點擊落下棋子if(dx == 0 || dy == 0 || dx == 450 || dy == 450){return false;}//避免已有棋子的點再下一次if(maparr[dx/30-1][dy/30-1]==0){drawChess(dx,dy,chessColor[step%2]);maparr[dx/30-1][dy/30-1]=chessColor[step%2];checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[0]);checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[1]);checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[2]);checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[3]);step++;} });//-----------判斷哪方贏------要么黑贏要么白贏-------------------- // var mode=[ // [1,0],//水平方向 // [0,1],//垂直方向 // [1,1],//右下左上 // [1,-1]//右上左下 // ];//------根據mode數組檢測不用方向------------- function checkSuccess(x,y,color,mode) {// console.log(x,y,color);var count=0;for(var i=1;i<5;i++){if(maparr[x+i]*mode[0]){if(maparr[x+i*mode[0]][y+i*mode[1]]==color){count++;}else{break;}}}for(var i=1;i<5;i++){if(maparr[x-i]){if(maparr[x-i*mode[0]][y-i*mode[1]]==color){count++;}else{break;}}}// console.log('水平方向有',count+1,'個',color);if(count>=4){if(color=='#000'){//顯示黑棋獲勝框$('.mol-main').css('display','block');$('.black').css('display','block');// alert('黑棋獲勝');}else{//顯示白棋獲勝框$('.mol-main').css('display','block');$('.white').css('display','block');// alert('白棋獲勝');}} }

引用

b站教程

總結

以上是生活随笔為你收集整理的web前端之五子棋网页版小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【ubuntu20.04上openvin
下一篇：《神农本草经》