JS贪吃蛇小游戏(DOM (html+css+js))

游戏截图：

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))相关推荐

JS扫雷小游戏(DOM (html+css+js))
一:效果图: 二:资源 js扫雷小游戏源代码下载地址 js贪吃蛇小游戏链接 python小黄脸大战小游戏链接 vue高仿网易云音乐app 三:源代码: html部分: <!DOCTYPE htm ...
Snake贪吃蛇小游戏纯js代码
Snake贪吃蛇小游戏纯js代码先给个效果图,一样的简单而又纯朴,回归贪吃蛇最原始的状态还是先分析一下,使用面向对象编程真的降低了编程的难度(只要前期把思路想好,各个类,属性,方法抽象出来),就真 ...
Canvas实现贪吃蛇小游戏（面向对象）
Canvas实现贪吃蛇小游戏我们常常在网页上制作的小游戏都是通过Canvas实现的,虽然我们也可以使用DOM来实现,但是这样会更加的节约资源. 我们书写这个小游戏的目的主要是为了适应js中关于面向对 ...
用 typescript 做一个贪吃蛇小游戏
typescript 做一个贪吃蛇小游戏搭建环境创建 tscofig.json 文件配置如下 {"compilerOptions": {"target": ...
JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏
目录 1 引言 2 游戏地图 3 游戏对象 3.1 食物对象 3.2 小蛇对象 3.3 游戏对象 4 游戏的逻辑 4.1小蛇的移动 4.2 让蛇自己动起来 4.2.1 自动移动 4.2.2 自调用函数 ...
JavaScript制作贪吃蛇小游戏
目录效果展示原理分析 Game.js文档 Snake.js文档 Food.js文档附上源代码写了这么久的代码是否你和我一样感到枯燥乏味了呢? 是否没有前进的动力了呢? 别忘了当时的你踌躇满志 ...
html5实现贪吃蛇小游戏
实现技术:h5的canvas+原生js 可直接复制,查看效果 <!doctype html> <html> <head> <meta charset=&quo ...
【贪吃蛇小游戏】宝塔面板快速搭建贪吃蛇小游戏Web网站 - 无需云服务器
文章目录前言视频教程 1. 环境安装 2. 安装cpolar内网穿透 3. 内网穿透 4. 固定http地址 5. 配置二级子域名 6. 创建一个测试页面转载自远程内网穿透的文章:Linux使用 ...
前端技术搭建贪吃蛇小游戏（内含源码）
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 写在前面上周我们实通过前端基础实现了井字游戏,今 ...

JS贪吃蛇小游戏(DOM (html+css+js))

游戏截图：

html部分：

css部分：

js部分：

JS贪吃蛇小游戏(DOM (html+css+js))相关推荐

最新文章

热门文章