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(){
? ? ? ? //畫棋盤
? ? ? ? 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>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- node.js利用socket.io實(shí)現(xiàn)多人在線匹配聯(lián)機(jī)五子棋
- js實(shí)現(xiàn)網(wǎng)頁五子棋進(jìn)階版
- js+html實(shí)現(xiàn)網(wǎng)頁五子棋
- 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-09
這篇文章主要介紹了js子頁面如何獲取父頁面數(shù)據(jù),需要的朋友可以參考下2014-05-05
json_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-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript基于ChatGPT?API實(shí)現(xiàn)劃詞翻譯瀏覽器腳本
最近?GitHub?上有個(gè)基于?ChatGPT?API?的瀏覽器腳本，openai-translator，?短時(shí)間內(nèi)?star?沖到了?9.7k，拋開?tauri?是使用?rust?部分，那瀏覽器部分實(shí)現(xiàn)還是比較簡單的，今天我們就來手動(dòng)實(shí)現(xiàn)一下2023-03-03
js+html實(shí)現(xiàn)點(diǎn)名系統(tǒng)功能
這篇文章主要為大家詳細(xì)介紹了js+html實(shí)現(xiàn)點(diǎn)名系統(tǒng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
javascript ES6 Template String模板字符串使用方法
這篇文章主要介紹了javascript ES6 模板字符串(Template String)是增強(qiáng)版的字符串，用反引號(hào)(`)標(biāo)識(shí)，它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量,需要的朋友可以參考下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
情人節(jié)馬上要到了，為情人節(jié)奉獻(xiàn)一份禮物哈。。。一定要支持CSS3渲染的瀏覽器2012-02-02