下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】自己写的HTML5Canvas+Javascript五
看到一些曾经只会灌水的网友，在学习了前端之后，已经能写出下载量几千几万的脚本、样式，帮助大众，成为受欢迎的人，感觉满羡慕的。我也想学会前端技术，变得受欢迎呀。于是心血来潮，开始学习前端知识，并写下了这个小练习。基本思路是这样的：使用Canvas绘制棋盘、棋子。用二维数组保存棋盘状态。设置一个flag，用以标识落子顺序。点击时，在数组中检测当前点击位置是否存在棋子，若存在，则不落子；如游戏已结束，亦不落子。落子时，更新数组，并将当前落子所在的行、列、左上-右下列、左下-右上列四个方向的棋盘状态写入到一维数组中，用以判断新落子是否形成了五子连珠。若形成了五子连珠，提示胜利，并结束游戏；反之，则交换顺序，继续进行游戏。效果图：
代码如下：
1
<!DOCTYPE
html>
2
<html
lang="zh-CN">
3
<meta
charset="utf-8">
4
<head><title>五子棋</title></head>
5
<body>
6
<canvas
id="myCanvas"
width="560"
height="560"
>
7
您的浏览器不支持
HTML5
canvas
标签。</canvas>
<br/>
8
<button
id="reset"
onclick="controller.init(ctx)">重置</button>
9
</body>
10
<script>
11
var
controller
=
{
12
round:true,
13
color:"black",
14
whiteTable:new
Array(),
15
blackTable:new
Array(),
16
row:0,
17
col:0,
18
over:false,
19
trans:function()
{
20
this.round
=
!this.round;
21
if
(!this.round)
{
22
this.blackTable[this.row][this.col]
=
1;
23
this.ifWin(this.blackTable)
24
this.color
=
"white";
25
}
26
else
{
27
this.whiteTable[this.row][this.col]
=
1;
28
this.ifWin(this.whiteTable)
29
this.color
=
"black";
30
}
31
},
32
ifWin:function(table)
{
33
var
arr1
=
new
Array();
34
var
arr2
=
new
Array();
35
var
arr3
=
new
Array();
36
var
arr4
=
new
Array();
37
var
n
=
0;
38
for(x
=
0;
x<=
lineNums;
x++)
{
39
for(y
=
0;
y
<=
lineNums;
y++)
40
{
41
var
x1
=
this.row
-
n;
42
var
x2
=
this.row
+
n;
43
var
y1
=
this.col
-
n;
44
var
y2
=
this.col
+
n;
45
if(y
==
this.col)
{
46
arr1[x]
=
table[x][y];
47
}
48
if(x
==
this.row)
{
49
arr2[y]
=
table[x][y];
50
}
51
}
52
if(this.inBounds(x1)
&&
this.inBounds(y2))
{
53
arr3[x1]
=
table[x1][y2];
54
}
55
if(this.inBounds(x1)
&&
this.inBounds(y1))
{
56
arr4[x1]
=
table[x1][y1];
57
}
58
if(this.inBounds(x2)
&&
this.inBounds(y1))
{
59
arr3[x2]
=
table[x2][y1];
60
}
61
if(this.inBounds(x2)
&&
this.inBounds(y2))
{
62
arr4[x2]
=
table[x2][y2];
63
}
64
n
=
n
+
1;
65
}
66
this.getSum(arr1,
this.row);
67
this.getSum(arr2,
this.col);
68
this.getSum(arr3,
this.row);
69
this.getSum(arr4,
this.row);
70
},
71
inBounds:function(i)
{
72
if(i>=0
&&
i<=15){
73
return
true;
74
}
75
else{
76
return
false;
77
}
78
},
79
getSum:function(array,
pos)
{
80
num
=
5;
81
posr
=
pos
+
1;
82
while(num
>
0){
83
if(array[pos]>0
&&
this.inBounds(pos))
{
84
num
=
num
-
1;
85
pos
=
pos
-
1;
86
}
87
else{
88
break;
89
}
90
}
91
while(num
>
0){
92
if(array[posr]>0
&&
this.inBounds(pos))
{
93
num
=
num
-
1;
94
posr
=
posr
+
1;
95
}
96
else
{
97
break;
98
}
99
}100
if(num
==
0)
{101
this.over
=
true;102
this.gameOver();103
}
104
},105
exist:function(x,
y)
{106
this.row
=
x
/
ratio;107
this.col
=
y
/
ratio;108
var
nums
=
this.whiteTable[this.row][this.col]
+
this.blackTable[this.row][this.col];109
if(
nums
>
0
{110
return
true;111
}112
else{113
return
false;114
}115
},116
gameOver:function()
{117
ctx.font="30px
Arial";118
ctx.fillStyle
=
"#FF0000";119
if(this.round)
{120
ctx.fillText("白棋胜利",240,240);121
}122
else
{123
ctx.fillText("黑棋胜利",240,240);124
}125
},126
init:function()
{127
this.round
=
true;128
this.color
=
"black";129
this.over
=
false;130
this.drawBoard();131
for(i
=
0;
i<=
lineNums;
i++)
{
132
this.whiteTable[i]=new
Array();133
this.blackTable[i]=new
Array();134
for(n
=
0;
n
<=
lineNums;
n++)
{
135
this.whiteTable[i][n]=0;
136
this.blackTable[i][n]=0;137
}
138
}
139
},140
drawBoard:function()
{141
ctx.beginPath();142
ctx.clearRect(0,0,width,width);143
ctx.fillStyle
=
"#FFBB00";144
ctx.fillRect(0,0,width,width);145
for(var
i
=
1;
i
<
(lineNums
-
1);
i++)
{146
ctx.moveTo(i
*
ratio,
0);147
ctx.lineTo(i
*
ratio,
width);148
ctx.stroke();149
ctx.moveTo(0,
i
*
ratio);150
ctx.lineTo(width,
i
*
ratio);151
ctx.stroke();152
}153
},154
drawPiece:function(posX,
posY)
{155
ctx.beginPath();156
ctx.arc(posX,
posY,
ratio/2,
0,
2*Math.PI);157
ctx.fillStyle
=
this.color;158
ctx.fill();159
ctx.stroke();
160
}161
};
162
//获取点击位置163
function
getMousePos(canvas,
evt)
{
164
var
rect
=
canvas.getBoundingClientRect();
165
return
{
166
x:
evt.clientX
-
rect.left
*
(canvas.width
/
rect.width),167
y:
evt.clientY
-
rect.top
*
(canvas.height
/
rect.height)168
}169
}170
171
function
getNode(pos)
{172
return
((pos
/
ratio).toFixed())
*
ratio;173
}174
1
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 学习贯彻全国旅游发展大会精神心得体会
- 高考物理大一轮复习 课后限时集训1 描述运动的基本概念-人教版高三全册物理试题
- 高考物理一轮复习 分层限时跟踪练28 电磁感应中的电路与图像问题-人教版高三物理试题
- 肠内营养腹泻的最佳证据知晓调查
- 公司样板工程评选办法
- 2024届湖南省“一起考”大联考高三下学期3月模拟考试（模拟一）语文（一）答案
- 2024届湖南省常德市高三下学期3月模拟考试英语试题卷
- 第6章 数据与统计图表 数学浙教版七年级下册综合素质评价(含答案)
- 广西壮族自治区贵港市平南县2023-2024学年七年级下学期期中数学试题
- 企业绿色转型专题分析报告
- 形势与政策智慧树知到期末考试答案章节答案2024年西北师范大学
- 20K607 防排烟及暖通防火设计审查与安装
- 毕业设计外文文献-基于 Vue.js 的后台单页应用管理系统的研究与实现
- 急性胰腺炎诊治指南(2023年)详解
- 环境因素清单及环境因素识别和评价表（经典实用）
- C50高强度混凝土联锁块作业指导书
- 电销员工规章制度_电销部门管理制度
- （精编）建设工程工程量清单计算规范(2013)浙江省补充规定(一)
- 芝加哥建筑学派.ppt
- 陶粒板节点标准化做法
- 针刺伤根因分析鱼骨图
评论
0/150
提交评论