当前位置 博文首页 > 赫奇。的博客：五子棋游戏（JavaScript+JQuery+Canvas）
一个简单的五子棋小游戏，自带音效。
效果如下
<!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>
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;
