【JavaScript游戏开发】JavaScript+HTML5封装的苏拉卡尔塔游戏（包含源码）

最新推荐文章于 2025-06-09 16:30:43 发布

高热度网

最新推荐文章于 2025-06-09 16:30:43 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：框架封装 JavaScript学习玩转前端JavaScript

本文为高热度网（http://blog.gaoredu.com/）原创文章，未经博主允许不得转载。更多原创内容请访问http://blog.gaoredu.com/

本文链接：https://blog.csdn.net/m0_37981569/article/details/81978903

本文分享了一个使用JavaScript和HTML5开发的苏拉卡尔塔游戏。提供了完整的源码开源链接以及在线预览地址，实现了棋盘棋子初始化、走棋规则、输赢判定和自动走棋等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/** 苏拉克尔塔游戏
 * 思路：
 * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘
 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑红棋子，棋子均是使用canvas绘制的
 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子
 * 4.判断输赢：每次落子后以此坐标分别向左右，上下，右下，右上进行判断，设参数count，遇到同色棋子+1，遇到空格或不同色棋子终止，当count=5时，游戏结束
 * 20180823
 */

完整项目源码已经开源：https://github.com/xiugangzhang/SularaGame

项目在线预览地址：

http://htmlpreview.github.io/?https://github.com/xiugangzhang/SularaGame/blob/master/SularaGame.html

主要功能：

1.棋盘棋子的初始化

2.走棋规则的实现

3.输赢的判定

4.自动走棋的实现


    // draw chessBoard, chess, select chess
    // move selected chess
    // kill chess
    // caculate score 2.0v
    // play with computer3.0v
    //Whole Version 4.0v
    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext("2d");

    /**
     * degrees to rads
     * @param degrees
     * @returns {number}
     */
    function getRads(degrees) {
        return (Math.PI * degrees) / 180;
    }

    /**
     * chess object
     * @param x  chess position x
     * @param y  chess position y
     * @param color  chess color
     * @constructor
     */
    function Chess(x, y, color){
        this.x = x;
        this.y = y;
        this.color = color;
        this.type = color;
        this.visible = true;
    }
    Chess.prototype = {

    };

    /**
     * game scene
     * @constructor
     */
    function Game(){
        this._chesses = [];
        this._initX = 125;
        this._initY = 125;

        this._chooseChess = null;
        this._movePoint = [];
    }

    /***
     * init game scene
     * @type {
  
  {execute: Game.execute, _initChesses: Game._initChesses, _drawChessboard: Game._drawChessboard, _drawChesses: Game._drawChesses, _draw: Game._draw, drawTitle: Game.drawTitle, _start: Game._start, _mouseClick: Game._mouseClick, _getMovePoint: Game._getMovePoint, _canKill: Game._canKill, _getChess: Game._getChess, _winner: Game._winner, _getRandNum: Game._getRandNum}}
     */
    Game.prototype = {
        /**
         * init scene  and start game
         */
        execute : function(){

            this._initChesses();
            this._start();
        },
        /**
         * init chess position
         * @private
         */
        _initChesses : function(){
            //add black chess
            for(var i = 0; i < 2; i++){
                for(var j = 0; j < 6; j++){
                    var blackChess = new Chess(j, i, "black");
                    this._chesses.push(blackChess);
                }
            }
            //add red chess
            for(var i =4; i < 6; i++){
                for(var j = 0; j < 6; j++){
                    var redChess = new Chess(j, i, "red");
                    this._chesses.push(redChess);
                }
            }
        },
        /**
         * draw chessBoard
         * @private
         */
        _drawChessboard : function(){
            //棋盘纵横线
            context.lineWidth = 8;
            //画横线
            for(var i = 0; i < 6; i++){
                if(i == 0 || i == 5){
                    context.strokeStyle = '#FEFE02';
                }
                if(i == 1 || i == 4){
                    context.strokeStyle = '#02CFFF';
                }
                if(i ==2 || i == 3){
                    context.strokeStyle = '#028202';
                }
                context.beginPath();
                context.moveTo(125, 60 * i + 125);
                context.lineTo(425,60 * i + 125);
                context.closePath();
                context.stroke();
            }
            //画竖线
            for(var i = 0; i < 6; i++){
                if(i == 0 || i == 5){
                    context.strokeStyle = '#FEFE02';
                }
                if(i == 1 || i == 4){
                    context.strokeStyle = '#02CFFF';
                }
                if(i ==2 || i == 3){
                    context.strokeStyle = '#028202';
                }
                context.beginPath();
                context.moveTo(60 * i + 125, 125);
                context.lineTo(60 * i + 125,425);
                context.closePath();
                context.stroke();
            }

            // 圆弧的绘制
            //弧度是以x轴正方向为基准、进行顺时针旋转的角度来计算
            // true 表示逆时针， false表示顺时针
            var x = 0;
            var y = 0;
            context.beginPath();
            context.lineWidth = 8;
            context.strokeStyle = '#02CFFF';
            context.arc