JavaScript
搜索
分类

原生js编写贪吃蛇小游戏

作者：你想变强嘛 时间：2023-07-02 05:19:17　

本文实例为大家分享了js编写贪吃蛇小游戏的具体代码，供大家参考，具体内容如下

刚学完js模仿着教程，把自己写的js原生小程序。

HTML部分


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="./css/index.css" >
</head>
<body>
   <div class="content">
    <!-- 游戏开启按钮 -->
       <div class="btn startBtn"><button></button></div>
       <!-- 蛇身 -->
       <div id="snakeWrap"></div>
   </div>
   <!-- 引入外部js文件 -->
   <script src="./js/index.js"></script>
</body>
</html>

css部分


/* 整体样式 */
.content{
   width: 640px;
   height: 640px;
   margin: 100px auto;
   position: relative;
}
.btn{
   width: 100％;
   height: 100％;
   position: absolute;
   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 2;
}

.btn button{
   background: none;
   border: none;
   background-size: 100％ 100％;

cursor: pointer;
   outline: none;

position: absolute;
   left: 50％;
   top: 50％;
}

.startBtn button{
   width: 200px;
   height: 80px;
   background: url(../images/Snipaste_2021-05-08_08-52-45.png) no-repeat;
   background-size: contain;
   margin-left: -100px;
   margin-top: 222px;
}

#snakeWrap{
   width: 600px;
   height: 600px;
   background: #73aad4;
   border: 20px solid #13649c;
   position: relative;
}

.snakeHead{
   background-color: yellowgreen;
   border-radius: 50％;
}

.snakeBody{
   background-color: black;
   border-radius: 50％;
}

.food{
   background-color: red;
   border-radius: 50％;
}

js部分


var sw = 20,        //一个方块的宽
   sh = 20,        //一个方块的宽
   tr = 30,        //行数
   td = 30;        //列数

var snake = null,  //生成蛇的实例
   food = null;    //生成食物的实例
   game = null;   //创建游戏实例

//把整体看成是一个一个小方块 移动的的时候创建和删除方块(后续所有方块的生成都会调用)
// 方块构造函数
function Square(x,y,classname){    //对应css中三种蛇的样式（蛇头 蛇身 蛇尾）
   this.x = x * sw;
   this.y = y * sh;
   this.class = classname;
   this.viewContent = document.createElement('div');
   this.viewContent.className = this.class;             //将创建出来的div添加对应css样式
   this.parent = document.getElementById('snakeWrap');    
}

//在方块构造函数的 原型链 上创建create方法 确定新div的具体信息
//this指向Square
Square.prototype.create = function(){
   this.viewContent.style.position = 'absolute';
   this.viewContent.style.width = sw + 'px';
   this.viewContent.style.height = sh + 'px';
   this.viewContent.style.left = this.x + 'px';
   this.viewContent.style.top = this.y + 'px';

this.parent.appendChild(this.viewContent);     //把新创建的div添加到页面
}

//在方块构造函数的 原型链 上创建remove方法  用于移动时删除方块
Square.prototype.remove = function(){
   this.parent.removeChild(this.viewContent);
}

// 蛇
function Snake(){
   this.head = null;       //存储蛇头信息
   this.tail = null;       //存储蛇尾信息
   this.pos = [];          //存储蛇身上的每一个方块的位置

this.directionNum = {   //存储蛇走的方向
       left : {
           x : -1,
           y : 0
       },
       right : {
           x : 1,
           y : 0
       },
       up : {
           x : 0,
           y : -1
       },
       down : {
           x : 0,
           y : 1
       }
   }
}

//this 指向 Snake
Snake.prototype.init = function(){      //初始化
   // 创建蛇头
   var snakeHead = new Square(2,0,'snakeHead');
   snakeHead.create();
   this.head = snakeHead;
   this.pos.push([2,0]);       //储存蛇头信息

// 创建蛇身1
   var snakeBody1 = new Square(1,0,'snakeBody');
   snakeBody1.create();
   this.pos.push([1,0]);       //储存蛇身信息

// 创建蛇尾
   var snakeBody2 = new Square(0,0,'snakeBody');
   snakeBody2.create();
   this.tail = snakeBody2;
   this.pos.push([0,0]);       /储存蛇尾信心

//形成链表关系
   //蛇头 蛇身 蛇尾的前后关系
   snakeHead.last = null;
   snakeHead.next = snakeBody1;

snakeBody1.last = snakeHead;
   snakeBody1.next = snakeBody2;

snakeBody2.last = snakeBody1;
   snakeBody2.next = null;

//给蛇 添加一个默认方向 向右
   this.direction = this.directionNum.right;
}

// 获取蛇头的下一个位置对应的元素（this指向Snake）
// 获取下一个点的坐标并储存到nextPos数组
Snake.prototype.getNextPos = function(){
   var nextPos = [
       this.head.x/sw + this.direction.x,         //this.direction.x、y 下面会将方向与键盘事件绑定 来确定下一个点生成的位置
       this.head.y/sh + this.direction.y
   ]

// 下个点是自己，撞到了自己  游戏结束
   var selfCollied = false;
   this.pos.forEach(function(value){            //forEach遍历数组 两数组比较看是否有重复坐标
       if (value[0] == nextPos[0] && value[1] == nextPos[1]){
           selfCollied = true;
       }
   })

//撞到了自己  游戏结束
   if(selfCollied){
       this.、
       .die.call(this);
       return;
   }

// 下个点是围墙  游戏结束

if(nextPos[0] > 29 || nextPos[0] < 0 || nextPos[1] > 29 || nextPos[1] < 0){
       this.strategies.die.call(this);
       return;
   }

// 下个点是食物  吃

if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]){
       this.strategies.eat.call(this);
       return;
   }

// 下个点什么都不是  走

this.strategies.move.call(this);
}

// 碰撞后要做的事

Snake.prototype.strategies = {
   move : function(format){ //参数用于判断是否删除蛇尾
       // 创建一个newbody,删掉蛇头
       var newBody = new Square(this.head.x/sw,this.head.y/sh,'snakeBody')
       newBody.next = this.head.next;
       newBody.next.last = newBody;
       newBody.last = null;
       this.head.remove();
       newBody.create();

// 创建一个新蛇头
       var newx = this.head.x/sw + this.direction.x;
       var newy = this.head.y/sh + this.direction.y;
       var newHead = new Square(newx,newy,'snakeHead')
       newHead.next = newBody;
       newBody.last = newHead;
       newHead.last = null;
       newHead.create();

// 更新蛇身的坐标
       this.pos.splice(0,0,[newx,newy]);
       this.head = newHead;

//如果为false  则吃
       if(!format){
           this.tail.remove();
           this.tail = this.tail.last;

this.pos.pop();
       }
   },
   eat : function(){
       this.strategies.move.call(this,true);
       game.score ++;
       createFood();
   },
   die : function(){
       game.over();
   }
}

snake = new Snake();

// 创建食物
function createFood(){
   // 食物小方块坐标
   var x = null;
   var y = null;

var include = true;
   while(include){
       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 * sw + 'px';
       foodDom.style.top = y * sh + 'px';
   }else{
       food.create();
   }
}

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

Game.prototype.init = function(){
   snake.init();
   createFood();
//这里曾经的e.keycode e.which 都已禁用  使用e.key
   window.addEventListener('keydown',function(e){
       if(e.key == 'ArrowLeft' && snake.direction != snake.directionNum.right){
           snake.direction = snake.directionNum.left;
       }else if(e.key == 'ArrowUp' && snake.direction != snake.directionNum.down){
           snake.direction = snake.directionNum.up;
       }else if(e.key == 'ArrowRight' && snake.direction != snake.directionNum.left){
           snake.direction = snake.directionNum.right;
       }else if(e.key == 'ArrowDown' && snake.direction != snake.directionNum.up){
           snake.direction = snake.directionNum.down;
       }
   });
   this.start();
}

Game.prototype.start = function(){
   this.timer = setInterval(function(){
       snake.getNextPos();
   },0.0000000000000001)
}

Game.prototype.over = function(){
   clearInterval(this.timer);
   alert('你的得分为' + this.score);

// 游戏回到最初始状态
   var snakeWrap = document.getElementById('snakeWrap');
   snakeWrap.innerHTML = '';

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

var startBtnWrap = document.querySelector('.startBtn');
   startBtnWrap.style.display = 'block';
}

// 开启游戏

game = new Game();
var startBtn = document.querySelector('.startBtn button');
startBtn.onclick = function(){
   startBtn.parentNode.style.display = 'none';
   game.init();
}

简单的一个小游戏，如有问题请大佬指正。

来源：https://blog.csdn.net/weixin_56330639/article/details/116569204

标签：js,贪吃蛇
0
投稿

猜你喜欢

  • Python中的heapq模块源码详析

    2023-09-23 12:07:23

  • 对numpy中shape的深入理解

    2023-12-09 03:43:41

  • python正则表达式的懒惰匹配和贪婪匹配说明

    2021-06-18 18:05:51

  • javascript一些不错的函数脚本代码

    2023-07-02 05:25:52

  • Python使用SQLite和Excel操作进行数据分析

    2023-11-27 22:32:28

  • Python学习笔记之open()函数打开文件路径报错问题

    2021-10-05 23:25:34

  • Python编程之多态用法实例详解

    2022-08-01 23:42:31

  • python生成不重复随机数和对list乱序的解决方法

    2023-09-24 01:17:59

  • 网页设计之文字的辨识度与可读性

    2007-10-26 16:19:00

  • Yii2中使用asset压缩js,css文件的方法

    2024-05-02 17:16:13

  • Python中pip工具的安装以及使用

    2023-12-12 18:42:37

  • python 绘制拟合曲线并加指定点标识的实现

    2023-07-25 20:29:51

  • 如何获取当前 select 元素的值

    2010-03-29 13:07:00

  • 用Javascript正则表达式验证Email地址

    2009-12-09 15:56:00

  • Python从MySQL数据库中面抽取试题，生成试卷

    2024-01-18 01:40:51

  • 您是否记得关闭所有的XHTML元素

    2009-07-13 12:17:00

  • 如何根据用户银行帐户余额的多少进行显式的提交或终止？

    2009-11-22 19:28:00

  • GoLang中panic与recover函数以及defer语句超详细讲解

    2024-03-22 09:41:37

  • asp模块化分页源码

    2008-04-13 07:02:00

  • NaviCat连接时提示"不支持远程连接的MySql数据库"解决方法

    2024-01-24 17:03:54
    • asp之家 网络编程 m.aspxhome.com