HTML5 canvas五子棋游戏

1.html5 canvas cookbook

http://www.html5canvastutorials.com/cookbook/

2.html5 canvas 2D API

http://ishare.iask.sina.com.cn/f/22796319.html

3.五子棋规则

无禁手玩法：黑先白后，谁先连五谁胜
禁手玩法：黑先行棋，黑棋只能走冲四活三胜，黑双活三禁手 双冲四禁手 四三三禁手 四四三禁手 六连长连禁手；白后手，白棋无任何禁手，还可以抓黑棋的禁手点取胜
职业规则玩法：三手交换五手两打，黑棋有禁手，意思是下到第三手棋执白方有权选择交换下黑棋或者继续行棋，下到第五手时执黑方给出两个打点让执白方选择去掉一个打点下剩下的打点。
五子棋 第一子下天元 第三手确定一个开局，正规开局26种 直指13种 斜指13种，有些开局即便在职业规则下已经必胜了，或者必败了，还有一些平衡局 黑优局 白优局，职业规则的交换就限制了开局方（一开始执黑方）开必胜或着开黑优会被另一方交换掉，所以职业规则下 大家基本都选择平衡局来行棋

4.五子棋游戏编程思想

基于本五子棋游戏无人机对抗，只是简单的模拟了两个玩家之间的游戏过程。在实际程序中维护了一张关于五子棋黑色棋子和白色棋子状态的地图，用2维数组表示，在每次玩家点击web界面时，判断是否可以落棋，已经判断是否已经有五子连星的状态，如果有，则游戏结束，没有则换对手下棋。

因为只是满足以上需求，所以整个游戏实现起来没有很多技术上的难点，之所以做这个游戏，无非是为了学习html5技术的同时带来一点乐趣而已~

5.源代码

说了以上那么几点，最后还是不例外的把源代码贴出来给大家吧，必然是有不足之处，有幸得到客官您的关注，还请多多交流，板砖别往脸上拍就好~

<div id="title" style="background-color: blue; color: white">
<h2>GOBANG Chess</h2>
</div>
<input type="radio" name="cur_player" id="black_player" οnclick=set_current_player() />Black
<input type="radio" name="cur_player" id="white_player" οnclick=set_current_player() />White
<img src="black.jpg" />
<div id="canvas_div">
<canvas id="c" width="600" height="600"></canvas>
</div><script>var canvas = document.getElementById("c")var context = canvas.getContext("2d")var radio_black = document.getElementById("black_player")var radio_white = document.getElementById("white_player")radio_black.checked = true// player status: 0 black; 1 whiteplayer_status = 0// draw mapvar margin = 30function Cell(x, y){this.x = xthis.y = ythis.draw = function(){var cat = new Image()if (player_status == 0)cat.src = "black.jpg"elsecat.src = "white.jpg"var x_line = parseInt(String(this.x / margin))var y_line = parseInt(String(this.y / margin))x_pos = x_line * marginy_pos = y_line * margincontext.drawImage(cat, x_pos, y_pos)}}
</script>
<script>var x_lines = canvas.width / marginvar y_lines = canvas.height / margin// store the status of the chessesvar gobang_table = new Array(y_lines)for (var index = 0; index < y_lines; index++)gobang_table[index] = new Array(x_lines)for (var index = 0; index < y_lines; index++)for(var x_index = 0; x_index < x_lines; x_index++)gobang_table[index][x_index] = 0// draw the mapfor (var index = 0; index <= x_lines; index++){context.moveTo(index*margin, 0)context.lineTo(index*margin, canvas.height)}for (var index = 0; index <= y_lines; index++){context.moveTo(0, index*margin)context.lineTo(canvas.width, index*margin)}context.strokeStyle = "#0000ff"context.lineWidth = 2context.stroke()//set click event handlecanvas.addEventListener("click", click_event_handle, false)function click_event_handle(e){var cell = get_cur_position(e)// whether can fall the chessvar x_line = parseInt(String(cell.x / margin))var y_line = parseInt(String(cell.y / margin))if (gobang_table[y_line][x_line] != 0){alert(y_line)alert(x_line)alert("exist")return}else{if (player_status == 0){gobang_table[y_line][x_line] = 1cell.draw()}else{gobang_table[y_line][x_line] = 2cell.draw()}// is game overfresh_game_status()// change user to playplayer_status = 1 - player_status}}function get_cur_position(e){var xvar yif (e.pageX != undefined && e.pageY != undefined){x = e.pageXy = e.pageY}else{x = e.clientX + document.body.scrollLeft +document.documentElement.scrollLefty = e.clientY + document.body.scrollTop +document.documentElement.scrollTop}x -= canvas.offsetLefty -= canvas.offsetTopvar cell = new Cell(x, y)return cell}function fresh_game_status(){if (player_status == 0)target_occu = 1elsetarget_occu = 2// horizonefor(var i = 0; i < y_lines; i++){var count = 0for (var j = 0; j < x_lines; j++){if (gobang_table[i][j] == target_occu){count++if (count >= 5){notification = (target_occu == 1)?"black win":"white win"alert(notification)return}}}}// verticalfor(var i = 0; i < x_lines; i++){var count = 0for (var j = 0; j < y_lines; j++){if (gobang_table[j][i] == target_occu){count++if (count >= 5){notification = (target_occu == 1)?"black win":"white win"alert(notification)return}}}}// left obliquefor(var i = 0; i < y_lines; i++){var count = 0for(var j = 0, k = i; j < x_lines; j++){if (gobang_table[k][j] == target_occu){count++k++if (count >= 5){notification = (target_occu == 1)?"black win":"white win"alert(notification)return}}}}  // right obliquefor(var j = 0; j < x_lines; j++){var count = 0for(var i = 0, k  = j; i < y_lines; i++){if (gobang_table[i][k] == target_occu){count++k--if (count >= 5){notification = (target_occu == 1)?"black win":"white win"alert(notification)return}}}}  }// end of functionfunction set_current_player(){if (radio_black.checked == true)player_status = 0elseplayer_status = 1  }</script>

HTML5 canvas五子棋游戏相关推荐

基于html5的五子棋游戏
用html5+js+css编写一款简单好玩的网页五子棋游戏 <html> <head> <meta charset="utf-8" /> < ...
Html5 Canvas斗地主游戏
过完年来公司,没什么事,主管说研究下html5 游戏,然后主管就给了一个斗地主的demo,随后我就开始看代码, 现在我看了html5以及canvas相关知识和斗地主的demo后,自己用demo上的素材 ...
HTML5——canvas制作游戏2048
笔者刚学HTML5不久,这是笔者第一次用HTML5制作游戏,希望大家多多提点意见. 废话不多说,先来一张效果图: 笔者只做了游戏主体,至于那些得分啊,历史最高分之类的,都没有去实现.那些都是比较简单的 ...
canvas 五子棋游戏
效果代码 <!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="U ...
html5 canvas 扫雷游戏
最近由于工作一直比较忙,所以没什么闲暇时间来打理博客,趁着中秋放假的时间,宅在家里实在不知道干啥, 于是还是干起了自己的老本行,写写小游戏,进了新公司,发现自己写的这些小游戏在别人大牛面前确实不值一提 ...
HTML5仿五子棋游戏源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5 Canvas小游戏
知识点 canvas JavaScript 开发准备代码获取 $ wget https://labfile.oss.aliyuncs.com/courses/361/simple_canvas_ga ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

HTML5 canvas五子棋游戏

HTML5 canvas五子棋游戏相关推荐

最新文章

热门文章