【汇智学堂】-JS菜鸟版手机小游戏（五子棋游戏之一---准确落下棋子）

<!--菜鸟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菜鸟版手机小游戏（五子棋游戏之一---准确落下棋子）相关推荐

【汇智学堂】-JS菜鸟版过河小游戏（之十---精简代码，完整版）
游戏简介: 这是一款很有难度的解谜小游戏.游戏中,一家六口,包括爸爸,妈妈,两个女儿以及两个孩子,以及一个警察.一个逃犯,这8个人都是准备要过河的. 但游戏的规则是无论成人和小孩过河,每次都只能是两个 ...
【汇智学堂】-JS菜鸟版过河小游戏（之一---角色入场）
游戏简介: 这是一款很有难度的解谜小游戏.游戏中,一家六口,包括爸爸,妈妈,两个女儿以及两个孩子,以及一个警察抓着一个逃犯,这8个人都是准备要过河的. 但游戏的规则是只有爸爸,妈妈以及警察能控制舢板. ...
【汇智学堂】-JS菜鸟版过河小游戏（之五---开船前的控制）
游戏简介: 这是一款很有难度的解谜小游戏.游戏中,一家六口,包括爸爸,妈妈,两个女儿以及两个孩子,以及一个警察.一个逃犯,这8个人都是准备要过河的. 但游戏的规则是无论成人和小孩过河,每次都只能是两个 ...
【汇智学堂】-JS菜鸟版过河小游戏（之四---全部角色左侧上船与左侧下船）
界面代码 <!-- 游戏简介: 这是一款很有难度的解谜小游戏.游戏中,一家六口,包括爸爸,妈妈,两个女儿以及两个孩子,以及一个警察抓着一个逃犯,这8个人都是准备要过河的.但游戏的规则是只有爸爸 ...
【汇智学堂】-JS菜鸟版过河小游戏（之八---补充返程判断）
修改moveship.js: var shipposition1=0;//代表船上的位置1没人,1代表有人,2代表是爸爸妈妈或警察 var shipposition2=0;//代表船上的位置2没人 v ...
【汇智学堂】-JS菜鸟版过河小游戏（之九---修改bug）
修改后的moveship.js如下: /* 作者:雷雷时间:2019-04-18描述:修改BUG:警察不在,爸爸妈妈可以接走匪徒.*/var shipposition1=0;//代表船上的位置1没人, ...
【汇智学堂】-JS菜鸟版过河小游戏（之六---过河）
修改moveship.js: var shipposition1=0;//代表船上的位置1没人 var shipposition2=0;//代表船上的位置2没人 var arr = [1,1,1,1, ...
【汇智学堂】-JS菜鸟版过河小游戏（之七---上船/下船/过河/返程）
修改moveship.js,修改后的内容见下文:: var shipposition1=0;//代表船上的位置1没人,1代表有人,2代表是爸爸妈妈或警察 var shipposition2=0;//代 ...
【汇智学堂】-JS菜鸟版过河小游戏（之二---测试父母上船）
上船界面见下图: 页面修改代码 <div id="div1" class="a1"><img src="img/father.jpg ...
【汇智学堂】-JS菜鸟版过河小游戏（之三---父母左侧下船）
下船代码: else if(div1.style.marginLeft=="210px"){ div1.style.marginLeft=0;shipposition1=0;if( ...

【汇智学堂】-JS菜鸟版手机小游戏（五子棋游戏之一---准确落下棋子）

【汇智学堂】-JS菜鸟版手机小游戏（五子棋游戏之一---准确落下棋子）相关推荐

最新文章

热门文章