五子棋游戏 canvas 事件 边界检测澳门新葡亰赌995577:

context.arc(x,y,15,0,Math.PI*2);
context.fill();
context.stroke();
}

十二:使用quadraticCurveTo绘制弯线,穿过控制点

break;
}
else{

(5)window.onload=function(){//圆周运动

else{
break;
}
}
}
return
num;//返回一行右边同色的个数
}

//使用两鞥波个角
        /*var canvas=document.getElementById(“canvas”),
        context=canvas.getContext(‘2d’),
        ball=new Ball(),
        angleX=0,
        angleY=0,
        range=50,
        centerX=canvas.width/2,
        centerY=canvas.height/2,
        xspeed=0.07,
        yspeed=0.11;
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame,context);
            context.clearRect(0,0,canvas.width,canvas.height);
            ball.x=centerX+Math.sin(angleX)*range;
            ball.y=centerY+Math.sin(angleY)*range;
            angleX+=xspeed;
            angleY+=yspeed;
            ball.draw(context);
            }());*/

//上下判断
var upDown=up(x,y,color,num);
upDown+=down(x,y,color,num);

}

break;
}
else if(y-i<0){
break;
}

var
rect2={x:Math.random()*canvas.width,y:Math.random()*canvas.height};

//向左边判断
function left(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x-i<0){ //判断边界问题
不到边界就可以一直判断

 

if(lightRight>=4 || upDown>=4
||leftDownToRightUp>=4|| leftUpToRightDwon>=4)
{

 

drawChess(dx,dy,color[step%2]);

 

<title>改进五子棋</title>
<style type=”text/css”>
body{
background:#6b6b6b;
}
#canvas{
display:block;
margin:20px auto;
background:white;
}
#box{
position:absolute;
left:100px;
top:200px;
}
</style>
</head>
<body>
<canvas id=”canvas” width=”450px”
height=”450px”></canvas>
<script
type=”text/javascript”>

十: 使用鼠标绘制路径

//向右边判断
function right(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x+i>13){ //判断边界问题
不到边界就可以一直判断

绘制圆球

//左上右下
var
leftUpToRightDwon=leftUp(x,y,color,num);

(4)window.onload=function(){

//左上判断
function leftUp(x,y,color,num)
{

十七:速度向量,双轴上的圆运动

//向下判断
function down(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(y+i>13){ //判断边界问题
不到边界就可以一直判断

var captureMouse=function(element){
    var mouse={x:0,y:0};
    element.addEventListener(‘mousemove’,function(event){
        var x,y;
        if(event.pageX||event.pageY){
            x=event.pageX;y=event.pageY;
            }
        else{
          
 x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
          
 y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
            }
        x-=element.offsetLeft;
        y-=element.offsetTop;
        
        mouse.x=x;
        mouse.y=y;
        },false);
        return mouse;
    };

}
drawLine();

(6) window.onload=function(){//椭圆运动

else{
break;
}
}
}
return
num;//返回一行右边同色的个数
}

二十一: 键盘的左右键控制圆的运动

//右下判断
function
rightDown(x,y,color,num)
{

}

//map初始化
function init(){
context.strokeStyle=”black”;
step=0;
context.strokeStyle=”black”;
for(var i=0;i<14;i++){
map[i]=[];
for(var j=0;j<14;j++){
map[i][j]=0;
}
}
}

var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
c1={x:150,y:150,radius:0},c2={x:150,y:150,radius:50},
gradient=context.createRadialGradient(c1.x,c1.y,c1.radius,c2.x,c2.y,c2.radius);
gradient.addColorStop(0,"#ffffff");//为渐变色添加颜色
//gradient.addColorStop(0.5,"#0000ff")
gradient.addColorStop(1,"#ff0000");
context.fillStyle=gradient;
context.fillRect(0,0,100,100);//绘制并填充一个矩形

canvas.addEventListener(“click”,function(e){
var
dx=Math.round(e.offsetX/30)*30;//瞄准位置
只能在(30*x,30*y)位置上
var
dy=Math.round(e.offsetY/30)*30;//瞄准位置
var
reX=(dx/30)-1;//通过坐标位置映射棋盘数组中的位置
var reY=(dy/30)-1;
console.log(reX+’,’+reY);

}

//右上判断
function rightUp(x,y,color,num)
{

context.fillStyle=”#ff0000″;
context.fillRect(rect2.x-2,rect2.y-2,4,4);
var dx=rect1.x-rect2.x,
dy=rect1.y-rect2.y,
dist=Math.sqrt(dx*dx+dy*dy);
log.value=”distance:”+dist;

if(map[x+i][y+i]==color)
{
num++;
}

function getRadio(d){//根据角度获得弧度,
                return d*Math.PI/180;
                },

else{

十一,使用quadraticCurveTo绘制弯线,不会穿过控制点

for(var i=1;i<5;i++)
{
if(y-i<0){ //判断边界问题
不到边界就可以一直判断

三.获得元素坐标

//划线
function drawLine()
{
for(var i=1;i<15;i++){
context.moveTo(30*i,30);
context.lineTo(30*i,420);
context.moveTo(30,30*i);
context.lineTo(420,30*i);

 十四:色值渐变色:线性渐变

alert(color+”方胜利”);
location.reload(true);//刷新页面
}

 1 var canvas=document.getElementById("canvas"),
 2 context=canvas.getContext("2d"),
 3 ball=new Ball(),
 4 vx=1,vy=1;
 5 ball.x=50,ball.y=100;
 6 
 7 (function drawFrame(){
 8     window.requestAnimationFrame(drawFrame,canvas);
 9     context.clearRect(0,0,canvas.width,canvas.height);
10     ball.x+=vx;
11     ball.y+=vy;
12     ball.draw(context);
13     }());

//canvas下棋监听器

十六:绘制canvas中的图片

</script>
</body>
</html>

if(!window.requestAnimationFrame){
    window.requestAnimationFrame=(window.webkitRequestAnimationFrame||
                                window.mozRequestAnimationFrame||
                                window.oRequestAnimationFrame||
                                window.msRequestionFrame||
                                function(callback){return
window.setTimeout(callback,100/60);}
                                );
    }

//判断胜负
/*先判断一条线上的连续颜色>=5
包括左边和右边
1.当x+i<0 跳出循环
从当前位置向左判断
2.从当前位置向左判断
3.右边颜色一样才num++
4.颜色一样才num++
5.当 x-i<0 跳出循环

(3)window.onload=function(){

//画棋子
function drawChess(x,y,color){
context.beginPath();
context.fillStyle=color;

var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
mouse=captureMouse(canvas);
function onMouseMove(){
    context.lineTo(mouse.x,mouse.y);
    context.stroke();
    }
canvas.addEventListener('mousedown',function(){
    context.beginPath();
    context.moveTo(mouse.x,mouse.y);
    canvas.addEventListener('mousemove',onMouseMove,false);
    },false);
    canvas.addEventListener('mouseup',function(){
        canvas.removeEventListener('mousemove',onMouseMove,false)
        },false);

//左下判断
function
leftDown(x,y,color,num)
{

 1 var canvas=document.getElementById("canvas"),
 2 context=canvas.getContext("2d"),
 3 ball=new Ball(),
 4 vx=0,ax=0,ay=0,vy=0;
 5 
 6 ball.x=canvas.width/2;
 7 ball.y=canvas.height/2;
 8 
 9 window.addEventListener('keydown',function(event){
10     if(event.keyCode==37){//左
11         ax=-0.1;
12         }
13     else if(event.keyCode==39){//右
14         ax=0.1;
15         }
16     else if(event.keyCode==38){ay=-0.1;}//上
17     else if(event.keyCode==40){ay=0.1;}//下
18     },false);
19     
20     
21 window.addEventListener('keyup',function(){
22     ax=0;
23     ay=0;
24     },false);
25 
26 (function drawFrame(){
27     window.requestAnimationFrame(drawFrame,canvas);
28     context.clearRect(0,0,canvas.width,canvas.height);
29     
30     vx+=ax;vy+=ay;
31     ball.x+=vx;
32     ball.y+=vy;
33     ball.draw(context);
34     }());

//左右判断
var
lightRight=right(x,y,color,num);//返回右边同色的个数

    var canvas=document.getElementById(“canvas”),
    context=canvas.getContext(‘2d’);
    ball=new Ball(),
    angle=0,
    centerX=canvas.width/2,
    centerY=canvas.height/2,
    radius=50,
    speed=0.05;
    
    (function drawFrame(){
        window.requestAnimationFrame(drawFrame,canvas);
        context.clearRect(0,0,canvas.width,canvas.height);
        ball.x=centerX+Math.sin(angle)*radius;
        ball.y=centerY+Math.cos(angle)*radius;
        angle+=speed;
        ball.draw(context);
        }());}

else{
break;
}
}
}
return
num;//返回一行右边同色的个数
}

var canvas=document.getElementById("canvas"),
context=canvas.getContext("2d"),
ball=new Ball(),
angle=45,speed=1;
ball.x=50,ball.y=100;

(function drawFrame(){
    window.requestAnimationFrame(drawFrame,canvas);
    context.clearRect(0,0,canvas.width,canvas.height);

    var radians=angle*Math.PI/180,
    vx=Math.cos(radians)*speed,vy=Math.sin(radians)*speed;
    ball.x+=vx;ball.y+=vy;
    ball.draw(context);
    }())

var num=0;
var result=0;//记录满足条件的棋子数

function getDdegree(r){//根据弧度获得角度
                return r*180/Math.PI;
   二.循环动画方法的浏览器判断             }

else{
break;
}
}
}
return
num;//返回一行右边同色的个数
}

var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
pt1={x:0,y:0},pt2={x:100,y:100},
gradient=context.createLinearGradient(pt1.x,pt2.y,pt2.x,pt2.y);
gradient.addColorStop(0,"#ffffff");//为渐变色添加颜色
gradient.addColorStop(0.5,"#0000ff")
gradient.addColorStop(1,"#ff0000");
context.fillStyle=gradient;
context.fillRect(0,0,100,100);//绘制并填充一个矩

break;
}
else if(x+i>13){
break;
}
else{
if(map[x+i][y-i]==color)
{
num++;
}

五//可以将一个颜色的数据值转换成十六进制,也可以将十六进制转换成数据  
 
var parseColor=function(color,toNumber){
    if(toNumber===true){
        if(typeof color===’number’)
            return (color|0);
        if(typeof color===’string’&&color[0]===’#’)
            color=color.slice(1);
        return window.parseInt(color,16);
        }
    else{
        if(typeof color===’number’)
            color=’#’+(‘00000’+(color|0).toString(16)).substr(-6);
        return color;
        }
    };

leftUpToRightDwon+=rightDown(x,y,color,num);

 1 var canvas=document.getElementById("canvas"),
 2 context=canvas.getContext("2d"),
 3 mouse=captureMouse(canvas),
 4 arrow=new Arrow(),
 5 speed=3;
 6 (function drawFrame(){
 7     window.requestAnimationFrame(drawFrame,canvas);
 8     context.clearRect(0,0,canvas.width,canvas.height);
 9     var dx=mouse.x-arrow.x,
10     dy=mouse.y-arrow.y,
11     angle=Math.atan2(dy,dx),
12     vx=Math.cos(angle)*speed,
13     vy=Math.sin(angle)*speed;
14     
15     arrow.rotation=angle;arrow.x+=vx;arrow.y+=vy;
16     arrow.draw(context);
17     }());

}
context.stroke();

}

for(var i=1;i<5;i++)
{
if(x-i<0){ //判断边界问题
不到边界就可以一直判断