javascript實現(xiàn)貪吃蛇小游戲思路

更新時間：2021年09月26日 10:41:45 作者：難過的新手村

這篇文章主要為大家詳細介紹了javascript實現(xiàn)貪吃蛇思路小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

javascript小游戲貪吃蛇實現(xiàn)思路講解(完整代碼實現(xiàn))，供大家參考，具體內容如下

效果流程

1、首先我們要操作的canvas

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>貪吃蛇</title>
</head>
 
<body>
 <canvas id="canvas"></canvas>   <!-- 我們要操作的canvas -->
 <input type="button" value="開始游戲" /><!-- 開始游戲按鈕 -->
<script>
//獲取元素
var canvas = document.getElementById("canvas"); //找到我們要操作的canvas
var context = canvas.getContext("2d"); //規(guī)定在canvas上操作的環(huán)境為2d
var but = document.getElementsByTagName("input")[0]; //找到開始按鈕
</script>

2、在初始化

canvas.width = 500; //定義canvas寬度
canvas.height = 500; //定義canvas高度
canvas.style.border = "5px solid #000"; //定義canvas邊框
var times = 100; //默認時間200毫秒
var long = 10; //蛇身相對于步長的個數(shù)
var x = y =8;  //蛇的初始坐標
var direction = 3;  // 1 上  2 右  3 下 0  左
var size = 8;  //蛇每次移動的長度（步長）
var map  = []; //用來記錄蛇每次移動的坐標 
var foodx = 0;  //食物的初始X軸坐標
var foody = 0;  //食物的初始y軸坐標
var onOff = true; 
var foodT = true;
var timer = null;

3、根據(jù)方向控制蛇的坐標變化，判斷蛇的坐標是否超出canvas邊界，判斷蛇有沒有碰到自己

 //根據(jù)方向控制蛇的坐標變化
    switch(direction){
 
        case 1: y = y - size; break; //上
        case 2: x = x + size; break; //右
        case 3: y = y + size; break; //下
        case 0: x = x - size; break; //左
    }
 
    //判斷蛇的坐標是否超出canvas邊界，超出則出現(xiàn)碰壁提示，游戲結束
    if(x>500 || x<0 || y>500 || y<0){
 
//      alert("你碰壁掛了！繼續(xù)努力吧……");
        window.location.reload();   
    }
 
    //判斷蛇有沒有碰到自己，碰到自己游戲結束 
    for(var i=0; i<map.length; i++){
        if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
//          alert("你碰到自己掛了！繼續(xù)努力吧……");
            window.location.reload(); //重新載入
        }
    }

4、然后繪制蛇

//繪制蛇
    if(map.length>long){ 
        var cl = map.shift();
        context.clearRect(cl['x'],cl['y'],size,size);
    }
    map.push({'x':x,'y':y}); 
    context.fillStyle = "#777"; //填充蛇的顏色
    context.fillRect(x,y,size,size); //繪制蛇

5、判斷食物坐標等于蛇的坐標時（蛇吃掉食物）

//判斷食物坐標等于蛇的坐標時（蛇吃掉食物）
    if(foodx*8 == x && foody*8 == y ){
        food(); //再次繪制食物
        long++; //蛇的長度增加
        times = times - 10; //速度加快
        clearInterval(timer);
        onOff = true;
        setTimeout(goto,times); //開始新的一輪
    }

6、確定食物隨機顯示坐標，繪制食物

//確定食物隨機顯示坐標，繪制食物
function food(){
    foodx = Math.ceil(Math.random()*40); //食物的X軸隨機坐標
    foody = Math.ceil(Math.random()*40); //食物的Y軸隨機坐標    
    context.fillStyle = "mediumvioletred"; //食物的填充顏色 
    context.fillRect(foodx*8,foody*8,8,8); //繪制食物
 
}

7、監(jiān)聽按下方向鍵，獲得蛇前進的方向

//監(jiān)聽按下方向鍵，獲得蛇前進的方向
document.onkeydown = function(ev){
    var ev = ev || event;
    var cod = ev.keyCode - 37;
 
    switch(cod){
        case 1: direction = 1; break; //向上
        case 2: direction = 2; break; //向右
        case 3: direction = 3; break; //向下
        case 0: direction = 0; break; //向左
    }   
}

完整代碼實現(xiàn)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>貪吃蛇</title>
</head>
 
<body>
 <canvas id="canvas"></canvas>   <!-- 我們要操作的canvas -->
 <input type="button" value="開始游戲" /><!-- 開始游戲按鈕 -->
<script>
//獲取元素
var canvas = document.getElementById("canvas"); //找到我們要操作的canvas
var context = canvas.getContext("2d"); //規(guī)定在canvas上操作的環(huán)境為2d
var but = document.getElementsByTagName("input")[0]; //找到開始按鈕
//初始化
canvas.width = 500; //定義canvas寬度
canvas.height = 500; //定義canvas高度
canvas.style.border = "5px solid #000"; //定義canvas邊框
var times = 100; //默認時間200毫秒
var long = 10; //蛇身相對于步長的個數(shù)
var x = y =8;  //蛇的初始坐標
var direction = 3;  // 1 上  2 右  3 下 0  左
var size = 8;  //蛇每次移動的長度（步長）
var map  = []; //用來記錄蛇每次移動的坐標 
var foodx = 0;  //食物的初始X軸坐標
var foody = 0;  //食物的初始y軸坐標
var onOff = true; 
var foodT = true;
var timer = null;
function star(){
 
    //根據(jù)方向控制蛇的坐標變化
    switch(direction){
 
        case 1: y = y - size; break; //上
        case 2: x = x + size; break; //右
        case 3: y = y + size; break; //下
        case 0: x = x - size; break; //左
    }
 
    //判斷蛇的坐標是否超出canvas邊界，超出則出現(xiàn)碰壁提示，游戲結束
    if(x>500 || x<0 || y>500 || y<0){
 
//      alert("你碰壁掛了！繼續(xù)努力吧……");
        window.location.reload();   
    }
 
    //判斷蛇有沒有碰到自己，碰到自己游戲結束 
    for(var i=0; i<map.length; i++){
        if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
//          alert("你碰到自己掛了！繼續(xù)努力吧……");
            window.location.reload(); //重新載入
        }
    }
 
    //繪制蛇
    if(map.length>long){ 
        var cl = map.shift();
        context.clearRect(cl['x'],cl['y'],size,size);
    }
    map.push({'x':x,'y':y}); 
    context.fillStyle = "#777"; //填充蛇的顏色
    context.fillRect(x,y,size,size); //繪制蛇
 
 
    //判斷食物坐標等于蛇的坐標時（蛇吃掉食物）
    if(foodx*8 == x && foody*8 == y ){
        food(); //再次繪制食物
        long++; //蛇的長度增加
        times = times - 10; //速度加快
        clearInterval(timer);
        onOff = true;
        setTimeout(goto,times); //開始新的一輪
    }
 
 
}
 
//確定食物隨機顯示坐標，繪制食物
function food(){
    foodx = Math.ceil(Math.random()*40); //食物的X軸隨機坐標
    foody = Math.ceil(Math.random()*40); //食物的Y軸隨機坐標    
    context.fillStyle = "mediumvioletred"; //食物的填充顏色 
    context.fillRect(foodx*8,foody*8,8,8); //繪制食物
 
}
//開始游戲
function goto(){
    if(onOff){
        timer = setInterval(star,times);
        onOff = false;
    }
    if(foodT){
        food();
        foodT = false;
    }   
}
//點擊按鈕開始游戲開始
but.onclick = goto;//點擊按鈕，開始游戲
 
//監(jiān)聽按下方向鍵，獲得蛇前進的方向
document.onkeydown = function(ev){
    var ev = ev || event;
    var cod = ev.keyCode - 37;
 
    switch(cod){
        case 1: direction = 1; break; //向上
        case 2: direction = 2; break; //向右
        case 3: direction = 3; break; //向下
        case 0: direction = 0; break; //向左
    }   
}
</script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
貪吃蛇

electron制作仿制qq聊天界面的示例代碼
這篇文章主要介紹了electron制作仿制qq聊天界面的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
正則表達式判斷是否存在中文和全角字符和判斷包含中文字符串長度
對于一些更安全的容錯嚴重，需要用到
2008-09-09
javascript中的Array對象(數(shù)組的合并、轉換、迭代、排序、堆棧)
Array?是javascript中經(jīng)常用到的數(shù)據(jù)類型。javascript?的數(shù)組其他語言中數(shù)組的最大的區(qū)別是其每個數(shù)組項都可以保存任何類型的數(shù)據(jù)。本文主要討論javascript中數(shù)組的聲明、轉換、排序、合并、迭代等等基本操作
2023-03-03
Bootstrap風格的zTree右鍵菜單
這篇文章主要介紹了Bootstrap風格的zTree右鍵菜單功能，實現(xiàn)代碼分為html，css和js三部分，代碼簡單易懂，非常不錯，需要的朋友可以參考下
2017-02-02
使用js完成節(jié)點的增刪改復制等的操作
本文為大家詳細介紹下使用js完成節(jié)點的增刪改復制等的操作，具體的實現(xiàn)如下，感興趣的朋友可以參考下
2014-01-01
JavaScript 頁面編碼與瀏覽器類型判斷代碼
JavaScript 獲取瀏覽器的類型和頁面編碼的函數(shù)代碼。
2010-06-06
Javascript?、Vue禁止鼠標右鍵點擊事件實例
這篇文章主要給大家介紹了關于Javascript?、Vue禁止鼠標右鍵點擊事件的相關資料,禁止右鍵的原理是通過JavaScript阻止瀏覽器右鍵事件的默認行為,從而達到禁止右鍵的效果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
微信小程序基于高德地圖API實現(xiàn)天氣組件(動態(tài)效果)
這篇文章主要介紹了微信小程序基于高德地圖API實現(xiàn)天氣組件(動態(tài)效果)，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-10-10
JAVASCRIPT IE 與 FF中兼容問題小結
在不同瀏覽器中對于一些屬性的支持也不一樣，下面是對ie和firefox的一些小結。
2009-02-02
微信小程序分享功能之按鈕button 邊框隱藏和點擊隱藏
這篇文章主要介紹了微信小程序分享功能之按鈕button 邊框隱藏和點擊隱藏,需要的朋友可以參考下
2018-06-06