今天给大家分享一个HTML5五子棋小游戏的源代码，素材来源网络，首先看一下效果图：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5五子棋小游戏</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="box">
<div id="centent">
<canvas id="canvas" width="450" height="450"></canvas>
</div>
<button id="button">撤回</button>
<button id="anew">重开</button>
<div id="state">
<div class="state-chess Bchess"></div>
<div class="chessName">黑棋走</div>
</div>
<div id="winner">
<div class="state-chess Bchess"></div>
<div class="chessName"></div>
</div>
</div>
<script src="js/script.js"></script>
<script>
game.drawLine()
game.canvas.addEventListener("mousedown",game.canvasClick)
game.regret_chess.addEventListener("mousedown",game.regret)
game.anew.addEventListener("mousedown",game.anewClick)
</script>
</body>
</html>
css样式代码：
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #e6e7ec;
}
#box{
position: relative;
margin: 50px auto;
width: 450px;
height: 510px;
background: #e6e7ec;
}
#centent{
position: absolute;
width: 430px;
height: 430px;
border: 1px solid #9E9E9E;
overflow: hidden;
border-radius: 8px;
box-shadow: 0px 0px 5px 0px #9e9e9ed9;
left: 10px;
top: 20px;
}
#canvas{
display: block;
position: absolute;
background: #F7E6B7;
left: -10px;
top: -10px;
}
#button,#anew,#state,#winner{
position: absolute;
display: block;
width: 40px;
height: 40px;
border-radius: 30px;
outline: none;
font-size: 10px;
box-sizing: border-box;
color: #00BCD4;
background: #fff;
border: none;
box-shadow: 1px 1px 3px 1px #9e9e9e5e;
top: 460px;
left: 270px;
user-select: none;
}
#anew{left: 220px;}
#state{left: 321px; width: 120px;}
#state .state-chess,#winner .state-chess{
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
}
#state .chessName, #winner .chessName{
position: absolute;
width: 60px;
height: 30px;
top: 5px;
left: 40px;
text-align: center;
line-height: 30px;
font-size: 15px;
}
#button:hover{
transition: 1s all;
background: #01BCFF;
color: #fff;
}
#anew:hover{
transition: 1s all;
background: #1bb556;
color: #fff;
}
#button:active,#anew:active{
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
transform: scale(.8);
}
.Bchess{
position: absolute;
width: 27px;
height: 27px;
border-radius: 30px;
background: radial-gradient(#9E9E9E -100%, #000000 100%);
box-shadow: 1px 1px 2px 0px #0000006e;
font-size: 10px;
line-height: 27px;
text-align: center;
color: #fff;
}
.Wchess{
position: absolute;
width: 27px;
height: 27px;
border-radius: 30px;
background: radial-gradient( #e4e4e4 10%,#b7aaaa);
box-shadow: 1px 1px 2px 0px #0000006e;
font-size: 10px;
line-height: 27px;
text-align: center;
color: #000000;
}
#winner{
width: 120px;
left: 12px;
display: none;
}
js代码：
var game = {
centent: document.getElementById("centent"),
canvas: document.getElementById("canvas"),
ctx: canvas.getContext("2d"),
regret_chess: document.getElementById("button"),
anew: document.getElementById("anew"),
state: document.getElementById("state"),
sChesee: document.getElementsByClassName("state-chess")[0],
cName: document.getElementsByClassName("chessName")[0],
winner: document.getElementById("winner"),
winChesee: this.winner.getElementsByClassName("state-chess")[0],
winName: this.winner.getElementsByClassName("chessName")[0],
e: 0,
chess_Board: [],
chess_Name: ["黑棋","白棋"],
h: [],
um: 0,
lianz: [],
winXY: [[1,0],[0,1],[1,1],[1,-1]],
chessOff: true,
computerChess: function(){
},
drawLine: function(){
//console.log(game.c === this.c)
for(var i = 1; i <= 14; i++){
game.ctx.moveTo(i * 30 + .5, 420)
game.ctx.lineTo(i * 30 + .5,30)
game.ctx.moveTo(30,i * 30 + .5)
game.ctx.lineTo(420,i * 30 + .5)
game.ctx.strokeStyle = "#C0A27B";
game.ctx.stroke()
}
for(var i = 0; i <= 13; i++){
game.chess_Board[i] = [];
game.lianz[i] = [];
for(var j = 0; j <= 13; j++){
game.chess_Board[i][j] = 0;
game.lianz[i][j] = 0;
}
}
},
canvasClick: function(e){
var dx = parseInt(Math.floor(e.offsetX + 15) / 30);
var dy = parseInt(Math.floor(e.offsetY + 15) / 30);
var WBobj = {
ox: (dx * 30) - 25,
oy: (dy * 30) - 25,
mz: game.chess_Name[game.e % 2],
dm: document.createElement("div"),
class: game.e % 2 == 1 ? "Wchess" : "Bchess",
list: game.um++,
}
if(dx < 1 || dx > 14 | dy < 1 || dy > 14)return;
if( game.chess_Board[dx - 1][dy - 1] == 0){
game.h.push(WBobj)
WBobj.dm.classList.add( WBobj.class);
WBobj.dm.style.left = WBobj.ox + "px";
WBobj.dm.style.top = WBobj.oy + "px";
game.chess_Board[dx - 1][dy - 1] = game.chess_Name[game.e % 2];
game.lianz[dx - 1][dy - 1] = WBobj.dm;
game.win(dx - 1,dy - 1,game.chess_Name[game.e % 2],game.winXY[0],game.e % 2)
game.win(dx - 1,dy - 1,game.chess_Name[game.e % 2],game.winXY[1],game.e % 2)
game.win(dx - 1,dy - 1,game.chess_Name[game.e % 2],game.winXY[2],game.e % 2)
game.win(dx - 1,dy - 1,game.chess_Name[game.e % 2],game.winXY[3],game.e % 2)
game.cName.innerText = game.e % 2 == 0 ? game.chess_Name[1] + "走" : game.chess_Name[0] + "走";
game.sChesee.className = game.e % 2 == 1 ? "state-chess Bchess" : "state-chess Wchess";
game.e++;
game.centent.appendChild(WBobj.dm)
}
},
regret: function(e){
if(game.chessOff){
if(game.h.length > 0){
let obj = game.h.pop();
let rmRm = obj.dm;
rmRm.remove()
game.cName.innerText = game.e % 2 == 0 ? game.chess_Name[1] + "走" : game.chess_Name[0] + "走";
game.sChesee.className = game.e % 2 == 1 ? "state-chess Bchess" : "state-chess Wchess";
game.e -=1;
game.um-=1;
game.chess_Board[parseInt(obj.ox/30)][parseInt(obj.oy/30)] = 0;
}else{
return;
}
}else{
return;
}
},
anewClick: function(e){
game.h.forEach(function(v,i){
v.dm.remove()
game.h = []
game.um = 0;
game.chessOff = true;
})
for(var i = 0; i <= 13; i++){
game.chess_Board[i] = [];
game.lianz[i] = [];
for(var j = 0; j <= 13; j++){
game.chess_Board[i][j] = 0;
game.lianz[i][j] = 0;
}
}
game.winName.innerText = ' ';
game.winner.style.display = "none";
game.regret_chess.style.background = '';
game.regret_chess.style.color = '';
},
win: function(x,y,c,m,li){
let ms = 1;
var continuity = [];
for(let i = 1; i < 5; i++){
if(game.chess_Board[x + i * m[0]]){
if(game.chess_Board[x + i * m[0]][y + i * m[1]] === c){
continuity.push([x + i * m[0],y + i * m[1]])
ms++;
}else{
break;
}
}
}
for(let i = 1; i < 5; i++){
if( game.chess_Board[x - i * m[0]]){
if( game.chess_Board[x - i * m[0]][y - i * m[1]] === c){
continuity.push([x - i * m[0],y - i * m[1]])
ms++;
}else{
break;
}
}
}
if(ms >= 5){
//alert(c + "赢了")
setTimeout(function(){
console.log(c + "赢了")
},600)
continuity.push([x,y]);
game.chessOff = false;
game.regret_chess.style.background = '#d0cdcd';
game.regret_chess.style.color = '#505050';
let s = 5;
let ls = [270,300,330,360,390];
let ls1 = [390,420,450,480,510];
continuity.forEach(function(value,index){
let time = setInterval(function(){
game.lianz[value[0]][value[1]].style.transform = 'scale(0.9)';
game.lianz[value[0]][value[1]].style.boxShadow = "0px 0px 2px 2px #ffd507";
s--;
s <= 0 ? clearInterval(time) : clearInterval(time);
},ls[index])
let time2 = setInterval(function(){
game.lianz[value[0]][value[1]].style.transform = 'scale(1)';
game.lianz[value[0]][value[1]].style.boxShadow = "0px 0px 2px 2px #ffd507";
s++
s >= 5 ? clearInterval(time2) : clearInterval(time2);
},ls1[index])
})
for(var i = 0; i < game.chess_Board.length; i++){
for(var j = 0; j < game.chess_Board.length; j++){
if(game.chess_Board[i][j] === 0){
game.chess_Board[i][j] = "null";
}
}
}
game.h.forEach(function(value,index){
value.dm.innerText = value.list;
})
li == 1 ? game.winChesee.className = "state-chess Wchess" : game.winChesee.className = "state-chess Bchess";
game.winName.innerText = c + "赢了";
this.winner.style.display = "block";
}
},
};
7984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
