咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 389|回复: 0

[JavaScript] js实现简单五子棋游戏

[复制链接]
  • TA的每日心情
    无聊
    2019-4-21 13:02
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    发表于 2020-7-6 18:11:23 | 显示全部楼层 |阅读模式
    本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下
    html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>五子棋</title>
    <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
    <canvas id="chess" width="450px" height="450px"></canvas>
    <script type="text/javascript" src="js/script.js" ></script>
    </body>
    </html>css

    canvas{
    display: block;
    margin: 50px auto;
    box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
    }js

    var me = true;
    var over = false;
    var chessBox = [];
    var wins = [];  //定义三维数组
    //赢法统计数组
    var myWin = [];
    var computerWin = [];
    for(i=0;i<15;i++){
    chessBox=[];
    for(j=0;j<15;j++){
    chessBox[j]=0;
    }
    }
    for(var i=0;i<15;i++){
    wins=[];
    for(var j=0;j<15;j++){
    wins[j]=[];
    }
    }
    var count =0;
    //所有横线
    for(var i=0;i<15;i++){
    for(var j=0;j<11;j++){
    //执行1次
    // wins[0][0][0]=true;
    // wins[0][1][0]=true;
    // wins[0][2][0]=true;
    // wins[0][3][0]=true;
    // wins[0][4][0]=true;
    //执行2次
    // wins[0][1][1]=true;
    // wins[0][2][1]=true;
    // wins[0][3][1]=true;
    // wins[0][4][1]=true;
    // wins[0][5][1]=true;
    for(var k=0; k<5;k++){
    wins[j+k][count] = true;
    }
    count++;
    }
    }
    //所有竖线
    for(var i=0;i<15;i++){
    for(var j=0;j<11;j++){
    for(var k=0; k<5;k++){
    wins[j+k][count] = true;
    }
    count++;
    }
    }
    //所有斜线
    for(var i=0;i<11;i++){
    for(var j=0;j<11;j++){
    for(var k=0; k<5;k++){
    wins[i+k][j+k][count] = true;
    }
    count++;
    }
    }
    //所有反斜线
    for(var i=0;i<11;i++){
    for(var j=14;j>3;j--){
    for(var k=0; k<5;k++){
    wins[i+k][j-k][count] = true;
    }
    count++;
    }
    }

    console.log(count);
    for (var i=0;i<count;i++) {
    myWin = 0;
    computerWin = 0;
    }

    var chess = document.getElementById('chess');
    var context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    var logo= new Image();
    logo.src = "img/木头.jpg";
    logo.onload = function(){
    context.drawImage(logo,0,0,450,450);
    drawChessBoard();
    // oneStep(0,0,true);
    // oneStep(1,1,false);
    }
    function drawChessBoard(){
    for(var i=0;i<15;i++){
    context.moveTo(15+i*30,15);
    context.lineTo(15+i*30,435);
    context.moveTo(15,15+i*30);
    context.lineTo(435,15+i*30);
    context.stroke();
    }

    }
    var oneStep = function(i,j,me){
    context.beginPath();
    context.arc(15+i*30,15+j*30,13,0,2*Math.PI);
    context.closePath();
    var gradient = context.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);
    if(me){
    gradient.addColorStop(0,"#0A0A0A");
    gradient.addColorStop(1,"#636766");
    }else{
    gradient.addColorStop(0,"#D1D1D1");
    gradient.addColorStop(1,"#F9F9F9");
    }

    context.fillStyle = gradient;
    context.fill();
    }

    chess.onclick = function(e){
    if(over){
    return;
    }
    if(!me){
    return;
    }
    var x = e.offsetX;
    var y = e.offsetY;
    var i = Math.floor(x/30); //i,j为索引序列号
    var j = Math.floor(y/30);
    if(chessBox[j]==0){
    oneStep(i,j,me);

    chessBox[j]=1;

    for(var k=0;k < count; k++){
    if(wins[j][k]) {
    myWin[k]++;
    computerWin[k] = 6; //设置异常值
    if(myWin[k] == 5) {
    window.alert("你赢了");
    over = true;
    }
    }
    }
    if(!over){
    me=!me;
    computerAI();
    }
    }

    }
    var computerAI = function(){
    var myScore = [];
    var computerScore = [];
    var max = 0; //保存最高分数;
    var u = 0, v =0; //保存坐标
    for(var i=0;i<15;i++){
    myScore = [];
    computerScore = [];
    for(var j=0;j<15;j++){
    myScore[j] = 0;
    computerScore[j] = 0;
    }
    }
    for (var i=0; i<15;i++) {
    for (var j=0;j<15;j++) {
    if(chessBox[j] == 0){
    for(var k =0 ;k<count;k++){
    if(wins[j][k]){
    if(myWin[k]==1){
    myScore[j]+= 200;
    }else if(myWin[k]==2){
    myScore[j]+= 400;
    }else if(myWin[k]==3){
    myScore[j]+= 2000;
    }else if(myWin[k]==4){
    myScore[j]+= 10000;
    }
    if(computerWin[k]==1){
    computerScore[j]+= 220;
    }else if(computerWin[k]==2){
    computerScore[j]+= 420;
    }else if(computerWin[k]==3){
    computerScore[j]+= 2020;
    }else if(computerWin[k]==4){
    computerScore[j]+= 10020;
    }
    }
    }
    if(myScore[j]>max){
    max = myScore[j];
    u = i;
    v = j;
    }else if(myScore[j] == max){
    if(computerScore[j] > computerScore[v]){
    u = i;
    v = j;
    }
    }
    if(computerScore[j]>max){
    max = computerScore[j];
    u = i;
    v = j;
    }else if(computerScore[j] == max){
    if(myScore[j] > myScore[v]){
    u = i;
    v = j;
    }
    }
    }
    }
    }
    oneStep(u,v,false);
    chessBox[v] = 2;
    for(var k=0;k < count; k++){
    if(wins[v][k]) {
    computerWin[k]++;
    myWin[k] = 6; //设置异常值
    if(computerWin[k] == 5) {
    window.alert("计算机赢了");
    over = true;
    }
    }
    }
    if(!over){
    me=!me;
    }
    }
    js实现简单五子棋游戏-1.jpg

    更多有趣的经典小游戏实现专题,分享给大家:
    C++经典小游戏汇总
    python经典小游戏汇总
    python俄罗斯方块游戏集合
    JavaScript经典游戏 玩不停
    javascript经典小游戏汇总
    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持咔叽论坛。

    原文地址:https://www.jb51.net/article/187513.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 02:54

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表