使用canvas實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲，html+cs

使用canvas實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲，html+css+js

.話不多，先瞅效果：

又在別的地方嫖到了這個(gè)效果研究了億下下，制作過程如下（超詳細(xì)）：

二.實(shí)現(xiàn)過程（源碼在最后）：

1.定義canvas標(biāo)簽：

 <canvas id="canvas"></canvas>

2.基本css樣式：

#canvas{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow:  0 0 10px rgb(150, 150, 150);     
        }

position: absolute; 絕對(duì)定位。
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中。
box-shadow: 0 0 10px rgb(150, 150, 150); 陰影。

3.開始js部分，獲取標(biāo)簽：

var canvas=document.querySelector("#canvas");
var ctx=canvas.getContext('2d');

4.定義基本變量：

        //畫布寬
        var wide=600;
        //畫布高
        var high=600;
        // 變量，判斷一次渲染中只識(shí)別按鍵一次
        var kd=0;
        //當(dāng)前分?jǐn)?shù)
        var fraction=0;
        //速度，就是執(zhí)行定時(shí)器的時(shí)間參數(shù)
        var speed=250;
        // 蛇的初始顏色 紅色
        var yanse=`red`;
        // 蛇數(shù)組，組成蛇的每一個(gè)方塊
        var snake=[];
        // 食物數(shù)組
        var food={};
        // 蛇的移動(dòng)方向，x軸：1為向右，-1為向左；y軸：1為向下，-1為向上 。不能斜著走，所以0為某軸無方向。
        var diretion={
            x:-1,
            y:0
        }
        // 給畫布寬高賦值 打算畫一個(gè)長(zhǎng)寬都是30個(gè)20px的方塊畫布
        canvas.width=wide;
        canvas.height=high;

5. 初始化：

function chushi(){            
        //蛇初始長(zhǎng)度為3個(gè)方塊，位置如下（這個(gè)隨意）
            for(let i=0;i<3;i++){
                snake.push({
                    x: i+10,
                    y: 10
                })
            }
            // 給食物一個(gè)隨機(jī)位置和隨機(jī)顏色
            food={
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
        }

6. 繪制圖形：

  // 繪制圖形
        function draw(){
            // 繪制顯示當(dāng)前分?jǐn)?shù)的文字
            ctx.fillStyle='rgba(255,255,255,0.5)';
                ctx.font="50px 仿宋";
                ctx.textAlign='center'; 
                ctx.fillText("你的分?jǐn)?shù)為："+fraction+" 分",300,300);

             // 繪制方格，長(zhǎng)寬都是30個(gè)，都是19px*19px的方格   
            for(let i=0;i<30;i++){
                for(let j=0;j<30;j++){
                    ctx.fillStyle='rgba(255, 255, 255,.3)';
                    ctx.fillRect(i*20,j*20,19,19);
                }
            }
              // 繪制蛇
            for(let i=0;i<snake.length;i++){
                temp=snake[i];
                ctx.fillStyle=yanse;
                ctx.fillRect(temp.x*20,temp.y*20,19,19);
                // 判斷蛇頭（第一個(gè)方塊）是否與身體某個(gè)方塊重合 ，就是頭撞到身體
                if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
                    // 游戲結(jié)束，重新給初始化
                    alert('游戲結(jié)束~點(diǎn)擊確認(rèn)再來一次~'); 
                    fraction=0;
                    snake.length=0;  
                    chushi();
                    
                }
            }
               // 繪制食物，繪制一個(gè)圓形
                ctx.beginPath();
                ctx.fillStyle=food.color;
                ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
                ctx.stroke();
                ctx.fill();
                ctx.closePath();
      
               // 給蛇頭繪制一個(gè)字符，☆ ，好區(qū)分頭尾 ，也可省略
                ctx.fillStyle='yellow';
                ctx.font="15px 仿宋";
                ctx.textAlign="start";
                ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);
        }

7.更新位置：

 //更新
        function update(){
            // 建一個(gè)對(duì)象head，這個(gè)為蛇的新頭，通過繪制新頭，去掉尾部實(shí)現(xiàn)移動(dòng)效果
            var head={};
            //判斷蛇頭是否遇到邊界，到邊界則在另一邊重新繪制 x軸
            switch (snake[0].x+diretion.x){
                case -1: head.x=29;break;
                case 30: head.x=0;break;
                // 沒到邊界則為當(dāng)前位置加方向
                default:  head.x=snake[0].x+diretion.x;
            }
           //判斷蛇頭是否遇到邊界，到邊界則在另一邊重新繪制 y軸
            switch (snake[0].y+diretion.y){
                case -1: head.y=29;break;
                case 30: head.y=0;break;
                // 沒到邊界則為當(dāng)前位置加方向
                default:  head.y=snake[0].y+diretion.y;
            }
            // 判斷新蛇頭是否與食物重合，就是吃到食物
           if(head.x==food.x&&head.y==food.y){
               //蛇的顏色為吃到食物的顏色
            yanse=food.color;
             // 重新給食物初始化
            food={
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
            //在蛇尾添加一節(jié)
            let temp=snake[length-1];
            snake.push(temp);
            fraction+=1;
            // 吃完食物速度加快
            if(speed>80){
                //定時(shí)器間隔減10
                speed=speed-10;
                // 清除原來定時(shí)器，重新繪制
                clearInterval(time);
                 time=setInterval(function () {
                    kd=0;
                    ctx.clearRect(0, 0, wide, high);
                    update();
                    draw();

                }, speed);
            
            }
           
           }
            //添加新頭
            snake.splice(0,0,head);
            //去掉尾部
            snake.pop();
                     
        }

8.判斷點(diǎn)擊鍵盤事件：

 //判斷點(diǎn)擊事件 
        document.addEventListener('keydown', event=>{
              switch (event.keyCode){
                  // 按了向上鍵
                  case 38:
                      // 判斷當(dāng)前不是向下移動(dòng)與還沒按過鍵，否則蛇會(huì)重疊
                      if(diretion.y!=1&&kd==0){
                          // 重新給移動(dòng)方向賦值
                        diretion.x=0;
                        diretion.y=-1;
                        kd=1;
                      }
                      break;
                      // 下面以此類推一樣的原理
                  case 39:
                      if(diretion.x!=-1&&kd==0){
                        diretion.x=1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;
                  case 40:
                      if(diretion.y!=-1&&kd==0){                     
                      diretion.x=0;
                      diretion.y=1;
                      kd=1;
                      }
                      break; 
                  case 37:
                      if(diretion.x!=1&&kd==0){
                        diretion.x=-1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;        

              }
        })

9.設(shè)置定時(shí)器，開始動(dòng)畫：

 chushi();    
            var time=setInterval(function(){
            kd=0;
            ctx.clearRect(0,0,wide,high);
            update();
            draw();      
        
        },speed);

三.完整代碼：

avascript Sudoku Puzzle Generator，含算法說明。數(shù)獨(dú)是源自18世紀(jì)瑞士的一種數(shù)學(xué)游戲。

這是一種運(yùn)用紙、筆進(jìn)行演算的邏輯游戲。玩家需要根據(jù)9×9盤面上的已知數(shù)字，推理出所有剩余空格的數(shù)字，并滿足每一行、每一列、每一個(gè)粗線宮（3*3）內(nèi)的數(shù)字均含1-9，不重復(fù)。數(shù)獨(dú)盤面是個(gè)九宮，每一宮又分為九個(gè)小格。在這八十一格中給出一定的已知數(shù)字和解題條件，利用邏輯和推理，在其他的空格上填入1-9的數(shù)字。使1-9每個(gè)數(shù)字在每一行、每一列和每一宮中都只出現(xiàn)一次，所以又稱“九宮格”。很棒的益智數(shù)學(xué)小游戲，適合小學(xué)生、初中生奧數(shù)題訓(xùn)練。

示例如下圖（文章最后提供了游戲的在線網(wǎng)址）

你可以訪問以下網(wǎng)址，進(jìn)行在線體驗(yàn)：http://www.ikinsoft.com/3ddemo/sudoku.html

一個(gè)手機(jī)游戲源碼選用簡(jiǎn)易的htm5做的手游！作用取決于原生js！

本htm5手游含有人工智能優(yōu)化算法！詳盡參照人工智能.原生js的文檔！

密碼：95he28

有技術(shù)性的能夠自身改

人們能夠應(yīng)用xlhtml搞個(gè)ksweb導(dǎo)進(jìn)源代碼能夠立即運(yùn)作！

ps軟件：用內(nèi)置電腦瀏覽器錯(cuò)碼！沒有設(shè)定編號(hào)！自身去value.html代碼里邊改！

選用Google，火狐瀏覽器一切正常運(yùn)作不容易錯(cuò)碼

實(shí)例教程：把源代碼上傳入室內(nèi)空間，隨后緩解壓力，隨后域名解析，隨后網(wǎng)站訪問網(wǎng)站域名就進(jìn)行啦！

鏈接：https://share.weiyun.com/5fwCPHD

文章來源：https://www.xigsc.com/post/243.html

在線咨詢

上一篇：這一次，我們搶看這部比《看不見的客人》更高級(jí)的懸疑片
下一篇：Java 0基礎(chǔ)入門（初識(shí)Html）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商