JavaScript+canvas實(shí)現(xiàn)五子棋游戲
更新時(shí)間：2022年05月06日 11:01:03 作者：李拾捌
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript+canvas實(shí)現(xiàn)五子棋游戲的具體代碼，供大家參考，具體內(nèi)容如下
效果截圖：
代碼實(shí)現(xiàn)：
<!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>五子棋</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? html,body{
? ? ? ? ? ? position: relative;
? ? ? ? ? ? background-color: #336;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ? p{
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? padding-top: 20px;
? ? ? ? }
? ? ? ? #canvas{
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? display: block;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? bottom: 0;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? right: 0;
? ? ? ? ? ? margin: auto;
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? width: 480px;
? ? ? ? ? ? height: 480px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p id="order">該黑棋落子了！</p>
? ? <canvas id="canvas" width="480" height="480"></canvas>
</body>
<script>
? ? var p = document.getElementById("order");
? ? var canvas = document.querySelector("#canvas");
? ? var context = canvas.getContext('2d');
? ? var cw,ch,count=0,
? ? ? ? t = canvas.offsetTop,
? ? ? ? l = canvas.offsetLeft;
? ? var state = new Array();
? ? ~~function setSize(){
? ? ? ? window.onresize = arguments.callee;
? ? ? ? cw = window.innerWidth;
? ? ? ? ch = window.innerHeight;
? ? ? ? canvas.width = cw;
? ? ? ? canvas.height = ch;
? ? }
?
? ? function initArray(state){?
? ? ? ? for(var i=0;i<15;i++){
? ? ? ? ? ? state[i] = new Array();
? ? ? ? ? ? for(var j=0;j<15;j++){
? ? ? ? ? ? ? ? state[i][j] = -1;
? ? ? ? ? ? }
? ? ? ? }
? ? }
?
? ? function init(){
? ? ? ? //畫(huà)棋盤(pán)
? ? ? ? context.beginPath();
? ? ? ? for(var i=1;i<16;i++){
? ? ? ? ? ? context.moveTo(30*i,30);
? ? ? ? ? ? context.lineTo(30*i,450);
? ? ? ? }
? ? ? ? for(var i=1;i<16;i++){
? ? ? ? ? ? context.moveTo(30,30*i);
? ? ? ? ? ? context.lineTo(450,30*i);
? ? ? ? }
? ? ? ? context.stroke();
? ? ? ? //畫(huà)棋點(diǎn)
? ? ? ? draw(240,240,3);
? ? ? ? draw(120,120,3);
? ? ? ? draw(360,120,3);
? ? ? ? draw(120,360,3);
? ? ? ? draw(360,360,3); ? ?
? ? }
?
? ? //畫(huà)空心圓
? ? function draw(x,y,r){
? ? ? ? context.beginPath();
? ? ? ? context.arc(x,y,r,0,Math.PI*2);
? ? ? ? context.stroke();
? ? }
?
? ? function Chess(){};
?
? ? Chess.prototype = {
? ? ? ? //畫(huà)棋子
? ? ? ? drawChess: function(x,y,r){
? ? ? ? ? ? this.x = x;
? ? ? ? ? ? this.y = y;
? ? ? ? ? ? this.r = r;
? ? ? ? ? ? if(count == 0){
? ? ? ? ? ? ? ? context.fillStyle = "black";
? ? ? ? ? ? ? ? count = 1;
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? context.fillStyle = "white";
? ? ? ? ? ? ? ? count = 0;
? ? ? ? ? ? }
? ? ? ? ? ? context.beginPath();
? ? ? ? ? ? context.arc(x,y,r,0,Math.PI*2);
? ? ? ? ? ? context.fill();
? ? ? ? },
? ? ? ? //判斷勝負(fù)
? ? ? ? rule: function(ix,iy,s){
? ? ? ? ? ? var hc=0,vc=0,rdc=0,luc=0;
?
? ? ? ? ? ? //horizontal
? ? ? ? ? ? for(var i=ix;i<15;i++){
? ? ? ? ? ? ? ? if(state[i][iy] != s){
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? hc++;
? ? ? ? ? ? }
? ? ? ? ? ? for(var i=ix-1;i>=0;i--){
? ? ? ? ? ? ? ? if(state[i][iy] != s){
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? hc++;
? ? ? ? ? ? }
? ? ? ? ? ? //vertical
? ? ? ? ? ? for(var j=iy;j<15;j++){
? ? ? ? ? ? ? ? if(state[ix][j] != s){
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? vc++;
? ? ? ? ? ? }
? ? ? ? ? ? for(var j=iy-1;j>=0;j--){
? ? ? ? ? ? ? ? if(state[ix][j] != s){
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? vc++;
? ? ? ? ? ? }
? ? ? ??
? ? ? ? ? ? //rightdown
? ? ? ? ? ? for(var i=ix,j=iy;i<15 && j<15;i++,j++){
? ? ? ? ? ? ? ? if(state[i][j] != s){
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? rdc++;
? ? ? ? ? ? }
? ? ? ? ? ? for(var i=ix-1,j=iy-1;i>=0 && j>=0;i--,j--){
? ? ? ? ? ? ? ? if(state[i][j] != s){
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? rdc++;
? ? ? ? ? ? }
?
? ? ? ? ? ? //leftup
? ? ? ? ? ? for(var i=ix,j=iy;i<15 && j>=0;i++,j--){
? ? ? ? ? ? ? ? if(state[i][j] != s){
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? luc++;
? ? ? ? ? ? }
? ? ? ? ? ? for(var i=ix-1,j=iy+1;i>=0 && j<15;i--,j++){
? ? ? ? ? ? ? ? if(state[i][j] != s){
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? luc++;
? ? ? ? ? ? }
?
? ? ? ? ? ? if(hc == 5 || vc == 5 || rdc == 5 || luc == 5){
? ? ? ? ? ? ? ? if(s == 0){
? ? ? ? ? ? ? ? ? ? alert("Black Win!");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? alert("White Win!");
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? //清空畫(huà)布并初始化畫(huà)布和棋子狀態(tài)
? ? ? ? ? ? ? ? context.clearRect(0,0,480,480);
? ? ? ? ? ? ? ? p.innerText = "該黑棋落子了！";
? ? ? ? ? ? ? ? init();
? ? ? ? ? ? ? ? initArray(state);
? ? ? ? ? ? }
? ? ? ? }
?
? ? }
?
? ? //點(diǎn)擊事件
? ? canvas.onclick = function(e){
? ? ? ? var w,h;
? ? ? ? w = e.pageX - l;
? ? ? ? h = e.pageY - t;
? ? ? ? w = parseInt((w+15)/30) * 30;
? ? ? ? h = parseInt((h+15)/30) * 30;
? ? ? ? var i = w/30-1;
? ? ? ? var j = h/30-1;
? ? ? ? //棋子沖突檢查
? ? ? ? if(state[i][j] == -1){
? ? ? ? ? ? var s = count; ??
? ? ? ? ? ? state[i][j] = count;
? ? ? ? ? ? var chess = new Chess();
? ? ? ? ? ? chess.drawChess(w,h,14);
? ? ? ? ? ? draw(w,h,14);
? ? ? ? ? ? if(s == 0){
? ? ? ? ? ? ? ? p.innerText = "該白棋落子了！";
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? p.innerText = "該黑棋落子了！";
? ? ? ? ? ? }
? ? ? ? ? ? chess.rule(i,j,s);
? ? ? ? }
? ? }
? ? init();
? ? initArray(state);
</script>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- node.js利用socket.io實(shí)現(xiàn)多人在線匹配聯(lián)機(jī)五子棋
- js實(shí)現(xiàn)網(wǎng)頁(yè)五子棋進(jìn)階版
- js+html實(shí)現(xiàn)網(wǎng)頁(yè)五子棋
- js數(shù)組案例之五子棋游戲
- 純JS實(shí)現(xiàn)五子棋游戲兼容各瀏覽器(附源碼)
- 基于JavaScript實(shí)現(xiàn)五子棋游戲
- Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
- JS canvas繪制五子棋的棋盤(pán)
- H5+C3+JS實(shí)現(xiàn)五子棋游戲（AI篇）
- Node.js+Socket.io實(shí)現(xiàn)雙人在線五子棋對(duì)戰(zhàn)
相關(guān)文章
這篇文章主要介紹了Bootstrap Table使用整理（四）之工具欄的相關(guān)資料,需要的朋友可以參考下2017-06-06
原生js實(shí)現(xiàn)回復(fù)評(píng)論功能
本文主要分享了原生js實(shí)現(xiàn)回復(fù)評(píng)論功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
javascript中函數(shù)作為參數(shù)調(diào)用的方法
這篇文章主要介紹了javascript中函數(shù)作為參數(shù)調(diào)用的方法,實(shí)例分析了函數(shù)作為操作調(diào)用的原理與相關(guān)技巧,需要的朋友可以參考下2015-02-02
js實(shí)現(xiàn)匹配時(shí)換色的輸入提示特效代碼
這篇文章主要介紹了js實(shí)現(xiàn)匹配時(shí)換色的輸入提示特效代碼,涉及javascript針對(duì)頁(yè)面元素的匹配及鼠標(biāo)事件的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
以下上是我在學(xué)習(xí)和使用了JS一段時(shí)間后,為了更深入的了解它, 也為了更好的把握對(duì)它的應(yīng)用, 從而在對(duì)閉包的學(xué)習(xí)過(guò)程中,自己對(duì)于詞法作用域的一些理解和總結(jié)2010-08-08
作用域是JavaScript中一個(gè)重要的概念,它決定了變量和函數(shù)在代碼中的可訪問(wèn)性和可見(jiàn)性,了解JavaScript的作用域?qū)τ诰帉?xiě)高效、可維護(hù)的代碼至關(guān)重要,本文將深入介紹JavaScript作用域相關(guān)的知識(shí)點(diǎn),其中包括作用域類(lèi)型,作用域鏈,變量提升以及閉包等2023-08-08
JavaScript中使用import 和require打包后實(shí)現(xiàn)原理分析
這篇文章主要介紹了JavaScript中使用import 和require打包后實(shí)現(xiàn)原理分析,需要的朋友可以參考下2018-03-03
IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)?lái)一篇IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)單的隱藏式側(cè)邊欄功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的隱藏式側(cè)邊欄功能,涉及javascript結(jié)合定時(shí)器針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)
這篇文章主要為大家詳細(xì)介紹了scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12