JavaScript+canvas實(shí)現(xiàn)五子棋游戲
本文實(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(){ ? ? ? ? //畫棋盤 ? ? ? ? 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(); ? ? ? ? //畫棋點(diǎn) ? ? ? ? draw(240,240,3); ? ? ? ? draw(120,120,3); ? ? ? ? draw(360,120,3); ? ? ? ? draw(120,360,3); ? ? ? ? draw(360,360,3); ? ? ? ? } ? ? ? //畫空心圓 ? ? function draw(x,y,r){ ? ? ? ? context.beginPath(); ? ? ? ? context.arc(x,y,r,0,Math.PI*2); ? ? ? ? context.stroke(); ? ? } ? ? ? function Chess(){}; ? ? ? Chess.prototype = { ? ? ? ? //畫棋子 ? ? ? ? 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!"); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? //清空畫布并初始化畫布和棋子狀態(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繪制五子棋的棋盤
- H5+C3+JS實(shí)現(xiàn)五子棋游戲(AI篇)
- Node.js+Socket.io實(shí)現(xiàn)雙人在線五子棋對(duì)戰(zhàn)
相關(guān)文章
在IE下獲取object(ActiveX)的Param的代碼
在IE下,獲取Param的時(shí)候有個(gè)詭異現(xiàn)象(不知道算不算bug)。2009-09-09js子頁(yè)面獲取父頁(yè)面數(shù)據(jù)示例
這篇文章主要介紹了js子頁(yè)面如何獲取父頁(yè)面數(shù)據(jù),需要的朋友可以參考下2014-05-05json_decode 索引為數(shù)字時(shí)自動(dòng)排序問題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù),結(jié)果順序不對(duì),經(jīng)debug調(diào)試,發(fā)現(xiàn)是json_encode 函數(shù)的問題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03JavaScript基于ChatGPT?API實(shí)現(xiàn)劃詞翻譯瀏覽器腳本
最近?GitHub?上有個(gè)基于?ChatGPT?API?的瀏覽器腳本,openai-translator,?短時(shí)間內(nèi)?star?沖到了?9.7k,拋開?tauri?是使用?rust?部分,那瀏覽器部分實(shí)現(xiàn)還是比較簡(jiǎn)單的,今天我們就來(lái)手動(dòng)實(shí)現(xiàn)一下2023-03-03js+html實(shí)現(xiàn)點(diǎn)名系統(tǒng)功能
這篇文章主要為大家詳細(xì)介紹了js+html實(shí)現(xiàn)點(diǎn)名系統(tǒng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11javascript ES6 Template String模板字符串使用方法
這篇文章主要介紹了javascript ES6 模板字符串(Template String)是增強(qiáng)版的字符串,用反引號(hào)(`)標(biāo)識(shí),它可以當(dāng)作普通字符串使用,也可以用來(lái)定義多行字符串,或者在字符串中嵌入變量,需要的朋友可以參考下2023-06-06用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效...2007-03-03