资讯专栏INFORMATION COLUMN

简简单单制作贪吃蛇小游戏

Kross / 2384人阅读

摘要:利用制作简单的贪吃蛇游戏首先,我们先来分析一下整个页面的构成。代码如下因为我们需要兼容移动端设备和端设备,所以我们需要在前加上媒体查询样式,并且在使用单位时,需要用到而不是。

利用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/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/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元查看
<