js之实现小游戏五子棋 第15周学习

主要是跟着慕课网视频敲代码实现，主要用到了js的知识，其中要特别注意的是字母大小写与标点符号的书写。

首先写一个html文件，然后链接js文件和css文件，只不过这个游戏只是简单的一个网页中的一块，一个网页

就只有游戏这个部分，也没有其他更多的内容，所以大部分的代码都是在js中写然后实现的。

以下是js代码以及自己理解后的注释：

var  dom=document.getElementById('clock');//定义一个变量来获取canvas元素
var ctx=dom.getContext('2d');//获取时钟的上下文才能对他进行操作
var width=ctx.canvas.width;//全局变量
var height=ctx.canvas.height;//全局变量
var r=width/2;//全局变量
var rem=width/200;//全局变量


function drawBackground(){
    ctx.save();//先保存一开始的canvas状态
    ctx.translate(r,r);//坐标本来默认是在画布的左上角0,0，现在用translate将它的原点放到正方形的中心
    ctx.beginPath();//    起始一条路径
    ctx.lineWidth=10*rem;//改变线条的宽度
    ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);//画圆
    ctx.stroke();//画出轨迹

    var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];//定义一个数组存放12个小时数
    ctx.font=18*rem+'px Arial';//定义文本的style
    ctx.textAlign='center';
    ctx.textBaseline='middle';//这两行定义文本居中
    hourNumbers.forEach(function(number,i){
    var rad=2*Math.PI/12*i;//弧度等于2π除以12乘上i
    var x=Math.cos(rad)*(r-30*rem);//x坐标
    var y=Math.sin(rad)*(r-30*rem);//y坐标
    ctx.fillText(number,x,y);
});

    for(var i=0;i<60;i++){
        var rad=2*Math.PI/60*i;
        var x=Math.cos(rad)*(r-18);//x坐标
        var y=Math.sin(rad)*(r-18);//y坐标
        ctx.beginPath();
        if(i%5===0){
            ctx.fillStyle='#000';
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        }//当为小时的时候点时默认黑色
        else{
            ctx.fillStyle='#ccc';
            ctx.arc(x,y,2*rem,0,2*Math.PI,false);
        }//当不是小时点时点为灰色
        ctx.fill();//填充图形
    }
}

    function drawHour(hour,minute){
        ctx.save();//保存画时针之前的状态，画布也没有旋转
        ctx.beginPath();//起始一条路径
        var rad=2*Math.PI/12*hour;//定义弧度
        var mrad=2*Math.PI/12/60*minute;
        ctx.rotate(rad+mrad);//旋转弧度
        ctx.lineWidth=6*rem;//线的宽度
        ctx.lineCap='round';
        ctx.moveTo(0,10*rem);//起始点
        ctx.lineTo(0,-r/2);//终止点
        ctx.stroke();//画线
        ctx.restore();//恢复画时针之前的状态，还要去画分针
    }
        function drawMinute(minute){
        ctx.save();
        ctx.beginPath();//起始一条路径
        var rad=2*Math.PI/60*minute;//定义弧度
        // var srad=2*Math.PI/60/60*second;
        ctx.rotate(rad);//旋转弧度
        ctx.lineWidth= 3*rem;//线的宽度
        ctx.lineCap='round';
        ctx.moveTo(0,10*rem);//起始点
        ctx.lineTo(0,-r+30*rem);//终止点
        ctx.stroke();//画线
        ctx.restore();
    }
        function drawSecond(second){
        ctx.save();
        ctx.beginPath();//起始一条路径
        ctx.fillStyle='red';
        var rad=2*Math.PI/60*second;//定义弧度
        ctx.rotate(rad);//旋转弧度
        ctx.moveTo(-2*rem,20*rem);//起始点
        ctx.lineTo(2*rem,20*rem);//终止点
        ctx.lineTo(1*rem,-r+18*rem);
        ctx.lineTo(-1*rem,-r+18*rem);
        ctx.fill();
        ctx.restore();//画线

    }


    function drawDot(){
        ctx.beginPath();
        ctx.fillStyle='#fff';
        ctx.arc(0,0,3*rem,0,2*Math.PI,false);
        ctx.fill();
    }


function draw(){
    ctx.clearRect(0,0,width,height);
    var now=new Date();//取当前时间
    var hour=now.getHours();
    var minute=now.getMinutes();
    var second=now.getSeconds();
    drawBackground();//重画背景
    drawHour(hour,minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();//重新画点
    ctx.restore();
}


draw();
setInterval(draw,1000);//每秒执行一次draw函数代码

下个星期还需要再学js，以及开始学boostrap.