javascript实现贪吃蛇小练习
更新时间：2020年07月05日 14:34:33 作者：余依忈
这篇文章主要为大家详细介绍了javascript实现贪吃蛇的小练习，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现贪吃蛇的具体代码，供大家参考，具体内容如下
游戏思路：
- 创建方块、控制按钮（showBlock）
- 方块移动（点击开始，不断创建并移除前面的方块，用到队列先进先出）
- 控制移动（doUp\doDown\doLeft\doRight，加入用键盘控制）
- 产生食物方块(generateFood)
- 吃到食物变长（当方块位置相同时，吃食物）
- 判断撞墙、撞到自己游戏结束
- 设置积分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
}
.content {
width: 800px;
height: 400px;
background-color: gray;
display: absolute;
}
</style>
<div id="content" class="content">
</div>
<button onclick="start()">开始游戏</button>
<button onclick="doUp()">上</button>
<button onclick="doDown()">下</button>
<button onclick="doLeft()">左</button>
<button onclick="doRight()">右</button>
<div id="score">0</div>
<script>
//定义参数
var snackBlock = {};
snackBlock.top = 20;
snackBlock.left = 20;
var firstDiv = showBlock(snackBlock.left, snackBlock.top, "red");
var snackDivArray = [];//装方块的数组
snackDivArray.push(firstDiv);
var left = 1, right = 2, up = 3, down = 4;
var direction = right;
var food = generateFood();//生成食物
var hasEat = false;
var score = 0;
function generateFood() {
var left = getRandomNum(39);
var top = getRandomNum(19);
var foodBlock = showBlock(left, top, "pink");
foodBlock.left = left;
foodBlock.top = top;
return foodBlock;
}
function getRandomNum(max) {
return Math.round(Math.random() * max) * 20;
}
function start() {
var interval = setInterval(function () {
var newBlock = {};
switch (direction) {
case up:
newBlock.top = snackBlock.top - 20;
newBlock.left = snackBlock.left;
break;
case down:
newBlock.top = snackBlock.top + 20;
newBlock.left = snackBlock.left;
break;
case left:
newBlock.top = snackBlock.top;
newBlock.left = snackBlock.left - 20;
break;
case right:
newBlock.top = snackBlock.top;
newBlock.left = snackBlock.left + 20;
break;
}
var currentLeft = newBlock.left;
var currentTop = newBlock.top;
var eat = false;
//吃食物
if (currentLeft == food.left && currentTop == food.top) {
removeBlock(food);
food = generateFood();
eat = true;
hasEat = true;
score += 10;//吃一个加10分
document.getElementById("score").innerHTML = score;//写入div
}
snackBlock = newBlock;
//是否撞墙
if (currentLeft < 0 || currentLeft >= 800 || currentTop < 0 || currentTop >= 400) {
alert("game over!");
clearInterval(interval);
return;
}
if (eat == false) {
//移除尾巴
removeBlock(snackDivArray.shift(div));
}
//是否撞到自己
snackDivArray.forEach(function (item, index, array) {
if (item.top == currentTop && item.left == currentLeft) {
alert("game over!");
clearInterval(interval);
return;
}
});
//创建新的身体
var div = showBlock(newBlock.left, newBlock.top, "red");
div.left = newBlock.left;
div.top = newBlock.top;
snackDivArray.push(div);
}, 300);
}
//方向控制
function doUp() {
if (direction == down && hasEat) {
return;
}
direction = up;
}
function doDown() {
if (direction == up && hasEat) {
return;
}
direction = down;
}
function doRight() {
if (direction == left && hasEat) {
return;
}
direction = right;
}
function doLeft() {
if (direction == right && hasEat) {
return;
}
direction = left;
}
function showBlock(left, top, color) {//产生方块
var content = document.getElementById("content");
var snackDiv = document.createElement("div");
snackDiv.style.width = "20px";
snackDiv.style.height = "20px";
snackDiv.style.left = left + "px";
snackDiv.style.top = top + "px";
snackDiv.style.background = color;
snackDiv.style.position = "absolute";
content.appendChild(snackDiv);
return snackDiv;
}
function removeBlock(div) {//移除方块
div.parentNode.removeChild(div);
}
//键盘控制方向
document.onkeydown = function (e) {
if (e && e.keyCode == 38) {
doUp();
} else if (e && e.keyCode == 40) {
doDown();
} else if (e && e.keyCode == 37) {
doLeft();
} else if (e && e.keyCode == 39) {
doRight();
}
}
</script>
</body>
</html>
更多有趣的经典小游戏实现专题，分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了webpack中的热刷新与热加载的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧2016-01-01
Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值,下面这篇文章主要给大家介绍了关于ES6 Promise.all的使用方法以及其细节的相关资料,需要的朋友可以参考下2022-07-07
javascript父子通信...2007-05-05
8月最后1天，赶紧补篇博客。贴个最近看到的腾讯的特效，写的还可以。先看效果。2010-09-09
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
跟踪一些最基本的客户端访问信息，这里将一些公用的代码总结下来,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了ES6新特性之变量的解构赋值操作,结合实例形式分析了ES6针对数组、对象等的解构赋值操作相关实现技巧,需要的朋友可以参考下2017-04-04
好久不写js,手都有点生了。写个小东西热手。2011-05-05
以前我们说的内存泄漏，通常发生在后端，但是不代表前端就不会有内存泄漏。特别是当前端项目变得越来越复杂后，前端也逐渐称为内存泄漏的高发区。本文就带大家了解一下Javascript的内存泄漏2022-06-06
javascript模拟地球旋转效果，把一下代码保存到HTML文件，打开就可以看到一个旋转的地球。请使用Chrome、Opera或者火狐浏览器查看，IE8不支持2013-12-12
最新评论