这一套学习目标
1、了解引用js库,js类的的创建,引用
2、把基本的圆形,方形封装的js库中。然后进行使用,最后是希望自己能封装一个 扑克牌图形库
好了,先对我的开篇的代码进行改进
首页为index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>这个是扑克游戏制作过程</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<script src="js/startGame.js"></script>
</body>
</html>
入口就是startGame.js。
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);
//上面步骤是关键的,下面随便画个图
ctx.lineWidth = 5; //选择画笔
ctx.strokeStyle = "red"; //选择颜料
ctx.moveTo(10,10); //...
ctx.lineTo(150,50); //...
ctx.lineTo(10,50); //画出轮廓
ctx.stroke();
以上说明可以在startGame.js里进行画图了,但是并没有封装啊,下面要进行一个改进了。实现封装一个圆形,然后在startGame.js里建立对象的形式进行画图
所以在js文件夹下新建一个yuanxingClass.js。
然后在index.html添加`:
<script src="js/yuanxingClass.js"></script>
yuanxingClass.js的代码是这样的:
class Yuanxing{
constructor(sx,sy,rad,fillStyle){
this.sx=sx;
this.sy=sy;
this.rad=rad;
this.fillStyle=fillStyle;
}
draw(){
ctx.fillStyle=this.fillStyle;
ctx.beginPath();
ctx.arc(this.sx,this.sy,this.rad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
}
圆形的类就创建好了。在startGame.js使用了,现在startGame.js编程这样了。
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);
var yx=new Yuanxing(100,100,30,"rgb(0,255,0)");
yx.draw();
其实就是new一下就可以了。
然后就想了,我还想实现一下这个功能,就是小圆从x=100的位置移动到x=200的位置,于是我就这样做了。
..//前面省略
var yx=new Yuanxing(100,100,30,"rgb(0,255,0)");
yx.draw();
yx.sx=200;
alert(yx.sx);
yx.draw();
那么问题就来了。问题一、移动是瞬间移动到200位置的
问题二、起始的那个小圆还存在,没有消除掉
所以想要动态的玩,还需要加强代码,增加时间以及渲染的步骤。