HTML5小游戏~五指棋
2016-12-18 21:46
211 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五指棋</title>
<style type="text/css">
body{margin:0 ;
padding: 0;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600" onclick="clickEvent(event)" > </canvas>
<button onclick="reStart();">重置</button>
<button onclick="back();">悔棋</button>
<div style="text-align:center ;">
<p>盗版：<a href="百度.html" target="_blank">百度</a></p>
</div>
</body>
<script type="text/javascript">
/*获得canvas元数来绘制上下文*/
var c=document.getElementById("canvas");
/*获取一个2维的上下文*/
var cxt=c.getContext("2d");
var data=[];//每次点击的数据
var clickCount=0;//点击次数
var canvasWidth=600;//画布大小
var interval=20;//间隔
var isEnd=false;//判断当前局是否结束
var colorW="#666";
var colorH="#000";
drw_table();
function drw_table(){
for(var i=0;i<canvasWidth;){
/*绘制竖线*/
cxt.beginPath();
cxt.lineWidth="1";
cxt.strokeStyle="red";//红色路径
cxt.moveTo(i,0);
cxt.lineTo(i,canvasWidth);
cxt.stroke();//进行绘制
/*绘制横线*/
cxt.beginPath();
cxt.lineWidth="1";
cxt.strokeStyle="red";//红色路径
cxt.moveTo(0,i);
cxt.lineTo(canvasWidth,i);
cxt.stroke();//进行绘制
i=i+interval;
}
}
function clickEvent(e){
//加入当前局没有结束
if(!isEnd){
x1=e.clientX;//事件发生时事件相当于可视文档区域中的x坐标
y1=e.clientY;//事件发生时事件相当于可视文档区域中的y坐标
for(var i=0;i<canvasWidth;){
if(x1>=i&&x1<i+interval/2){
x1=i;
break;
}
if(x1>i+interval/2&&x1<i+interval){
x1=i+interval;
break;
}
i=i+interval;
}
for(var i=0;i<canvasWidth;){
if(y1>=i&&y1<i+interval/2){
y1=i;
break;
}
if(y1>i+interval/2&&y1<i+interval){
y1=i+interval;
break;
}
i=i+interval;
}
}
if(!validateData(x1,y1)){
var isTrue=true;
if(clickCount%2==0){
cxt.fillStyle=colorW;
}else{
cxt.fillStyle=colorH;
isTrue=false;
}
cxt.beginPath();
cxt.arc(x1,y1,interval/2.0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
data.push({'x':x1,'y':y1,'isTrue':isTrue});
clickCount++;
if(isOver(x1,y1,isTrue)){
isEnd = true;
if (isTrue) {
alert('灰棋赢了');
}else{
alert('黑棋赢了');
}
}
}else{
// alert("当前点已经存在");
}
}
}
//重置
function reStart(){
cxt.clearRect(0,0,canvasWidth,canvasWidth);
drw_table();
data=[];
clickCount=0;
isEnd=false;
}
//退回
function back(){
cxt.clearRect(0,0,canvasWidth,canvasWidth);
drw_table();
clickCount--;
data.pop();//出栈
isEnd=false;
for(var i=0;i<clickCount;i++){
cxt.beginPath();
if(i%2==0){
cxt.fillStyle=colorW;//填充颜色
}else{
cxt.fillStyle=colorH;
}
cxt.arc(data[i].x,data[i].y,Math.PI*2,true);//context.arc(x,y,r,sAngle,eAngle,true|false); true为顺时针，false为逆时针
cxt.fill();
}
}
//验证是否存在当前点了
function validateData(x,y){
for(var i=0;i<data.length;i++){
if(data[i].x==x&&data[i].y==y){
return true;
}
}
return false;
}
//验证是否存在当前点了
function validateDataIsTrue(x,y,isTrue){
for(var i=0;i<data.length;i++){
if(data[i].x==x&&data[i].y==y&&data[i].isTure==isTrue){
return true;
}
}
return false;
}
function isOver(x1,y1,isTrue){
x2 =x3 =x4 =x5 =x1;
y2 =y3 =y4 =y5 =y1;
//判断当前点的横向
if(x1>=5*interval){
x2=x1-5*interval;
}else{
x2=0;
}
lineCount=0;
for(var i=0;i<10;i++){
tempx=x2+interval*i;
if(validateDataIsTrue(tempx,y2,isTrue)){
lineCount++;
if(lineCount==5){
break;
};
}else{
lineCount=0;
}
}
if(lineCount>=5){
return true;
}
//判断当前点的y轴
if (y1>=5*interval) {
y3 = y1-5*interval;
}else{
y3=0;
}
lineCount = 0;
for (var i = 0; i < 10; i++) {
tempy = y3
4000
+interval*i;
if (validateDataIsTrue(x3,tempy,isTrue)) {
lineCount++;
if (lineCount==5) {
break;
};
}else{
lineCount=0;
}
}
if (lineCount>=5) {
return true;
}
//判断当前点的反斜向
x4 = x1-5*interval;
y4 = y1-5*interval;
lineCount = 0;
for (var i = 0; i < 10; i++) {
tempy = y4+interval*i;
tempx = x4+interval*i;
if (validateDataIsTrue(tempx,tempy,isTrue)) {
lineCount++;
if (lineCount==5) {
break;
};
}else{
lineCount=0;
}
}
if (lineCount>=5) {
return true;
}
//判断当前点的反斜向
x5 = x1-5*interval;
y5 = y1+5*interval;
lineCount = 0;
for (var i = 0; i < 10; i++) {
tempy = y5-interval*i;
tempx = x5+interval*i;
if (validateDataIsTrue(tempx,tempy,isTrue)) {
lineCount++;
if (lineCount==5) {
break;
};
}else{
lineCount=0;
}
}
if (lineCount>=5) {
return true;
}
}
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title>五指棋</title>
<style type="text/css">
body{margin:0 ;
padding: 0;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600" onclick="clickEvent(event)" > </canvas>
<button onclick="reStart();">重置</button>
<button onclick="back();">悔棋</button>
<div style="text-align:center ;">
<p>盗版：<a href="百度.html" target="_blank">百度</a></p>
</div>
</body>
<script type="text/javascript">
/*获得canvas元数来绘制上下文*/
var c=document.getElementById("canvas");
/*获取一个2维的上下文*/
var cxt=c.getContext("2d");
var data=[];//每次点击的数据
var clickCount=0;//点击次数
var canvasWidth=600;//画布大小
var interval=20;//间隔
var isEnd=false;//判断当前局是否结束
var colorW="#666";
var colorH="#000";
drw_table();
function drw_table(){
for(var i=0;i<canvasWidth;){
/*绘制竖线*/
cxt.beginPath();
cxt.lineWidth="1";
cxt.strokeStyle="red";//红色路径
cxt.moveTo(i,0);
cxt.lineTo(i,canvasWidth);
cxt.stroke();//进行绘制
/*绘制横线*/
cxt.beginPath();
cxt.lineWidth="1";
cxt.strokeStyle="red";//红色路径
cxt.moveTo(0,i);
cxt.lineTo(canvasWidth,i);
cxt.stroke();//进行绘制
i=i+interval;
}
}
function clickEvent(e){
//加入当前局没有结束
if(!isEnd){
x1=e.clientX;//事件发生时事件相当于可视文档区域中的x坐标
y1=e.clientY;//事件发生时事件相当于可视文档区域中的y坐标
for(var i=0;i<canvasWidth;){
if(x1>=i&&x1<i+interval/2){
x1=i;
break;
}
if(x1>i+interval/2&&x1<i+interval){
x1=i+interval;
break;
}
i=i+interval;
}
for(var i=0;i<canvasWidth;){
if(y1>=i&&y1<i+interval/2){
y1=i;
break;
}
if(y1>i+interval/2&&y1<i+interval){
y1=i+interval;
break;
}
i=i+interval;
}
}
if(!validateData(x1,y1)){
var isTrue=true;
if(clickCount%2==0){
cxt.fillStyle=colorW;
}else{
cxt.fillStyle=colorH;
isTrue=false;
}
cxt.beginPath();
cxt.arc(x1,y1,interval/2.0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
data.push({'x':x1,'y':y1,'isTrue':isTrue});
clickCount++;
if(isOver(x1,y1,isTrue)){
isEnd = true;
if (isTrue) {
alert('灰棋赢了');
}else{
alert('黑棋赢了');
}
}
}else{
// alert("当前点已经存在");
}
}
}
//重置
function reStart(){
cxt.clearRect(0,0,canvasWidth,canvasWidth);
drw_table();
data=[];
clickCount=0;
isEnd=false;
}
//退回
function back(){
cxt.clearRect(0,0,canvasWidth,canvasWidth);
drw_table();
clickCount--;
data.pop();//出栈
isEnd=false;
for(var i=0;i<clickCount;i++){
cxt.beginPath();
if(i%2==0){
cxt.fillStyle=colorW;//填充颜色
}else{
cxt.fillStyle=colorH;
}
cxt.arc(data[i].x,data[i].y,Math.PI*2,true);//context.arc(x,y,r,sAngle,eAngle,true|false); true为顺时针，false为逆时针
cxt.fill();
}
}
//验证是否存在当前点了
function validateData(x,y){
for(var i=0;i<data.length;i++){
if(data[i].x==x&&data[i].y==y){
return true;
}
}
return false;
}
//验证是否存在当前点了
function validateDataIsTrue(x,y,isTrue){
for(var i=0;i<data.length;i++){
if(data[i].x==x&&data[i].y==y&&data[i].isTure==isTrue){
return true;
}
}
return false;
}
function isOver(x1,y1,isTrue){
x2 =x3 =x4 =x5 =x1;
y2 =y3 =y4 =y5 =y1;
//判断当前点的横向
if(x1>=5*interval){
x2=x1-5*interval;
}else{
x2=0;
}
lineCount=0;
for(var i=0;i<10;i++){
tempx=x2+interval*i;
if(validateDataIsTrue(tempx,y2,isTrue)){
lineCount++;
if(lineCount==5){
break;
};
}else{
lineCount=0;
}
}
if(lineCount>=5){
return true;
}
//判断当前点的y轴
if (y1>=5*interval) {
y3 = y1-5*interval;
}else{
y3=0;
}
lineCount = 0;
for (var i = 0; i < 10; i++) {
tempy = y3
4000
+interval*i;
if (validateDataIsTrue(x3,tempy,isTrue)) {
lineCount++;
if (lineCount==5) {
break;
};
}else{
lineCount=0;
}
}
if (lineCount>=5) {
return true;
}
//判断当前点的反斜向
x4 = x1-5*interval;
y4 = y1-5*interval;
lineCount = 0;
for (var i = 0; i < 10; i++) {
tempy = y4+interval*i;
tempx = x4+interval*i;
if (validateDataIsTrue(tempx,tempy,isTrue)) {
lineCount++;
if (lineCount==5) {
break;
};
}else{
lineCount=0;
}
}
if (lineCount>=5) {
return true;
}
//判断当前点的反斜向
x5 = x1-5*interval;
y5 = y1+5*interval;
lineCount = 0;
for (var i = 0; i < 10; i++) {
tempy = y5-interval*i;
tempx = x5+interval*i;
if (validateDataIsTrue(tempx,tempy,isTrue)) {
lineCount++;
if (lineCount==5) {
break;
};
}else{
lineCount=0;
}
}
if (lineCount>=5) {
return true;
}
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【示例代码】超萌的休闲HTML5小游戏——打地鼠
- HTML5小游戏 -- 格罗斯方块
- 砸金蛋html5小游戏设计总结
- 【示例代码】超萌休闲HTML5小游戏—打地鼠
- 2014下半年部分Html5小游戏记录
- HTML5小游戏《智力大拼图》发布，挑战你的思维风暴
- HTML5小游戏转换成mobile应用
- 经典HTML5小游戏 支持各种浏览器 （围住神经猫）
- 个人用Canvas开发HTML5小游戏
- HTML5小游戏《智力大拼图》发布，挑战你的思维风暴
- html5小游戏基础知识
- 微信HTML5小游戏之打地鼠
- HTML5小游戏【是男人就下一百层】UI美化版
- 21款网页版html5小游戏源码
- 微信HTML5小游戏之推箱子
- 我的第一款Html5小游戏《接水果》，防android平台一款应用
- HTML5小游戏之见缝插针
- 微信HTML5小游戏之飞机大战
- Html5小游戏之变大的小球
- html5小游戏Untangle