贪吃蛇 javascript

最新推荐文章于 2021-02-05 11:17:20 发布
最新推荐文章于 2021-02-05 11:17:20 发布
阅读量247 收藏 1
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45475793/article/details/106052064
版权

贪吃蛇游戏

游戏规则

  • 撞墙、自己，游戏结束
  • 吃到食物，分数+1
  • 控制方向: ← ↑ ↓ →
  • 游戏暂停: 空格、点击暂停按钮

预览

在这里插入图片描述
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="bg">
    <div class="bar">
        <span class="rulesBtn">规则</span>
        <span class="stopBtn">暂停</span>
        <span class="startBtn">开始</span>
        <div class="score">0</div>
    </div>
    <div class="game"></div>
    <div class="gameRules">
        <h3>游戏规则</h3>
        <p>
            1.撞墙、自己，游戏结束<br>
            2.吃到食物，分数+1<br>
            3.控制方向: ↑ ↓ ← →<br>
            4.游戏暂停: 空格、点击暂停按钮
        </p>
        <span>×</span>
    </div>
    <div class="gameStart gameBtn">开始游戏</div>
    <div class="gameStop gameBtn">游戏暂停</div>
    <div class="gameRestart gameBtn">重新开始</div>
</div>
<script src="index.js"></script>
</body>
</html>


.bg{
    width: 500px;
    height: 550px;
    background:rgba(0,0,0,0.7);
    margin: 0 auto;
    position: relative;
}
.bar{
    width: 500px;
    height: 49px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.bar span{
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: 5px;
    background:rgba(255,255,255,0.7);
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    box-shadow: 0 3px rgba(220, 220, 220, 0.7);
    user-select: none;
}
.bar span:hover{
    background: rgba(220, 220, 220, 0.7);
}
.bar span:active{
    background-color: rgba(220, 220, 220, 0.7);
    transform: translateY(2px);
}
.bar .rulesBtn{
    position: absolute;
    left: 0;
    top: 0;
}
.bar .startBtn{
    position: absolute;
    left: 50px;
    top: 0;
    display: none;
}
.bar .stopBtn{
    position: absolute;
    left: 50px;
    top: 0;
    display: none;
}
.bar .score{
    position: absolute;
    left: 170px;
    top: 0;
    width: 150px;
    height: 40px;
    margin-top: 5px;
    background:rgba(255,255,255,0.7);
    border-radius: 20px;
    box-shadow: 1px 3px rgba(220, 220, 220, 0.7);
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    user-select: none;
}
.game{
    width: 500px;
    height: 500px;
    position: relative;
}
.game div{
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
.snakeHead{
    background-color: lightpink;
}
.snakeBody{
    background-color: lightblue;
}
.food{
    background: url("food.png");
    background-size: cover;
}
.gameRules{
    width: 250px;
    height: 300px;
    background:rgba(255,255,255,0.7);
    position: absolute;
    top: 125px;
    left: 125px;
    text-align: center;
    display: none;
    z-index: 2;
    user-select: none;
}
.gameRules p{
    width: 230px;
    height: 200px;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    line-height: 40px;
}
.gameRules span{
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    font-size: 30px;
    line-height: 30px;
    cursor: pointer;
}
.gameBtn{
    position: absolute;
    top: 250px;
    left: 200px;
    width: 100px;
    height: 50px;
    background:rgba(255,255,255,0.7);
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 5px rgba(220, 220, 220, 0.7);
    user-select: none;
}
.gameBtn:hover{
    background-color: rgba(220, 220, 220, 0.7);
}
.gameBtn:active{
    background-color: rgba(220, 220, 220, 0.7);
    transform: translateY(2px);
}
.gameStop{
    display: none;
}
.gameRestart{
    display: none;
}


var rulesBtn = document.querySelector('.rulesBtn');     //顶部的规则按钮
var stopBtn = document.querySelector('.stopBtn');       //顶部的暂停按钮
var startBtn = document.querySelector('.startBtn');     //顶部的开始按钮
var gameRules = document.querySelector('.gameRules');   //游戏规则界面
var closeGameRules = document.querySelector('.gameRules span'); //游戏规则界面关闭按钮
var gameStart = document.querySelector('.gameStart');    //开始游戏（在游戏画面中）
var gameStop = document.querySelector('.gameStop');      //游戏暂停（在游戏画面中）
var gameRestart = document.querySelector('.gameRestart'); //重新开始（在游戏画面中）
var score = document.querySelector('.score');           //顶部的游戏分数

var squareWidth = 20, squareHeight = 20;    //方块的宽和高
var tr = 25, td = 25;   //游戏界面的行和列
var snake, food, game;      //实例

//方块
function Square(x, y, classname) {
    this.x = x * squareWidth;
    this.y = y * squareHeight;
    this.class = classname;
    this.parent = document.querySelector('.game');  //方块的父级
}

Square.prototype.create = function () { //创建方块并放到游戏界面中
    this.newSquare = document.createElement('div');

    this.newSquare.style.position = 'absolute';
    this.newSquare.style.top = this.y + 'px';
    this.newSquare.style.left = this.x + 'px';
    this.newSquare.className = this.class;

    this.parent.appendChild(this.newSquare);
};

Square.prototype.remove = function () { //从界面中移除指定方块
    this.parent.removeChild(this.newSquare);
};

//蛇
function Snake() {
    this.head = null;   //储存蛇头信息
    this.tail = null;   //储存蛇尾信息
    this.pos = [];      //储存蛇（每一个方块）的定位
    this.directionNum = { //蛇往指定的方向前进一步
        left: {x: -1, y: 0},
        up: {x: 0, y: -1},
        right: {x: 1, y: 0},
        down: {x: 0, y: 1}
    };
}

//初始化蛇
Snake.prototype.init = function () {
    //创建蛇头,并更新信息
    var newHead = new Square(2, 0 ,'snakeHead');
    newHead.create();
    this.head = newHead;    //更新蛇头信息
    this.pos.push([2,0]);   //添加定位信息

    //创建蛇身1,并更新信息
    var newBody1 = new Square(1, 0, 'snakeBody');
    newBody1.create();
    this.pos.push([1,0]);   //添加定位信息

    //创建蛇身2,并更新信息
    var newBody2 = new Square(0, 0, 'snakeBody');
    newBody2.create();
    this.tail = newBody2;   //更新蛇尾信息
    this.pos.push([0,0]);   //添加定位信息

    //创建链表关系    让蛇整体移动
    newHead.last = null;
    newHead.next = newBody1;

    newBody1.last = newHead;
    newBody1.next = newBody2;

    newBody2.last = newBody1;
    newBody2.next = null;

    //设置蛇的默认方向为右
    this.direction = this.directionNum.right;
};

//获取蛇往前走一步会遇到的方块，根据遇到的不同方块做不同的事情
Snake.prototype.getNextPos = function () {
    //获取蛇的下一步
    var nextPos = [
        this.head.x/squareWidth + this.direction.x,
        this.head.y/squareHeight + this.direction.y
    ];

    //下一步是墙
    if (nextPos[0]<0 || nextPos[1]<0 || nextPos[0]>td-1 || nextPos[1]>tr-1){
        this.stragetic.die.call(this);

        return;
    }

    //下一步是自己
    var self = false;   // false:下一步不是自己  true:下一步是自己

    this.pos.forEach(function (value) { //遍历蛇的定位信息
        if (value[0]==nextPos[0] && value[1]==nextPos[1]){  //条件成立说明下一步是自己，改值为true
            self = true;
        }
    });
    if (self){  //self=true则执行
        this.stragetic.die.call(this);

        return;
    }

    //下一步是食物
    if (food && food.pos[0]==nextPos[0] && food.pos[1]==nextPos[1]){
        this.stragetic.eat.call(this, true);

        return;
    }

    //下一步什么都没有    以上三种情况后面加上return，若都没有发生（即什么也没遇到），则执行这一步
    this.stragetic.move.call(this);
};

//处理蛇碰撞方块后的事情
Snake.prototype.stragetic = {
    move: function (food) { //food参数用来决定要不要移除蛇尾
        /*蛇移动的方法：   （！！！每一步都要更新蛇的head、tail、pos信息,链表信息）
            1.创建新蛇身在原来蛇头位置，移除原来蛇头
            2.创建新蛇头在新蛇身前一步
            3.移除原来蛇尾
        */

        //新建一个蛇身（蛇头的定位）,更新信息和链表关系,移除蛇头
        var newBody = new Square(this.head.x/squareWidth, this.head.y/squareHeight, 'snakeBody');

        newBody.last = null;
        newBody.next = this.head.next;
        newBody.next.last = newBody;

        this.head.remove();
        newBody.create();

        //新建一个蛇头(新蛇身的前一步)，更新信息和链表关系
        var newHead = new Square(newBody.x/squareWidth + this.direction.x, newBody.y/squareHeight + this.direction.y, 'snakeHead');
        newHead.create();

        this.head = newHead;
        this.pos.splice(0, 0, [newBody.x/squareWidth + this.direction.x, newBody.y/squareHeight + this.direction.y]);

        newHead.last = null;
        newHead.next = newBody;
        newBody.last = newHead;

        //移除蛇尾
        if (!food){ /*  吃到食物不移除，没吃到移除
                      若传进了true参数（代表遇到食物）则if(!food)=false,不移除蛇尾；
                      若没传参数(代表没遇到食物，food=undefined)则if(!food)=false，移除蛇尾*/
            this.tail.remove();
            this.tail = this.tail.last;
            this.pos.pop();
        }
    },
    eat: function () {
        this.stragetic.move.call(this, true);//传进true参数代表吃到食物
        creatFood();    //创建食物
        game.score++;   //分数加一
        score.innerHTML = game.score;   //分数在界面上显示
    },
    die: function () {
        game.over();    //游戏结束
    }
}

//食物
function creatFood() {
    var x = null;
    var y = null;
    var include = true; //判断食物在不在蛇身上 true为在，继续循环创建随机数   false为不在，跳出循环

    while (include){//食物不能生成在蛇的身上
        //创建随机数 0~25
        x = Math.round(Math.random() * (td-1));
        y = Math.round(Math.random() * (tr-1));

        snake.pos.forEach(function (value) {    //遍历蛇的定位信息
            if (x!=value[0] && y!=value[1]){    //条件成立说明食物不在蛇身上
                include = false;
            }
        });
    }

    food = new Square(x, y, 'food');
    food.pos = [x, y];  //保存食物的定位信息，用来判断蛇有没有吃到食物

    var foodDom = document.querySelector('.food');  //找到页面上的食物

    //用循环来确保页面中只有一个食物
    if (foodDom){//如果界面上有食物，则把新的随机坐标给它
        foodDom.style.left = x * squareWidth + 'px';
        foodDom.style.top = y * squareHeight + 'px';
    }else {//如果没有找到，则创建食物
        food.create();
    }
}

//游戏
function Game() {
    this.score = 0;
    this.timer = null;
}

//初始化游戏
Game.prototype.init = function () {
    snake.init();
    creatFood();
    score.innerHTML = 0;    //界面上分数清空为0

    document.onkeydown = function (ev) {
        //方向键上下左右改变蛇的方向
        if (ev.keyCode==37 && snake.direction!=snake.directionNum.right){
            snake.direction = snake.directionNum.left;
        }else if (ev.keyCode==38 && snake.direction!=snake.directionNum.down){
            snake.direction = snake.directionNum.up;
        }else if (ev.keyCode==39 && snake.direction!=snake.directionNum.left){
            snake.direction = snake.directionNum.right;
        }else if (ev.keyCode==40 && snake.direction!=snake.directionNum.up){
            snake.direction = snake.directionNum.down;
        }
        //空格暂停
        if (ev.keyCode == 32){
            console.log('kongge');
            if (stopBtn.style.display == 'block'){
                game.pause();
                stopBtn.style.display = 'none';
                startBtn.style.display = 'block';
                gameStop.style.display = 'block';
            }else if (startBtn.style.display == 'block'){
                game.start();
                startBtn.style.display = 'none';
                stopBtn.style.display = 'block';
                gameStop.style.display = 'none';
            }
        }
    }

    this.start();
};

//游戏开始：设置定时器
Game.prototype.start = function () {
    clearInterval(this.timer);
    this.timer = setInterval(function () {
        snake.getNextPos();
    }, 200);
};

//游戏暂停：关闭定时器
Game.prototype.pause = function () {
    clearInterval(this.timer);
};

//游戏结束
Game.prototype.over = function () {
    clearInterval(this.timer);
    var gameInnerHtml = document.querySelector('.game');
    gameInnerHtml.innerHTML = '';   //回到游戏初始状态

    snake = new Snake();
    game = new Game();

    rulesBtn.style.display = 'block';
    gameRestart.style.display = 'block';
    stopBtn.style.display = 'none';
};

snake = new Snake();
game = new Game();

//查看规则和关闭规则
rulesBtn.onclick = function () {
    gameRules.style.display = 'block';
}
closeGameRules.onclick = function () {
    gameRules.style.display = 'none';
}

//开始游戏
gameStart.onclick = function () {
    rulesBtn.style.display = 'none';
    this.style.display = 'none';
    stopBtn.style.display = 'block';

    game.init();
}

//暂停、继续游戏
stopBtn.onclick = function () {
    this.style.display = 'none';
    startBtn.style.display = 'block';
    gameStop.style.display = 'block';

    game.pause();
}
startBtn.onclick = function () {
    this.style.display = 'none';
    stopBtn.style.display = 'block';
    gameStop.style.display = 'none';

    game.start();
}

//重新开始
gameRestart.onclick = function () {
    this.style.display = 'none';

    gameStart.onclick();
}
CharonFly
关注
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JavaScript原生实现《贪吃蛇》
findhappy117的博客
02-21 548
JavaScript原生实现《贪吃蛇》，每吃掉一个食物，蛇的身体会变长，食物会重新换位置。
贪吃蛇(javascript版)
pkgray的专栏
05-24 619
新建网页 //作用域是全局的 var map = null; //面板对象 var food = null; //食物对象 var snake = null; //null是空指针，可以用于声明空对象 var mytime = null; //定时器对象 //贪吃蛇 //① 制作操作面板 functio
贪吃蛇(JavaScript实现)
分享我的编程经验和学习心得
08-28 453
在线预览 HTML代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp
javascript-贪吃蛇
weixin_44038355的博客
12-11 273
html: &amp;amp;amp;lt;body&amp;amp;amp;gt; &amp;amp;amp;lt;h2 style=&amp;amp;quot;margin-left: 200px ; margin-top: 15px&amp;amp;quot;&amp;amp;amp;gt;温馨提示：蛇头不能碰到自己的身体和最外面的边框，否则游戏结束！！&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
用JavaScript实现贪吃蛇游戏
10-14
在本文中，我们将探讨如何使用JavaScript实现一个经典的贪吃蛇游戏。首先，我们需要理解游戏的基本组成和逻辑。贪吃蛇游戏通常包括以下主要组件： 1. 地图：地图是游戏的基础，它定义了游戏区域的大小和背景颜色。...
js贪吃蛇javaScript
08-19
js写的贪吃蛇，详细开发过程见http://blog.csdn.net/uucai/article/details/9999911
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
贪吃蛇游戏网页版,基于JavaScript编写代码.rar
07-09
基于JavaScript贪食蛇游戏网页版，用键盘即可操作蛇身移动，这里为贪食蛇游戏专一写了一个类用来调用snake.js，贪食蛇游戏是各种语言初级程序员写的游戏，但对于JS来说，如果没有一定的编程经验，是不容易写出来的，...
JavaScript实现贪吃蛇
08-07
简单定时器实现游戏，附有代码注释....................
贪吃蛇JS代码
06-06
原声JS贪吃蛇　点击我删除div
JS实现贪吃蛇游戏
11-27
通过JS实现贪吃蛇功能 1、登录功能，程序运行时必须输入一个名称 2、蛇吃到实物可变长，碰到自己或着墙壁死亡，显示分数 3、游戏过程中动态显示分数变化 4、将数据存入本地文件score.txt（需要ActiveX插件，IE浏览器支持，只保存最高分数）
JS贪吃蛇
weixin_45820444的博客
08-21 1万+
用JS代码实现网页版贪吃蛇小游戏 老规矩，代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。 <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"&g
贪吃蛇的javascript实现
javasalatu
09-26 152
最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。 在学习的过程中发现使用JS实现动态效果挺有趣的。 在习作的过程中尝试着贪吃蛇游戏用JS实现了。竟然成功了。 思路：使用10px*10px的div层担当“像素”，然后使用40*40矩阵160个“像素”构成了游戏的界面。 下面是代码： //JavaScriptDo...
用JavaScript写的贪吃蛇游戏（很简单，很详细）
热门推荐
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
javascript实现简单的贪吃蛇游戏
42384718的博客
08-24 215
js代码： <script> var map; //地图 var snake; //蛇 var food; //食物 var timer; //定时器 var initSpeed = 200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度 var nowSpeed = initSpeed; //游戏进行时蛇移动速度 var grade = 0; //积分 v
基于JavaScript实现的网页版贪吃蛇
weixin_42768195的博客
07-10 778
效果截图 实现原理 通过div布局来实现贪吃蛇小游戏,html+JavaScript实现, 通过方向键的上下左右实现蛇的移动 首先,地图为一个二维数组 Map[*][*] 蛇的坐标分为X轴和Y轴 即 行(H) 与 列(L),且分别用 SnakeH 和 SnakeL 两个一维数组来存储 并且都以SnakeH[0] 和 SnakeL[0]作为蛇头进行移动 食物的坐标分为X轴和Y轴,用 ...
JavaScript实现贪吃蛇教程
"使用JavaScript实现贪吃蛇的代码示例" 在本文中，我们将探讨如何使用JavaScript来实现一个简单的贪吃蛇游戏。贪吃蛇是一种经典的计算机游戏，玩家控制一条不断移动的蛇，需要吃到食物而避免撞到自己的身体或边界。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值