JavaScript Canvas实现井字棋游戏

2024-04-02 19:04:59 896人浏览薄情痞子

摘要

本文实例为大家分享了javascript canvas实现井字棋游戏的具体代码，供大家参考，具体内容如下 index.html <!DOCTYPE html> &l

本文实例为大家分享了javascript canvas实现井字棋游戏的具体代码，供大家参考，具体内容如下


<!DOCTYPE html>
<html>
    <head>
        <title>Tic Tac Toe</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
 
            body, html, #game {
                height: 100%;
                background: #FCFCFC;
            }
 
            #game {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div id="game">
            <canvas id="canvas" width="300" height="300"></canvas>
        </div>
        <script src="game.js"></script>
    </body>
</html>

game.js


players = 2;
cell_count = 3;
winCount = 3;
cell_size = 100;
size = cell_size * cell_count;
 
 
var canvas = document.getElementById('canvas');
canvas.width = size;
canvas.height = size;
 
canvas.addEventListener('click', click, false);
 
 
var ctx = canvas.getContext('2d');
 
ctx.imageSmoothingEnabled = false;
ctx.lineWidth = 3;
 
 
function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
 
function line(x, y, w, h, color = '#ccc') {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + w, y + h);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.closePath();
}
 
function fillRect(i, j, color = '#F5F5F5') {
    ctx.fillStyle = color;
    ctx.fillRect(i * cell_size, j * cell_size, cell_size, cell_size);
}
 
var draw = {
    grid: (color = '#ccc') => {
        for (let i = 1; i < cell_count; i++) {
            line(cell_size * i, 0, 0, size, color);
            line(0, cell_size * i, size, 0, color);
    }
    },
 
    // draw nothing, stub
    0: (i, j, _) => {
    },
 
    // draw X figure
    1: (i, j, color = '#3F51B5') => {
        let left = (i + 0.1) * cell_size,
                top = (j + 0.1) * cell_size,
                size = 0.8 * cell_size;
 
        line(left, top, size, size, color);
        line(left + size, top, -size, size, color);
    },
 
    // draw O figure
    2: (i, j, color = '#FF5722') => {
        ctx.beginPath();
        ctx.arc((i + 0.5) * cell_size, (j + 0.5) * cell_size, 0.4 * cell_size, 0, Math.PI * 2, false);
        ctx.strokeStyle = color;
        ctx.stroke();
        ctx.closePath();
    },
 
    // draw Δ figure
    3: (i, j, color = '#FDE619') => {
        let center = (i + 0.5) * cell_size,
                size = Math.sqrt(3) * 0.525 * cell_size,
                top = (j + 0.125) * cell_size,
                height = 0.75 * cell_size,
                step = size / 2;
 
        line(center, top, -step, height, color);
        line(center, top, step, height, color);
        line(center - step, top + height, size, 0, color);
    }
};
 
 
let grid = new Array(cell_count * cell_count).fill(0),
        get = (i, j) => grid[j * cell_count + i],
        set = (i, j, val = 0) => grid[j * cell_count + i] = val,
        isFree = (i, j) => get(i, j) == 0,
        checkVictory = (who) => {
    let iterate = getter => {
        for (let i = 0; i < winCount; i++)
            if (getter(i) != who)
                return false;
        return true;
    };
 
    let row, col, path = {
        vertical: _ => iterate(i => get(row + i, col)),
        horizntl: _ => iterate(j => get(col, row + j)),
        diaGonal: _ => iterate(i => get(row + i, col + i)),
        opposite: _ => iterate(i => get(row + i, col + winCount - 1 - i)),
    };
 
    for (row = 0; row <= cell_count - winCount; row++) {
        for (col = 0; col < cell_count; col++) {
            if (path.vertical())
                return ['vertical', row, col];
            if (path.horizntl())
                return ['horizntl', col, row];
        }
 
        for (col = 0; col <= cell_count - winCount; col++) {
            if (path.diagonal())
                return ['diagonal', row, col];
            if (path.opposite())
                return ['opposite', row, col];
        }
    }
 
    return [];
},
        onWin = ([type, row, col]) => {
    if (!type)
        return;
 
    let iterate = action => {
        for (let i = 0; i < winCount; i++)
            action(i);
    };
 
    let drawSequence = {
        vertical: _ => iterate(i => fillRect(row + i, col)),
        horizntl: _ => iterate(j => fillRect(row, col + j)),
        diagonal: _ => iterate(i => fillRect(row + i, col + i)),
        opposite: _ => iterate(i => fillRect(row + i, col + winCount - 1 - i)),
    };
 
    clear();
    drawSequence[type]();
    draw.grid();
 
    for (let i = 0; i < cell_count; i++) {
        for (let j = 0; j < cell_count; j++)
            draw[get(i, j)](i, j);
    }
 
    return true;
};
 
 
let playerTurn = 0;
 
function click(e) {
    let i = e.offsetX / cell_size | 0,
            j = e.offsetY / cell_size | 0;
 
    if (isFree(i, j)) {
        let figure = playerTurn++ % players + 1;
 
        set(i, j, figure);
        draw[figure](i, j);
        onWin(checkVictory(figure)) && canvas.removeEventListener('click', click, false);
        ;
    }
}
 
 
draw.grid();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript Canvas实现井字棋游戏

本文链接: https://www.lsjlt.com/news/133260.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript Canvas实现井字棋游戏

本文实例为大家分享了JavaScript Canvas实现井字棋游戏的具体代码，供大家参考，具体内容如下 index.html <!DOCTYPE html> &l...

99+

2024-04-02
Java Websocket Canvas实现井字棋网络游戏

本文实例为大家分享了Java Websocket Canvas实现井字棋网络游戏的具体代码，供大家参考，具体内容如下 TicTacToeGame.java impo...

99+

2024-04-02
C语言实现井字棋游戏

本文实例为大家分享了C语言实现井字棋游戏的具体代码，供大家参考，具体内容如下首先，我们需要一个大体的思路，先进行宏观规划，再对细节进行实现。比如： 1、首先需要一个菜单面板作以修...

99+

2024-04-02
C语言实现井字棋小游戏

C语言实现简单的“井字棋游戏”，供大家参考，具体内容如下总体构造： 1.游戏菜单的逻辑实现 2.游戏本体的代码实现 part 1：游戏菜单的整体逻辑 ①简单的通过一个输入0和1的s...

99+

2024-04-02
JavaScript+canvas实现五子棋游戏

本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下效果截图：代码实现： <!DOCTYPE html> &l...

99+

2024-04-02
Python+Tkinter实现经典井字棋小游戏

目录演示介绍官方文档tkinter.messagebox源码演示介绍首先来介绍一下GUI库Tkinter 主要模块： tkinter Main Tkinter module....

99+

2024-04-02
C语言代码实现井字棋游戏

井字棋是一个很常见的小游戏。要求对战双方在一个“井”形的棋盘里分别下“*”棋子或者“#”棋子，谁先连成3个，谁就赢。本次使用C语言来实现这个小游戏。由于使用函数较多，所以采用多文...

99+

2024-04-02
C语言如何实现井字棋游戏

这篇文章主要介绍了C语言如何实现井字棋游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。C语言是什么C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发，使用...

99+

2023-06-14
C语言怎么实现井字棋游戏

今天就跟大家聊聊有关C语言怎么实现井字棋游戏，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。井字棋游戏要求在3乘3棋盘上,每行都相同或者每列都相同再或者对角线相同,则胜出.因此我们可以...

99+

2023-06-25
基于C语言实现井字棋游戏

井字棋游戏要求在3乘3棋盘上,每行都相同或者每列都相同再或者对角线相同,则胜出.因此我们可以使用一个二维数组来表示棋盘,判断胜负只需要判断数组元素是否相同即可.具体我们可以分为以下几...

99+

2024-04-02
C语言实现简易井字棋游戏

井子棋承载了每个人孩童时的美好时光，小到书本、纸张，大到课桌、墙壁，总能找到井字棋盘的痕迹。今天我们就来实际操作一番，用C语言完成一个简单的井字棋游戏，让我们一起重温美好。棋盘如下...

99+

2024-04-02
微信小程序实现井字棋游戏

本文实例为大家分享了微信小程序实现井字棋游戏的具体代码，供大家参考，具体内容如下效果图 .wxml <view class="title"> <view w...

99+

2024-04-02
React中井字棋游戏的实现示例

目录需求分析实现分析涉及的组件涉及的状态编码实现项目初始化定义各个组件的props/stateSquare组件propsBoard组件propsGame组件state各组件代码Squ...

99+

2022-11-13

React 井字棋游戏
纯CSS3实现井字棋游戏的示例

这篇文章给大家分享的是有关纯CSS3实现井字棋游戏的示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。运行效果：html<div class="tic-tac-toe">...

99+

2023-06-08
python实现简单的井字棋小游戏

Python做三子棋游戏，这个是我刚开始了解做Python小游戏的时候第一个项目，因为简单好入手，实现它的过程是我开始摸索Python的GUI界面的入门之路。这个设计也都是按照自己对...

99+

2024-04-02
C语言实现简单井字棋游戏

本文实例为大家分享了C语言实现简单井字棋游戏的具体代码，供大家参考，具体内容如下游戏截图源代码 person.h //玩家对战 void person() { int...

99+

2024-04-02
C语言实现简单的井字棋游戏

本文实例为大家分享了C语言实现简单井字棋游戏的具体代码，供大家参考，具体内容如下 1.什么是井字棋井字棋相信大部分人都玩过规则：双方轮流放子，当某一方的三个子连成一线（行，列，对...

99+

2024-04-02
python实现人机对战的井字棋游戏

本文实例为大家分享了python实现人机对战井字棋的具体代码，供大家参考，具体内容如下游戏简介：在九宫格内进行，如果一方抢先于另一方向（横、竖、斜）连成3子，则获得胜利。游戏中输入...

99+

2024-04-02
用C语言实现井字棋游戏代码

目录前言首先得确定程序实现的功能直接上代码：1. 菜单界面2. 棋盘打印3. 玩家下棋4. 电脑下棋（智障下棋版，毫无智能）5. 判断输赢搞定总结前言我们都玩过或见过这样一种简单地...

99+

2024-04-02
基于JS实现经典的井字棋游戏

目录先看成品游戏初始化界面：玩家获胜AI电脑获胜思路生成棋盘重新开始玩家落子电脑落子代码HTMLCSSjs井字棋作为我们在上学时代必玩的一款连珠游戏，你知道如何做到先手必然不会输吗？...

99+

2024-04-02