JavaScript原生實現《貪吃蛇》

概述

JavaScript原生實現《貪吃蛇》，每吃掉一個食物，蛇的身體會變長，食物會從新換位置。

詳細

代碼下載：http://www.demodashi.com/demo/10728.html

貪吃蛇你們都不陌生吧~

簡單作一個。

 

1、思路

 

1.讓咱們的小蛇動起來

2.隨機生成食物

3.每吃掉一個食物，蛇的身體會變長，食物會從新換位置

 

html界面

<div class="face">
    <!-- 小蛇移動的操場 -->
    <div id="playground">
        <!-- 食物 界面中的藍色小方塊-->
        <div id="food"></div>
        <!-- 小蛇 界面中的紅色小方塊-->
        <div id="snack"></div>
    </div>
    <!-- 計算得分 -->
    <div class="menu">
        <div>得分<span id="score"></span></div>
    </div>
</div>

css樣式

注：

1.藍色的小方塊表明食物；

2.紅色的小方塊表明小蛇；

3.綠色的小方塊表明吃掉怪物後增加的身體；

<style type="text/css">
        .face{
            height: 400px;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            background-color: pink;
        }
        #playground{
            height: 400px;
            width: 450px;
            float: left;
            position: relative;
        }
        .menu{
            height: 400px;
            width: 150px;
            float: left;
            background-color: skyblue;
        }
        #snack{
            height: 20px;
            width: 20px;
            background-color: red;
            position: absolute;
            left: 0px;
            top:0px;
        }
        #food{
            height: 20px;
            width: 20px;
            background: blue;
            position: absolute;
        }
        .body{
            height: 20px;
            width: 20px;
            background: green;
            position: absolute;
            left: 0px;
            top:0px;
        }
        #score{
            font-size: 30px;
            font-weight: bold;
            color: red;
        }
        .menu div{
            font-size: 20px;
            font-weight: bold;
        }
    </style>

準備工做

獲取元素節點、設置全局變量；

//獲取元素節點
    var jsDiv = document.getElementById("playground");
    var jsSnack = document.getElementById("snack");    
    var jsFood = document.getElementById("food");
    var jsBody = document.getElementById("playground");
    var jsScore = document.getElementById("score");
    //設置全局變量
    var timer;//建立定時器爲全局變量
    var timer1 = setInterval(eat,10);//檢測位置碰撞，而且吃掉食物；
    var srr = [];//記錄蛇行動的位置
    var num = 0 ;//記錄數組的長度
    var jsSnackBody ;//麼米吃掉一個食物，蛇的身體

讓咱們的小蛇動起來

 

經過按鍵盤的上下左右鍵，控制小蛇的移動方向，並記錄小蛇走過的位置。

咱們經過什麼來獲取咱們按下的是哪一個鍵？？

咱們固然經過ASCII碼值；

信息在計算機上是用二進制表示的，這種表示法讓人理解就很困難。所以計算機上都配有輸入和輸出設備，這些設備的主要目的就是，以一種人類可閱讀的形式將信息在這些設備上顯示出來供人閱讀理解。爲保證人類和設備，設備和計算機之間能進行正確的信息交換，人們編制的統一的信息交換代碼，這就是ASCII碼錶，它的全稱是「美國信息交換標準代碼」

左-------》對應的ASCII碼值是 37；

上-------》對應的ASCII碼值是 38；

右-------》對應的ASCII碼值是 39；

下-------》對應的ASCII碼值是 40；

//開始遊戲
    document.onkeydown = function(e){
        var evt = e || window.event;    
            switch(evt.keyCode) {
            //向左移動
            case 37:
                clearInterval(timer);
                timer=window.setInterval(runLeft,10)
                function runLeft(){
                    if (jsSnack.offsetLeft > 0) {
                        jsSnack.style.left = jsSnack.offsetLeft - 1+ "px";
                        jsSnack.style.top = jsSnack.offsetTop + "px";    
                        //記錄小蛇的位置
                        srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                        num++;//記錄數組的長度
                    }                        
                }
            break;
            //向上移動
            case 38:
                clearInterval(timer);
                timer=window.setInterval(runTop,10);    
                function runTop(){
                    if (jsSnack.offsetTop > 0) {
                        jsSnack.style.top = jsSnack.offsetTop - 1 + "px";
                        jsSnack.style.left = jsSnack.offsetLeft + "px";
                        //記錄小蛇的位置
                        srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                        num++;//記錄數組的長度
                    }                        
                }

            break;
            //向右移動
            case 39:
                clearInterval(timer);
                timer=window.setInterval(runRight,10);
                function runRight(){
                    if (jsSnack.offsetLeft + jsSnack.offsetWidth <= 450) {
                        jsSnack.style.left = jsSnack.offsetLeft + 1 + "px";
                        jsSnack.style.top = jsSnack.offsetTop + "px";
                        //記錄小蛇的位置
                        srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                        num++;//記錄數組的長度
                    }                        
                }                    
            break;
            //向下移動    
            case 40:
                clearInterval(timer);
                timer=window.setInterval(runBottom,10);            
                function runBottom(){
                    if (jsSnack.offsetTop + jsSnack.offsetHeight <= 400) {
                        jsSnack.style.top = jsSnack.offsetTop + 1 + "px";
                        jsSnack.style.left = jsSnack.offsetLeft + "px";
                        //記錄小蛇的位置
                        srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                        num++;//記錄數組的長度
                    }                        
                }                    
            break;
        }
    }

 

 

2、檢驗碰撞詳解

這裏筆者以爲語言的描述太空洞，仍是弄幾張圖吧，圖是筆者手繪的，不要嫌醜，畫的是沒有碰撞的狀況，那取反，就說明碰撞到了。

 

食物隨機出現

把食物的隨機出現封裝在一個函數裏，那麼咱們後續須要的時候能夠直接調用。

利用隨機數來讓食物的位置隨機出現。

//食物隨機出現
    function Pos(){
        jsFood.style.left=parseInt(Math.random() * (430 - 20 + 1) + 20) + "px";
        jsFood.style.top=parseInt(Math.random() * (380 - 20 + 1) + 20) + "px";
    }
    Pos();

 

建立定時器、檢驗碰撞

碰撞檢測原理：

蛇在實物的左邊、右邊、上邊、下邊的時候，說明沒有發生碰撞，那麼咱們取反，就說明發生碰撞

function eat(){
        rectangleCrashExamine(jsSnack,jsFood);
        function rectangleCrashExamine(obj1, obj2) {
            var obj1Left = obj1.offsetLeft;
            var obj1Width = obj1.offsetLeft + obj1.offsetWidth;
            var obj1Top = obj1.offsetTop;
            var obj1Height = obj1.offsetTop + obj1.offsetHeight;
            var obj2Left = obj2.offsetLeft;
            var obj2Width = obj2.offsetLeft + obj2.offsetWidth;
            var obj2Top = obj2.offsetTop;
            var obj2Height = obj2.offsetTop + obj2.offsetHeight;
            //檢測碰撞
            //碰撞檢測原理：
                //蛇在實物的左邊、右邊、上邊、下邊的時候，說明沒有發生碰撞，那麼咱們取反，就說明發生碰撞
            if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
                //碰撞後身體
                jsSnackBody = document.createElement("div");
                jsSnackBody.setAttribute("class","body");
                jsBody.appendChild(jsSnackBody);
                Pos();//怪物的位置隨機變換
                setInterval(follow,10);//身體跟隨的定時器
            }
        }
    }

身體跟隨

每吃掉一個食物，小蛇的長度發生變化

function follow(){
        //檢查一共添加了多少身體
        var bodyNum = document.getElementsByClassName("body");
        //記錄得分
        jsScore.innerHTML = bodyNum.length;
        //蛇每次移動1個像素，那麼新的身體應該跟隨在當前數組的倒數第20個數組的位置;依次加等;
        var place = 0 ;
        for( var i = 0 ; i<bodyNum.length ; i++){
            place += 20;
            bodyNum[i].style.left=srr[num-place][0] + 'px';
            bodyNum[i].style.top=srr[num-place][1] + 'px';    
        }
    }

好了，如今咱們的遊戲能夠玩了

3、運行效果與文件截圖

一、運行效果：

二、文件截圖：

雙擊文件便可運行

4、其餘補充

這是一個簡單的貪吃蛇，並無作死亡碰撞，喜歡的小夥伴能夠繼續放下作。

任什麼時候候不要吝嗇您的讚美，喜歡就點贊拉~，真愛就打賞哦~~

代碼下載：http://www.demodashi.com/demo/10728.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權