JavaScript+canvas实现五子棋游戏
本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下
效果截图：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>五子棋</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
position: relative;
background-color: #336;
width: 100%;
height: 100%;
}
p{
font-size: 20px;
color: #fff;
text-align: center;
padding-top: 20px;
}
#canvas{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
width: 480px;
height: 480px;
}
</style>
</head>
<body>
<p id="order">该黑棋落子了！</p>
<canvas id="canvas" width="480" height="480"></canvas>
</body>
<script>
var p = document.getElementById("order");
var canvas = document.querySelector("#canvas");
var context = canvas.getContext('2d');
var cw,ch,count=0,
t = canvas.offsetTop,
l = canvas.offsetLeft;
var state = new Array();
~~function setSize(){
window.onresize = arguments.callee;
cw = window.innerWidth;
ch = window.innerHeight;
canvas.width = cw;
canvas.height = ch;
}
function initArray(state){
for(var i=0;i<15;i++){
state[i] = new Array();
for(var j=0;j<15;j++){
state[i][j] = -1;
}
}
}
function init(){
//画棋盘
context.beginPath();
for(var i=1;i<16;i++){
context.moveTo(30*i,30);
context.lineTo(30*i,450);
}
for(var i=1;i<16;i++){
context.moveTo(30,30*i);
context.lineTo(450,30*i);
}
context.stroke();
//画棋点
draw(240,240,3);
draw(120,120,3);
draw(360,120,3);
draw(120,360,3);
draw(360,360,3);
}
//画空心圆
function draw(x,y,r){
context.beginPath();
context.arc(x,y,r,0,Math.PI*2);
context.stroke();
}
function Chess(){};
Chess.prototype = {
//画棋子
drawChess: function(x,y,r){
this.x = x;
this.y = y;
this.r = r;
if(count == 0){
context.fillStyle = "black";
count = 1;
}
else{
context.fillStyle = "white";
count = 0;
}
context.beginPath();
context.arc(x,y,r,0,Math.PI*2);
context.fill();
},
//判断胜负
rule: function(ix,iy,s){
var hc=0,vc=0,rdc=0,luc=0;
//horizontal
for(var i=ix;i<15;i++){
if(state[i][iy] != s){
break;
}
hc++;
}
for(var i=ix-1;i>=0;i--){
if(state[i][iy] != s){
break;
}
hc++;
}
//vertical
for(var j=iy;j<15;j++){
if(state[ix][j] != s){
break;
}
vc++;
}
for(var j=iy-1;j>=0;j--){
if(state[ix][j] != s){
break;
}
vc++;
}
//rightdown
for(var i=ix,j=iy;i<15 && j<15;i++,j++){
if(state[i][j] != s){
break;
}
rdc++;
}
for(var i=ix-1,j=iy-1;i>=0 && j>=0;i--,j--){
if(state[i][j] != s){
break;
}
rdc++;
}
//leftup
for(var i=ix,j=iy;i<15 && j>=0;i++,j--){
if(state[i][j] != s){
break;
}
luc++;
}
for(var i=ix-1,j=iy+1;i>=0 && j<15;i--,j++){
if(state[i][j] != s){
break;
}
luc++;
}
if(hc == 5 || vc == 5 || rdc == 5 || luc == 5){
if(s == 0){
alert("Black Win!");
}
else{
alert("White Win!");
}
//清空画布并初始化画布和棋子状态
context.clearRect(0,0,480,480);
p.innerText = "该黑棋落子了！";
init();
initArray(state);
}
}
}
//点击事件
canvas.onclick = function(e){
var w,h;
w = e.pageX - l;
h = e.pageY - t;
w = parseInt((w+15)/30) * 30;
h = parseInt((h+15)/30) * 30;
var i = w/30-1;
var j = h/30-1;
//棋子冲突检查
if(state[i][j] == -1){
var s = count;
state[i][j] = count;
var chess = new Chess();
chess.drawChess(w,h,14);
draw(w,h,14);
if(s == 0){
p.innerText = "该白棋落子了！";
}
else{
p.innerText = "该黑棋落子了！";
}
chess.rule(i,j,s);
}
}
init();
initArray(state);
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS+canvas五子棋人机对战实现步骤详解
1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this.allChesses = []; // 所有棋子 this.existChesses = [] // 已经落下的棋子 this.winsCount = 0; // 赢法总数 this.wins = []; // 所有赢法统计 this.myWins = []; //我的赢法统计 this.compu
-
JS+Canvas实现五子棋游戏
本文实例为大家分享了JS+Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 布局+样式部分代码 : <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; cursor: pointer; } .btn-wrap { display: flex; flex-direction: row; j
-
js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { margin: 0; padding: 0; } body { margin-to
-
JS+canvas实现的五子棋游戏【人机大战版】
本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css
-
原生JS+Canvas实现五子棋游戏
本文实例为大家分享了JS Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2p
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影
-
利用js canvas实现五子棋游戏
本文实例为大家分享了canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
-
原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *
-
JavaScript+canvas实现五子棋游戏
本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 效果截图: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
-
基于javascript canvas实现五子棋游戏
本文实例为大家分享了基于canvas的五子棋的具体代码,供大家参考,具体内容如下 第一部分:核心类Gobang 属性: this.box = box; // 存放五子棋的容器 this.canvas = null; // 画布 this.ctx = null; this.size = 600; // 棋盘大小 this.cellNum = 20; // 单行棋格数量 this.padding = this.size/this.cellNum; // padding值 this.cellSize
-
原生JavaScript实现简单五子棋游戏
本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 HTML页面 注释都很明确了,大家好好学习. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=d
-
JavaScript canvas实现俄罗斯方块游戏
俄罗斯方块是个很经典的小游戏,也尝试写了一下.不过我想用尽量简洁逻辑清晰的代码实现.不用过多的代码记录下落方块的模型,或者记录每一个下落方块的x,y.想了下面的思路,然后发现这样很写很简明. 俄罗斯方块的7种基本模型: 要记录这些模型有很多种办法,可以用记录其相对位置,记录每一个方块的x,y坐标等.自己想了一种思路来记录这7种模型,很简洁,在写左移,右移,旋转功能的时候也方便使用.下面这个数组记录了这些模型. var cubeArr=[[6,7,12,13],[7,8,11,12],[6,7,1
-
JavaScript实现五子棋游戏的方法详解
本文实例讲述了JavaScript实现五子棋游戏的方法.分享给大家供大家参考,具体如下: 最近半个月一直在看深入的学习JavaScript,里面有很多重点和难点,比如闭包.词法分析.面向对象等.今天给大家分享一个由JavaScript编写的五子棋游戏,主要用到JavaScript的面向对象.事件委托.闭包等知识,还是挺有分量的,正好可以检测学习的成果. 老规矩,先上图,再说话. 效果图: 五子棋素材图: 代码: <!DOCTYPE html> <html> <head>