HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
2016-03-11 18:11
811 查看
1.离线存储：1)存储到本地，可以离线浏览网页 2）不用cookie(安全性不太高，来回交互的数据量比较大)
2.语音识别
3.图像识别
4.HTML5游戏
5.CSS3的强大之处：动画和各种选择器
6.Stoke：画线
fill:填充
7.Canvas相关的代码：
运行效果：
8.画图片是比较耗资源的。
9.JavaScript事件处理机制、事件监听、闭包
清屏
示例代码：（小球移动）
运行效果：
注意：当按下W.S、A.D这几个键后，小球会随之上下左右移动
10.OOP：面向对象编程
11.最初的坦克大战版本：
12.坦克版本2之自己的坦克（实现移动、方向转换功能）
示例代码：（TankBattle.html）
JS文件（TankBattle.js）
运行效果：
当按下键盘上的D键后，向右移动的效果
注：学习视频来自传智播客公开课
2.语音识别
3.图像识别
4.HTML5游戏
5.CSS3的强大之处：动画和各种选择器
6.Stoke：画线
fill:填充
7.Canvas相关的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画图</title>
</head>
<body>
<canvas id="cav" width="500px" height="500px" style="border:1px solid red">
</canvas>
<script type="text/javascript">
var canvas1=document.getElementById("cav");
var ctx=canvas1.getContext("2d");
// 画线
ctx.moveTo(20,20); //设置起始点的位置
ctx.lineTo(20,100); //结束点的位置
ctx.stroke(); //画线
// 三角形--路径
ctx.beginPath(); //开启一个新的路径
ctx.moveTo(40,20); //设置起始点
ctx.lineTo(40,100);
ctx.lineTo(80,100);
ctx.closePath(); //闭合路径
ctx.fill(); //填充，要把路径闭合以后再填充
//ctx.stroke(); //空心的三角形，没有内容填充
// 画矩形
ctx.strokeRect(100,20,100,100); //画出无填充矩形
ctx.fillStyle="#fdd"; //改变填充矩形的填充色，要改变填充色的时候就调用画笔的fillStyle属性就可以了
ctx.fillRect(250,30,50,50); //画出填充矩形，默认填充色为黑色
// 画圆
ctx.beginPath();
ctx.arc(350,80,45,0,360,false); //注意最后一个参数可以不写或者为false，如果为true的话就会出问题
ctx.closePath();
ctx.stroke(); //路径闭合之后再画线
// 绘制填充的圆
ctx.beginPath();
ctx.arc(50,200,45,0,360,false); //注意最后一个参数可以不写或者为false，如果为true的话就会出问题
ctx.closePath();
ctx.stroke(); //路径闭合之后再画线
ctx.fillStyle="yellow"; //注意要先设置颜色再填充，因为已经填充好了的圆是没法修改颜色的
ctx.fill();
// 画图片
var img=new Image(); //创建图片对象
img.src="images/daiyu.jpg"; //给定路径
//要先加载成功图片再画图片的位置
img.onload=function(){
ctx.drawImage(img,100,180,200,150); //注意此处的img不能忘，忘了就显示不出来
}
// 在画布上写字
var text="林黛玉";
ctx.fillStyle="#330033"; //设置字体颜色
ctx.font="30px 微软雅黑"; //设置大小和字体
ctx.fillText(text,350,300); //填写字体的位置
</script>
</body>
</html>运行效果：
8.画图片是比较耗资源的。
9.JavaScript事件处理机制、事件监听、闭包
清屏
示例代码：（小球移动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript事件处理机制</title>
</head>
<!--当键盘按下之后，调用test方法-->
<body onkeydown="test()">
<h1>小球上下左右移动</h1>
<canvas id="test" width="400px" height="400px" style="background-color: black;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("test");
var cxt=canvas.getContext("2d");
var BallX=30;
var BallY=30;
drawBall();
function drawBall(){
// 画出红色小球
cxt.beginPath();
cxt.fillStyle="red";
cxt.arc(BallX,BallY,10,0,360);
cxt.closePath(); //画图时一定要开始和闭合路径，防止出现一些奇怪的问题
cxt.fill();
}
// 用键盘上的W,S,A,D这四个键来代表上下左右
function test(){
//如何知道用户按下的是哪个键呢？通过event.KeyCode来判断键盘的ASCII值
var code=event.keyCode;
switch (code){
case 87: //W键
BallY--;
// alert("向上");
break;
case 68: //D键
BallX++;
// alert("向右");
break;
case 83: //S键
BallY++;
// alert("向下");
break;
case 65: //A键
BallX--;
// alert("向左");
break;
}
cxt.clearRect(0,0,400,400); //清空画布
drawBall(); //画布清空后重新绘制小球的位置
}
</script>
</body>
</html>运行效果：
注意：当按下W.S、A.D这几个键后，小球会随之上下左右移动
10.OOP：面向对象编程
11.最初的坦克大战版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坦克大战游戏</title>
</head>
<body>
<h1 style="background-color: ">坦克大战练习 </h1>
<canvas id="tankBackgr" width="400px" height="400px" style="background-color: black;"></canvas>
<script type="text/javascript">
//得到画布
var canvas=document.getElementById("tankBackgr");
//得到上下文，相当于画笔
var ctx=canvas.getContext("2d");
// 我的坦克myTank(等所有的横纵坐标给定了以后，再替换成下面的两个参数)
var myTankX=30;
var myTankY=30;
// 画出自己的坦克
ctx.fillStyle="#DED284"; //给定矩形的颜色
ctx.fillRect(myTankX,myTankY,5,30); //画出左边的矩形
ctx.fillRect(myTankX+15,myTankY,5,30); //画出右侧的矩形
//画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
// 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）
ctx.fillRect(myTankX+6,myTankY+5,8,20);
ctx.fillStyle="#FFFA7E"; //圆的填充颜色
ctx.arc(myTankX+10,myTankY+15,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
ctx.fill(); //填充圆
// 画出炮筒的线条
ctx.beginPath();
ctx.moveTo(myTankX+10,myTankY+15); //线条的起始位置为圆心的位置
ctx.lineTo(myTankX+10,myTankY); //线条的结束位置
ctx.strokeStyle="#FFFA7E";
ctx.lineWidth=2; //设置线条的宽度（粗细）
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>12.坦克版本2之自己的坦克（实现移动、方向转换功能）
示例代码：（TankBattle.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坦克大战游戏</title>
</head>
<body onkeydown="getCommand();">
<h1>坦克大战练习 </h1>
<canvas id="tankBg" width="400px" height="400px" style="background-color: black;"></canvas>
<!--把js文件引入-->
<script type="text/javascript" src="js/TankBattle.js"></script>
<script type="text/javascript">
var canvas=document.getElementById("tankBg"); //得到画布
var ctx=canvas.getContext("2d"); //得到上下文，相当于画笔
var myTank=new MyTank(30,30,0); //用0,1,2,3,4分别表示上、右、下、左,此处的0位向上
drawTank(myTank);
//接受用户的键盘输入
function getCommand(){
var code=event.keyCode; //通过event.KeyCode来判断键盘的ASCII值
switch (code){
case 87: //W键
myTank.moveUp();
break;
case 68: //D键
myTank.moveRight();
break;
case 83: //S键
myTank.moveDown();
break;
case 65: //A键
myTank.moveLeft();
break;
}
//注意是ctx,而不是cxt，千万别写错了
ctx.clearRect(0,0,400,400); //清空画布,这一步是不能少的
drawTank(myTank); //画布清空后重新绘制坦克的位置
}
</script>
</body>
</html>JS文件（TankBattle.js）
//x表示坦克的横坐标，y表示坦克的纵坐标，dirc表示移动方向
function MyTank(x,y,direc){
this.x=x;
this.y=y;
this.speed=1;
this.direc=direc;
//向上移动
this.moveUp=function(){
this.y-=this.speed;
this.direc=0
}
//向右移动
this.moveRight=function(){
this.x+=this.speed;
this.direc=1;
}
//向下移动
this.moveDown=function(){
this.y+=this.speed;
this.direc=2;
}
//向左移动
this.moveLeft=function(){
this.x-=this.speed;
this.direc=3;
}
}
// 画坦克
function drawTank(tank){
//考虑方向
switch (tank.direc){
case 0:
case 2:
ctx.fillStyle="#DED284"; //给定矩形的颜色
ctx.fillRect(tank.x,tank.y,5,30); //画出左边的矩形
ctx.fillRect(tank.x+15,tank.y,5,30); //画出右侧的矩形
//画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
// 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）
ctx.fillRect(tank.x+6,tank.y+5,8,20);
ctx.fillStyle="#FFFA7E"; //圆的填充颜色
ctx.arc(tank.x+10,tank.y+15,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
ctx.fill(); //填充圆
// 画出炮筒的线条
ctx.beginPath();
ctx.moveTo(tank.x+10,tank.y+15); //线条的起始位置为圆心的位置
if(tank.direc==0){
ctx.lineTo(tank.x+10,tank.y); //线条的结束位置
}else if(tank.direc==2){
ctx.lineTo(tank.x+10,tank.y+30);
}
ctx.strokeStyle="#FFFA7E";
ctx.lineWidth=2; //设置线条的宽度（粗细）
ctx.closePath();
ctx.stroke();
break;
case 1: //右
case 3: //左
// 画出自己的坦克
ctx.fillStyle="#DED284"; //给定矩形的颜色
ctx.fillRect(tank.x,tank.y,30,5); //画出左边的矩形
ctx.fillRect(tank.x,tank.y+15,30,5); //画出右侧的矩形
//画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
// 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）
ctx.fillRect(tank.x+5,tank.y+6,20,8);
ctx.fillStyle="#FFFA7E"; //圆的填充颜色
ctx.arc(tank.x+15,tank.y+10,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
ctx.fill(); //填充圆
// 画出炮筒的线条
ctx.beginPath();
ctx.moveTo(tank.x+15,tank.y+10);
//向右
if(tank.direc==1){
ctx.lineTo(tank.x+30,tank.y+10);
}else if(tank.direc==3){ //向左
ctx.lineTo(tank.x,tank.y+10);
}
ctx.strokeStyle="#FFFA7E";
ctx.lineWidth=2; //设置线条的宽度（粗细）
ctx.closePath();
ctx.stroke();
break;
}
}运行效果：
当按下键盘上的D键后，向右移动的效果
注：学习视频来自传智播客公开课
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 使用canvas实现仿新浪微博头像截取上传功能
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- js+canvas绘制矩形的方法
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+canvas实现的球体平抛及颜色动态变换效果
- java制作简单的坦克大战
- html5 canvas js(数字时钟)实例代码
- JavaScript+canvas实现七色板效果实例
- javascript+canvas制作九宫格小程序
- 通过javascript把图片转化为字符画
- js+html5通过canvas指定开始和结束点绘制线条的方法
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- javascript制作坦克大战全纪录（1）
- 使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
- JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
- 基于canvas实现的绚丽圆圈效果完整实例
- PHP实现将HTML5中Canvas图像保存到服务器的方法
- 基于canvas实现的钟摆效果完整实例