贪吃蛇

最新推荐文章于 2024-04-20 15:20:30 发布

weixin_42069386

最新推荐文章于 2024-04-20 15:20:30 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/weixin_42069386/article/details/80601833

版权

贪吃蛇

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var map;  //创建地图
    function Map(){  //封装地图的类
        this.width=1200;   //设置属性
        this.height=600;
        this.bgColor="black";
        this.margin="0 auto";
        this._map=null;
        this.creatMap=function(){  //接收属性
            if(this._map==null){
                this._map=document.createElement("div");   //创建dom元素
                this._map.style.width=this.width+"px";
                this._map.style.height=this.height+"px";
                this._map.style.backgroundColor=this.bgColor;
                this._map.style.position="relative";
                this._map.style.margin=this.margin;
                document.body.appendChild(this._map);
            }
        }
    }
    var snake;   //创建蛇
    function Snake(){   //封装蛇类
        this.direct="right";   //默认方向向右
        this.width=30;  //设置属性
        this.height=30;
        this.snakebody=[[3,1,"blue",null],[2,1,"white",null],[1,1,"white",null]];   //封装蛇身体
        this.creatSnake=function(){   //接收属性
            for(var i=0;i<this.snakebody.length;i++){
                if(this.snakebody[i][3]==null){
                    this.snakebody[i][3]=document.createElement("div");  //创建dom元素
                    this.snakebody[i][3].style.width=this.width+"px";
                    this.snakebody[i][3].style.height=this.height+"px";
                    this.snakebody[i][3].style.backgroundColor=this.snakebody[i][2];
                    this.snakebody[i][3].style.position="absolute";
                    map._map.appendChild(this.snakebody[i][3]);
                }
                this.snakebody[i][3].style.left=this.snakebody[i][0]*this.width+"px";
                this.snakebody[i][3].style.top=this.snakebody[i][1]*this.height+"px";
            }
        }
        this.snakeMove=function(){   //封装蛇移动方法
            for(var i=snake.snakebody.length-1;i>0;i--){
                this.snakebody[i][0]=this.snakebody[i-1][0];
                this.snakebody[i][1]=this.snakebody[i-1][1];
            }
            switch (this.direct){  //根据键盘输入决定x,y
                case "left":this.snakebody[0][0]-=1;break;
                case "right":this.snakebody[0][0]+=1;break;
                case "up":this.snakebody[0][1]-=1;break;
                case "down":this.snakebody[0][1]+=1;break;
            }
            this.snakeback();
            this.creatSnake();
            if(this.snakebody[0][0]==food.x&&this.snakebody[0][1]==food.y){  //判断蛇头部是否和食物坐标相同，将食物变成蛇身体一部分
                this.snakebody.push([
                        this.snakebody[this.snakebody.length-1][0],
                        this.snakebody[this.snakebody.length-1][1],
                        "white",
                        null
                ]);
                food.creatFood();
            }
            this.creatSnake();
            this.snakeself();
        }
        this.snakeback=function(){  //避免蛇出界
            if(this.snakebody[0][0]>=40){
                this.snakebody[0][0]=0;
            }
            if(this.snakebody[0][0]<0){
                this.snakebody[0][0]=39;
            }
            if(this.snakebody[0][1]>=20){
                this.snakebody[0][1]=0;
            }
            if(this.snakebody[0][1]<0){
                this.snakebody[0][1]=19;
            }
        }
        this.snakeself=function(){  //蛇撞到自己身体时游戏结束，停止计时器
            for(var i=1;i<this.snakebody.length;i++){
                if(this.snakebody[0][0]==this.snakebody[i][0]&&this.snakebody[0][1]==this.snakebody[i][1]){
                    alert("gg");
                    clearInterval(time);
                }
            }
        }
    }
    var food;
    function Food(){   //封装食物
        this.width=30;  //食物属性
        this.height=30;
        this.x=0;
        this.y=0;
        this._food=null;
        this.creatFood=function(){  //接收属性
            this.x=Math.floor(Math.random()*40);  //用随机数生成食物坐标
            this.y=Math.floor(Math.random()*20);
            if(this._food==null){
                this._food=document.createElement("div");
                this._food.style.width=this.width+"px";
                this._food.style.height=this.height+"px";
                this._food.style.position="absolute";
                this._food.style.backgroundColor="yellow";
                map._map.appendChild(this._food);
            }
            this._food.style.left=this.x*this.width+"px";
            this._food.style.top=this.y*this.height+"px";
        }
    }
    window.onload=function(){
        map=new Map();
        map.creatMap();
        snake=new Snake();
        snake.creatSnake();
        food=new Food();
        food.creatFood();
        time=setInterval("snake.snakeMove()",200);
        document.onkeydown=function(e){
            switch(e.keyCode){  //通过e.keyCode接收方向
                case 37:if(snake.direct!="right")snake.direct="left";break;
                case 38:if(snake.direct!="down")snake.direct="up";break;
                case 39:if(snake.direct!="left")snake.direct="right";break;
                case 40:if(snake.direct!="up")snake.direct="down";break;
            }
        }
    }
</script>
</body>
</html>

飞机大战

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>

    </script>
    <style>
        .map{
            position: relative;
            width: 400px;
            height: 700px;
            border: 1px solid black;
            margin: 0 auto;
            overflow: hidden;
            cursor: none;
        }
        .bgimage{
            position: absolute;
            z-index: -1;
            width: 400px;
            height: 700px;
            background: url("./image/12.png") 0 0 no-repeat;
            background-size: 400px 700px;
        }
        span{
            position: absolute;
            right: 0px;
            top: 0px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="map">
    <span class="score">score:0</span>
    <div class="bgimage"></div>
    <div class="bgimage"></div>
</div>
<script>
    var Map=document.getElementsByClassName("map")[0];
    var score=document.getElementsByClassName("score")[0];
    (function (){
        var bg=document.getElementsByClassName("bgimage");
        bg[0].style.top="-700px";
        bg[1].style.top="0px";
        function bgImageanimate(){  //创建图片轮播
            for(var i=0;i<bg.length;i++)
            {
                var top=parseInt(bg[i].style.top);
                top++;
                if(top>=700)
                {
                    top=-700;
                }
                bg[i].style.top=top+"px";
            }
        }
        setInterval(bgImageanimate,30);
    })();
    var User;
    var Score=0;
    function user(){  //封装用户
        this.width=60;  //创建用户属性
        this.height=70;
        this._user=null;
        this.src="./image/14.gif";
        this.createUser=function (){  //接收属性
            if(this._user==null)
            {
                this._user=document.createElement("img");
                this._user.style.width=this.width+"px";
                this._user.style.height=this.height+"px";
                this._user.style.left="170px";
                this._user.style.top="600px";
                this._user.style.position="absolute";
                this._user.style.zIndex=1;
                this._user.src=this.src;
                Map.appendChild(this._user);
            }
        }
        this.userMove=function (x,y){   //飞机移动方法
           this._user.style.left=x+"px";
           this._user.style.top=y+"px";
        }
    }
    var shouter;
    function Shouter(){  //封装子弹
        this.width=10;
        this.height=20;
        this._shouter=null;
        this.src="./image/15.png";
        this.x;
        this.y;
        //创建子弹的方法
        this.creategun=function (user){
            if(this._shouter==null)
            {
               this._shouter=document.createElement("img");
               this._shouter.style.width=this.width+"px";
               this._shouter.style.height=this.height+"px";
               this._shouter.style.position="absolute";
                this._shouter.style.zIndex=1;
               this._shouter.src=this.src;
                Map.appendChild(this._shouter);
                this.x=parseInt(user._user.style.left)+user.width/2-this.width/2;  //子弹坐标
                this.y=parseInt(user._user.style.top)-this.height;
            }
            this._shouter.style.left=this.x+"px";
            this._shouter.style.top=this.y+"px";
        }
        this.gunmove=function (index,sarr){   //子弹移动方法
            this.y-=2;
            if(this.y<=0)    //当子弹飞出界面的时候   删除
            {
                this._shouter.remove();  //删除dom元素
                sarr.splice(index,1);  //删除实例化对象
            }
            this.creategun();
        }
        this.shouterEnemy=function(enemy,index,sarr){   //子弹击中飞机方法
            for(var key in enemy){
                if(this.y>=enemy[key].y&&this.y<=enemy[key].y+enemy[key].height&&this.x>enemy[key].x-this.width&&this.x<enemy[key].x+enemy[key].width)
                {
                    enemy[key].blood-=1;
                    if(enemy[key].blood<=0)  //blood属性为0时，敌机消失
                    {
                        Score+=enemy[key].score;
                        score.innerHTML="分数:"+Score;
                        enemy[key]._enemy.remove();  //删除dom元素
                        enemy.splice(key,1);  //删除实例化对象
                    }
                    this._shouter.remove();  //删除dom元素
                    sarr.splice(index,1);  //删除实例化对象
                }
            }
        }
    }
    var enemy;
    function Enemy(w,h,b,s,f){ //封装敌机
        this.width=40||w;  //两种敌机属性
        this.height=h||30;
        this.blood=b||3;
        this.score=f||100;
        this.x;
        this.y;
        this.speed=2;
        this.src=s||"./image/17.png";
        this._enemy=null;
        this.createEnemy=function(){
            if(this._enemy==null){
                this._enemy=document.createElement("img");
                this._enemy.style.width=this.width+"px";
                this._enemy.style.height=this.height+"px";
                this._enemy.style.position="absolute";
                this._enemy.style.zIndex=2;
                this._enemy.src=this.src;
                Map.appendChild(this._enemy);
                this.x=Math.random()*(400-this.width);
                this.y=-this.height;
            }
            this._enemy.style.top="0px";
            this._enemy.style.left=this.x+"px";
        }
        this.enemyMove=function(index,enemyarray){  //敌机移动方法
            this.y+=this.speed;  //从上方开始移动
            if(this.y>=700){   //敌机离开界面时移除
                this._enemy.remove();  //删除dom元素
                enemyarray.splice(index,1);  //删除实例化对象
            }
            this._enemy.style.top=this.y+"px";
            if(User.x>this.x-User.width+20&&User.x<this.x+this.width-20&&User.y<this.y+this.height-10&&User.y>this.y-User.height+10)
            {  //飞机撞上敌机，游戏结束，清除计时器
                alert("game over");
                clearInterval(time_a);
                clearInterval(time_b);
                clearInterval(time_c);
                clearInterval(time_d);
                Map.onmousemove=null;
                return;
            }
        }
    }
    var s_gun=[];
    var enemyarray=[];
    var time_a;
    var time_b;
    var time_c;
    var time_d;
    window.onload=function (){
        User=new user();  //实例化飞机对象
        User.createUser();
        time_a=setInterval(function (){
            shouter=new Shouter();
            shouter.creategun(User);
            s_gun.push(shouter);
        },200)
        time_b=setInterval(function (){
            if(s_gun.length>0)
            {
               for(var i=0;i<s_gun.length;i++)
               {
                 s_gun[i].gunmove(i,s_gun);
                   if(enemyarray.length>0){
                       if(s_gun[i]==undefined)return;  //飞机飞到上界时，子弹消失
                       s_gun[i].shouterEnemy(enemyarray,i,s_gun);
                   }
               }
            }
        },5);
        time_c=setInterval(function(){
            if(Math.random()<0.7){
                enemy=new Enemy();
                enemy.createEnemy();
                enemyarray.push(enemy);
            }
            else{
                enemy=new Enemy(50,70,5,"./image/18.png",300);
                enemy.createEnemy();
                enemyarray.push(enemy);
            }
        },1000);
        time_d=setInterval(function(){
            if(enemyarray.length>0){
                for(var key in enemyarray){
                    enemyarray[key].enemyMove(key,enemyarray);
                }
            }
        },15);
        Map.onmousemove=function (e){    //给地图添加鼠标移动事件
            var x=e.pageX-this.offsetLeft-User.width/2;
            var y=e.pageY-this.offsetTop-User.height/2;
            User.userMove(x,y);
        }
    }
</script>
</body>
</html>