HTML5 canvas五子棋游戏
2012-06-25 16:00
190 查看
1.html5 canvas cookbook
http://www.html5canvastutorials.com/cookbook/
2.html5 canvas 2D API
http://ishare.iask.sina.com.cn/f/22796319.html
3.五子棋规则
4.五子棋游戏编程思想
基于本五子棋游戏无人机对抗,只是简单的模拟了两个玩家之间的游戏过程。在实际程序中维护了一张关于五子棋黑色棋子和白色棋子状态的地图,用2维数组表示,在每次玩家点击web界面时,判断是否可以落棋,已经判断是否已经有五子连星的状态,如果有,则游戏结束,没有则换对手下棋。
因为只是满足以上需求,所以整个游戏实现起来没有很多技术上的难点,之所以做这个游戏,无非是为了学习html5技术的同时带来一点乐趣而已~
5.源代码
说了以上那么几点,最后还是不例外的把源代码贴出来给大家吧,必然是有不足之处,有幸得到客官您的关注,还请多多交流,板砖别往脸上拍就好~
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" onclick=set_current_player() />Black <input type="radio" name="cur_player" id="white_player" onclick=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 white player_status = 0 // draw map var margin = 30 function Cell(x, y) { this.x = x this.y = y this.draw = function(){ var cat = new Image() if (player_status == 0) cat.src = "black.jpg" else cat.src = "white.jpg" var x_line = parseInt(String(this.x / margin)) var y_line = parseInt(String(this.y / margin)) x_pos = x_line * margin y_pos = y_line * margin context.drawImage(cat, x_pos, y_pos) } } </script> <script> var x_lines = canvas.width / margin var y_lines = canvas.height / margin // store the status of the chesses var 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 map for (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 = 2 context.stroke() //set click event handle canvas.addEventListener("click", click_event_handle, false) function click_event_handle(e) { var cell = get_cur_position(e) // whether can fall the chess var 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] = 1 cell.draw() } else { gobang_table[y_line][x_line] = 2 cell.draw() } // is game over fresh_game_status() // change user to play player_status = 1 - player_status } } function get_cur_position(e) { var x var y if (e.pageX != undefined && e.pageY != undefined) { x = e.pageX y = e.pageY } else { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop } x -= canvas.offsetLeft y -= canvas.offsetTop var cell = new Cell(x, y) return cell } function fresh_game_status() { if (player_status == 0) target_occu = 1 else target_occu = 2 // horizone for(var i = 0; i < y_lines; i++) { var count = 0 for (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 } } } } // vertical for(var i = 0; i < x_lines; i++) { var count = 0 for (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 oblique for(var i = 0; i < y_lines; i++) { var count = 0 for(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 oblique for(var j = 0; j < x_lines; j++) { var count = 0 for(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 function function set_current_player() { if (radio_black.checked == true) player_status = 0 else player_status = 1 } </script>
相关文章推荐
- html5 canvas 五子棋游戏
- HTML5 canvas五子棋游戏
- HTML5 学习笔记15-Canvas图形绘制处理
- ECharts,一款基于HTML5 Canvas的JavaScript图表库
- html5 Canvas裁剪图片
- 自己做个时钟-html5的canvas
- HTML5 Canvas可拖动的弹性大树摇摆动画
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
- 推荐18个基于 HTML5 Canvas 开发的图表库
- JavaScript html5 canvas画布中删除一个块区域的方法
- HTML5 & CSS3 初学者指南 – Canvas使用
- html5 Canvas画图教程(8)―canvas里画曲线之bezierCurveTo方法
- 【html5】HTML5中canvas怎样画虚线
- Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
- HTML5(八)canvas转换之万花筒
- js+html5绘制图片到canvas的方法
- 使用HTML5 Canvas实现马赛克拼图
- HTML5 之 Canvas (一)
- HTML5 Canvas 绘制时钟
- HTML5 Canvas 获得鼠标的移动的坐标