游戏截图：
html部分：
<!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"><link rel="stylesheet" href="./css/index.css"><title>贪吃蛇小游戏</title></head><body><div class="content"><div class="btn startBtn"><button></button></div><div class="btn pauseBtn"><button></button></div><div id="snakeWrap"></div></div><script src="./js/index.js"></script></body></html>
css部分：
.content{width: 640px;height: 640px;margin: 50px auto;position: relative;}.btn{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0);z-index: 1;}.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: 150px;background-image: url('../images/btn1.gif');margin-left: -100px;margin-top: -75px;}.pauseBtn{display: none;}.pauseBtn button{width: 70px;height: 70px;background-image: url('../images/btn4.png');margin-left: -35px;margin-top: -35px;}#snakeWrap{position: relative;width: 600px;height: 600px;background: #FCE4EC;border: 20px solid #F8BBD0;}.snakeHead{background-image: url('../images/snake.png');background-size: cover;}.snakeBody{background-color: #9CCC65;border-radius: 50%;}.food{background: url('../images/food2.png') no-repeat;background-size: 100% 100%;}
js部分：
var sw = 20, // 一个方块的宽度sh = 20, // 高度tr = 30, // 行数td = 30; // 列数var snake = null, // 蛇的实例food = null, // 食物的实例game = null; // 游戏实例// 方块构造函数function Square(x,y,classname) {this.x = x*sw;this.y = y*sh;this.class = classname;this.viewContent = document.createElement('div');this.viewContent.className = this.class;this.parent = document.getElementById('snakeWrap');}Square.prototype.create = function(){// 创建方块domthis.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)}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,rotate:180 // 蛇头旋转角度},right:{x:1,y:0,rotate:0},up:{x:0,y:-1,rotate:-90},down:{x:0,y:1,rotate:90}}}Snake.prototype.init = function() {// 创建蛇头var snakeHead = new Square(2,0,'snakeHead');snakeHead.create();this.head = snakeHead; // 存储蛇头信息this.pos.push([2,0]) // 存储蛇头位置// 创建蛇身体var snakeBody1 = new Square(1,0,'snakeBody');snakeBody1.create();this.pos.push([1,0]) // 存储蛇身1位置var snakeBody2 = new Square(0,0,'snakeBody');snakeBody2.create();this.tail = snakeBody2; // 存储蛇尾信息this.pos.push([0,0]) // 存储蛇身1位置// 形成链表关系snakeHead.last = null;snakeHead.next = snakeBody1;snakeBody1.last = snakeHead;snakeBody1.next = snakeBody2;snakeBody2.last = snakeBody1;snakeBody2.next = null;// 给蛇添加一个属性，用来表示蛇走的方向this.direction = this.directionNum.right; // 默认往右走}// 获取蛇头的下一个位置对应的元素，要根据元素做不同的事情Snake.prototype.getNextPos = function() {var nextPos = [this.head.x/sw+this.direction.x,this.head.y/sh+this.direction.y]// 下个点是自己，游戏结束var selfCollied = false; //是否撞到了自己this.pos.forEach(function(value) {if(value[0]==nextPos[0] && value[1]==nextPos[1]){selfCollied = true;}});if(selfCollied){console.log('撞到了自己');this.strategies.die.call(this);return;}// 下个点是围墙，游戏结束if(nextPos[0]<0 || nextPos[1]<0 || nextPos[0]>td-1 || nextPos[1]>tr-1){console.log('撞到了墙');this.strategies.die.call(this);return;}// 下个点是食物，吃if(food && food.pos[0]==nextPos[0] && food.pos[1]==nextPos[1]){// 如果这个条件成立说明现在蛇头要走的下一个点是食物的那个点；console.log('吃到食物了');this.strategies.eat.call(this);return;}// 下个点什么都不是，走this.strategies.move.call(this);};// 处理碰撞后要做的事Snake.prototype.strategies = {move:function(format) {// 该参数用于决定是否删除蛇尾// 创建新身体，在旧蛇头的位置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 newHead = new Square(this.head.x/sw+this.direction.x,this.head.y/sh+this.direction.y,'snakeHead');// 更新链表的关系newHead.next = newBody;newHead.last = null;newBody.last = newHead;newHead.viewContent.style.transform = 'rotate('+this.direction.rotate+'deg)';newHead.create();// 更新蛇身上每一个方块的坐标this.pos.splice(0,0,[this.head.x/sw+this.direction.x,this.head.y/sh+this.direction.y]);this.head = newHead; //更新this.headif(!format){// false: 需要删除（处理吃之外的操作）this.tail.remove();this.tail = this.tail.last;this.pos.pop();}},eat:function(){this.strategies.move.call(this,true);createFood();game.score++;},die:function(){game.over();}}snake = new Snake();// snake.init();// 创建食物function createFood(){// 食物的随机坐标var x = null;var y = null;var include = true; // 循环跳出的条件,true表示食物坐标在蛇身上，false:表示不在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();document.onkeydown = function(ev) {// 用户按下左键， 蛇不能是正在往右走的if(ev.which == 37 && snake.direction != snake.directionNum.right){snake.direction = snake.directionNum.left;}else if(ev.which == 38 && snake.direction != snake.directionNum.down){snake.direction = snake.directionNum.up;}else if(ev.which == 39 && snake.direction != snake.directionNum.left){snake.direction = snake.directionNum.right;}else if(ev.which == 40 && snake.direction != snake.directionNum.up){snake.direction = snake.directionNum.down;}}this.start();}Game.prototype.start = function(){// 开始游戏this.timer = setInterval(function(){snake.getNextPos();},200);}Game.prototype.pause = function() {clearInterval(this.timer);}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();}// 暂停游戏var snakeWrap = document.getElementById('snakeWrap');var pauseBtn = document.querySelector('.pauseBtn button');snakeWrap.onclick = function() {game.pause();pauseBtn.parentNode.style.display='block';}pauseBtn.onclick = function() {game.start();pauseBtn.parentNode.style.display='none';}
js贪吃蛇源代码百度网盘下载 提取码：n8q5
js贪吃蛇源代码github下载地址
JS版小黄脸大战
js扫雷小游戏链接地址
python小黄脸大战小游戏链接地址
vue高仿网易云音乐app
如果觉得《JS贪吃蛇小游戏(DOM (html+css+js))》对你有帮助，请点赞、收藏，并留下你的观点哦！
