国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡簡單單制作貪吃蛇小游戲

Kross / 2410人閱讀

摘要:利用制作簡單的貪吃蛇游戲首先,我們先來分析一下整個頁面的構成。代碼如下因為我們需要兼容移動端設備和端設備,所以我們需要在前加上媒體查詢樣式,并且在使用單位時,需要用到而不是。

利用js制作簡單的貪吃蛇游戲

首先,我們先來分析一下整個頁面的構成。一看可知,游戲框內是一個盒子里面有許多的小方塊,我們可以利用 ul和li標簽來制作蛇和食物。右側就是簡單的 2個p標簽·一個select標簽· 2個input標簽而已。代碼如下

最佳歷史紀錄:0

當前長度:0

因為我們需要很多的小格子,所以 li標簽 我們將用利用js里的for循環來創建,這樣會使我們的代碼量減少,減輕我們的工作量,我們在介紹js代碼會詳細介紹,現在先不多說。我們接下來要為html文檔加上樣式,因為代碼比較簡單,所以我們可以將樣式隨意寫在什么地方。css代碼如下:

*{
    margin: 0;
    padding: 0;
}
input{
    outline: none;
    margin: auto;
    
}       
.box{
    width: 3.2rem;
    margin: auto;
    float: left;
}
.oul{
    width: 3.14rem;
    height: 3.14rem;
    border:0.03rem solid peru;
}
.oul li{
    list-style: none;
    width: 5%;
    height: 5%;
    float: left;
}
.box1{
    width: 2rem;
    height: 1rem;
    padding-top: 0.3rem;
    font-size: 0.2rem;
    margin: auto;
    float: left;
}
#level{
    width: 100%;
    height: 0.4rem;
}
#ls{
    color:paleturquoise;
    margin-left: 0.1rem;
}
#dqcd{
    color:paleturquoise;
    margin-left: 0.01rem;
}
#btn1{
    width: 50%;
    height:0.3rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
    background: palegreen;
    color: #fff;
    
}
#btn2{
    width: 50%;
    height: 0.3rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
    background: palegreen;
    color: #fff;
}

因為我們需要兼容移動端設備和pc端設備,所以我們需要在css前加上媒體查詢樣式,并且在使用單位時,需要用到rem而不是px。
媒體查詢代碼如下:

@media screen and (min-width: 320px) {
    html {
      font-size: 100px; } }  
@media screen and (min-width: 360px) {
html {
    font-size: 113px; } }   
@media screen and (min-width: 375px) {
html {
    font-size: 117px; } }
@media screen and (min-width: 384px) {
html {
    font-size: 120px; } } 
@media screen and (min-width: 412px) {
html {
    font-size: 128px; } }
@media screen and (min-width: 414px) {
html {
    font-size: 129px; } }
@media screen and (min-width: 440px) {
html {
    font-size: 138px; } }
@media screen and (min-width: 480px) {
html {
    font-size: 150px; } }

上面我們已經將基本樣式都寫好,下面我們就要編輯js代碼
因為我們需要兼容移動端設備,而現在的移動設備大多數沒有鍵盤,所以我們需要引入一些庫來支持手指劃動,比如 bammer.js或者touch.js等等。我們這里使用的是touch.js。

在上面,我們并沒有在html文檔中建立 li標簽,所以我們需要在js里建立,利用for循環:

var oul = document.getElementById("oul"); 
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var bgaudio = document.getElementById("bgaudio");
var si = document.getElementById("go");
var chi = document.getElementById("chi");
var dqcd = document.getElementById("dqcd");
var ls = document.getElementById("ls");
var level = document.getElementById("level");
// 首先我們先獲取各個標簽的id,在后面會用到 
var ox = document.createDocumentFragment();
function ab (){
    for(var i = 0 ; i<400 ; i++){
        var oli = document.createElement("li")
        ox.appendChild(oli)
    }
}
ab();
oul.appendChild(ox);

如果你建立后看的不直觀,你可以給 li標簽 一個邊框,以便于觀看,由于我們需要看到每一個小格子的索引,所以我們在循環內添加(oli.innerHTML = i),我們就可以清楚的看到每一個格子的索引值。

建立了游戲外邊框后,我們開始建立蛇的身體和蛇的食物。在每一次的刷新后,我們會發現蛇身體和食物的顏色都會隨機變化,所以我們需要建立一個隨機顏色的函數,在每一次使用時直接調用就可以了。

function co (){
    return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
}

建立蛇身,蛇身長五,所以我們初始化一個變量,然后利用for循環建立

var snk = [];
snk = oul.children;
var snkbody = [];
var ox = document.createDocumentFragment();
for(var i=0;i<5;i++){
    snkbody.push({pos:i,color:co()})
}
// 創建蛇身
function cd (){
    for(var j=0,l=snkbody.length;j

然后我們為你為蛇建立食物,但是我們需要注意食物不能與蛇身在初始化到一起,所以我們需要如下代碼:

var food = [{pos:0,color:"red"}];
function isin (index){
    for(var j=0,l=snkbody.length;j

下面我們就需要讓蛇動起來

var snkh = snkbody.slice(-1)[0].pos;
var snkw = snkbody.slice(0,1)[0].pos;
// 獲取蛇頭蛇尾位置
for(var k=0,l=snkbody.length;k

然而我們像現在發現蛇雖然會走了,但是蛇尾的顏色并不會改變,所以我們還需要將蛇尾的顏色改變。

snk[snkw].style.background=0;

如果我們需要改變蛇的前進方向,我們需要清楚我們的設備,如果是移動設備,我們需要使用手指滑動方法,如果是pc設備,我們需要識別按鍵,所以我就使用了獲取body.width的方法,如果大于1024,即識別為pc端,否則為移動端。

var bodywid = document.body.offsetWidth;
if(bodywid>1024){
    document.addEventListener("keydown",function(e){
        e=e||window.event;
        switch(e.keyCode){
            case 37:{
                //  left
                if(fxg==39)return false;
                fxg=e.keyCode;
                break;
            }
            case 38:{
                if(fxg==40)return false;
                fxg=e.keyCode;
                break;
                // up 
            }
            case 39:{
                if(fxg==37)return false;
                fxg=e.keyCode;
                break;
                // right   
            }
            case 40:{
                if(fxg==38)return false;
                fxg=e.keyCode;
                break;
                // down
            }
        }
    },false);
    // 識別按鍵
}else{
    oul.touch({
        swipeLeft:function(){
            kkk(37)
        },
        swipeRight:function(){
            kkk(39)
        },
        swipeUp:function(){
            kkk(38)
        },
        swipeDown:function(){
            kkk(40)
        },
    });
    // 劃動改變函數kkk的值,使蛇改變方向
    function kkk (e){
          switch(e){
            case 37:{
                //  left
                if(fxg==39)return false;
                fxg=e;
                break;
            }
            case 38:{
                if(fxg==40)return false;
                fxg=e;
                break;
                // up 
            }
            case 39:{
                if(fxg==37)return false;
                fxg=e;
                break;
                // right   
            }
            case 40:{
                if(fxg==38)return false;
                fxg=e;
                break;
                // down
            }
        }
    }
    // 39:右  1:40  2:37  3:38
}
if(fxg==40){
        snkbody[l-1].pos=snkbody[l-1].pos+20;  
    }else if(fxg==37){
        snkbody[l-1].pos=snkbody[l-1].pos-1;
    }
    else if(fxg==38){
        snkbody[l-1].pos=snkbody[l-1].pos-20;
    }
    else if(fxg==39){
        snkbody[l-1].pos=snkbody[l-1].pos+1;
    }
// 根據我們的索引可以看出,向下就是依次+20,向上就是-20,向左就是-1,向右就是+1,所以我們在按鍵之后改變蛇頭的方向即可

我們的蛇現在就可以走了,我們還想讓他能夠吃到食物

if(snkh==food.pos){
    snkbody.unshift({pos:snkw,color:food.color});
    // 將食物放到蛇尾
    snkfood();
    // 再次刷新食物
    chi.play();
    // 播放吃食物音效
    var snkbodycd = snkbody.length-5;
    // 獲取分數
    dqcd.innerText=snkbodycd;   
    // 刷新當前分數
}

我們在平時玩貪吃蛇的時候,碰壁也會死亡,所以我們還需要做一下碰壁處理

// 我們的小格子邊框是20個,所以我們要在全局建立個數變量
var geshu = 20;
// 之后根據索引找出各個邊框處小格子的規律,并且識別蛇頭方向,進行碰壁處理
var fxg = 39;
// 初始化方向為向右
if((snkh+1)%geshu==0&&fxg==39){    
    sile();  
}
else if(snkh>=400-geshu&&fxg==40){    
    sile();   
}
else if(snkh%geshu==0&&fxg==37){
    sile();  
}
else if(snkh

我們在識別完墻壁后,我們還需要識別自己,讓蛇撞上自己之后,也會死亡。

for(var i =0,l=snkbody.length;i

這樣我們的貪吃蛇游戲已經完成了大半
下面就是我們將制作點擊按鈕和暫停按鈕

btn1.onclick=function(){
    sudu = level.value
    // 設置速度
    clearInterval(ffffd)
    // 首先清除定時器,防止多次點擊定時器沖突
    ffffd=setInterval(function(){
        fzhs ();
    },sudu) 
    // 將以上蛇開始運動的代碼放入一個名為fzhs的代碼中循環
    bgaudio.play();  
    // 播放背景音樂
}
// 點擊開始
btn2.onclick=function(){
    clearInterval(ffffd);
    // 清除定時器
    bgaudio.pause();
    // 聲音暫停
}

在蛇死亡后,還需要死亡音效,彈出框,頁面刷新

function sile(){
    var l = snkbody.length-5;
    // 計算蛇吃了幾個食物
    var score = localStorage.getItem("score")
    if(l>score){
        localStorage.setItem("score",l)
    }
    // 如果當前分數大于歷史最高分數,我們要將歷史最高分數設置為當前分數
    si.play();
    // 播放死亡音樂
    alert("GameOver");
    // 彈出GameOver
    location.reload();
    頁面刷新
    return false; 
}

我們還需要設置歷史最高分數

var score = localStorage.getItem("score")||0;
ls.innerHTML = score;
這樣一個貪吃蛇小游戲就做完了,你還可以對樣式和js進行改進,并告訴我,讓我們共同進步!!!

最后,我的github游戲奉上,希望你喜歡。
https://Smallmotor.github.io/...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91425.html

相關文章

  • PyGame貪吃的實現

    摘要:最近幫人做了個貪吃蛇的游戲交作業用,很簡單,界面如下開始界面游戲中界面是不是很簡單樸素。代碼在這里賦值,而不是在事件的循環中賦值,避免按鍵太快 最近幫人做了個貪吃蛇的游戲(交作業用),很簡單,界面如下:開始界面: showImg(https://segmentfault.com/img/bV49cP?w=638&h=478); 游戲中界面: showImg(https://segmen...

    elisa.yang 評論0 收藏0
  • 使用TypeScript和Canvas編寫移動端貪吃大作戰游戲

    摘要:基本介紹一款移動端貪吃蛇大作戰游戲。主要的游戲邏輯有貪吃蛇移動碰撞檢測貪吃蛇碰撞碰撞墻壁和吃食物。貪吃蛇的身體如何跟隨頭部移動需要分為兩種情況,在單位時間內貪吃蛇移動一單位長度和貪吃蛇移動多單位長度。 基本介紹 一款移動端貪吃蛇大作戰游戲。(只支持移動端) 這是一個臨近 deadline 的課設項目,為了方便地使用TS,我直接使用angular-cli生成了TypeScript的項...

    AlphaWallet 評論0 收藏0
  • 不小心用js重做了一遍貪吃

    摘要:基于這個核心重新實現了一次貪吃蛇游戲,并且完善了游戲的關卡設計,效果如下效果預覽詳細思路分析 貪吃蛇游戲想必沒人會感到陌生,這個游戲的js版本在網上也是一搜一大把,今天我要介紹的仍然是如何用js做一個貪吃蛇游戲,但在關鍵一步,蛇的運動的實現上略有不同。 貪吃蛇的js版本通常用連續的方塊元素來實現蛇身,蛇的運動處理一般是這樣的,讓蛇頭向運動方向偏移一格,其后的元素依次移向前一個元素的位置...

    kidsamong 評論0 收藏0

發表評論

0條評論

Kross

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<