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>
更多有趣的经典小游戏实现专题，分享给大家：
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js贪吃蛇游戏实现思路和源码
本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
-
javascript开发实现贪吃蛇游戏
贪吃蛇的例子: 在此例子中,利用snake数组的第0个元素和direction对象中的x值和y值做加法,算出蛇的下一个位置.利用间隔函数,不停的修改类名来进行渲染操作,感觉是一个很灵活的例子. style.css *{ margin: 0; padding: 0; box-sizing: border-box; } .page{ width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; } body{ font-size:
-
从0到1学习JavaScript编写贪吃蛇游戏
本文实例为大家分享了JavaScript编写贪吃蛇游戏的具体代码,供大家参考,具体内容如下 游戏截图 1.画出游戏界面 var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");//获取地图 2.给小蛇设置参数 var time = 160 ; //蛇的速度 var x = y = 8; var t = 20; //蛇身长 var map = []; //记录蛇运行路径 var siz
-
JS写的贪吃蛇游戏(个人练习)
JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t
-
js实现贪吃蛇小游戏（加墙）
本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 1.贪吃蛇的规则 作为一款经典游戏,很多人玩他其实就是一种怀念.但是他不应该那么单一,应该有更多新的元素出现.然后我是个新手,希望我以后继续学习的途中能够再次回头重写一遍贪吃蛇.他的规则是;a.超出边界会死 b.碰到自身会死 c.吃食物会变长. 值得注意的是:1.在函数里所调用的函数的顺序很重要.2.<script src="mygame2.js"></script>必须在<
-
javascript贪吃蛇完整版(源码)
javascript贪吃蛇完整版 注释完整,面向对象 复制代码 代码如下: <html><head> <title>贪吃蛇 Snake v2.4</title><style> body{ font-size:9pt; } table{ border-collapse: collapse; border:solid #333 1px; } td{ heigh
-
js编写“贪吃蛇”的小游戏
贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识: 1.JS函数的熟练掌握, 2.JS数组的应用, 3.JS小部分AJAX的学习 4.JS中的splice.shift等一些函数的应用, 基本上就这些吧,下面提重点部分: 前端的页面,这里可自行布局,我这边提供一个我自己的布局: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
-
js实现贪吃蛇小游戏（容易理解）
话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >
-
javascript实现贪吃蛇小游戏
本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> // 贪吃蛇: // 键盘的方向键,控制蛇的方向,碰撞食物,实现增加长度的
-
20行js代码实现的贪吃蛇小游戏
前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="