js 五子棋 BUG 可不少，小心哈 :)

最新推荐文章于 2024-11-02 15:25:13 发布

iteye_7730

最新推荐文章于 2024-11-02 15:25:13 发布

阅读量194

点赞数

分类专栏： javascript 文章标签： prototype J# 算法 XHTML HTML

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为了练习js 写五子棋。。。算法上有点问题，，

1：必须只能水平，或垂直点，五个子，必须连继 :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五子棋</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style type="text/css">

 #gobang{
  width:460px;
  height:480px;
  background:#fff;
 }
</style>
</head>

<body>
<div id="gobang">
</div>

<!--html xhtml-->

<script type="text/javascript">
  //主类
  function Gobang(){
   this.x;
   this.y;
   this.hand;
   this.count = 0;
   this.color;
  }


  //创建棋盘
  Gobang.prototype.createBoard = function(){
    var table = document.createElement("table");
	table.border = "1px";

   //18行
   for(var i = 0 ; i < 18;i++){
	 var tr = table.insertRow(i);
	 //18列
	 for(var j = 0 ; j < 18;j++){
	   var td = tr.insertCell(j);
	   td.border = "1px";
       td.width = "20px";
	   td.height = "20px";

       var x;
	   var y;

	   if(i < 10){
	    x = "0"+i;
	   }else{
	    x = i;
	   }

	   if(j < 10){
	    y = "0"+j;
	   }else{
	   y = j;
	   }


	   //创建空白图片对象;;
	   var pic = document.createElement("<img id="+ y +""+ x +" src='0.jpg' />")
       pic.attachEvent("onclick",this.point);
	   pic.style.width = "20px";
	   pic.style.height = "20px";
	   td.appendChild(pic);

	 }
   }
    document.getElementById("gobang").appendChild(table);
  }



  //落子..??
 Gobang.prototype.point = function(){
  var p = event.srcElement;
  var pic = document.getElementById(p.id);
   if(pic.src.indexOf("0.jpg",0)== -1){
       alert("此处己落子，请重新选择");
	   return;
   }
  var map;
   if(this.hand == 1){
     map = "1.gif";
	 this.hand = 2;
   }else{
     map = "2.gif";
	 this.hand = 1;
   }

   pic.src = map;


   //======================================
   //判断羸输;
   var yy = ""+pic.id.substring(2,4);
   var xx = ""+pic.id.substring(0,2);

   //说来奇怪，
   //原来 08 parseInt(08)---结果是0
   //原来 09 parseInt(09)---结果是0
   //网上搜了结果  parseFloat()正常
   var count = 0;
   //=======================================================
   //x加方向判断
   //向右点
   var x = parseFloat(xx);
   for(var i = 1 ; i < 5;i++){
   x = parseFloat(x) + 1;


   if(x < 10){
    x = "0"+x;
   }

   var p = document.getElementById(x+yy);
   if(p == null){
    break;
   }
   if(p.src.substring(59,65) == pic.src.substring(59,65)){
     count++;
   }
   }//for
   //清空
   if(count == 4){
    alert("赢了");
   }
   //
   //===========================================================
   //x减方向判断
   //向左点
   count = 0;
   var x_ = parseFloat(xx);
   for(var i = 1 ; i < 5;i++){
   x_ = parseFloat(x_) - 1;


   if(x_ < 10){
    x_ = "0"+x_;
   }
   var p_ = document.getElementById(x_+yy);
    if(p == null){
    break;
   }
   if(p_.src.substring(59,65) == pic.src.substring(59,65)){
     count++;
   }
   }//for
   //清空
   if(count == 4){
    alert("赢了");
   }

   //
   //===========================================================

   //y减方向判断
   //向下
   count = 0;
   var y = parseFloat(yy);
   for(var i = 1 ; i < 5;i++){
   y = parseFloat(y) - 1;


   if(y < 10){
    y = "0"+y;
   }
   var p = document.getElementById(xx+y);
   if(p == null){
    break;
   }
   if(p.src.substring(59,65) == pic.src.substring(59,65)){
     count++;
   }
   }//for
   //清空


   if(count == 4){
    alert("赢了");
   }


  //================================
  //   
  //y减方向判断
  //向上
   count = 0;
   var y_ = parseFloat(yy);
   for(var i = 1 ; i < 5;i++){
   y_ = parseFloat(y_) + 1;


   if(y_ < 10){
    y_ = "0"+y_;
   }
   var p = document.getElementById(xx+y_);

    if(p == null){
    break;
   }
   if(p.src.substring(59,65) == pic.src.substring(59,65)){
     count++;
   }
   }//for
   //清空


   //===========================================================
   //对角线下

   count = 0;
   var y__ = parseFloat(yy);
   var x__ = parseFloat(xx);

   for(var i = 1 ; i < 5;i++){
   y__ = parseFloat(y__) + 1;
   x__ = parseFloat(x__) + 1;

   if(y__ < 10){
    y__ = "0"+y__;
   }

   if(x__ < 10){
    x__ = "0"+x__;
   }

   var p = document.getElementById(x__+y__);

    if(p == null){
    break;
   }
   if(p.src.substring(59,65) == pic.src.substring(59,65)){
     count++;
   }
   alert(count);
   }//for
   //清空


//========================================


   if(count == 4){
    alert("赢了");
   }
  //
  //================================
 }

 var gobang = new Gobang();
 gobang.createBoard();
</script>
</body>
</html>