html5 游戏

关注

原创最新推荐文章于 2025-06-22 12:06:17 发布 633 阅读 AI 写同款· GEO 优化 ›

10款超炫HTML5游戏附游戏源码棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。在线演示源码下载。阅读详情

html页面源码

<!DOCTYPE html>
<html>
<head>
    <title>坦克大战</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/tankJS.js"></script>
</head>
<body onkeydown="move()">
    <!--...map...-->
    <h1>HTML经典游戏-坦克</h1>
    <canvas id="map" width="700px" height="500px" style="background-color: black"></canvas>
    <span id="data"></span>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("map");
    var context = canvas.getContext("2d");
    var ico_Color = new Array("#BA9658","#FEF26E");
    var enemy_Color = new Array("#00A2B5","#FEF26E");
    //创建一个子弹数组
    var bullets = new Array();
    //创建一个tank对象
    var ico = new ico(50,250,0,10,ico_Color);
    //创建敌人坦克
    var enemyTanks = new Array();
    for(var i=0;i<3;i++){
       var enemyTank = new EnemyTank((i+1)*50,10,2,5,enemy_Color);
        enemyTanks[i] = enemyTank;
    }
    //刷新map
    function flashMap(){
        //清屏
        context.clearRect(0,0,700,500);
        //绘制用户的坦克
        drawTank(ico);
        //绘制子弹
        drawBullet(bullets);
        //绘制敌人的坦克
        for(var i=0;i<3;i++){
            drawTank(enemyTanks[i]);
        }
    }
     //首次调用
    flashMap();
    function move(){
       var code = event.keyCode;
        switch(code){
            case 87:
                ico.moveUp();
                break;
            case 68:
                ico.moveRight();
                break;
            case 83:
                ico.moveDown();
                break;
            case 65:
                ico.moveLeft();
                break;
            case 74:
                ico.short();
                break;
        }
        flashMap();
    }
    window.setInterval("flashMap()",100);
</script>
</html>

js页面

/**
 * Created with IntelliJ IDEA.
 * User: Administrator
 * Date: 13-7-16
 * Time: 下午3:40
 * To change this template use File | Settings | File Templates.
 */
//创建一个tank类
function Tank(x,y,direct,speed,color){
    this.x=x;
    this.y=y;
    this.color = color;
    this.speed = speed;  //速度
    this.direct = direct;

    this.moveUp = function(){
        this.direct=0;
        this.y-=this.speed;
    }
    this.moveRight = function(){
        this.direct=1;
        this.x+=this.speed;
    }
    this.moveDown = function(){
        this.direct=2;
        this.y+=this.speed;
    }
    this.moveLeft = function(){
        this.direct=3;
        this.x-=this.speed;
    }
}
//定义一个子弹的类
function Bullet(x,y,direct,speed){
    this.x = x;
    this.y = y;
    this.direct = direct;
    this.speed = speed;
    this.timer = null;
    this.isLive = true;
    this.run = function (){
        if(this.x<=0||this.y<=0||this.x>700||this.y>500){
           window.clearInterval(this.timer);
           this.isLive = false;
        } else{
            switch(this.direct){
                case 0:
                    this.y-=this.speed;
                    break;
                case 1:
                    this.x+=this.speed;
                    break;
                case 2:
                    this.y+=this.speed;
                    break;
                case 3:
                    this.x-=this.speed;
                    break;
            }
        }
        var data = document.getElementById("data");
    }
}
//定义玩家坦克
function ico(x,y,direct,speed,color){
    //通过对象冒充达到继承
    this.tank_Tank = Tank;
    this.tank_Tank(x,y,direct,speed,color);
    this.short = function (){
        var bullet = new Bullet(this.x,this.y,this.direct,10);
        bullets.push(bullet);
        bullets[bullets.length-1].timer = window.setInterval("bullets["+(bullets.length-1)+"].run()",50);
    }
}
//定义一个敌人坦克
function EnemyTank(x,y,direct,speed,color){
    this.enemy_Tank = Tank;
    this.enemy_Tank(x,y,direct,speed,color);
}
 //绘制子弹的函数
function drawBullet(bullets){

    for(var i=0;i<bullets.length;i++){
        var bullet = bullets[i];
        data.innerText="n"+bullets.length;
        if(bullet!=null&&bullet.isLive){
            context.fillStyle="#FEF26E";
            switch(bullet.direct){
                case 0:
                    context.fillRect(bullet.x-1,bullet.y-15,2,2);
                    break;
                case 1:
                    context.fillRect(bullet.x+15,bullet.y-1,2,2);
                    break;
                case 2:
                    context.fillRect(bullet.x-1,bullet.y+15,2,2);
                    break;
                case 3:
                    context.fillRect(bullet.x-15,bullet.y-1,2,2);
                    break;
            }
        }
    }
}

//tank绘制函数
function drawTank(tank){
    switch(tank.direct){
        case 0:
        case 2:
            // DED284
            context.fillStyle=tank.color[0];
            //画坦克左边轮子
            context.fillRect(tank.x-10,tank.y-15,5,30);
            //画坦克右边轮子
            context.fillRect(tank.x+5,tank.y-15,5,30);
            //画坦克中间的躯体
            context.fillRect(tank.x-4,tank.y-10,8,20);
            //设置context的颜色
            context.fillStyle=tank.color[1];
            //画坦克中间的圆盖子
            context.beginPath();
            context.arc(tank.x,tank.y,4,0,360,true);
            context.closePath();
            context.fill();
            //画坦克中间的大炮
            context.beginPath();
            context.strokeStyle=tank.color[1];
            context.lineWidth=2;
            context.moveTo(tank.x,tank.y);
            if(tank.direct == 0){
                context.lineTo(tank.x,tank.y-15);
            } else if(tank.direct == 2){
                context.lineTo(tank.x,tank.y+15);
            }
            context.closePath();
            context.stroke();
            break;
        case 1:
        case 3:
            // DED284
            context.fillStyle=tank.color[0];
            //画坦克左边轮子
            context.fillRect(tank.x-15,tank.y-10,30,5);
            //画坦克右边轮子
            context.fillRect(tank.x-15,tank.y+5,30,5);
            //画坦克中间的躯体
            context.fillRect(tank.x-10,tank.y-4,20,8);
            //设置context的颜色
            context.fillStyle=tank.color[1];
            //画坦克中间的圆盖子
            context.beginPath();
            context.arc(tank.x,tank.y,4,0,360,true);
            context.closePath();
            context.fill();
            //画坦克中间的大炮
            context.beginPath();
            context.strokeStyle=tank.color[1];
            context.lineWidth=2;
            context.moveTo(tank.x,tank.y);
            if(tank.direct == 1){
                context.lineTo(tank.x+15,tank.y);
            } else if(tank.direct == 3){
                context.lineTo(tank.x-15,tank.y);
            }
            context.closePath();
            context.stroke();
            break;
    }
}