H5 canvas控制坦克移动2
//封装一个画坦克的函数,传两个参数x,y,分别代表左上角的横纵坐标
//再增加一个参数dir来表示方向 上下左右分别传"u" "d" "l" "r"
function drawTank(x,y,dir){
var cxt = getCxt();
switch(dir){
case "u": //此时造一个向上的坦克
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,20,65);
cxt.fillRect(x+70,y,20,65);
cxt.fillRect(x+23,y+10,44,50);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+45,y+35,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+45,y+35);
cxt.lineTo(x+45,y-25);
cxt.stroke();
break;
case "d": //此时造向下的坦克
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,20,65);
cxt.fillRect(x+70,y,20,65);
cxt.fillRect(x+23,y+10,44,50);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+45,y+35,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+45,y+35);
cxt.lineTo(x+45,y+95); //和向上造相比,只有炮筒需要改变
cxt.stroke();
break;
case "l": //此时造向左的坦克
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,65,20); //和向上造坦克相比,画第一个矩形时长宽互换即可
cxt.fillRect(x,y+70,65,20); //向左的坦克,注意坐标之间的转换即可,以下类似不再一一解释
cxt.fillRect(x+10,y+23,50,44);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+35,y+45,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+35,y+45);
cxt.lineTo(x-25,y+45);
cxt.stroke();
break;
case "r":
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,65,20); //和造向左的坦克类似,只要改动炮筒即可向右
cxt.fillRect(x,y+70,65,20);
cxt.fillRect(x+10,y+23,50,44);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+35,y+45,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+35,y+45);
cxt.lineTo(x+95,y+45);
cxt.stroke();
}
}
drawTank(myTank.x,myTank.y,myTank.direction);
window.onkeydown = function(eve){
switch(eve.keyCode){
case 38:
case 87:
myTank.y -= myTank.step; //Y坐标减小向上移动
myTank.direction = "u"; //改变成向上的方向
break;
case 40:
case 83:
myTank.y += myTank.step; //Y坐标增加向下移动
myTank.direction = "d"; //改变为向下的方向
break;
case 37:
case 65:
myTank.x -= myTank.step; //X坐标减小向左移动
myTank.direction = "l"; //改变为向左的方向
break;
case 39:
case 68:
myTank.x += myTank.step; //X坐标增加向右移动
myTank.direction = "r"; //改变为向右的方向
}
};
myTank.turnUp = function(){
myTank.y -= myTank.step;
myTank.direction = "u";
};
myTank.turnDown = function(){
myTank.y += myTank.step;
myTank.direction = "d";
};
myTank.turnLeft = function(){
myTank.x -= myTank.step;
myTank.direction = "l";
};
myTank.turnRight = function(){
myTank.x += myTank.step;
myTank.direction = "r";
};
window.onkeydown = function(eve){
switch(eve.keyCode){
case 38:
case 87:
myTank.turnUp();
break;
case 40:
case 83:
myTank.turnDown();
break;
case 37:
case 65:
myTank.turnLeft();
break;
case 39:
case 68:
myTank.turnRight();
}
};
var myTank = {
x : 350,
y : 400,
step : 3,
direction : "u",
turnUp : function(){
myTank.y -= myTank.step;
myTank.direction = "u";
},
turnDown : function(){
myTank.y += myTank.step;
myTank.direction = "d";
},
turnLeft : function(){
myTank.x -= myTank.step;
myTank.direction = "l";
},
turnRight : function(){
myTank.x += myTank.step;
myTank.direction = "r";
}
};
var myTank = {
turnUp : function(){
if((myTank.y-25) >= 0){
myTank.y -= myTank.step;
myTank.direction = "u";
}
}
};
var myTank = {
turnDown : function(){
if((myTank.y+90) <= 500){
myTank.y += myTank.step;
myTank.direction = "d";
}
}
};
var myTank = {
turnLeft : function(){
if((myTank.x-25) >= 0){
myTank.x -= myTank.step;
myTank.direction = "l";
}
},
turnRight : function(){
if((myTank.x+90) <= 800){
myTank.x += myTank.step;
myTank.direction = "r";
}
}
};
//封装一个获取绘图环境的函数
function getCxt(){
var myCanvas = document.getElementById('floor'),
myContext = myCanvas.getContext('2d');
return myContext;
}
//为了防止重复地获取节点影响性能,我们将获取到的绘图环境(也就是画笔对象)存起来
var oCxt = getCxt(); //封装一个画坦克的函数,传两个参数x,y,分别代表左上角的横纵坐标
//再增加一个参数dir来表示方向 上下左右分别传"u" "d" "l" "r"
function drawTank(x,y,dir){
switch(dir){
case "u": //此时造一个向上的坦克
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,20,65);
oCxt.fillRect(x+70,y,20,65);
oCxt.fillRect(x+23,y+10,44,50);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+45,y+35,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+45,y+35);
oCxt.lineTo(x+45,y-25);
oCxt.stroke();
break;
case "d": //此时造向下的坦克
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,20,65);
oCxt.fillRect(x+70,y,20,65);
oCxt.fillRect(x+23,y+10,44,50);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+45,y+35,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+45,y+35);
oCxt.lineTo(x+45,y+95); //和向上造相比,只有炮筒需要改变
oCxt.stroke();
break;
case "l": //此时造向左的坦克
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,65,20); //和向上造坦克相比,画第一个矩形时长宽互换即可
oCxt.fillRect(x,y+70,65,20); //向左的坦克,注意坐标之间的转换即可,以下类似不再一一解释
oCxt.fillRect(x+10,y+23,50,44);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+35,y+45,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+35,y+45);
oCxt.lineTo(x-25,y+45);
oCxt.stroke();
break;
case "r":
oCxt.fillStyle = "#542174";
oCxt.fillRect(x,y,65,20); //和造向左的坦克类似,只要改动炮筒即可向右
oCxt.fillRect(x,y+70,65,20);
oCxt.fillRect(x+10,y+23,50,44);
oCxt.fillStyle = "#FCB827";
oCxt.beginPath();
oCxt.arc(x+35,y+45,16,0,2*Math.PI,false);
oCxt.closePath();
oCxt.fill();
oCxt.strokeStyle = "#FCB827";
oCxt.lineWidth = "8.0";
oCxt.moveTo(x+35,y+45);
oCxt.lineTo(x+95,y+45);
oCxt.stroke();
}
} //初始化一个对象myTank,用来存储一些属性和方法
var myTank = {
x : 350,
y : 400,
step : 3,
direction : "u",
turnUp : function(){
if((myTank.y-25) >= 0){ //加判断条件防止开出边界
myTank.y -= myTank.step;
myTank.direction = "u";
}
},
turnDown : function(){
if((myTank.y+90) <= 500){
myTank.y += myTank.step;
myTank.direction = "d";
}
},
turnLeft : function(){
if((myTank.x-25) >= 0){
myTank.x -= myTank.step;
myTank.direction = "l";
}
},
turnRight : function(){
if((myTank.x+90) <= 800){
myTank.x += myTank.step;
myTank.direction = "r";
}
}
}; //先画一个坦克出来
drawTank(myTank.x,myTank.y,myTank.direction); //一开始先造一个向上的出来 //封装一个更新战场的函数
function updateFloor(){
oCxt.clearRect(0,0,800,500); //更新之前先清除画布
drawTank(myTank.x,myTank.y,myTank.direction); //清除完之后重新造坦克,坦克要移动就必须实时地根据坐标重新来造
} //设置一个间歇调用的函数,每隔100ms更新一下战场
setInterval(function(){
updateFloor();
},100); //响应玩家的操作指令
window.onkeydown = function(eve){
switch(eve.keyCode){
case 38:
case 87:
myTank.turnUp();
break;
case 40:
case 83:
myTank.turnDown();
break;
case 37:
case 65:
myTank.turnLeft();
break;
case 39:
case 68:
myTank.turnRight();
}
};
H5 canvas控制坦克移动2的更多相关文章
- H5 canvas控制坦克移动
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame.html),这一篇研究一下怎么响应玩家的操作让坦克进行相应的移动. 1. 了解keydown ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- H5 canvas建造敌人坦克
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...
- 使用H5 canvas画一个坦克
具体步骤如下: 1. 首先做出绘图区,作为坦克的战场 <canvas id="floor" width="800px" height=&quo ...
- H5坦克大战之【玩家控制坦克移动2】
周一没有看圣诞大战,这几天比较忙也没有看赛后的报道,今天就先不扯NBA,随便扯扯自己.昨天在电脑里找东西的时候翻到以前兼职健身教练时的照片,思绪一下子回到学生时代,脑子久久换不过来.现在深深觉得健身和 ...
- H5坦克大战之【玩家控制坦克移动】
自从威少砍下45+11+11的大号三双之后,网上出现了各种各样的神级段子,有一条是这样的: 威少:Hey,哥们,最近过得咋样! 浓眉:对方开启了好友验证,请先添加对方为好友 威少:...... JRS ...
- H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制 ...
随机推荐
- 【gulp】前端自动化工具---gulp的使用(一)------【巷子】
什么是gulp? 基于node的自动化构建工具 扩展:开发的时候分为2个节点一个是开发阶段 另一个是部署阶段 开发阶段:源文件不会被压缩 部署阶段:所有文 ...
- JS实现数字千位符格式化方法
/** * [number_format 参数说明:] * @param {[type]} number [number:要格式化的数字] * @param {[type]} decimals [de ...
- Android复习
第一章 1.Android系统架构:(四层) Linux内核层:为安卓设备的各种硬件提供底层的驱动. 系统运行库层:为Android系统提供主要的特性支持. 应用框架层:提供了构建应用程序可能用到的各 ...
- 记一次踩坑:使用ksoap-android时造成的okhttp依赖冲突问题
项目中需要调用webservice接口,android SDK中并没有直接访问webservice接口的方法,于是我引入了ksoap-android的jar包,来实现访问webservice接口.刚开 ...
- sql server 里的文件和文件组使用
转自:https://www.cnblogs.com/woodytu/p/5821827.html 参考:https://www.sqlskills.com/blogs/paul/files-and- ...
- mysql 数据操作 单表查询 limit 限制查询的记录数
mysql; +----+-----------+------+-----+------------+---------+--------------+------------+--------+-- ...
- js-jquery-SweetAlert2【二】配置与方法
一.配置 Argument Default value Description title null 模态对话框的标题.它可以在参数对象的title参数中设置,也可以在swal()方法的第一个参数 ...
- jq的$(function(){})与window.onload的区别
最近一直在研究jq的源码,书写jq的代码我们通常会包裹在一个$(function(){})函数中,jq的$(function(){})也就是$(document).ready(function(){} ...
- Mybatis入门和简单Demo
一.Mybatis的诞生 回顾下传统的数据库开发,JDBC和Hibernate是使用最普遍的技术,但这两种ORM框架都存在一定的局限性: JDBC:最原生的技术,简单易学,执行速度快,效率高,适合大数 ...
- 20155333 2016-2017-2 《Java程序设计》第七周学习总结
20155333 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Lambda 教材的引入循序渐近.深入浅出 Lambda去重复,回忆DRY原则 Lambda ...