学习HTML5之塔克大战(详细记录)
学了一些HTML5的一些基本知识,开始学习制作......
介绍一些基本知识: px(像素)---》1px等于多少? 1cm or 2cm -->no no no!
(1).像素是一个密度单位:无法用度量....
(2) stoke--->画线 fill--->填充
(3)再画图形时,一定记得路径闭合...
(4)在绘制图片时:需要注意的是:先加载图片,在进行绘制
绘制照片的一些基本步骤:
(1) 创建image对象 new Image();
(2)指定图片(或者路径) src=" "
(3)先加载,再进行一段绘制 dirawImage();
代码详细的注释:
1 <html> 2 <head> 3 4 </head> 5 <body> 6 <!--用canvas画布画一个矩形--> 7 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 8 <script type="text/javascript"> 9 <!--得到画布--> 10 var canvas_1=document.getElementById("gxjun"); 11 var cnt=canvas_1.getContext("2d"); 12 //alert(cxt); 13 //moveto设置点位置 14 cnt.moveTo(20,20); 15 //有上面那个点为起点 设置第二个点位置 16 cnt.lineTo(20,90); 17 //将两个点连接起来 18 cnt.stroke(); 19 //画出一个填充的三角形.-->路径 20 //开始新路径 21 cnt.beginPath(); 22 cnt.moveTo(40,20); 23 cnt.lineTo(40,90); 24 cnt.lineTo(80,90); 25 //闭合路径,把最后这个点和第一点MoveTO()闭合 26 cnt.closePath(); 27 //cnt.stroke(); 28 //填充矩形 由于三角形闭合了,所以填充了三角形 29 //注意的一点是: 只有矩形才会不用路径闭合 30 cnt.fill(); 31 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height); 32 //填充矩形 33 cnt.fillStyle="#004DFF"; //填充颜色 34 cnt.fillRect(140,20,30,50); 35 //画其他图形时一定的记得开始和闭合 36 cnt.beginPath(); 37 //如何话圆形 arc函数 38 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时 39 cnt.fillStyle="#FF0000"; 40 cnt.arc(220,40,20,0,360,false); cnt.closePath(); 41 cnt.stroke(); 42 cnt.fill(); 43 //画图像 44 var img_1=new Image(); 45 img_1.src="10.jpg"; 46 //加载完毕后再绘图.... 47 img_1.onload=function(){ 48 //(object,x,y,weidth,height) 49 cnt.drawImage(img_1,20,100,155,220); 50 } 51 </script> 52 </body> 53 </html>
效果图:
有关Javascript写字体:
代码:
1 <html> 2 <head》</head> 3 <body> 4 <!--用canvas画布画一个矩形--> 5 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 6 <script type="text/javascript"> 7 <!--得到画布--> 8 var canvas_1=document.getElementById("gxjun"); 9 var cnt=canvas_1.getContext("2d"); 10 //alert(cxt); 11 //moveto设置点位置 12 cnt.moveTo(20,20); 13 //有上面那个点为起点 设置第二个点位置 14 cnt.lineTo(20,90); 15 //将两个点连接起来 16 cnt.stroke(); 17 //画出一个填充的三角形.-->路径 18 //开始新路径 19 cnt.beginPath(); 20 cnt.moveTo(40,20); 21 cnt.lineTo(40,90); 22 cnt.lineTo(80,90); 23 //闭合路径,把最后这个点和第一点MoveTO()闭合 24 cnt.closePath(); 25 //cnt.stroke(); 26 //填充矩形 由于三角形闭合了,所以填充了三角形 27 //注意的一点是: 只有矩形才会不用路径闭合 28 cnt.fill(); 29 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height); 30 //填充矩形 31 cnt.fillStyle="#004DFF"; //填充颜色 32 cnt.fillRect(140,20,30,50); 33 //画其他图形时一定的记得开始和闭合 34 cnt.beginPath(); 35 //如何话圆形 arc函数 36 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时 37 cnt.fillStyle="#FF0000"; 38 cnt.arc(220,40,20,0,360,false); cnt.closePath(); 39 cnt.stroke(); 40 cnt.fill(); 41 //画图像 42 var img_1=new Image(); 43 img_1.src="10.jpg"; 44 //加载完毕后再绘图.... 45 img_1.οnlοad=function(){ 46 //(object,x,y,weidth,height) 47 cnt.drawImage(img_1,20,100,155,220); 48 //在画布上写字 49 //设置字体的大小 50 var text="火影忍着之战国时代" 51 cnt.fillStyle="#0000FF"; 52 cnt.font="30px 华文彩云"; 53 cnt.fillText(text,200,200); 54 } 55 </script> 56 </body> 57 </html>>
View Code
效果图:
1.画坦克的思路:
以坦克的左上角为参照点,然后画出坦克的其它部分。这样的
好处是当左上角的坐标变换,坦克就会整体移动。(画出图片时比较耗费cpu)
画出第一辆坦克..
代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--meta charset="utf-16"/--> 5 </head> 6 <body> 7 <h1>经典坦克大战</h1> 8 <!--画布即作为坦克大战的地图--> 9 <canvas id="tankMap" width="600px" height="500px" 10 style="background-color: black; border: 2px solid red"></canvas> 11 <script type="text/javascript"> 12 //得到画布 13 var canvas1=document.getElementById("tankMap"); 14 //得到绘图上下文(即画笔) 15 var cxt=canvas1.getContext("2d"); 16 //我的坦克hero 17 var herox=130; 18 var heroy=30; 19 // alert(cxt); 20 //设置颜色 21 cxt.fillStyle="#DED284"; 22 //先画出左面的矩形 23 cxt.fillRect(herox,heroy,5,30); 24 //平移画出右边的矩形 25 cxt.fillRect(herox+15,heroy,5,30); 26 //画出中间矩形 27 cxt.fillRect(herox +6,heroy + 5,8,20); 28 //画出坦克的盖子 29 cxt.fillStyle="#FFD972"; 30 cxt.arc(herox +10,heroy +15,4,0,360,true); 31 cxt.fill(); 32 //画出炮筒(直线) 33 cxt.strokeStyle="#FFD972"; 34 cxt.lineWidth=1.5; 35 cxt.beginPath(); 36 cxt.moveTo(herox +10,heroy +15); 37 cxt.lineTo(herox +10,heroy); 38 cxt.closePath(); 39 cxt.stroke(); 40 cxt.fillStyle="#FFD972"; 41 cxt.arc(herox +10,heroy,1.5,0,360,true); 42 cxt.fill(); 43 </script> 44 </body> 45 </html>
View Code
效果图:
附加一个小功能,让小球开始移动....
代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 //meta charset="utf-8"; 5 </head> 6 <!--当按键后去调用test函数--> 7 <body onkeydown="test()"> 8 <h1>小球上下左右移动</h1> 9 <canvas id="test" width="400px" height="300px" 10 style="background-color:black; border: 2px solid blue"> 11 </canvas> 12 <script type="text/javascript"> 13 //得到画布 14 var canvas1=document.getElementById("test"); 15 //得到绘图上下文(画笔) 16 var cxt= canvas1.getContext("2d"); 17 //画出红色圆球 18 var ballx=30; 19 var bally=30; 20 function drawball() 21 { 22 cxt.beginPath(); 23 cxt.fillStyle="#FF0000"; 24 cxt.arc(ballx,bally,10,0,360,false); 25 cxt.closePath(); 26 cxt.fill(); 27 } 28 //alert(cxt); 29 //现在我摁下wsaf依次表示上下左右- 30 //说明:当我们按下一个建,实际上触发一个onkeydowm 31 drawball(); 32 function test(){ 33 //我怎么知道,玩家按下的是什么键 34 //说明当按下键后,事件---》event对象----》事件处理函数() 35 var code=event.keyCode; 36 //键盘上的每一个字母对应的是ascii 37 switch(code) 38 { 39 case 87: bally--; break; 40 case 68: ballx++; break; 41 case 83: bally++; break; 42 case 65: ballx--; break; 43 } 44 cxt.clearRect(0,0,400,300); 45 drawball(); 46 } 47 </script> 48 </body> 49 </html>
View Code
效果如图:
好了,又小球衍生出第一辆坦克....
代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--meta charset="utf-16"/--> 5 </head> 6 <body onkeydown="getCommand()"> 7 <h1>经典坦克大战</h1> 8 <!--画布即作为坦克大战的地图--> 9 <canvas id="tankMap" width="600px" height="500px" 10 style="background-color: black; border: 2px solid red"></canvas> 11 <script type="text/javascript"> 12 //定义一个HEro类 13 // x,y表示坐标 direct表示方向 14 function Hero(x,y,direct){ 15 this.x=x; 16 this.y=y; 17 this.direct=direct; 18 this.speed=1; 19 //上移 20 this.moveUp=function() { 21 this.y-=this.speed; 22 this.direct=0; 23 } 24 this.moveDown=function(){ 25 this.y+=this.speed; 26 this.direct=2; 27 } 28 this.moveRight=function(){ 29 this.x+=this.speed; 30 this.direct=1; 31 } 32 this.moveLeft=function() { 33 this.x-=this.speed; 34 this.direct=3; //改变方向 35 } 36 } 37 //得到画布 38 var canvas1=document.getElementById("tankMap"); 39 //得到绘图上下文(即画笔) 40 var cxt=canvas1.getContext("2d"); 41 //我的坦克hero 42 // var herox=130; 43 //var heroy=30; 44 // alert(cxt); 45 //坦克的方向:0表示向上,1表示向右,2表示下,3表示左 46 var hero = new Hero(40,40,0); 47 //把绘制坦克封装成为一个函数 48 function drawTank(tank){ 49 50 switch(tank.direct) 51 { 52 case 0: //塔克 53 case 2: 54 //设置颜色 55 cxt.fillStyle="#BA9658" ; 56 //先画出左面的矩形 57 cxt.fillRect(tank.x,tank.y,5,30); 58 //平移画出右边的矩形 59 cxt.fillRect(tank.x+15,tank.y,5,30); 60 //画出中间矩形 61 cxt.fillRect(tank.x +5,tank.y+ 5,10,20); 62 //画出坦克的盖子 63 cxt.fillStyle="#FEF26E" ; 64 cxt.arc(tank.x +10,tank.y +15,4,0,360,false); 65 cxt.fill(); 66 //画出炮筒(直线) 67 cxt.strokeStyle="#FEF26E" ; 68 cxt.lineWidth=1.5; 69 cxt.beginPath(); 70 cxt.moveTo(tank.x +10,tank.y +15); 71 var cnt=0; 72 if(tank.direct==0) cnt=0; 73 else if(tank.direct==2)cnt=30; 74 cxt.lineTo(tank.x +10,tank.y+cnt); 75 break; 76 case 1: 77 case 3: 78 //设置颜色 79 cxt.fillStyle="#BA9658" ; 80 //先画出左面的矩形 81 cxt.fillRect(tank.x,tank.y,30,5); 82 //平移画出右边的矩形 83 cxt.fillRect(tank.x,tank.y+15,30,5); 84 //画出中间矩形 85 cxt.fillRect(tank.x +6,tank.y+ 5,20,10); 86 //画出坦克的盖子 87 cxt.fillStyle="#FEF26E" ; 88 cxt.arc(tank.x +15,tank.y +10,4,0,360,false); 89 cxt.fill(); 90 //画出炮筒(直线) 91 cxt.strokeStyle="#FEF26E" ; 92 cxt.lineWidth=1.5; 93 cxt.beginPath(); 94 cxt.moveTo(tank.x +15,tank.y +10); 95 if(tank.direct==1) 96 cxt.lineTo(tank.x +30,tank.y+10); 97 else if(tank.direct==3) 98 cxt.lineTo(tank.x,tank.y+10); 99 // cxt.fillStyle="#FEF26E" ; 100 //cxt.beginPath(); 101 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false); 102 //cxt.closePath(); 103 //cxt.fill(); 104 105 106 break; 107 108 } 109 cxt.closePath(); 110 cxt.stroke(); 111 112 113 } 114 drawTank(hero); 115 //这是一个接收按键的函数 116 function getCommand(){ 117 //alert("汗啊"); 118 var code = event.keyCode; 119 // alert(code); 120 switch(code) 121 { 122 // 向上 123 case 38: 124 case 87: hero.moveUp(); break; 125 //向左 126 case 37: 127 case 65: hero.moveLeft(); break; 128 //向下 129 case 40: 130 case 83: hero.moveDown(); break; 131 //向右 132 case 39: 133 case 68: hero.moveRight(); break; 134 } 135 cxt.clearRect(0,0,600,500); 136 drawTank(hero); 137 } 138 </script> 139 </body> 140 </html>
View Code
效果图:
当然想韩老师所说的我们可以将其分为两个文件。一个js文件和一个html文件:
其实内容没有任何变化,就只是将其拆分为两部分只是为了看起来方便一些》。。。
1.tankgame2.js文件
1 // x,y表示坐标 direct表示方向 2 function Hero(x,y,direct){ 3 this.x=x; 4 this.y=y; 5 this.direct=direct; 6 this.speed=1; 7 //上移 8 this.moveUp=function() { 9 this.y-=this.speed; 10 this.direct=0; 11 } 12 this.moveDown=function(){ 13 this.y+=this.speed; 14 this.direct=2; 15 } 16 this.moveRight=function(){ 17 this.x+=this.speed; 18 this.direct=1; 19 } 20 this.moveLeft=function() { 21 this.x-=this.speed; 22 this.direct=3; //改变方向 23 } 24 } 25 26 //把绘制坦克封装成为一个函数 27 function drawTank(tank){ 28 29 switch(tank.direct) 30 { 31 case 0: //塔克 32 case 2: 33 //设置颜色 34 cxt.fillStyle="#BA9658" ; 35 //先画出左面的矩形 36 cxt.fillRect(tank.x,tank.y,5,30); 37 //平移画出右边的矩形 38 cxt.fillRect(tank.x+15,tank.y,5,30); 39 //画出中间矩形 40 cxt.fillRect(tank.x +5,tank.y+ 5,10,20); 41 //画出坦克的盖子 42 cxt.fillStyle="#FEF26E" ; 43 cxt.arc(tank.x +10,tank.y +15,4,0,360,false); 44 cxt.fill(); 45 //画出炮筒(直线) 46 cxt.strokeStyle="#FEF26E" ; 47 cxt.lineWidth=1.5; 48 cxt.beginPath(); 49 cxt.moveTo(tank.x +10,tank.y +15); 50 var cnt=0; 51 if(tank.direct==0) cnt=0; 52 else if(tank.direct==2)cnt=30; 53 cxt.lineTo(tank.x +10,tank.y+cnt); 54 break; 55 case 1: 56 case 3: 57 //设置颜色 58 cxt.fillStyle="#BA9658" ; 59 //先画出左面的矩形 60 cxt.fillRect(tank.x,tank.y,30,5); 61 //平移画出右边的矩形 62 cxt.fillRect(tank.x,tank.y+15,30,5); 63 //画出中间矩形 64 cxt.fillRect(tank.x +6,tank.y+ 5,20,10); 65 //画出坦克的盖子 66 cxt.fillStyle="#FEF26E" ; 67 cxt.arc(tank.x +15,tank.y +10,4,0,360,false); 68 cxt.fill(); 69 //画出炮筒(直线) 70 cxt.strokeStyle="#FEF26E" ; 71 cxt.lineWidth=1.5; 72 cxt.beginPath(); 73 cxt.moveTo(tank.x +15,tank.y +10); 74 if(tank.direct==1) 75 cxt.lineTo(tank.x +30,tank.y+10); 76 else if(tank.direct==3) 77 cxt.lineTo(tank.x,tank.y+10); 78 // cxt.fillStyle="#FEF26E" ; 79 //cxt.beginPath(); 80 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false); 81 //cxt.closePath(); 82 //cxt.fill(); 83 84 85 break; 86 87 } 88 cxt.closePath(); 89 cxt.stroke(); 90 91 92 }
2.html文件...
代码:
<!DOCTYPE html> <html><head><!--meta charset="utf-16"/--> </head><body onkeydown="getCommand()"><h1>经典坦克大战</h1><!--画布即作为坦克大战的地图--> <canvas id="tankMap" width="600px" height="500px"style="background-color: black; border: 2px solid red"></canvas><script type="text/javascript" src="tankgame2.js"></script><script type="text/javascript">//定义一个HEro类//得到画布var canvas1=document.getElementById("tankMap");//得到绘图上下文(即画笔)var cxt=canvas1.getContext("2d");//我的坦克hero// var herox=130;//var heroy=30;// alert(cxt);//坦克的方向:0表示向上,1表示向右,2表示下,3表示左var hero = new Hero(40,40,0);drawTank(hero);//这是一个接收按键的函数function getCommand(){//alert("汗啊");var code = event.keyCode;// alert(code);switch(code){// 向上case 38:case 87: hero.moveUp(); break;//向左case 37:case 65: hero.moveLeft(); break;//向下 case 40:case 83: hero.moveDown(); break;//向右case 39:case 68: hero.moveRight(); break; }cxt.clearRect(0,0,600,500);drawTank(hero);}</script></body> </html>
效果图还是一样的
学习HTML5之塔克大战(详细记录)相关推荐
- MongoDB学习总结五(详细记录MongoDB Aggregation聚合框架常见操作)
简明:本文详细记录使用Aggregation聚合框架对MongoDB数据库常见操作,包括过滤.分组.求和.排序和分页设计实现等等.相比较于MongoTemplate,使用Aggregation对Mon ...
- Mysql学习笔记--多表之间约束等详细记录
sql 进阶学习笔记-多表(二) 笔记(一)内容回顾 Mysql学习笔记(基础)基础sql语句详细记录 数据库的创建 : create database 数据库的名 character set 字 ...
- Mysql学习笔记(基础)基础sql语句详细记录
数据库学习(基础) // 个人网课学习记录,如果有违规等问题,请联系我删除~ mysql下载安装( 解压版安装配置 下载版安装配置 ) 需求分析:使用cmd命令来创建一个数据库,并对数据库中得一张分类 ...
- php video标签使用方法,HTML_HTML5 video标签(播放器)学习笔记(一):使用入门,近有在学习html5中video标签(播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻--,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 学习HTML5 canvas遇到的问题
学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...
- oracle19c二次安装报错,Windows10安装Oracle19c数据库详细记录(图文详解)
这篇文章主要介绍了Windows10安装Oracle19c数据库详细记录,文中给大家介绍了修改密码的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以 ...
- <Linux开发>--驱动开发-- 字符设备驱动(3) 过程详细记录
<Linux开发>–驱动开发-- 字符设备驱动(3) 过程详细记录 驱动开发是建立再系统之上的,前面作者也记录了系统移植的过程记录,如果有兴趣,可进入博主的主页查看相关文章,这里就不添加链 ...
- html5代码好学吗,0基础能学习Html5吗?Html5好学吗?
原标题:0基础能学习Html5吗?Html5好学吗? 0基础可以学习Html5吗?这两年一直是被挂在嘴边的话题,随着人们对用户体验的要求越来越高,前端开发技术难度越来越大,所以对于IT从业者来讲,前端 ...
最新文章
- python连接access数据库odbc_对Python通过pypyodbc访问Access数据库的方法详解
- 2022年中国物联网行业研究报告
- 《SQL高级应用和数据仓库基础(MySQL版)》学习笔记 ·006【事务】
- 李航《统计学习方法》第三章课后答案链接
- [教程]智慧KTV小企鹅日志查看
- 如何缩小jpg图片大小?jpg格式怎么压缩?
- 蓝天学校计算机教学反思,小学四年级上册《飞向蓝天的恐龙》教学反思
- 常见大数据应用有哪些?
- 后缀是lnk是什么文件_后缀为.lnk的文件怎么打开?
- 弱校联萌十一大决战之如日中天A	Ariel【二进制+排序】
- 从「富爸爸现金流」游戏中总结的理财四条
- DICOM医学图像处理:二零一四▪DICOM专栏一览
- vue3.2+ 滑动验证组件,pc/手机通用,即插即用
- 微信公开课(北京站)速记 微信、微信支付、O2O的定义与关联
- 基于STM32F103C8T6的循迹避障小车完整制作过程(详细)----上篇(第123点)
- 为什么前端拿到的数据和PostMan拿到的数据不一样
- Pycharm出现Segmentation fault...(interrupted by signal 11: SIGSEGV)的解决方法
- Python学子之如何退出python 命令行
- 为什么电流PI调节器输出的是电压?为什么转速PI调节器输出的就是电流?(双闭环FOC)
- 一张图了解python_一张图学会python