HTML5 黑白五子棋5则范文

第一篇：HTML5 黑白五子棋

html5 黑白棋，与之前的canvas游戏不一样，五子棋的游戏思路，canvas不需要每次都清楚渲染一遍，而是在原来的基础上绘制。由于没有时间限制，因此不需要动画主循环。五子棋的棋子采用两者png 图片，用 canvas的 image 接口绘制棋子。

写这个主要是实现下二维数组的使用。游戏很简单，没有AI对弈。自己和自己玩。

算法介绍

准备一个二维数组map，通过二维数组构造一个点。点的值若为0 则表示空，为1 则表示有白棋，为2 则有黑棋站位。

捕捉鼠标事件，如果是白棋则讲map的点填上相应的表示。通过当前的点，循环左右上下，左上右下等八个方向，如果有连续的 1或者2 则表示白棋或黑棋赢。

需要注意是如何理解两个循环变量的循环。代码如下

html

19

织带厂http:///，玻璃托盘http:///

js

var canvas= document.getElementById('canvas');var ctn= canvas.getContext('2d');var isWhite = true;// 是否轮到白棋走 var isWell= false;// 是否赢了var imgBlack= new Image();imgBlack.src = 'img/b.png';var imgWhite= new Image();imgWhite.src = 'img/w.png';var chessData = [];//var chessData = new Array(15)init();//初始化棋盘function init(){for(var i = 0;i <= 640;i += 40){//绘制横线ctn.beginPath();ctn.moveTo(0, i);ctn.lineTo(640, i)ctn.closePath();ctn.stroke();//绘制竖线ctn.beginPath();ctn.moveTo(i, 0);ctn.lineTo(i, 640);ctn.closePath();ctn.stroke();}//初始化棋盘数组for(var x = 0;x < 15;x++){chessData[x] = [];for(var y = 0;y < 15;y++){chessData[x][y] = 0;}} } //有些控制

function play(e){

43var x = parseInt((e.clientX20)/ 40);

46if(chessData[x][y]!= 0){

47alert('你不能在这个位置下棋');

48return;

49}

51if(isWell){

52alert('游戏已经结束，请刷新重玩！');

53return;

54}

56if(isWhite){

57drawChess(1, x, y);

58judge(1, x, y);

59isWhite = false;

60} else {

61drawChess(2, x, y);

62judge(2, x, y);

63isWhite = true;

64}

}

//绘制单个棋子

function drawChess(chess, x, y){

71if(x >= 0 && x < 15 && y >= 0 && y < 15){

72if(chess == 1){

73ctn.drawImage(imgWhite, x * 40 + 20, y * 40 + 20);74chessData[x][y] = 1;

75} else {

76ctn.drawImage(imgBlack, x * 40 + 20, y * 40 + 20)77chessData[x][y] = 2;

78}

79}

}

//输的算法

function judge(chess, x, y){

84var hz = 0;

85var ve = 0;

86var nw = 0;

87var ne = 0;

88//判断左右

89for(var i = x;i > 0;i--){

90if(chessData[i][y]!= chess){

91break;

92}

93hz++;

94}

95for(var i = x + 1;i < 15;i++){

96if(chessData[i][y]!= chess){

97break;

98}

99hz++;

100}

101//判断上下

102for(var i = y;i > 0;i--){

103if(chessData[x][i]!= chess){

104break;

105}

106ve++

107}

108for(var i = y + 1;i < 15;i++){

109if(chessData[x][i]!= chess){

110break;

111}

112ve++

113}

114//判断左上右下

115for(var i = x, j = y;i > 0, j > 0;i--, j--){

116if(chessData[i][j]!= chess){

117break;

118}

119nw++;

120}

121for(var i = x + 1, j = y + 1;i < 15, j < 15;i++, j++){ 122if(chessData[i][j]!= chess){

123break;

124}

125nw++;

126}

127//判断右上左下

128for(var i = x, j = y;i >= 0, j < 15;i--, j++){ 129if(chessData[i][j]!= chess){

130

131

132

133

134break;}ne++;}for(var i = x + 1, j = y-1;i < 15, j >= 0;i++, j--){ 135if(chessData[i][j]!= chess){

136break;

137}

138ne++;

139}

140

141if(hz >= 5 || ve >= 5 || nw >= 5 || ne >= 5){

142if(chess == 1){

143alert('白棋赢了');

144} else {

145alert('黑棋赢了');

146}

147}

}

第二篇：HTML学习心得

HTML学习心得

一、HTML简介

全写： HyperText Mark-up Language，译名： 超文件注标式语言（译名之一），简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

HTML 是在 SGML 定义下的一个描述性语言，SGML(Standard Generalized Markup Language,标准通用标记语言)，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源，早在Web发明之前SGML就已存在。HTML 不是程式语言，如 C++ 和 Java 之类，它只是标示语言，基本上你只要明白了各种标记的用法便算学懂了 HTML，它的格式非常简单，只是由文字及标记组合而成，在编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然以专业的网页编辑软件为佳。

1.优点

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：1 简易性，HTML版本升级采用超集方式，从而更加灵活方便。2 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。3平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

二、HTML标记

任何标记皆由“<”与“>”围住，如

标记名与小于号之间不能留有空白字符。某些标记要加上参数，某些则不必。如 Hello 参数只可加于起始标记中。在起始标记名前加上符号“/”便是其终结标记，如 ，标记字母大小写皆可。

1.标记种类

标记种类分为两种：围堵标记和空标记。围堵标记是以起始标记及终结标记将文字围住，令其达到预期显示效果。也就是说，标记是成对出现的，例如 Creation of Webpage，其中 便称为围堵标记。它以起始标记及终结标记标示文字 Creation of webpage，令其显示成粗体，两者失其一都会发生错误显示。空标记是指标记单独出现，只有起始标记没有终结标记。例如
，它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对 HTML 没有影响。

2.标记类型

标记类型按用途可以分为：文件标记(如：、)、排版标记(如：

、
、