五子棋游戏（JavaScript+JQuery+Canvas）

一个简单的五子棋小游戏，自带音效。

效果如下

HTML

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>五子棋</title><link rel="stylesheet" href="public/css/main.css"><script src="public/js/jquery.min.js"></script>
</head>
<body><div id="container"><canvas id="myCanvas" width="600" height="600"style="border:1px solid #f58000;">您的浏览器貌似不支持canvas</canvas><div id="replay" >重新开始</div></div><img id="qipan" src="view/img/qipan.jpg" style="display: none"></img><audio id="myaudio" src="view/music/paly.mp3" hidden="true" ></audio><audio id="myaudio_replay" src="view/music/replay.mp3" hidden="true" ></audio><audio id="myaudio_win" src="view/music/win.mp3" hidden="true" ></audio>
</body>
<script src="public/js/main.js" ></script>
</html>

javascript

let myCanvas = document.getElementById("myCanvas")
let ctx = myCanvas.getContext("2d");
let img = document.getElementById("qipan");
let music = document.getElementById("myaudio");
let music_replay = document.getElementById("myaudio_replay");
let music_win = document.getElementById("myaudio_win");
let replay = $("#replay");
replay.click(() => {wuziqi.statu = 1;wuziqi.init();music_replay.play();
})
img.onload = function () {ctx.drawImage(img, 0, 0, 600, 600);
};
let wuziqi = {rn: 15,cn: 15,A: [],B: [],A_color:"#000",B_color:"#fff",All: [],ready: 0,statu: 1,init() {ctx.drawImage(img, 0, 0, 600, 600);this.All = [];for (let i = 0; i < 15; i++) {this.A[i] = [];this.B[i] = [];for (let j = 0; j < 15; j++) {this.A[i][j] = [];this.B[i][j] = [];}}this.clickIt();},test(w, h) {let val = (h + 1) * 15 + (w + 1);return this.All[val] !== 1;},clickIt() {$("#myCanvas").click(function (e) {if (wuziqi.statu) {var w, h;var l = this.offsetLeft;var x = e.clientX;var y = e.clientY;//获取点击相对棋盘坐标w = Math.round((x - l - 30) / 40);h = Math.round((y - 70) / 40);if (wuziqi.test(w, h)) {music.play();wuziqi.whoTurn();let val = (h + 1) * 15 + (w + 1);wuziqi.All[val] = 1;ctx.beginPath();ctx.fillStyle = !wuziqi.ready ? wuziqi.A_color : wuziqi.B_color;ctx.arc(28 + 38.8 * w, 28 + 38.4 * h, 12, 0, 2 * Math.PI);ctx.fill();if (!wuziqi.ready) {wuziqi.ready = 1;wuziqi.A[w][h] = 1;wuziqi.Atest(w, h);} else {wuziqi.ready = 0;wuziqi.B[w][h] = 1;wuziqi.Btest(w, h);}}}})},whoTurn() {let [Turn] = wuziqi.ready ? [wuziqi.A_color] : [wuziqi.B_color];ctx.beginPath();ctx.fillStyle = Turn;ctx.arc(50, 15, 12, 0, 2 * Math.PI);ctx.fill();},Atest(w, h) {this.win(w, h, this.A);},Btest(w, h) {this.win(w, h, this.B);},win(w, h, p) {if (this.leftGet(w, h, p)+this.rightGet(w, h, p)>3 || this.upGet(w, h, p)+this.downGet(w, h, p)>3 || this.ldGet(w, h, p) + this.luGet(w, h, p) >3 || this.rdGet(w, h, p) + this.ruGet(w, h, p)>3) {this.success(p);}},leftGet(w, h, p, sum = 0) {while (w - 1 >= 0 && p[--w][h] === 1) {if (sum < 4) {sum++;}}return sum;},rightGet(w, h, p, sum = 0) {while (w + 1 <= 13 && p[++w][h] === 1) {if (sum < 4) {sum++;}}return sum;},upGet(w, h, p, sum = 0) {while (h - 1 >= 0 && p[w][--h] === 1) {if (sum < 4) {sum++;}}return sum;},downGet(w, h, p, sum = 0) {while (h + 1 <= 13 && p[w][++h] === 1) {if (sum < 4) {sum++;}}return sum;},luGet(w, h, p, sum = 0) {while (w - 1 >= 0 && h - 1 >= 0 && p[--w][--h] === 1) {if (sum < 4) {sum++;}}return sum;},ldGet(w, h, p, sum = 0) {while (w + 1 <= 13 && h + 1 <= 13 && p[++w][++h] === 1) {if (sum < 4) {sum++;}}return sum;},ruGet(w, h, p, sum = 0) {while (w - 1 >= 0 && h + 1 <= 13 && p[--w][++h] === 1) {if (sum < 4) {sum++;}}return sum;},rdGet(w, h, p, sum = 0) {while (w + 1 <= 13 && h - 1 >= 0 && p[++w][--h] === 1) {if (sum < 4) {sum++;}}return sum;},success(p) {this.statu = 0;let [Text] = p === this.A ? ["黑棋胜"] : ["白棋胜"];ctx.font = "18px Arial boder";ctx.fillText(Text, 280, 25);music_win.play();}
}
$.ready(wuziqi.init());

CSS

*{magin:0 0;padding:0 0;
}
#container{margin: 0 auto;/*text-align: center;*/display: flex;/*justify-content: center;*/}
#myCanvas{margin: 2em auto ;
}
#replay{position: fixed;border: solid 2px burlywood;line-height: 25px;text-align: center;font: 18px  Arial ;color: #555;left: 44.5%;height: 25px;width: 80px;background-color: #fff;
}

五子棋游戏（JavaScript+JQuery+Canvas）相关推荐

php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
使用jquery—Canvas实现html5小游戏——《坦克大战》
目录 1.项目背景 2.项目展示 3.设计思路 3.1.坦克移动 3.2.坦克开火 3.3.击中坦克 4.实现代码 5.总结 1.项目背景 2021年春节期间在家无聊,正好又学过一些前端的知识,因此就 ...
html加javascript和canvas类似超级玛丽游戏
html加javascript和canvas制作复制可用 <!doctype html> <html lang="en"> <head> &l ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
功能模块先看下现在做完的效果: 代码详解人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = f ...
前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘
功能模块快来体验下吧!看下你能赢得了计算机么? 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能老规矩,源码贴上具体代码 (1)HTML代码 <!DOCTYPE html ...
php 设计五子棋游戏,canvas实现五子棋游戏的代码示例
本篇文章给大家带来的内容是关于canvas实现五子棋游戏的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果代码五子棋 (function () { // 画布绘制 l ...
图片五子棋PHP接口,原生JS+Canvas实现五子棋游戏实例
一.功能模块先看下现在做完的效果: 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15, ...
HTML5 canvas五子棋游戏
1.html5 canvas cookbook http://www.html5canvastutorials.com/cookbook/ 2.html5 canvas 2D API http://i ...

五子棋游戏（JavaScript+JQuery+Canvas）

HTML

javascript

CSS

五子棋游戏（JavaScript+JQuery+Canvas）相关推荐

最新文章

热门文章