<!--菜鸟H5游戏入门-五子棋游戏-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>雷雷的五子棋游戏</title>
</head>
<body>
<!--画板-->
<!--<h4 style="position: relative;left:100px">雷雷的五子棋游戏</h4>-->
<canvas id="canvas" style="background-color: black;" onclick="cnvs_getClickme(event)">您当前的浏览器版本不支持 </canvas>
<script type="text/javascript">
//颜色变换
var color=0;
//初始化棋子各位置
var position = new Array();
for(var i=0;i<16;i++){
position[i]=new Array();
for(var j=0;j<12;j++){
position[i][j]="0";
}
}
init();
//点击鼠标的事件
function cnvs_getClickme(e){
x=e.clientX;
y=e.clientY;
//alert(x);
x1=parseInt((x-30)/30);
y1=parseInt((y-30)/30);
x11=30+x1*30;
y11=30+y1*30;
if(x<30 || x>360 ||y<30 || y>490){
return;
}
//如果没有棋子,落下棋子
if(position[y1][x1]==0){
if(color==0){
createArc(x11,y11,color);
color=1;
position[y1][x1]=1;
}
else if(color==1){
createArc(x11,y11,color);
color=0;
position[y1][x1]=1;
}
}
}
//初始化棋盘
function init(){
var canvas = document.getElementById('canvas');
canvas.width = 360;
canvas.height = 580;
for(var i=0;i<16;i++){
createLine(30,30+i*30);
}
for(var i=0;i<12;i++){
createLine(30+i*30,30+15*30);
}
}
//定义绘制棋子的函数
function createArc(x,y,z){
var context = canvas.getContext('2d');
//context.fillStyle="#00FFFF";
if(z==1){
context.fillStyle="#FF0000";
}
if(z==0){
context.fillStyle="#FFFFFF";
}
context.beginPath();
context.arc(x,y,15,Math.PI*2,0,true);
context.closePath();
context.fill();
context.stroke();
}
//定义绘制棋盘直线的函数
function createLine(x,y){
// 拿到上下文
var context = canvas.getContext('2d');
context.strokeStyle = 'white';
context.beginPath();
if(x==30){
context.moveTo(x, y);
context.lineTo(330, y);
}
if(y==480){
context.moveTo(x, 30);
context.lineTo(x, y);
}
context.closePath();
context.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
}
</script>
</body>
</html>
【汇智学堂】-JS菜鸟版手机小游戏(五子棋游戏之一---准确落下棋子)
最新推荐文章于 2022-06-13 12:28:51 发布