贪吃蛇,HTML+CSS+JS实现


效果图:

贪吃蛇,HTML+CSS+JS实现_第1张图片

实现过程

  • 搭建基本HTML,CSS框架
  • JS实现核心游戏过程
    • canvas画布上绘制地图、小蛇、食物
    • 食物随机生成,不能生成在小蛇身上
    • 键盘控制小蛇移动
    • 小蛇成长
    • 小蛇撞墙
  • setInterval添加计时器
  • 添加button事件

[注]:WSAD分别控制上下左右

源代码


index.html


<html>
<head>
<title>贪吃蛇title>
<style type='text/css'>
    *{margin:0;}
	.map{margin:20px auto;
		height:600px;
		width:900px;
		background:gray;
		border:10px solid #AFAEB2;
		border-radius:8px;
	}
    #timeBox{
        background-color: indigo;
        height: 45px;
        width: 500px;
        border:10px solid #AFAEB2;
        border-radius:8px;
        margin:20px auto;
        padding-top: 4px;
        font-size: 45px;
        color:white;
    }
    .btn{
         margin-left: 500px;
    }
style>
<script src="./index.js">script>
head>
<body>
    <p>
        
<span id="id_H">00span>: <span id="id_M">00span>: <span id="id_S">00span> div> <div class="btn"> div> p> <p> <div class="map"> <canvas id="canvas" height="600" width="900">canvas> div> p> body> html>

index.js

window.onload = function(){
    // 简化操作
    function $(id){
        return document.getElementById(id);
    }
	var c=$("canvas");
    var ctx=c.getContext("2d");
    //定义一条蛇
    var snake =[];
    //初始化蛇的长度
    var snakeCount = 6;
    //food 
	var foodx =0;
	var foody =0;
    //snack move speed
    var moveSpeed = 150;  
    // direction
    var togo =0;

    // draw map
    function drawtable()
    {
        // draw Vertical line
        for(var i=0;i<60;i++)//画竖线
        {
        ctx.strokeStyle="black";
        ctx.beginPath();
        ctx.moveTo(15*i,0);
        ctx.lineTo(15*i,600);
        ctx.closePath();
        ctx.stroke();
        }
        // draw Horizontal line
        for(var j=0;j<40;j++)
        {
        ctx.strokeStyle="black";
        ctx.beginPath();
        ctx.moveTo(0,15*j);
        ctx.lineTo(900,15*j);
        ctx.closePath();
        ctx.stroke();
        }
        drawSnackAndFood();
        
    }
    
    function drawSnackAndFood(){
        for(var k=0;k<snakeCount;k++)//画蛇的身体
		{
			ctx.fillStyle="#000";
			if (k==snakeCount-1)
			{
				ctx.fillStyle="blue";//蛇头的颜色与身体区分开
			}
			ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标,后两个数是矩形的长宽。
		}
		// draw food
        ctx.fillStyle ="black";
        ctx.fillRect(foodx,foody,15,15);
        ctx.fill();
    }
   
    function start()
    {
		for(var k=0;k<snakeCount;k++)
    		{
    			snake[k]={x:k*15,y:0};	
            }
        addfood();
        drawtable();
          //在start中调用添加食物函数
    }
    function addfood()
	{
	    foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
	    foody = Math.floor(Math.random()*40)*15;
		for (var k=0;k<snake;k++)
		{
            //防止产生的随机食物落在蛇身上
			if (foodx==snake[k].x&&foody==sanke[k].y)
			addfood();
		}
	}	
   function move()
   {
    document.onkeydown=function(ev){
                    switch(ev.keyCode)
                    {
                    case 65: togo = 1; break;
                    case 87: togo = 2; break;
                    case 68: togo = 3; break;
                    case 83: togo = 4; break;
                    default: togo = 0;
                    }
          }
        switch (togo)
	    {
	    case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//left
	    case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;//down
	    case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;//right
	    case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;//up
	    default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
        }
        snake.shift();//删除数组第一个元素
   	    ctx.clearRect(0,0,900,600);//清除画布重新绘制
    	isEat();
	    isDead();
	    drawtable();
   } 			
  
   function isEat()//吃到食物后长度加1
   {
    if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
    {
		addfood();
		snakeCount++;
		snake.unshift({x:-15,y:-15});
    }
   }
   
   function isDead()
   {
    if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
		{
		alert("You are dead,GAME OVER!!!");
		window.location.reload();
		}
   }
   
   function time(){
       var count=0;//开始计时后的总秒数

       var timer = null;
       var timer2 = null;

       $("btnStart").onclick=function(){
        timer=setInterval(function(){
            count++;
            //改变显示的时分秒
            $("id_S").innerHTML=showNumber(count%60);
            $("id_M").innerHTML=showNumber(parseInt(count/60)%60);
            $("id_H").innerHTML=showNumber(parseInt(count/3600));
                },1000)
            timer2= setInterval(move,moveSpeed);
            drawtable();
       }

       $("btnPause").onclick=function(){
           clearInterval(timer);
           clearInterval(timer2);
       }

       $("btnStartANewGanme").onclick=function(){
        clearInterval(timer);
        clearInterval(timer2);
        count=0;
        $("id_S").innerHTML="00";
        $("id_M").innerHTML="00";
        $("id_H").innerHTML="00";
        start();
       }

       $("btnSimple").onclick=function(){
           moveSpeed =300;
       }

       $("btnNomal").onclick=function(){
        moveSpeed =150;
       }

       $("btnHard").onclick=function(){
        moveSpeed =65;
        }
   // 处理单个数字
   function showNumber(num){
       if(num<10)
        return "0"+num;
        else
        return num;
   }
}
//    准备开始
   start();
//    等待点击按钮
   time();
}

           
 

你可能感兴趣的:(web开发,javascript,css,html5)