首页vns威尼斯城官网登入 › 比如HTML5版切水果游戏和HTML5中国象棋游戏,HTML5技术已经越来越被我们所接受

比如HTML5版切水果游戏和HTML5中国象棋游戏,HTML5技术已经越来越被我们所接受

依据HTML5坦克大战游戏简化版,html5坦克战斗

事先大家有分享过许多种经营典的HTML5玩耍,有个别照旧很风趣的,比方HTML5版切水果游戏和HTML5中中原人民共和国象棋游戏。后天要享用的是一款简化版的HTML5坦克战斗游戏,方向键调整坦克的行路方向,空格键发射子弹,命中敌方坦克后也会发出声音,效果还算能够。效果图如下:

图片 1

在线预览   源码下载

兑现的代码。

javascript代码:

window.addEventListener("load", canvasApp, false);    
//是否支持canvas
function canvasSupport () {
      return Modernizr.canvas;
}
function canvasApp() {
    //是否支持canvas
    if (!canvasSupport()) {
             return;
          }
    var theCanvas = document.getElementById("canvasOne");
    var context = theCanvas.getContext("2d");
    var tank=new Image();
    tank.addEventListener('load', start, false);
    tank.src="tanks_sheet.png"
    //Background
    context.fillStyle = "#CCCCCC";
    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
    //Box
    context.lineWidth=16;
    context.strokeStyle = "#000000"; 
    context.strokeRect(8,8, theCanvas.width-16, theCanvas.height-16);
    //画我方tank和我方炮弹
    function drawtank() {
        if(gameover){
            context.save();
            context.fillStyle = "#000000";
            context.font = "normal bold 50px normal"; 
            context.fillText("游戏结束", 150, 150);
            context.restore();
            context.save();
            context.fillStyle = "#000000";
            context.font = "normal bold 25px normal"; 
            context.fillText("按空格键重新开始游戏", 125, 200);
            context.restore();
            update();
            return;
        }
        update();
        drawScene();
        render();
        //画场景
        function drawScene(){
            for(var i=0;i<=10;i++){
                for(var j=0;j<=14;j++){
                    colCtr=j*32+16;
                    rowCtr=i*32+16;
                    context.save();
                    sourceX=Math.floor(scene[i][j]%8)*32;
                    sourceY=Math.floor(scene[i][j]/8)*32;
                    context.drawImage(tank, sourceX,sourceY,32,32,colCtr,rowCtr,32,32);
                    context.restore();
                }
            }    
        }
        //坦克更新数据
        function update(){
            tankmove.x=tankmove.nextx;
            tankmove.y=tankmove.nexty;
            //左
            if(keyPressList[37]==true){
                //playermove.play();
                //playermove.stop();
                if(gameover){

                    return;
                }
                space();
                tankmove.tankAngle=270;
                tankmove.nextx-=tankmove.tankspeed;
                tankmove.tankshape=tankmove.tanknextshape;
                if(scene[Math.floor((tankmove.nexty-12)/32)][Math.floor((tankmove.nextx-12)/32)]!=0||scene[Math.ceil((tankmove.nexty-20)/32)][Math.floor((tankmove.nextx-12)/32)]!=0){
                    tankmove.nextx=tankmove.x;
                    tankmove.nexty=tankmove.y;
                    return;
                }
                tankmove.tanknextshape+=1;
                if(tankmove.tanknextshape>8){
                    tankmove.tanknextshape=1;
                }
                return;
            }
            //右
            if(keyPressList[39]==true){
                if(gameover){

                    return;
                }
                space();
                tankmove.tankAngle=90;
                tankmove.nextx+=tankmove.tankspeed;
                tankmove.tankshape=tankmove.tanknextshape;
                if(scene[Math.ceil((tankmove.nexty-20)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0||scene[Math.floor((tankmove.nexty-12)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0){
                    tankmove.nextx=tankmove.x;
                    tankmove.nexty=tankmove.y;
                    return;
                }
                tankmove.tanknextshape+=1;
                if(tankmove.tanknextshape>8){
                    tankmove.tanknextshape=1;
                }
                return;
            }
            //上
            if(keyPressList[38]==true){
                if(gameover){

                    return;
                }
                space();
                tankmove.tankAngle=0;
                tankmove.nexty-=tankmove.tankspeed;
                tankmove.tankshape=tankmove.tanknextshape;
                if(scene[Math.floor((tankmove.nexty-12)/32)][Math.floor((tankmove.nextx-12)/32)]!=0||scene[Math.floor((tankmove.nexty-12)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0){
                    tankmove.nextx=tankmove.x;
                    tankmove.nexty=tankmove.y;
                    return;
                }
                tankmove.tanknextshape+=1;
                if(tankmove.tanknextshape>8){
                    tankmove.tanknextshape=1;
                }
                return;
            }
            //下
            if(keyPressList[40]==true){
                if(gameover){

                    return;
                }
                space();
                tankmove.tankAngle=180;
                tankmove.nexty+=tankmove.tankspeed;
                tankmove.tankshape=tankmove.tanknextshape;
                if(scene[Math.ceil((tankmove.nexty-20)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0||scene[Math.ceil((tankmove.nexty-20)/32)][Math.floor((tankmove.nextx-12)/32)]!=0){
                    tankmove.nextx=tankmove.x;
                    tankmove.nexty=tankmove.y;
                    return;
                }
                tankmove.tanknextshape+=1;
                if(tankmove.tanknextshape>8){
                    tankmove.tanknextshape=1;
                }
                return;
            }
            space()
            //空格,发射炮弹
            function space(){
                if(keyPressList[32]==true){
                    if(gameover){
                        location.reload();
                    }
                    if(shell.shellflage){
                        return;
                    }
                    if(tankmove.nextx<0){
                        return;
                    }
                    else{
                        shootSound.play();
                        shell.shellflage=true;
                        shell.nextx=tankmove.nextx;
                        shell.nexty=tankmove.nexty;
                        shell.shellAngle=tankmove.tankAngle;
                        if(shellInterval){
                            clearInterval(shellInterval);
                            shellInterval=null;
                        }
                        shellInterval=setInterval(drawshell, 33);
                    }
                }
            }    
        }

        //坦克实施
        function render(){
            context.save();
            context.setTransform(1,0,0,1,0,0)
            var angleInRadians =tankmove.tankAngle * Math.PI / 180;
            context.translate(tankmove.x+16, tankmove.y+16)
            context.rotate(angleInRadians);
            var tankshapeX=Math.floor(tankmove.tankshape%8)*32;
            var tankshapeY=Math.floor(tankmove.tankshape/8)*32;
            context.drawImage(tank, tankshapeX, tankshapeY,32,32,-16,-16,32,32);
            context.restore();

            context.clearRect(496,16,138,352);
            context.fillStyle = "#3cb371";
            context.fillRect(496,16,138,352);
            context.save();
            context.fillStyle = "#000000";
            context.font = "italic bold 23px serif"; 
            context.fillText("关  卡:"+level+"", 500, 80);
            context.fillText("敌  人:"+surplus+"", 500, 110); 
            context.fillText("生  命:"+life+"", 500, 140); 
            context.fillText("得  分:"+score+"", 500, 170); 
            context.fillText("最高分:"+record+"", 500, 200);
            context.restore();

            context.save();
            context.fillStyle = "#000000";
            context.font = "normal bold 15px normal"; 
            context.fillText("游戏说明: 玩家", 500, 270);
            context.fillText("操控坦克进行战", 500, 290); 
            context.fillText("斗,击毁敌方得", 500, 310); 
            context.fillText("分,被击毁或相", 500, 330); 
            context.fillText("相撞减分。", 500, 350);
            context.restore();

        }
        //画炮弹
        function drawshell(){
            if(gameover){
                return;
            }
            shellupdate()
            shellrender()
            //炮弹发射数据更新
            function shellupdate(){
                if(shell.shellAngle==0){
                    shell.nexty-=shell.shellspeed;
                    var i=scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)];
                    scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i);
                }
                if(shell.shellAngle==90){
                    shell.nextx+=shell.shellspeed;
                    var i=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)];
                    scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)]=hitwall(i);
                }
                if(shell.shellAngle==180){
                    shell.nexty+=shell.shellspeed;
                    var i=scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)];
                    scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i);
                }
                if(shell.shellAngle==270){
                    shell.nextx-=shell.shellspeed;
                    var i=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)];
                    scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)]=hitwall(i);
                }
                //检测炮弹是否撞墙
                function hitwall(i){
                    switch(i){
                        case 26:
                            if(shellInterval){
                                clearInterval(shellInterval);
                                shellInterval=null;
                            }
                            setTimeout(function(){shell.shellflage=false},300);
                            shell.nextx=-500;
                            shell.nexty=-500;
                            return 0;
                            break

                        case 31:    
                            if(shellInterval){
                                clearInterval(shellInterval);
                                shellInterval=null;
                            }
                            setTimeout(function(){shell.shellflage=false},300);
                            shell.nextx=-500;
                            shell.nexty=-500;
                            return i;
                            break
                        case 30:    
                            if(shellInterval){
                                clearInterval(shellInterval);
                                shellInterval=null;
                            }
                            setTimeout(function(){shell.shellflage=false},300);
                            shell.nextx=-500;
                            shell.nexty=-500;
                            return i;
                            break
                        default:
                            return 0;
                    }
                }                    
            }
            //炮弹发射实施
            function shellrender(){
                shell.x=shell.nextx;
                shell.y=shell.nexty;
                context.save();
                context.setTransform(1,0,0,1,0,0)
                var shellangleInRadians =shell.shellAngle * Math.PI / 180;
                context.translate(shell.x+16, shell.y+16)
                context.rotate(shellangleInRadians);
                var shellshapeX=Math.floor(shell.shellshape%8)*32;
                var shellshapeY=Math.floor(shell.shellshape/8)*32;
                context.drawImage(tank, shellshapeX, shellshapeY,32,32,-16,-16,32,32);
                context.restore();
            }
        }        
    }
    //画敌军坦克
    function drawenemy(){
        if(gameover){
            return;
        }
        for(var enemytanknum=0;enemytanknum<=2;enemytanknum++){
            var enemytank=enemy[enemytanknum];
            //enemyrmove.play();
            enemyupdate();
            enemyrender();
        }
        function enemyupdate(){
            enemytank.shapenum=(0.1+enemytank.shapenum)%8+9;//减慢滚带的速度
            enemytank.enemytankshape=Math.floor(enemytank.shapenum);
            //下
            if(enemytank.enemytankAngle==180){
                swerve()
                enemytank.nexty+=enemytank.enemytankspeed;
                if(scene[Math.ceil((enemytank.nexty-20)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0||scene[Math.ceil((enemytank.nexty-20)/32)][Math.floor((enemytank.nextx-12)/32)]!=0){
                    enemyhitwall()
                }
            }
            //左
            if(enemytank.enemytankAngle==270){
                swerve()
                enemytank.nextx-=enemytank.enemytankspeed;
                if(scene[Math.floor((enemytank.nexty-12)/32)][Math.floor((enemytank.nextx-12)/32)]!=0||scene[Math.ceil((enemytank.nexty-20)/32)][Math.floor((enemytank.nextx-12)/32)]!=0){
                    enemyhitwall()
                }
            }
            //右
            if(enemytank.enemytankAngle==90){
                swerve()
                enemytank.nextx+=enemytank.enemytankspeed;
                if(scene[Math.ceil((enemytank.nexty-20)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0||scene[Math.floor((enemytank.nexty-12)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0){
                    enemyhitwall()
                }
            }
            //上
            if(enemytank.enemytankAngle==0){
                swerve()
                enemytank.nexty-=enemytank.enemytankspeed;
                if(scene[Math.floor((enemytank.nexty-12)/32)][Math.floor((enemytank.nextx-12)/32)]!=0||scene[Math.floor((enemytank.nexty-12)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0){
                    enemyhitwall()
                }
            }
            //随机发射炮弹
            var enemyfire=Math.floor(Math.random() * 100);
            if(enemyfire==0){
                if(enemyshell.shellflage){
                    return;
                }
                if(enemytank.nextx<0){
                    return;
                }
                else{
                    enemyshell.shellflage=true;
                    enemyshell.nextx=enemytank.nextx;
                    enemyshell.nexty=enemytank.nexty;
                    enemyshell.shellAngle=enemytank.enemytankAngle;
                    if(enemyshellInterval){
                        clearInterval(enemyshellInterval);
                        enemyshellInterval=null;
                    }
                    enemyshellInterval=setInterval(enemyrdrawshell, 33);
                }
            }
            //检测是否打击到目标
            if(impact(shell,enemytank)){
                if(shellInterval){
                    clearInterval(shellInterval);
                    shellInterval=null;
                }
                score++;
                if(score>=record){
                    record=score;
                    localStorage.record=record;
                }
                if(score>=level*5){
                    level++;
                    if(level>=5){
                        gameover=true;
                        return
                    }
                    scene=scenenum[(level-1)%4];
                    for(var enemynum=0;enemynum<=2;enemynum++){
                    var tempx=48+enemynum*192;
                    //敌军坦克
                    tempenemytank={appearx:tempx,appeary:48,x:tempx,y:48,nextx:tempx,nexty:48,enemytankspeed:Speed+level*0.5,enemytankAngle:180,enemytankshape:0,shapenum:0};
                    enemy[enemynum]=tempenemytank;
                    }
                    tankmove={appearx:240,appeary:304,x:240,y:304,nextx:240,nexty:304,tankAngle:Angle,tankspeed:Speed,tankshape:shape,tanknextshape:shape};
                    enemyshell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+level*0.5+2,shellshape:21,shellAngle:Angle,shellflage:false};
                    surplus=6;
                }
                surplus--;
                setTimeout(function(){shell.shellflage=false},300);
                explode(enemytank)
                enemytank.nextx=-500;
                shell.nextx=-500;
                shell.nexty=-500;
            }
            //检测是否打击到玩家
            if(impact2(enemyshell,tankmove)){
                if(invincible){
                    return;
                }
                if(enemyshellInterval){
                    clearInterval(enemyshellInterval);
                    enemyshellInterval=null;
                }
                life--;
                if(life<=0){
                    gameover=true;
                    return;
                }
                invincible=true;
                setTimeout(function(){invincible=false},2000)
                explode(tankmove)
                setTimeout(function(){enemyshell.shellflage=false},300);
                tankmove.nextx=-500;
                enemyshell.nextx=-500;
                enemyshell.nexty=-500;
            }
            //与敌人相撞
            if(impact(enemytank,tankmove)){
                if(enemyshellInterval){
                    clearInterval(enemyshellInterval);
                    enemyshellInterval=null;
                }
                if(invincible){
                    return;
                }
                invincible=true;
                setTimeout(function(){invincible=false},2000)
                life--;
                if(life<=0){
                    gameover=true;
                    return;
                }
                explode(tankmove)
                tankmove.nextx=-500;

            }
            //自动转向
            function swerve(){
                var j=Math.floor(Math.random() * 100);
                if(j==0){
                    enemytank.enemytankAngle+=90;
                }
                if(j==1){
                    enemytank.enemytankAngle-=90;
                }
                enemytank.enemytankAngle=(enemytank.enemytankAngle+360)%360;
            }
            //撞墙转向
            function enemyhitwall(){
                enemytank.nextx=enemytank.x;
                enemytank.nexty=enemytank.y;
                var j=Math.floor(Math.random() * 2);
                if(j==0){
                    enemytank.enemytankAngle+=90;
                }
                else{
                    enemytank.enemytankAngle-=90;
                }
                enemytank.enemytankAngle=(enemytank.enemytankAngle+360)%360;
            }
        }
        //敌军tank
        function enemyrender(){
            enemytank.x=enemytank.nextx;
            enemytank.y=enemytank.nexty;
            context.save();
            context.setTransform(1,0,0,1,0,0)
            var enemyangleInRadians =enemytank.enemytankAngle * Math.PI / 180;
            context.translate(enemytank.x+16, enemytank.y+16)
            context.rotate(enemyangleInRadians);
            var enemyshapeX=Math.floor(enemytank.enemytankshape%8)*32;
            var enemyshapeY=Math.floor(enemytank.enemytankshape/8)*32;
            context.drawImage(tank, enemyshapeX, enemyshapeY,32,32,-16,-16,32,32);
            context.restore();    
        }
        //画炮弹
        function enemyrdrawshell(){
            if(gameover){
                return;
            }
            enemyrshellupdate()
            enemyrshellrender()
            //炮弹发射数据更新
            function enemyrshellupdate(){
                if(enemyshell.shellAngle==0){
                    enemyshell.nexty-=enemyshell.shellspeed;
                    var i=scene[Math.floor((enemyshell.nexty-0)/32)][Math.floor((enemyshell.nextx)/32)];
                    scene[Math.floor((enemyshell.nexty-0)/32)][Math.floor((enemyshell.nextx)/32)]=hitwall(i);
                }
                if(enemyshell.shellAngle==90){
                    enemyshell.nextx+=enemyshell.shellspeed;
                    var i=scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx+0)/32)];
                    scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx+0)/32)]=hitwall(i);
                }
                if(enemyshell.shellAngle==180){
                    enemyshell.nexty+=enemyshell.shellspeed;
                    var i=scene[Math.floor((enemyshell.nexty+0)/32)][Math.floor((enemyshell.nextx)/32)];
                    scene[Math.floor((enemyshell.nexty+0)/32)][Math.floor((enemyshell.nextx)/32)]=hitwall(i);
                }
                if(enemyshell.shellAngle==270){
                    enemyshell.nextx-=enemyshell.shellspeed;
                    var i=scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx-0)/32)];
                    scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx-0)/32)]=hitwall(i);
                }
                //检测炮弹是否撞墙
                function hitwall(i){
                    switch(i){
                        case 26:
                            if(enemyshellInterval){
                                clearInterval(enemyshellInterval);
                                enemyshellInterval=null;
                            }
                            setTimeout(function(){enemyshell.shellflage=false},300);
                            enemyshell.nextx=-500;
                            enemyshell.nexty=-500;
                            return 0;
                            break

                        case 31:    
                            if(enemyshellInterval){
                                clearInterval(enemyshellInterval);
                                enemyshellInterval=null;
                            }
                            setTimeout(function(){enemyshell.shellflage=false},300);
                            enemyshell.nextx=-500;
                            enemyshell.nexty=-500;
                            return i;
                            break
                        case 30:    
                            if(enemyshellInterval){
                                clearInterval(enemyshellInterval);
                                enemyshellInterval=null;
                            }
                            setTimeout(function(){enemyshell.shellflage=false},300);
                            enemyshell.nextx=-500;
                            enemyshell.nexty=-500;
                            return i;
                            break
                        default:
                            return 0;
                    }
                }                    
            }
            //炮弹发射实施
            function enemyrshellrender(){
                enemyshell.x=enemyshell.nextx;
                enemyshell.y=enemyshell.nexty;
                context.save();
                context.setTransform(1,0,0,1,0,0)
                var shellangleInRadians =enemyshell.shellAngle * Math.PI / 180;
                context.translate(enemyshell.x+16, enemyshell.y+16)
                context.rotate(shellangleInRadians);
                var shellshapeX=Math.floor(enemyshell.shellshape%8)*32;
                var shellshapeY=Math.floor(enemyshell.shellshape/8)*32;
                context.drawImage(tank, shellshapeX, shellshapeY,32,32,-16,-16,32,32);
                context.restore();
            }
        }
    }
    //检测撞击
    function impact(one,two){
        var dx=one.nextx-two.nextx;
        var dy=one.nexty-two.nexty;
        var distance=Math.sqrt(dx*dx+dy*dy)
        if(distance<=26){
            return true;
        }
        else{
            return false;
        }
    }
    //检测撞击
    function impact2(one,two){
        var dx=one.nextx-two.nextx;
        var dy=one.nexty-two.nexty;
        var distance=Math.sqrt(dx*dx+dy*dy)
        if(distance<=26){
            return true;
        }
        else{
            return false;
        }
    }
    //爆炸
    function explode(dietank){
        explodeSound.play();
        var x=dietank.x;
        var y=dietank.y;
        var times=0;
        var dietankInterval=setInterval(function(){
            drawdietank(17+Math.floor(times/10));
            times++;
            if(times>29){
                clearInterval(dietankInterval);
                setTimeout(function(){dietank.shellflage=false},300);
                if(dietank.appeary==48){
                    if(surplus<=2){
                        dietank.enemytankspeed=0;
                        return;
                    }    
                }
                dietank.nextx=dietank.appearx;
                dietank.nexty=dietank.appeary;
            }
        },15)
        function drawdietank(dietankshape){
            context.save();
            context.setTransform(1,0,0,1,0,0)
            context.translate(x+16, y+16)
            var dietankshapeX=Math.floor(dietankshape%8)*32;
            var dietankshapeY=Math.floor(dietankshape/8)*32;
            context.drawImage(tank, dietankshapeX, dietankshapeY,32,32,-16,-16,32,32);
            context.restore();    
        }
    }
    var score=0;//分数
    var level=1;//关卡
    var surplus=5;//剩余敌人数量
    var life=3;//生命
    var invincible=false//无敌
    var storage = window.localStorage;//"localStorage"HTML5存储数据
    if(storage.length==0){
        localStorage.record=0;
    }
    var record=localStorage.record;//最高分
    var gameover=false;
    var enemyInterval=null;//敌人timer
    var tankInterval=null;//玩家timer
    var Speed=3;//运动的速度
    var Angle=0;//tank面向方向
    var shape=1;//tank当前状态
    //坦克数组
    tankmove={appearx:240,appeary:304,x:240,y:304,nextx:240,nexty:304,tankAngle:Angle,tankspeed:Speed,tankshape:shape,tanknextshape:shape};
    //炮弹数组
    shell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+4,shellshape:20,shellAngle:Angle,shellflage:false};
    //敌军数组
    var enemy=new Array();
    //敌军炮弹数组
    var enemyshell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+2,shellshape:21,shellAngle:Angle,shellflage:false};
    //场景数组
    var scenenum=[[
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
    [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
    [31, 0, 0, 0,26,26, 0, 0, 0,26,26, 0, 0, 0,31],
    [31, 0, 0,26, 0, 0,26, 0,26, 0, 0,26, 0, 0,31],
    [31, 0, 0,26, 0, 0, 0,26, 0, 0, 0,26, 0, 0,31],
    [31,26, 0, 0,26, 0, 0, 0, 0, 0,26, 0, 0,26,31],
    [31,26, 0, 0, 0,26, 0, 0, 0,26, 0, 0, 0,26,31],
    [31,26, 0, 0, 0, 0,26, 0,26, 0, 0, 0, 0,26,31],
    [31,26,26,26,26, 0, 0,26, 0, 0,26,26,26,26,31],
    [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
    ],
    [
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
    [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
    [31, 0,26,26,26,26,0, 0,0,26,26, 26,26,0,31],
    [31, 0, 0, 0, 0,26, 0, 0, 0, 26,0, 0, 0, 0,31],
    [31,26,26,26, 26,26,26,26,26,26,26,26, 26,26,31],
    [31, 0, 26, 0, 0, 0, 0,26, 0, 0, 0, 0, 26,0,31],
    [31,26, 26,0,26,26,26,26,26,26,26, 0,26,26,31],
    [31, 0, 0, 0, 0, 26,0, 0, 0,26, 0, 0, 0, 0,31],
    [31,26,26,26,26, 0, 0,0,0,0, 26,26,26,26,31],
    [31, 0, 0,26, 26, 0, 0, 0, 0, 0, 26,26, 0, 0,31],
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
    ],
    [
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
    [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
    [31, 0,26,26,26,26,26, 0,26,26,26,26,26, 0,31],
    [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31],
    [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31],
    [31, 0,26, 0, 0, 0,26, 0,26,26,26,26,26, 0,31],
    [31, 0,26, 0, 0, 0,26, 0, 0, 0, 0, 0,26, 0,31],
    [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31],
    [31, 0,26,26,26,26,26, 0,26,26,26,26,26, 0,31],
    [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
    ],
    [
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
    [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
    [31, 0,26,26,26,26,26, 0,26,26,26, 0,26,26,31],
    [31, 0, 0, 0, 0,26, 0, 0, 0, 0,26, 0, 0, 0,31],
    [31,26,26,26, 0,26,26,26,26,26,26,26, 0,26,31],
    [31, 0, 0, 0, 0, 0, 0,26, 0, 0, 0, 0, 0,26,31],
    [31,26, 0,26,26,26,26,26,26,26,26, 0,26,26,31],
    [31, 0, 0, 0, 0, 0,26, 0, 0,26, 0, 0, 0, 0,31],
    [31,26,26,26,26, 0, 0,26,26,26, 0,26,26,26,31],
    [31, 0, 0,26, 0, 0, 0, 0, 0, 0, 0,26, 0, 0,31],
    [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
    ]]
    var scene=scenenum[(level-1)];
    //计时器控制炮弹发出
    var shellInterval=null;
    var enemyshellInterval=null;
    for(var enemynum=0;enemynum<=2;enemynum++){
        var tempx=48+enemynum*192;
    //敌军坦克
    tempenemytank={appearx:tempx,appeary:48,x:tempx,y:48,nextx:tempx,nexty:48,enemytankspeed:Speed-1,enemytankAngle:180,enemytankshape:0,shapenum:0};
    enemy[enemynum]=tempenemytank;
    }
    //键盘事件
    var keyPressList=[];
    document.onkeydown=function(e){
        e=e?e:window.event;
        keyPressList[e.keyCode]=true;
    }
    document.onkeyup=function(e){
        e=e?e:window.event;
        keyPressList[e.keyCode]=false;
    }
    //声音
    //爆炸
    var explodeSound = document.createElement("audio");
    document.body.appendChild(explodeSound);
    explodeSound.setAttribute("src", "explode1.mp3");
    explodeSound.valume=.5;
    //发射子弹
    var shootSound = document.createElement("audio");
    document.body.appendChild(shootSound);
    shootSound.setAttribute("src", "shoot1.mp3");
    shootSound.volume=.5;
    //玩家行走
    var playermove = document.createElement("audio");
    document.body.appendChild(playermove);
    playermove.setAttribute("src", "move1.mp3");
    playermove.valume=.001;
    //敌人行走
    var enemyrmove = document.createElement("audio");
    document.body.appendChild(enemyrmove);
    enemyrmove.setAttribute("src", "move2.mp3");
    enemyrmove.valume=.001;
    //游戏开始

    //游戏失败

    //开始游戏
    function start(){
        tankInterval=setInterval(drawtank, 33);
        enemyInterval=setInterval(drawenemy, 33);
    }
    //debug函数
    var debug = function(log){
        try{
            console.log(log);//safari可用
        }
        catch(e){}
    }
}
function supportedAudioFormat(audio) {
    var returnExtension = "";
    if (audio.canPlayType("audio/ogg") =="probably" || audio.canPlayType("audio/ogg") == "maybe") {
        returnExtension = "ogg";
    } else if(audio.canPlayType("audio/wav") =="probably" || audio.canPlayType("audio/wav") == "maybe") {
        returnExtension = "wav";
    } else if(audio.canPlayType("audio/mp3") == "probably" || audio.canPlayType("audio/mp3") == "maybe") {
        returnExtension = "mp3";
    }

    return returnExtension;

}

via:

从前我们有分享过非常多杰出的HTML5戏耍,某个依旧很有趣的,比方HTML5版切水果游戏和HTML5中...

5、HTML5 3D阴影文字特效

明日大家要来共享一款极其轻巧大气的HTML5 3D文字特效,那几个3D文字特效是由此文字加粗以及文字阴影来促成的,效果特别准确。同一时候大家在html5tricks网址上也享受过十分多炫丽的文字特效,举例CSS3文字阴影效果
阴影角度可随鼠标变化、龙精虎猛的CSS3
Loading文字特效。

图片 2

在线演示 
      源码下载

坦克战斗晋级版,顶尖坦克战争

有关娱乐: 坦克大战 公布时间:2017-10-12

坦克战争或然是许几个人时辰候的追忆,卓越的游戏的方法,恐慌激情的操作经验。大概过四个人都想重申这款极度杰出有趣的坦克战争游戏,今日我们要来介绍的是那款坦克战役游戏的晋级版,一流坦克大战。一流坦克大战作为那款极其杰出的坦克大战游戏的升级版,到底会有哪儿分化,又会有啥紧张刺激的玩的方法体验,上面就由作者带你走进那款特别有趣的游乐,一级坦克战役。

图片 3

超级坦克作为一款特别耐玩的游乐,大概是相当的多人时辰候的精彩回想。接下来就由小编来介绍那款特别卓越的玩耍的晋级换代版,一级坦克战役。一流坦克战斗作为坦克战斗的升迁版,在玩的方法体验上保留了优异坦克战斗的游戏的方法,不过在十分多细节上又有了科学的精雕细琢和晋级换代。接下来就由作者介绍一下详尽的更换和游戏的方法。

一级坦克大战比起非凡的坦克战争,首先更动的正是游戏的参与人口,在优秀坦克大战中,游戏的插足人数正是独有一位独自的通过海关。作为一名孤胆大侠,或许通过海关的时候只有壹人,通关的难度尚且不谈,但是通过海关之后的欢畅却没人分享那实在是一个非常浪费的事情。所以在一流坦克大战中投入了双人的游戏的方法。

当存在了双人的玩的方法时,那么一级坦克战争就有了不一致的经验。双人坦克大战在打闹中投入了合作和对抗的玩的方法。在同盟的方式中,四人方可合营一齐产生总体关卡。在对垒形式中能够相互冲突,相互炮击。

上述正是一流坦克战役的牵线。相对于卓越坦克大战,希望大家能够尤其爱怜那款杰出版的进级款。一流坦克战斗,风趣值得一试。

上一篇:水果总是看,卓越的接连看小游戏
下一篇:一款玄妙的飞行棋,卡通飞行棋

HTML5坦克战斗(韩顺平版本)

 2017-3-22
22:46:22 by SemiconductorKING

 

  年暑假求学了须臾间HTML5落到实处轻巧的坦克大战,感到对JavaScript初学者的话,练习这么些小游戏代码段能够学到相当多东西,包涵canvas的简约利用,类的组织,类的后续等等。编写多个全部的玩乐要有较强的逻辑性,那一个demo的求学录像以及demo文件下载见自身分享的链接:

   链接:
密码:mcp2

 

   demo截图:

图片 4

 

  此demo只是贰个轻巧易行的练习,效果low不low先不提,看代码吧:

 

  HTML文件代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset='utf-8'/>
  5 <script src='tank.js'></script>
  6 </head>
  7 <body onkeydown="changeDirect()">
  8 <h1 style="color: #0714b9;">html5坦克大战</h1>
  9 <div style="margin: 30px">
 10     <canvas id='tankMap' width='500px' height='300px' style='background-color:#3e0549;'>
 11         你的浏览器不支持canvas标签 ||||| You are seeing this message because your web browser does not support the canvas tag.
 12     </canvas>
 13 </div>
 14 <div id='add1'></div>
 15 <div id='add2'></div>
 16 <div id='add3'></div>
 17 <div style="margin: 30px;font-size: 12px">
 18     <p>控制方法:按下键盘w s a d或者↑ ↓ ← →分别是坦克的上下左右行驶<br/>按下j或者Enter键为射击</p>
 19 </div>
 20 </body>
 21 <script>
 22     var canvas = document.getElementById('tankMap');
 23     //获得画笔
 24     var ctx = canvas.getContext('2d');
 25 
 26     //定义炸弹数组
 27     var bombs = new Array();
 28 
 29     //构造英雄
 30     var hero = new Hero(380,260,0,heroColor);
 31 
 32     //创建敌人数组
 33     var enemyTanks = new Array();
 34 
 35     //创建敌人的子弹数组
 36     var enemyBullets = new Array();
 37     for(var i=0;i<6;i++){
 38         var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);
 39         enemyTanks[i] = enemyTank;
 40         //drawTank(enemyTanks[i]);
 41         //让敌人的坦克动起来
 42         var timer = window.setInterval("enemyTanks["+i+"].run()",50);
 43         enemyTanks[i].timer = timer;
 44         //让敌人发射子弹
 45         var enemyBullet = new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,enemyTanks[i].direct,enemyTanks[i],'enemy');
 46         enemyBullets.push(enemyBullet);
 47         enemyBullets[i].timer = window.setInterval("enemyBullets["+i+"].run()",50);
 48     }
 49 
 50     //定义英雄子弹数组
 51     var heroBullets = new Array();
 52     var heroBullet = null;
 53     
 54     if(hero.isLive){
 55             drawTank(hero);
 56         }
 57 
 58     //flashMap();
 59     //重置画布
 60     function flashMap(){
 61         ctx.clearRect(0,0,500,300);
 62         isHitHeroTank(enemyBullets,hero);
 63         if(hero.isLive){
 64             drawTank(hero);
 65         }
 66         
 67         isHitEnemyTank(heroBullets,enemyTanks);
 68         //画出自己坦克的子弹
 69         drawHeroBullet(heroBullets);
 70         //画出敌人坦克的子弹
 71         drawEnemyBullet(enemyBullets,enemyTanks);
 72         for(var i=0;i<6;i++){
 73             if(enemyTanks[i].isLive){
 74                 drawTank(enemyTanks[i]);
 75             }
 76         }
 77 
 78         //画出爆炸图片
 79         for(var k=0;k<bombs.length;k++){
 80             var img = new Image();
 81             img.src = 'bomb_1.gif';
 82             var x = bombs[k].x;
 83             var y = bombs[k].y;
 84             ctx.drawImage(img,x,y,30,30);
 85             ctx.drawImage(img,x,y,40,35);
 86             ctx.drawImage(img,x,y,35,40);
 87             bombs.splice(k,1);
 88         }
 89     }
 90 
 91     function changeDirect(){
 92         var keycode = event.keyCode;
 93         switch(keycode){
 94             case 38:;
 95             case 87:hero.moveUp();break;
 96             case 39:;
 97             case 68:hero.moveRight();break;
 98             case 40:;
 99             case 83:hero.moveBottom();break;
100             case 37:;
101             case 65:hero.moveLeft();break;
102             case 74:;
103             case 13:hero.shotEnemy();break;
104         }
105         flashMap();
106     }
107     window.setInterval("flashMap()",50);
108 </script>
109 </html>

 

  tank.js代码:

  1 //定义敌人和我们自己的坦克的颜色
  2 var enemyColor = new Array("#0BB","#0FF");
  3 var heroColor = new Array("#dc0","#ff5");
  4 //封装一个公用的坦克父类
  5 function Tank(x,y,direct){
  6     this.x = x;
  7     this.y = y;
  8     this.speed = 3;
  9     this.direct = direct;
 10     this.moveUp = function(){
 11         if (hero.y>0) {
 12             hero.y -= hero.speed;
 13         }
 14         hero.direct = 0;
 15     }
 16     this.moveRight = function(){
 17         if (hero.x+30<500) {
 18             hero.x += hero.speed;
 19         }
 20         hero.direct = 1;
 21     }
 22     this.moveBottom = function(){
 23         if (hero.y+30<300) {
 24             hero.y += hero.speed;
 25         }
 26         hero.direct = 2;
 27     }
 28     this.moveLeft = function(){
 29         if (hero.x>0) {
 30             hero.x -= hero.speed;
 31         }
 32         hero.direct = 3;
 33     }
 34 }
 35 
 36 //英雄坦克类
 37 function Hero(x,y,direct,color){
 38     //将坦克类的构造方法赋给hero
 39     this.hero = Tank;
 40     //调用,拥有坦克类的所有的属性和方法
 41     this.hero(x,y,direct);
 42     this.color = color;
 43     this.direct = direct;
 44     this.isLive = true;
 45     this.shotEnemy = function(){
 46         switch(this.direct){
 47             case 0:
 48                 heroBullet = new Bullet(this.x+9,this.y,this.direct);
 49             break;
 50             case 1:
 51                 heroBullet = new Bullet(this.x+30,this.y+9,this.direct);
 52             break;
 53             case 2:
 54                 heroBullet = new Bullet(this.x+9,this.y+30,this.direct);
 55             break;
 56             case 3:
 57                 heroBullet = new Bullet(this.x,this.y+9,this.direct);
 58             break;
 59         }
 60         heroBullets.push(heroBullet);
 61         heroBullets[heroBullets.length-1].timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
 62     }
 63 }
 64 //敌人的坦克
 65 function EnemyTank(x,y,direct,color){
 66     //将坦克类的构造方法赋给敌人坦克
 67     this.enemyTank = Tank;
 68     //调用,拥有坦克类的所有的属性和方法
 69     this.enemyTank(x,y,direct);
 70     this.color = color;
 71     this.isLive = true;
 72     this.timer = null;
 73     this.speed = 1;
 74     this.count = 0;
 75     this.direct = direct;
 76     this.bulletIsLive = true;
 77     this.run = function(){
 78         switch(this.direct){
 79             case 0:
 80                 if(this.y>0){
 81                 this.y--;
 82             }
 83             break;
 84             case 1:
 85                 if(this.x+30<500){
 86                 this.x += this.speed;
 87             }
 88             break;
 89             case 2:
 90                 if(this.y+30<300){
 91                 this.y += this.speed;
 92             }
 93             break;
 94             case 3:
 95                 if(this.x>0){
 96                 this.x -= this.speed;
 97             }
 98             break;
 99         }
100         
101         if(this.count>=30){
102             this.direct = Math.round(Math.random()*3);
103             this.count=0;
104         }
105         this.count++;
106         //在坦克走的过程中,判断一下,这个坦克的子弹是否活着
107         if(this.bulletIsLive == false && this.isLive){
108             //子弹over,加子弹
109             switch(this.direct){
110                 case 0:
111                     enemyBullets.push(new Bullet(this.x+9,this.y,this.direct,this,'enemy'));
112                 break;
113                 case 1:
114                     enemyBullets.push(new Bullet(this.x+30,this.y+9,this.direct,this,'enemy'));
115                 break;
116                 case 2:
117                     enemyBullets.push(new Bullet(this.x+9,this.y+30,this.direct,this,'enemy'));
118                 break;
119                 case 3:
120                     enemyBullets.push(new Bullet(this.x,this.y+9,this.direct,this,'enemy'));
121                 break;
122             }
123             enemyBullets[enemyBullets.length-1].timer = window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50);
124                 this.bulletIsLive = true;
125         }
126     }
127 }
128 //绘制坦克
129     function drawTank(hero){
130     switch(hero.direct){
131         case 0:
132         case 2:
133             ctx.fillStyle = hero.color[0];
134             ctx.fillRect(hero.x,hero.y,5,30);
135             ctx.fillRect(hero.x+15,hero.y,5,30);
136             ctx.fillRect(hero.x+6,hero.y+5,8,20);
137             ctx.fillStyle = hero.color[1];
138             ctx.beginPath();
139             ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);
140             ctx.closePath();
141             ctx.fill();
142             //画出炮筒(直线)
143             ctx.strokeStyle = hero.color[1];
144             ctx.lineWidth = 2;
145             ctx.moveTo(hero.x+10,hero.y+15);
146             if(hero.direct==0){
147                 ctx.lineTo(hero.x+10,hero.y);
148             }else if(hero.direct==2){
149                 ctx.lineTo(hero.x+10,hero.y+30);
150             }
151             ctx.stroke();
152         break;
153         case 1:
154         case 3:
155             ctx.fillStyle = hero.color[0];
156             ctx.fillRect(hero.x,hero.y,30,5);
157             ctx.fillRect(hero.x,hero.y+15,30,5);
158             ctx.fillRect(hero.x+5,hero.y+6,20,8);
159             //需要注意,画圆的时候需要重新开启路径
160             ctx.fillStyle = hero.color[1];
161             ctx.beginPath();
162             ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);
163             ctx.closePath();
164             ctx.fill();
165             //画出炮筒(直线)
166             ctx.strokeStyle = hero.color[1];
167             ctx.lineWidth = 2;
168             ctx.moveTo(hero.x+15,hero.y+10);
169             if(hero.direct ==1){
170                 ctx.lineTo(hero.x+30,hero.y+10);
171             }else if(hero.direct ==3){
172                 ctx.lineTo(hero.x,hero.y+10);
173             }
174             ctx.stroke();
175         break;
176     }
177 }
178 
179 //定义一个子弹类
180 function Bullet(x,y,direct,tank,type){
181     this.x = x;
182     this.y = y;
183     this.speed = 3;
184     this.direct = direct;
185     this.timer = null;
186     this.isLive = true;
187     this.tank = tank;
188     this.type = type;
189     this.run = function(){
190         switch(this.direct){
191             case 0:
192                 this.y -= this.speed;
193             break;
194             case 1:
195                 this.x += this.speed;
196             break;
197             case 2:
198                 this.y += this.speed;
199             break;
200             case 3:
201                 this.x -= this.speed;
202             break;
203         }
204         document.getElementById('add1').innerText = " 子弹x轴:"+this.x+" 子弹y轴:"+this.y;
205         document.getElementById('add2').innerText = " 坦克x轴:"+hero.x+" 坦克y轴:"+hero.y;
206         document.getElementById('add3').innerText = " hero子弹数量:"+heroBullets.length;
207         if(this.x <0 || this.x>=500 ||this.y<0 || this.y>300 || this.isLive==false){
208             this.isLive = false;
209             if(this.type=='enemy'){
210                 this.tank.bulletIsLive = false;
211             }
212             window.clearInterval(this.timer);
213         }
214     }
215 }
216 function drawHeroBullet(bullets){
217     for(var i=0;i<bullets.length;i++){
218         var heroBullet = bullets[i];
219         if(heroBullet.isLive){
220             ctx.fillStyle = '#FEF26E';
221             ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
222         }
223     }
224 }
225 //画出敌人坦克的子弹
226 function drawEnemyBullet(enemyBullets){
227     for(var i=0;i<enemyBullets.length;i++){
228         var enemyBullet = enemyBullets[i];
229         if(enemyBullet.isLive){
230             ctx.fillRect(enemyBullet.x,enemyBullet.y,2,2);
231         }
232     }
233 }
234 function isHitEnemyTank(heroBullets,enemyTanks){
235     for(var i=0;i<heroBullets.length;i++){
236         for(var j=0;j<enemyTanks.length;j++){
237             //判断一下自己的子弹和敌人的坦克坐标
238             if(enemyTanks[j].isLive){
239                 switch(enemyTanks[j].direct){
240                 case 0:
241                 case 2:
242                     if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+20&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+30){
243                         //标记敌人的坦克和我们的子弹已经死掉了
244                         heroBullets[i].isLive = false;
245                         enemyTanks[j].isLive = false;
246                         var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
247                         bombs.push(bomb);
248 
249                 }
250                 break;
251                 case 1:
252                 case 3:
253                     if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+30&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+20){
254                         //标记敌人的坦克和我们的子弹已经死掉了
255                         heroBullets[i].isLive = false;
256                         enemyTanks[j].isLive = false;
257                         var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
258                         bombs.push(bomb);
259                 }
260                 break;
261             }
262             }
263             
264         }
265     }
266 }
267 
268 //定义炸弹类
269 function Bomb(x,y){
270     this.x = x;
271     this.y = y;
272 }
273 
274 //判断敌人的子弹是否击中自己的坦克
275 function isHitHeroTank(enemyBullets,heroTank){
276     for(var i=0;i<enemyBullets.length;i++){
277         if(enemyBullets[i].isLive && heroTank.isLive){
278             switch(heroTank.direct){
279             case 0:
280             case 2:
281                 if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+20 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +30){
282                 heroTank.isLive = false;
283                 enemyBullets[i].isLive = false;
284             }
285             break;
286             case 1:
287             case 3:
288                 if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+30 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +20){
289                 heroTank.isLive = false;
290                 enemyBullets[i].isLive = false;
291             }
292             break;
293         }
294         }
295     }
296 }

end...

C++基本知识

是因为品种中用到了面向对象的讨论,因而你还必要具有那三篇小说中的知识:

  • 封装

C++代码磨炼营 | 绘制星空

  • 继承

C++代码练习营 | 另一片星空

  • 多态

C++代码磨炼营 | 各样的星空

有了那些知识策画,大家就足以起来项目了。

2、HTML5 3D 粒子波浪动画特效

事先大家享受过三个HTML5
3D点阵列波浪翻滚动画,效果极度感动。前些天大家要在来分享一款晋级版HTML5 3D粒子波浪动画特效,大家得以转动分歧的见解来欣赏粒子波浪的滚动特效。HTML5在动画制作地点真正令人耳目一新。

图片 5

在线演示   
    源码下载

GitHub基本选拔格局

GitHub中最基本的施用格局正是查看外人托管的代码,借使您还不会,请查看自身特别为你写的粗略指引:GitHub托管代码查看

8、HTML5 Canvas 3D折线图表应用

今日大家再来切磋一下关于HTML5图形应用的标题,那款HTML5图片是依据canvas的3D折线图表,图表在开端化的时候会基于数总部把折线分割成多条线条,然后线段将日益悬浮到数分公司对应数值的地点。由于是3D的法力,所以图表的折线也和另外折线图表的两样。

图片 6

在线演示 
   
  源码下载

以上便是8个精粹HTML5 3D动画,迎接收藏分享。

坦克大战8

原文 |
GitHub

图片 7

这一篇中,我们给每三个关卡中投入了游戏的连锁音信。

6、HTML5 3D服装摆动特效 超酷HTML5 3D动画

前方大家介绍过比比较多HTML5 3D动画特效,最出色的要算HTML5
WebGL水面水波荡漾特效。明天自个儿再向我们享用一款HTML5
3D服装摆动动画特效,动画也是在HTML5
Canvas上到位,它模拟服装晾在绳子上,点击鼠标能够让衣裳摆动起来,就行业作风吹动它一律,特别逼真炫丽。

图片 8

在线演示   
    源码下载

坦克大战3

原文 |
GitHub

图片 9

这一篇中,我们让仇敌坦克学会了机关转接。

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=988

上一篇:

下一篇:

相关文章