原生js实现贪吃蛇小游戏 +背景音乐(包含对象、构造函数、this等知识点)+超详细注释

最新推荐文章于 2021-05-31 08:09:19 发布
最新推荐文章于 2021-05-31 08:09:19 发布
阅读量1.2k 收藏 8
点赞数 2
分类专栏： js实战案例 文章标签： js实现贪吃蛇小游戏 html5 音乐播放器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41257129/article/details/89386878
版权

●锻炼逻辑思维
●加强对象、构造函数、this等知识点的应用
●html5中音乐播放器的应用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .wrapper .score{
            width: 600px;
            height:400px;
            box-sizing: border-box;
            padding-left: 240px;
            position: absolute;
            top: 100px;
            right: -30px;
            background:url('img/startP.jpg') no-repeat;
            background-size: 100% 100%;
            line-height: 400px;
            font-size: 50px;
            color: red;
        }
        .wrapper .box {
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            background: url('img/bg.png') no-repeat;
            background-size: 100% 100%;
            margin-left: 50px;
            position: relative;
        }
        .wrapper .box .start {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url('img/start.png') no-repeat;
            background-size: 100% 100%;
            right: -220px;
            top: 55%;        
            cursor: pointer;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            color:  #333;
            font-weight: 400;
        }
        .wrapper .box .pause{
            position: absolute;
            width: 200px;
            height: 100px;
            background: url('img/pause.png') no-repeat;
            background-size: 100% 100%;
            right: -220px;
            top: 50%;
            margin-top: -100px;
            cursor: pointer;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            color:  #333;
            font-weight: 400;
        }
        .snake {
            position: absolute;
            top:0;
            left: 0;
            width: 30px;
            height: 30px;
        }
       .over{
           width: 300px;
           height: 300px;
           position: absolute;
           top: -301px;
           left: 50%;
           margin-left: -150px;
           background: url('img/timg.jpg');
           background-size: 100% 100%;
           /* display: none; */
       }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="score" id="_score">0</div>
        <div class="box" id="_box">
            <span class="start" id="_start">开始</span>
            <span class="pause" id="_pause">暂停</span>
            <div class="over" id="_over"></div>
        </div>
    </div>   
    <audio src="music.mp3"   preload="auto" loop="true" id="music"></audio>
    <!-- <embed src="music.mp3"  type="" hidden="true"> -->
</body>
</html>
<script>    
    var box = document.getElementById('_box');
    var start = document.getElementById('_start');
    var pause = document.getElementById('_pause');
    var over = document.getElementById('_over');
    var music = document.getElementById('music');
    // 每个小方块的宽度
    var squareWidth = 30;
    // 存放蛇；
    var snakeArr = [];
    //存放食物对象的数组
    var foods = [];
    // 设置定时器
    var timer = null;
    // 设置定时器时间
    var speed;
    // 分数
    var score = 0;
    // 每次只能一个方向改变
    var block = true;
    // 蛇头蛇身对象
    var snakeType = {
        head : {value: 0,url:"img/head.png"},
        body : {value: 1,url:'img/body.png'},
    }
    // 记录运动的方向，及蛇头旋转的角度
    var toward = {
        up: {rotate : 270,x:0,y:-squareWidth },
        right:{rotate: 0,x:squareWidth,y:0},
        down:{rotate: 90,x:0,y:squareWidth},
        left:{rotate:180,x:-squareWidth,y:0}
    }
    // 记录当前的运动方向
    var nowToward = toward.right;// 默认为右
    // 食物集合
    var foodSet = [
        // 苹果
        {
            name: 'apple',
            value: 2,
            url:'img/pingguo.png',
            maxNum: 2,
            // 蛇吃到食物后的方法
            action: function(){
                //蛇吃到食物后创建一个蛇头 并且产生的蛇身就在所吃食物的位置
                var snakebody = createSquare(this.row,this.col,snakeType.head);
                // 重新渲染之前的蛇头小方块，使之变为蛇身
                renderSquare(snakeArr[0],snakeType.body);
                // 将产生的蛇头方块添加在最前面
                snakeArr.unshift(snakebody);
                // 吃到食物后移除
                box.removeChild(this.foodSquare);
                // foods数组里面也将其删除（splice删除指定位置的对象）
                foods.splice(foods.indexOf(this),1);
                // 分数加10
                score += 10;
            },
            maxCtrl: function () {
            return this.maxNum;
        }
        },
        // 菠萝
        {
            name: 'pineapple',
            value: 3,
            url:'img/菠萝.png',
            maxNum: 2,
            // 蛇吃到食物后的方法
            action: function(){
                //蛇吃到食物后创建一个蛇头 并且产生的蛇身就在所吃食物的位置
                var snakebody = createSquare(this.row,this.col,snakeType.head);
                // 重新渲染之前的蛇头小方块，使之变为蛇身
                renderSquare(snakeArr[0],snakeType.body);
                // 将产生的蛇头方块添加在最前面
                snakeArr.unshift(snakebody);
                // 吃到食物后移除
                box.removeChild(this.foodSquare);
                // foods数组里面也将其删除（splice删除指定位置的对象）
                foods.splice(foods.indexOf(this),1);
                // 分数加10
                score += 10;
            } ,
            maxCtrl: function () {
            return this.maxNum;
        }
        },
        // 草莓
        {
            name: 'strawberry',
            value: 4,
            url:'img/caomei.png',
            maxNum: 2,
            // 蛇吃到食物后的方法
            action: function(){
                //蛇吃到食物后创建一个蛇头 并且产生的蛇身就在所吃食物的位置
                var snakebody = createSquare(this.row,this.col,snakeType.head);
                // 重新渲染之前的蛇头小方块，使之变为蛇身
                renderSquare(snakeArr[0],snakeType.body);
                // 将产生的蛇头方块添加在最前面
                snakeArr.unshift(snakebody);
                // 吃到食物后移除
                box.removeChild(this.foodSquare);
                // foods数组里面也将其删除（splice删除指定位置的对象）
                foods.splice(foods.indexOf(this),1);
                // 分数加10
                score += 10;
            },
            maxCtrl: function () {
            return this.maxNum;
        }
        },
        // 炸弹
        {
            name: 'bomb',
            value: 5,
            url:'img/bomb.png',
            maxNum: 2,
            // 蛇吃到食物后的方法
            action: function(){
                 gameOver();
                 return;
            },
            maxCtrl: function () {
            return Math.floor(score / 80) + 2;
        }
        }

    ]
    function Food(row,col,foodtype){
        this.foodtype = foodtype;
        this.row = row;
        this.col = col;
        this.url = foodtype.url;
        this.action = foodtype.action;
        this.foodSquare = null;
        // init()创建一个食物小方块
        this.init = function(){
        this.foodSquare = createSquare(this.row,this.col,this.foodtype);
        }
    }
    function generatefood() {
        for(var  i = 0;i < foodSet.length;i++)
        {
            // filter()方法把传入的函数作用于每个元素，
            // item表示foods数组里面某一对象，filter()返回的是一个数组
            var nowLen = foods.filter(function(item){
                if(item.foodtype.value == foodSet[i].value)
                {
                    return item;
                }
            }).length;
            if(nowLen < foodSet[i].maxNum)// 每个食物产生的个数不能大于它的maxNum;
            {
                var row ,col;
                do{
                    // 随机的行与列
                    row = Math.floor(Math.random()*20);
                    col = Math.floor(Math.random()*20);
                }while(existFood(row,col));// 如果已经存在则重新产生行与列
                // 产生一个食物对象
                var food = new Food(row,col,foodSet[i]);
                food.init();
                foods.push(food);// 将这个对象放入数组中
            }
        }
    }
    function existFood(row,col){
        for(var  i = 0; i < foods.length;i++)
        {
            if(foods[i].row == row && foods[i].col == col)
            {
                return true;
            }
            return false;
        }
    }
    init();
    // 初始化
    function init(){
        // 初始化蛇
        var head =  createSquare(0,3,snakeType.head);
        var body1 =  createSquare(0,2,snakeType.body);
        var body2 =  createSquare(0,1,snakeType.body);
        var body3 =  createSquare(0,0,snakeType.body);
        // 存入数组
        snakeArr.push(head,body1,body2,body3);
        //运动
      
    }
    // 创建蛇 
    function createSquare(row,col,squareType) {
        var span = document.createElement('span');
        span.classList.add('snake');
        // 确定位置
        span.style.top = row * squareWidth + 'px';
        span.style.left = col * squareWidth + 'px';
        // 渲染
        renderSquare(span,squareType);
        box.appendChild(span);
        return span;
    }
    // 渲染蛇头蛇身
    function renderSquare(span,snakeType){
        span.value = snakeType.value;
        span.style.backgroundImage = 'url('+snakeType.url+')';

    }
    // 蛇运动
    start.onclick = function(){
        run();   
        music.play();
    }
     // 键盘操作
     document.onkeydown = function(event){
        var event = event || window.event;
        var code = event.keyCode;
        changeTowrad(code);
    }
    pause.onclick = function(){
        clearTimeout(timer);
        music.pause();
       
    }
    function run(){
        speed =  400 -(Math.min( Math.floor(score / 50)*50,300));// 最小不小于100
        clearTimeout(timer);
        timer =  setTimeout(function(){
            // 检查碰撞
            var flag = checkCrash();
            if(flag.result == -1)
            {
                gameOver();
                return;
            }
            else if(flag.result == 1)
            {
                flag.target.action();
                block = true;
                document.getElementById('_score').innerHTML = score;
            }
            else{
                // move
                move();
                //产生食物
                 generatefood();
                // 移动一次将锁打开
                block = true ;
            }
            for (var i = 0; i < foodSet.length; i++) {
            foodSet[i].maxNum = foodSet[i].maxCtrl();
             };
            if(timer != null)
            {
                run();
            }
           
       },speed);
     
    }
    // 蛇移动
    function move(){
        // 将头变成蛇身
        renderSquare(snakeArr[0],snakeType.body);
        // 将最后一个变为蛇头
        var last = snakeArr.pop()// 移除数组最后一个；
        last.style.left = snakeArr[0].offsetLeft +  nowToward.x  +'px';
        last.style.top = snakeArr[0].offsetTop + nowToward.y + 'px';
        // 让蛇头旋转
        last.style.transform = "rotate(" + nowToward.rotate + "deg)";
        snakeArr.unshift(last);// 放在最前面
        // 将蛇身变为蛇头
        renderSquare(snakeArr[0],snakeType.head);    
    }
    function changeTowrad(code){
        if(!block)
        {
            return;
        }
        // 按下一次键盘后将锁关闭，等移动一次后再开启，保证每次只能按一个键
        block = false;    
        if(code == 40 && (nowToward.x & toward.down.x)==0 && (nowToward.y & toward.down.y)== 0)
        {
            nowToward = toward.down;
        }
        else if(code == 38 && (nowToward.x & toward.up.x)==0 && (nowToward.y & toward.up.y)== 0)
        {
            nowToward = toward.up;
        }
        else if(code == 37 && (nowToward.x & toward.left.x)==0 && (nowToward.y & toward.left.y)== 0)
        {
            nowToward = toward.left;
        }
        else if(code == 39 && (nowToward.x & toward.right.x)==0 && (nowToward.y & toward.right.y)== 0)
        {
            nowToward = toward.right;
        }
     }
    function checkCrash(){
        //碰到边界
        if(snakeArr[0].offsetLeft +nowToward.x  >= box.clientWidth || 
        snakeArr[0].offsetLeft <= 0)
        {
            return {result: -1,target:null};
        } 
        else if(snakeArr[0].offsetTop + nowToward.y >= box.clientHeight ||
        snakeArr[0].offsetTop + nowToward.y < 0)
        {
            return {result: -1,target:null};
        }
      
        // 碰到自己的身体
        else{
            for(var i = 3; i < snakeArr.length - 1; i++)
            {
                if(snakeArr[0].offsetLeft + nowToward.x == snakeArr[i].offsetLeft &&
                snakeArr[0].offsetTop + nowToward.y == snakeArr[i].offsetTop)
                {
                    return {result: -1,target: null};
                }
            }
             // 碰到道具
        for( var i = 0;i < foods.length;i++)
        {
            if(snakeArr[0].offsetLeft + nowToward.x == foods[i].foodSquare.offsetLeft &&
            snakeArr[0].offsetTop + nowToward.y == foods[i].foodSquare.offsetTop)
            {
                return {result: 1,target: foods[i]};
            }
        }
        }
       
        return 0;
    }
    function gameOver(){
        clearTimeout(timer);
        timer = null;
        // alert('游戏结束');
        var leader = over.offsetTop;
        var target = box.offsetHeight / 2 - over.offsetHeight /2;
        over.timer = setInterval(function(){
            leader = leader + (target - leader ) /10;
            over.style.top = leader + 'px';
        },8)
        over.style.display = 'block';
        music.pause();
        return;
    }
   
</script>
crazy的蓝色梦想
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用js给小游戏添加背景音乐_如何用vscode 调试 egg.js
weixin_28938701的博客
01-26 497
egg.js项目，PRD出现了一个bug，急需处理，而Debug(调试)是解决问题最快途径。 想起之前写过的一篇文章，但发现Debug(调试) 和 unit test(单元测试)不是一回事，Debug才比较适用。 于是，研究了egg.js的调试。 • Vscode 安装扩展 eggjs • 添加 Egg Debug，马上就会弹出一个launch.json，保存即可。...
添加了背景音乐和自动游戏功能的 JS版 2048
06-16
根据网上资源修改添加了背景音乐和自动游戏功能的javascript版2048游戏。
图形化带背景乐的——“贪吃蛇”(用原生js实现)
baldicoot_的博客
08-15 248
关于贪吃蛇的实现有很多方法，我选择了使用原生js去实现。游戏的总体思路分为以下几个步骤： 1.利用js动态生成四百个小棋格子，进而组成棋盘； 2.利用随机数，随机的产生黑色小点(我们姑且将它称之为蛇的食物)，这里要注意的是，每次对产生的食物做出判断，要是生成的小点他存在于蛇身的内部，就要对它进行重新调用，直到生成一个独立于蛇身外的随即点。 3.接下来就是利用数组来存储蛇的位置，snake[0]为蛇头,snake[snake.length-1]就是蛇尾的位置。 4.然后通过键盘事件，监听蛇要移动的方向，然后进
JavaScript 地图两条贪吃蛇添加眼睛 背景音乐
weixin_44269204的博客
05-12 231
//创建地图Map var map_div; var timer; var snake_eye_left; var snake_eye_right; var snake_eye_left1; var snake_eye_right1; function Map(){ this.width=800; this.height=600; this.color='cyan'; this.margi...
贪食蛇（添加了背景音乐的功能）
01-03
MFC写的贪食蛇程序，添加了背景音乐的功能。
js写贪吃蛇
11-14
js写贪吃蛇，纯js和html 写的绝对可以用 用起来很方便
如何用js给小游戏添加背景音乐_张为：如何用scratch做一个下冰雹的小游戏？看我的...
weixin_30744613的博客
01-25 210
先上游戏效果，看图张为：如何用scratch做一个下冰雹的小游戏？看我的这是实际运行起来的游戏截图，从中我们也可以看到需要一些角色，比如冬天的背景、从天而降的冰块、邪恶的圣诞帽、在地面左右移动躲避冰雹的笑脸小孩，左上角是两个变量，一个是分数，一个是难度。右下角是一个感叹号点开后会显示游戏的玩法，综合来看，这是一个比较完整的游戏，各方面都考虑到了。张为：如何用scratch做一个下冰雹的小游戏？看我...
javascript的背景音乐
12-07
javascript的背景音乐。使用背景音乐可以让你的为网站更美丽。。
原生JS 实现贪吃蛇
11-11
原生js 实现贪吃蛇。
【C++】贪吃蛇小游戏--有图形界面和背景音乐
热门推荐
如风逝去
08-12 1万+
 贪吃蛇是一款经典的小游戏，曾经在一些老式的手机上都是有的，今天我们就来实现一下这个小游戏。  首先是写代码钱的前期准备工作，我们这次实现的是带图形界面的贪吃蛇，必须要先下一个图形界面库，方便实现图形界面，这个图形界面库的名字叫做Easyx,可以在网上下载 直接进入下载就可以，然后装在vs的安装目录下：  首先我们要玩贪吃蛇需要两个部分蛇头和蛇身，我们先要定义两个宏一个控制蛇的最...
Cocos2d-JS 中游戏背景音乐与音效
AiCoding_D的博客
04-20 1万+
游戏中音频的处理也是非常重要的，它分为背景音乐播放与音效播放。 背景音乐是长时间循环播放的，它会长时间占用较大的内存，背景音乐不能多个同时播放。 而音效是短的声音，它占用内存较小，音效能多个同时播放。 在Cocos2d-JS中提供了一个音频引擎—AudioEngine,通过引擎能够很好地控制游戏背景音乐与音效优化播放。 Cocos2d-JS音频文件 音频多媒体文件主要是存放音频数据信
JS实现最简单的贪吃蛇小游戏（面向对象思想）
呵呵到天亮的博客
06-02 3075
本次练习主要是练习javaScript的面对对象思想话不多说，先看看效果图功能描述：1.小蛇在指定地图内移动，撞到边界即弹窗，显示游戏结束                  2.通过上、下、左、右四个按键，控制小蛇运动的方向                   3.随机产生“食物”，小蛇吃到食物就变长。地图再次出现食物                    4.统计分数，每吃一个食物就加一分具体封...
js实现贪吃蛇小游戏代码（源码）
qq_34222743的博客
01-13 1万+
贪吃蛇游戏     //定义一个点对象     function Point(x,y){         this.x=x;         this.y=y;         this.getX=function(){             return x;         }         this.getY=function(){             re
JS控制背景音乐 没有界面
weixin_30793643的博客
03-22 141
建立一个HTML5页面，放置<audio>标签，设置音频文件源，设置循环播放。准备两张图片，分别表示开启和暂停背景音乐两种状态，可以点击。 <audioid="music2"src="music.mp3"loop="loop">你的浏览器不支持audio标签。</audio> <ahref="javascript:playPause(...
html5综合游戏背景音乐,html5 飘雪花动画(增加背景音乐)
weixin_31558841的博客
05-31 284
冬天到了，少不了这样的动画效果(领导让加圣诞背景音乐)效果查看地址：1、PC端：https://www.huijindaicn.com/i...{$title}body {/*background:url(images/bg.jpg) center no-repeat;*/margin:0px;}*image{ width:100%; }canvas{ position: fixed; top:0...
使用JavaScript+jQuery构建的双人贪吃蛇游戏
"一个使用JavaScript和jQuery编写的双人对战贪吃蛇小游戏。开发者在初学jQuery时创作，主要展示了如何实现蛇的移动、碰撞检测以及游戏界面的基本功能。" 本文将详细介绍如何使用JavaScript和jQuery来开发一个双人...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值