原生js实现贪食蛇小游戏的思路详解
先不多说先上图
下面是代码部分（这里你可以根据需要改变蛇头和身体还有食物的图片，然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈，请不要在意哈），还有操作键是使用 ↑ ↓ ← → ）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>贪食蛇</title>
<style>
.map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
left: 50%;
transform: translate(-50%);
}
#dv {
color: whitesmoke;
font-weight: 700;
text-align: center;
line-height: 50px;
width: 150px;
height: 50px;
position: absolute;
background-color: orange;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}
</style>
</head>
<body>
<div class="map">
<div id="dv">开始游戏</div>
</div>
<script>
//食物:是一个对象,有宽,有高,有颜色,有横纵坐标
//自调用函数
(function () {
var element = []; //用来保存每个小方块食物的
function Food(x, y, width, height, color) {
this.x = x || 0;
this.y = y || 0;
this.width = width || 20;
this.height = height || 20;
this.color = color || "green";
}
//为原型添加初始化的方法(作用:在页面上显示这个食物)
//因为食物要在地图上显示,所以,需要地图的这个参数(map--就是页面上的.class=map的这个div)
Food.prototype.init = function (map) {
//先删除这个小食物
//外部无法访问,此函数在自调用函数里面
remove();
//创建div
var div = document.createElement("div");
//把div加到map里面
map.appendChild(div);
//获取div的样式
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.color;
//脱离文档流
div.style.position = "absolute";
//横纵坐标先停止----随机产生
this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
div.style.left = this.x + "px";
div.style.top = this.y + "px";
//把div加入element数组中
element.push(div);
//改变食物的样式---改成自己喜欢的东西
div.style.backgroundImage = "url(" + "../images/shi.png" + ")";
div.style.backgroundRepeat = "no-repaet";
div.style.backgroundSize = "cover";
};
//私有函数
function remove() {
for (var i = 0; i < element.length; i++) {
var ele = element[i];
//找到这个子元素的父级元素,然后删除这个子元素
ele.parentNode.removeChild(ele);
//再次把element中的这个子元素删除
element.splice(i, 1);
}
}
//把Food暴露给window,外部可以使用
window.Food = Food;
}());
//自调用函数---小蛇
(function () {
//存放小蛇的每个身体部分
var element = [];
//小蛇的构造函数
function Snake(width, height, driection) {
this.width = width || 20;
this.height = height || 20;
//小蛇的身体
this.body = [{
x: 3,
y: 2,
color: "red"
},
{
x: 2,
y: 2,
color: "orange"
},
{
x: 1,
y: 2,
color: "orange"
}
];
//方向
this.driection = driection || "right";
}
//为原型添加方法---小蛇初始化的方法
Snake.prototype.init = function (map) {
//先删除之前的小蛇
remove();
//循环遍历创建div
for (var i = 0; i < this.body.length; i++) {
//数组中的每个数组元素都是一个对象
var obj = this.body[i];
//创建div
var div = document.createElement("div");
//把div加入地图map中
map.appendChild(div);
//设置div的样式
div.style.position = "absolute";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
//横纵坐标
div.style.left = obj.x * this.width + "px";
div.style.top = obj.y * this.height + "px";
//背景颜色
div.style.backgroundColor = obj.color;
//方向还没定
//把div加入到element数组中---目的是为了删除
//把div加入数组中
element.push(div);
//更改头部的----变成图片
if (i == 0) {
div.style.backgroundImage = "url(" + "../images/tou_03.png" + ")";
div.style.backgroundRepeat = "no-repaet";
div.style.backgroundSize = "cover";
}
//更改尾巴的样式照片
if (i != 0) {
div.style.backgroundImage = "url(" + "../images/shi.png" + ")";
div.style.backgroundRepeat = "no-repaet";
div.style.backgroundSize = "cover";
}
}
};
//为原型添加方法---小蛇动起来
Snake.prototype.move = function (food, map) {
var i = this.body.length - 1;
for (; i > 0; i--) {
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
//判断方向---改变小蛇的头的坐标位置
switch (this.driection) {
case "left":
this.body[0].x -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "top":
this.body[0].y -= 1;
break;
case "bottom":
this.body[0].y += 1;
break;
}
//判断有没有吃到食物
//小蛇的头的坐标和食物的坐标一致
var headX = this.body[0].x * this.width;
var headY = this.body[0].y * this.height;
//判断小蛇的头和食物坐标是否相同
if (headX == food.x && headY == food.y) {
//获取小蛇的最后的尾巴
var last = this.body[this.body.length - 1];
//把最后的蛇尾复制一个,重新的加入到小蛇的body中
this.body.push({
x: last.x,
y: last.y,
color: last.color
});
//把食物删除,重新初始化食物
food.init(map);
}
};
//删除小蛇的私有函数
function remove() {
//获取数组
var i = element.length - 1;
for (; i >= 0; i--) {
var ele = element[i];
//从map地图上删除这个子元素div
ele.parentNode.removeChild(ele);
element.splice(i, 1);
}
}
window.Snake = Snake;
}());
//自调用函数---游戏对象
(function () {
var that = null;
//游戏的构造函数
function game(map) {
this.food = new Food(); //食物对象
this.snake = new Snake(); //小蛇对象
this.map = map; //地图
that = this;
}
game.prototype.init = function () {
//初始化游戏
//食物初始化
this.food.init(this.map);
//小蛇初始化
this.snake.init(this.map);
that = this;
document.getElementById("dv").onclick = function () {
document.getElementById("dv").style.display = "none";
//调用小蛇移动的方法
that.runSnake(that.food, that.map);
//调用按键的方法
that.bindKey();
}.bind(that);
};
//添加原型方法---设置小蛇可以自动跑起来
game.prototype.runSnake = function (food, map) {
//自动的去移动
var time = 90;
var fn = function () {
//此时this是window
//移动小蛇
this.snake.move(food, map);
//初始化小蛇
this.snake.init(map);
//横坐标的最大值
var maxX = map.offsetWidth / this.snake.width;
//纵坐标的最大值
var maxY = map.offsetHeight / this.snake.height;
//小蛇的头的坐标
var headX = this.snake.body[0].x;
var headY = this.snake.body[0].y;
//判断 横坐标 有没撞墙
if (headX < 0 || headX >= maxX) {
//撞墙停止定时器
clearInterval(timeId);
alert("游戏结束");
location.reload();
}
//判断 纵坐标 有没撞墙
if (headY < 0 || headY >= maxY) {
clearInterval(timeId);
alert("游戏结束");
location.reload();
}
//判断 小蛇的头部 有没有 撞到自己
for (let i = 1; i < this.snake.body.length; i++) {
let x = this.snake.body[i].x;
let y = this.snake.body[i].y;
if (headX === x && headY === y) {
clearInterval(timeId);
alert("游戏结束");
location.reload();
}
}
//增加游戏难度,判断 到达一定数量的时候 加速
switch (true) {
case 5 <= this.snake.body.length && this.snake.body.length <= 10:
clearInterval(timeId);
time = 60;
timeId = setInterval(fn, time);
break;
case 10 <= this.snake.body.length && this.snake.body.length <= 15:
clearInterval(timeId);
time = 40;
timeId = setInterval(fn, time);
break;
case 15 <= this.snake.body.length:
clearInterval(timeId);
time = 30;
timeId = setInterval(fn, time);
break;
}
console.log(this.snake.body.length + "--" + "time:" + time);
}.bind(that);
//定时器小蛇自运动
var timeId = setInterval(fn, time);
};
//添加原型方法---设置用户按键,改变小蛇移动的方向
game.prototype.bindKey = function () {
//获取用户的按键,改变小蛇的移动方向
document.addEventListener("keydown", function (e) {
//获取按键的值并进行判断是,改变小蛇移动的方向
switch (e.keyCode) {
//没有bind方法时此时的this指向的是documen
case 37:
if (this.snake.driection != "right") {
this.snake.driection = "left";
}
break;
case 38:
if (this.snake.driection != "bottom") {
this.snake.driection = "top";
}
break;
case 39:
if (this.snake.driection != "left") {
this.snake.driection = "right";
}
break;
case 40:
if (this.snake.driection != "top") {
this.snake.driection = "bottom";
}
break;
}
}.bind(that), false);
};
//把game暴露给window,外部就可以访问game对象
window.game = game;
}());
//初始化游戏对象
var gm = new game(document.querySelector(".map"));
//初始化游戏---开始游戏
gm.init();
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的原生js实现贪食蛇小游戏的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
原生js编写2048小游戏
效果图: 代码如下: <!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top: 0px; right: 0px; b
-
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编
-
js实现九宫格拼图小游戏
效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100
-
js推箱子小游戏步骤代码解析
推箱子小游戏大家肯定都玩过,之所以写这篇文章,是觉得这个小游戏足够简单好理解 demo: 步骤解析: 本文代码已经放在了github上面了,里面也进行了很详细的代码注释,可以copy下来,在本地运行一下看看. 1. 渲染地图 html结构: html结构十分简单,只要弄一堆div,来放置地图的class就可以了,我这里初始化了12*9个div,地图里最多九行高度. 这些div都是同样大小,地图渲染出来区别的只是颜色的不同. 地图函数: var box=$('.box div'); //地图使用的
-
JavaScript实现打地鼠小游戏
在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
-
JS实现的走迷宫小游戏完整实例
本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
利用原生js实现html5小游戏之打砖块（附源码）
前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较
-
js实现打地鼠小游戏
话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {
-
纯JavaScript 实现flappy bird小游戏实例代码
前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:
-
js实现贪吃蛇小游戏（容易理解）
话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >