Canvas小游戲——五子棋

  • 時間:2018-09-08 22:40 作者:web秀 來源:web秀 閱讀:264
  • 掃一掃,手機訪問
摘要:前言Canvas API(畫布)是在HTML5中新添加的標簽使用于在網頁實時生成圖像,并且可以操作圖像內容。HTML5的Canvas畫布功能真的很強大,與之對應的還有Svg,都是HTML5的核心之一。想理解更多,來看看Canvas和Svg的比照。canvas小游戲-五子棋HTML主體 簡單 中級

前言

Canvas API(畫布)是在HTML5中新添加的標簽使用于在網頁實時生成圖像,并且可以操作圖像內容。

HTML5的Canvas畫布功能真的很強大,與之對應的還有Svg,都是HTML5的核心之一。想理解更多,來看看Canvas和Svg的比照。

Canvas小游戲——五子棋

canvas小游戲-五子棋

HTML主體





簡單

中級

高級







黑子先行










JS

注釋很詳細,不做過多詳情了,注意贏棋算法,和難易程度算法

var num = 0;//連勝次數
var gameMode = false; // 模式,默認人機
var complexity = 1; // 人機時難度級別,默認簡單
layer.confirm('請選擇模式?', {
btn: ['人機', '人人'],
closeBtn: 0,
}, function(index, layero){
gameMode=false;
$('.choose').animate({
opacity:1
},800)
$('.choose_shade').animate({
opacity:0.6
},800)
layer.close(index);
}, function(index){
gameMode=true;
$('.choose_shade').animate({
opacity:0,
'z-index':-1
},800)
$('.choose').animate({
opacity:0,
'z-index':-1
},800)
});
$('.levl').click(function(){
var index=$(this).index() + 1;
complexity=index;
$('.choose').animate({
opacity:0,
'z-index':-1
})
$('.choose_shade').animate({
opacity:0,
'z-index':-1
})
})
var canWidth = Math.min( 500 , $(window).width()-30);
var canHeight=canWidth;
var chess=document.getElementById('chess');
var context=chess.getContext('2d');
var chess_board=document.getElementById('chess_board');
var context2=chess_board.getContext('2d');
var chess_pointer=document.getElementById('chess_pointer');
var context3=chess_pointer.getContext('2d');
var pointerEnd=[];
// 根據屏幕大小繪制棋盤
$('#chess_pointer').css({
width:canWidth,
height:canHeight
})
$('#chess').css({
width:canWidth,
height:canHeight
})
$('#chess_board').css({
width:canWidth,
height:canHeight
})
$('.checkerboard').css({
width:canWidth,
height:canHeight
})
var utilW=canWidth/15;
var utilH=utilW;
var me;
var chessBoard;
var over;
//贏法數組
var wins=[];
//贏法統計數組
var myWin=[];
var computerWin=[];
for(var i=0;i<15;i++){
wins[i]=[];
for(var j=0;j<15;j++){
wins[i][j]=[];
}
}
//贏法種類索引
var count=0;
//贏法種類數組
// 橫線贏法
for(var i=0;i<15;i++){
for(var j=0;j<11;j++){
for(var k=0;k<5;k++){
wins[i][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][i][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++;
}
}
var init=function(){
context.clearRect(0,0,450,450);
context3.clearRect(0,0,450,450);
me=true;
chessBoard=[];
over=false;
for(var i=0;i<15;i++){
chessBoard[i]=[];
for(var j=0;j<15;j++){
chessBoard[i][j]=0;
}
}
for(var i=0;i myWin[i]=0;
computerWin[i]=0;
}
}
init()
context2.strokeStyle="#dfdfdf";
var img=new Image();
img.src="images/logo.png";
img.onload=function(){
drawChessBoard();
}
var drawChessBoard=function(){
for(var i=0;i<15;i++){
context2.moveTo(15+i*30,15);
context2.lineTo(15+i*30,435);
context2.stroke();
context2.moveTo(15,15+i*30);
context2.lineTo(435,15+i*30);
context2.stroke();
}
}
var oneStep=function(i,j,me){
context3.clearRect(0,0,450,450);

context.beginPath();
context.arc(15+i*30,15+j*30,13,0, 2*Math.PI);
context.closePath();
var gradient=context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
if(me){
gradient.addColorStop(0,"#0a0a0a");
gradient.addColorStop(1,"#636766");
}else{
gradient.addColorStop(0,"#C7C7C7");
gradient.addColorStop(1,"#f9f9f9");
}
context.fillStyle=gradient;
context.fill();
context3.beginPath();
context3.arc(15+i*30,15+j*30,15,0, 2*Math.PI);
context3.closePath();
context3.fillStyle="#FF3366";
context3.fill();
}
chess.onclick=function(e){
e.preventDefault();
var x=e.offsetX;
var y=e.offsetY;
moveLater(x,y);

}
var moveLater=function(x,y){
if(over){
return;
}
var i=Math.floor(x/utilW);
var j=Math.floor(y/utilW);
if(chessBoard[i][j]==0){
oneStep(i,j,me);
if(gameMode){
if (me) {
chessBoard[i][j] = 1;
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
myWin[k]++;
computerWin[k] = 6;
if (myWin[k] == 5) {
over = true;
layer.open({
title: '黑子贏了',
content: '親,再來一局試試!',
btn: ['嗯', '不要'],
yes: function(index){
init();
layer.close(index);
}
});
}
}
}
} else {
chessBoard[i][j] = 2;
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
computerWin[k]++;
myWin[k] = 6;
if (computerWin[k] == 5) {
over = true;
layer.open({
title: '白子贏了',
content: '親,再來一局試試!',
btn: ['嗯', '不要'],
yes: function(index){
// location.reload();
init();
layer.close(index);
}
});
}
}
}
}
me = !me;
}else{
chessBoard[i][j]=1;
for(var k=0;k if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;
if(myWin[k]==5){
over=true;
$('.black').css({'z-index':2})
layer.open({
title: '你贏了',
content: '親,人家是你的了!',
btn: ['要', '不要'],
yes: function(index){
// location.reload();
num++;
if(num>=3){
$('#tips').html('常勝將軍,已連勝'+num+'局');
}else{
$('#tips').html('你已連勝'+num+'局');
}
init();
layer.close(index);
}
});
}
}
}
if(!over){
$('#tips').html('電腦走棋,走著瞧');
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[i]=[];
computerScore[i]=[];
for(var j=0;j<15;j++){
myScore[i][j]=0;
computerScore[i][j]=0;
}
}
for(var i=0;i<15;i++){
for(var j=0;j<15;j++){
if(chessBoard[i][j]==0){
for(var k=0;k if(wins[i][j][k]){
if(complexity==1){
if(myWin[k]==1){
myScore[i][j]+=200;
}else if(myWin[k]==2){
myScore[i][j]+=400;
}else if(myWin[k]==3){
myScore[i][j]+=2000;
}else if(myWin[k]==4){
myScore[i][j]+=10000;
}
if(computerWin[k]==1){
computerScore[i][j]+=100;
}else if(computerWin[k]==2){
computerScore[i][j]+=300;
}else if(computerWin[k]==3){
computerScore[i][j]+=600;
}else if(computerWin[k]==4){
computerScore[i][j]+=14000;
}
}else if(complexity==2){
if(myWin[k]==1){
myScore[i][j]+=200;
}else if(myWin[k]==2){
myScore[i][j]+=400;
}else if(myWin[k]==3){
myScore[i][j]+=2000;
}else if(myWin[k]==4){
myScore[i][j]+=10000;
}
if(computerWin[k]==1){
computerScore[i][j]+=300;
}else if(computerWin[k]==2){
computerScore[i][j]+=500;
}else if(computerWin[k]==3){
computerScore[i][j]+=2100;
}else if(computerWin[k]==4){
computerScore[i][j]+=15000;
}
}else if(complexity==3){
if(myWin[k]==1){
myScore[i][j]+=200;
}else if(myWin[k]==2){
myScore[i][j]+=400;
}else if(myWin[k]==3){
myScore[i][j]+=2000;
}else if(myWin[k]==4){
myScore[i][j]+=10000;
}
if(computerWin[k]==1){
computerScore[i][j]+=210;
}else if(computerWin[k]==2){
computerScore[i][j]+=850;
}else if(computerWin[k]==3){
computerScore[i][j]+=3000;
}else if(computerWin[k]==4){
computerScore[i][j]+=80000;
}
}

}
}
if(myScore[i][j]>max){
max=myScore[i][j];
u=i;
v=j;
}else if(myScore[i][j]==max){
if(computerScore[i][j]>computerScore[u][v]){
u=i;
v=j;
}
}
if(computerScore[i][j]>max){
max=computerScore[i][j];
u=i;
v=j;
}else if(computerScore[i][j]==max){
if(myScore[i][j]>myScore[u][v]){
u=i;
v=j;
}
}
}
}
}
oneStep(u,v,false);
chessBoard[u][v]=2;
for(var k=0;k if(wins[u][v][k]){
computerWin[k]++;
myWin[k]=6;
if(computerWin[k]==5){
over=true;
layer.open({
title: '你輸了',
content: '不要放棄,再來一局吧!',
btn: ['嗯', '不要'],
yes: function(index){
// location.reload();
num=0;
init();
layer.close(index);
}
});
}
}
}
if(!over){
me=!me;
if(num==0){
$('#tips').html('該你走棋了,我看好你');
}
}
}

CSS

body,html{
margin:0;
padding:0;
position: relative;
width: 100%;
height: 100%;
}
.chess-content{
padding-top: 48px;
}
canvas{
display: block;
margin:0px auto;
box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
}
h3{
margin:0;
}
.clear{
clear: both;
}
.checkerboard{
margin:0 auto;
}
#chess{
position: absolute;
z-index: 2;
}
#chess_board{
position: absolute;
z-index: 1;
}
#chess_pointer{
position: absolute;
z-index: 0;
}
.player{
max-width: 500px;
margin:0 auto;
}
.player .baiqi{
float: left;
}
.player .baiqi{
width:15%;
}
.player .tips{
float: left;
width: 70%;
text-align: center;
font-size: 18px;
}
.player .heiqi{
width:15%;
float: right;
}
.player div img{
width: 100%;
}
.choose{
position: absolute;
z-index: 10;
width: 80%;
max-width: 500px;
left: 50%;
border: 1px solid #dfdfdf;
border-radius: 5px;
opacity: 0;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
}
.choose img{
width: 100%;
}
.choose_shade{
width: 100%;
height: 100%;
position: absolute;
z-index: 9;
background: #000;
opacity: 0.6;
margin:0;
}
.choose-lv{
position: absolute;
top: 28%;
width: 100%;
}
.choose-lv div{
margin: 19px 0px 10px 52%;
width: 40%;
text-align: center;
border-radius: 5px;
border: 1px solid #F2F2F2;
color: #fff;
text-shadow: 10px 7px 17px;
font-weight: bold;
line-height: 35px;
z-index: 1;
position: relative;
background: rgba(0, 0, 0, 0.18);
cursor: pointer;
}
.black{
float: right;
position: absolute;
z-index: 1;
width: 40%;
max-width: 400px;
bottom:0;
}
.black img{
width: 100%;
}
.b_img3,.b_img4{
right:0;
}
.tips{
line-height: 75px;
}

需要源碼的同學,點擊下方“理解更多”!更多資源敬請關注!

  • 全部評論(0)
最新發布的資訊信息
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
【系統環境|軟件環境】5分鐘談前臺面試,小伙伴都驚呆了(2019-12-04 14:23)
【系統環境|軟件環境】node中的path模塊(2019-12-04 14:23)
手機二維碼手機訪問領取大禮包
返回頂部
3d开机号查询