masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > 小强的HTML5移动开发之路（7）——坦克大战游戏1

小强的HTML5移动开发之路（7）——坦克大战游戏1

黄舟
Lepaskan： 2017-01-22 10:55:01
asal
1519 orang telah melayarinya

上一篇中我们介绍了关于Canvas的基础知识，用Canvas绘制各种图形和图片，在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏，下面我们开始吧

一、用Canvas画出我们的坦克

我们设计的坦克结构如下图所示，如果有的朋友有更好的设计，希望分享和交流一下。

703.png

如上图所示，我们的坦克基本上是由三个矩形和一个圆形一个线段组成，每个部件的尺寸进行了标记，单位为px,下面我们用上一篇中讲到的知识来画出我们的坦克，注意：我们在画坦克的时候应该选择一个参考点，这里我们选择的是坦克的左上角，如图所示。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
<body>  
<h1>html5-坦克大战</h1>  
<!--坦克大战的战场-->  
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
<script type="text/javascript">  
    //得到画布  
    var canvas1 = document.getElementById("tankMap");  
      
    //定义一个位置变量  
    var heroX = 80;  
    var heroY = 80;  
      
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
    //设置颜色  
    cxt.fillStyle="#BA9658";  
    //左边的矩形  
    cxt.fillRect(heroX,heroY,5,30);  
    //右边的矩形  
    cxt.fillRect(heroX+17,heroY,5,30);  
    //画中间的矩形  
    cxt.fillRect(heroX+6,heroY+5,10,20);  
    //画出坦克的盖子  
    cxt.fillStyle="#FEF26E";  
    cxt.arc(heroX+11,heroY+15,5,0,360,true);  
    cxt.fill();  
    //画出炮筒  
    cxt.strokeStyle="#FEF26E";  
    cxt.lineWidth=1.5;  
    cxt.beginPath();  
    cxt.moveTo(heroX+11,heroY+15);  
    cxt.lineTo(heroX+11,heroY);  
    cxt.closePath();  
    cxt.stroke();  
      
      
</script>  
</body>  
</html>
Salin selepas log masuk

704.png

二、怎么让坦克动起来？

在研究怎么让坦克动起来之前，我们先来研究一下怎么让一个小球通过键盘操作使其动起来。

首先我们给标签添加一个监听函数

<body onkeydown="test()">
Salin selepas log masuk

监听函数

//现在按键盘上ASDW移动小球  
//说明：当我们按下一个键，实际上触发了一个onkeydown事件  
function test(){  
    var code = event.keyCode;  //键盘上字幕的ASCII码  
    switch(code){  
        case 87:  
            ballY--;  
            break;  
        case 68:  
            ballX++;  
            break;  
        case 83:  
            ballY++;  
            break;  
        case 65:  
            ballX--;  
            break;  
    }  
    //重新绘制  
    drawBall();  
}
Salin selepas log masuk

我们可以在外部定义两个全局的变量分别表示x轴和y轴的坐标，然后通过改变ballX和ballY的值来改变小球的位置，我们用键盘的WDSA键来控制，这样出来的效果非常奇怪，如下图：

705.png

我们在绘制的时候没有将以前位置的小球擦除掉，在每次重新绘制前应该先擦除一下，下面将全部代码贴出来：

  
  
  
  


  
  
<body onkeydown="test()">  

小球上下左右移动
Salin selepas log masuk

三、让我们的坦克动起来


我们的坦克如果只是朝一个方向移动的话就非常容易了，只要将上面代码中的画小球改成画坦克就OK了，在让坦克移动之前我们首先应该考虑的是怎么让坦克绕着自己的中心朝各个方向转动的问题。好的，再将上面的图贴出来分析一下。

706.png

详细的计算过程我就不啰嗦了，想必大家的数学都很好，按照上图的比例计算好各个组件的坐标和位置，旋转后坦克画法如下：

//设置颜色  
cxt.fillStyle="#BA9658";  
//上边的矩形  
cxt.fillRect(tank.x-4,tank.y+4,30,5);  
//下边的矩形  
cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
//画中间的矩形  
cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
//画出坦克的盖子  
cxt.fillStyle="#FEF26E";  
cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
cxt.fill();  
//画出炮筒  
cxt.strokeStyle="#FEF26E";  
cxt.lineWidth=1.5;  
cxt.beginPath();  
cxt.moveTo(tank.x+15-4,tank.y+11+4);  
if(tank.direct==1){         //只是炮筒的方向不同  
    cxt.lineTo(tank.x+30-4,tank.y+11+4);  
}else{  
    cxt.lineTo(tank.x-4,tank.y+11+4);  
}  
cxt.closePath();  
cxt.stroke();
Salin selepas log masuk

好了现在我们发现坦克朝向左边和右边仅仅只有炮筒的方向不同，同理朝向上边和下边也仅仅只有炮筒的方向不同，这时候我们可以将四个方向分为两种情况，再在各个小情况中做处理。同时用OO的思想将代码进行了封装，代码如下：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
<body onkeydown="getCommand();">  
<h1>html5-坦克大战</h1>  
<!--坦克大战的战场-->  
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
<script type="text/javascript">  
    //定义一个Hero类(后面还要改进）  
    //x表示坦克的横坐标  
    //y表示纵坐标  
    //direct表示方向  
    function Hero(x,y,direct){  
        this.x=x;  
        this.y=y;  
        this.speed=1;  
        this.direct=direct;  
        //上移  
        this.moveUp=function(){  
            this.y-=this.speed;  
            this.direct=0;  
        }  
        //右移  
        this.moveRight=function(){  
            this.x+=this.speed;  
            this.direct=1;  
        }  
        //下移  
        this.moveDown=function(){  
            this.y+=this.speed;  
            this.direct=2;  
        }  
        //左移  
        this.moveLeft=function(){  
            this.x-=this.speed;  
            this.direct=3;  
        }  
    }  
  
  
    //得到画布  
    var canvas1 = document.getElementById("tankMap");  
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
      
    //我的tank  
    //规定0向上、1向右、2向下、3向左  
    var hero = new Hero(40,40,0);  
    drawTank(hero);  
    //绘制坦克  
    function drawTank(tank){  
        //考虑方向  
        switch(tank.direct){  
            case 0:     //向上  
            case 2:     //向下  
                //设置颜色  
                cxt.fillStyle="#BA9658";  
                //左边的矩形  
                cxt.fillRect(tank.x,tank.y,5,30);  
                //右边的矩形  
                cxt.fillRect(tank.x+17,tank.y,5,30);  
                //画中间的矩形  
                cxt.fillRect(tank.x+6,tank.y+5,10,20);  
                //画出坦克的盖子  
                cxt.fillStyle="#FEF26E";  
                cxt.arc(tank.x+11,tank.y+15,5,0,360,true);  
                cxt.fill();  
                //画出炮筒  
                cxt.strokeStyle="#FEF26E";  
                cxt.lineWidth=1.5;  
                cxt.beginPath();  
                cxt.moveTo(tank.x+11,tank.y+15);  
                if(tank.direct==0){         //只是炮筒的方向不同  
                    cxt.lineTo(tank.x+11,tank.y);  
                }else{  
                    cxt.lineTo(tank.x+11,tank.y+30);  
                }  
                cxt.closePath();  
                cxt.stroke();  
                break;  
            case 1:  
            case 3:  
                //设置颜色  
                cxt.fillStyle="#BA9658";  
                //上边的矩形  
                cxt.fillRect(tank.x-4,tank.y+4,30,5);  
                //下边的矩形  
                cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
                //画中间的矩形  
                cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
                //画出坦克的盖子  
                cxt.fillStyle="#FEF26E";  
                cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
                cxt.fill();  
                //画出炮筒  
                cxt.strokeStyle="#FEF26E";  
                cxt.lineWidth=1.5;  
                cxt.beginPath();  
                cxt.moveTo(tank.x+15-4,tank.y+11+4);  
                if(tank.direct==1){         //只是炮筒的方向不同  
                    cxt.lineTo(tank.x+30-4,tank.y+11+4);  
                }else{  
                    cxt.lineTo(tank.x-4,tank.y+11+4);  
                }  
                cxt.closePath();  
                cxt.stroke();  
                break;    
        }  
          
    }  
      
    //接收用户按键的函数  
    function getCommand(){  
        var code = event.keyCode;  //键盘上字幕的ASCII码  
        switch(code){  
            case 87:  
                hero.moveUp();  
                break;  
            case 68:  
                hero.moveRight();  
                break;  
            case 83:  
                hero.moveDown();  
                break;  
            case 65:  
                hero.moveLeft();  
                break;  
        }  
        //把画布清理  
        cxt.clearRect(0,0,400,300);  
        //重新绘制  
        drawTank(hero);  
    }  
</script>  
</body>  
</html>
Salin selepas log masuk


707.png

以上就是 小强的HTML5移动开发之路（7）——坦克大战游戏1的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！


Label berkaitan：
HTML5，移动开发，坦克大战游戏
sumber：php.cn
Artikel sebelumnya： 小强的HTML5移动开发之路（6）——Canvas图形绘制基础 Artikel seterusnya：小强的HTML5移动开发之路（8）——坦克大战游戏2
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2165
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2313
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1950
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1825
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1878
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan