JavaScript实现贪吃蛇游戏
2024-07-08 19:30:54
1、贪吃蛇初级bate1效果图：
1、贪吃蛇初级bate1源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>贪吃蛇初级</title><style>* {margin: 0;padding: 0;}td {width: 48px;height: 48px;border: 1px solid black;}#pic {width: 400px;height: 400px;opacity: 0.6;position: absolute;background-color: antiquewhite;}div {position: absolute;width: 50px;height: 50px;}</style>
</head>
<body>
<h3 id="score">分数：0</h3>
<div id="pic"></div>
<script>document.write("<table cellspacing='0'>")for (var i = 0; i < 8; i++) {document.write('</tr>')for (var j = 0; j < 8; j++) {document.write("<td></td>")}}document.write("</table>")var pic = document.getElementById("pic")function createPic(type) {var Node = document.createElement("div")Node.style.left = parseInt(Math.random() * 8) * 50 + "px"Node.style.top = parseInt(Math.random() * 8) * 50 + "px"pic.appendChild(Node)switch (type) {case "head":Node.style.backgroundColor = "red"breakcase "food":Node.style.backgroundColor = "blue"breakcase "body":Node.style.backgroundColor = "yellow"break}return Node}var Score = 0var snakeHead = createPic("head")snakeHead.value = "上"var snakeFood = createPic("food")var snakeArr = [] //存储身体元素var snakeAll = [] //存储所有元素var snakeScore = document.getElementById("score")function move() {if (snakeArr.length > 0) {for (var i = snakeArr.length - 1; i >= 0; i--) {switch (snakeArr[i].value) {case "上":snakeArr[i].style.top = parseInt(snakeArr[i].style.top) - 50 + "px"breakcase "下":snakeArr[i].style.top = parseInt(snakeArr[i].style.top) + 50 + "px"breakcase "左":snakeArr[i].style.left = parseInt(snakeArr[i].style.left) - 50 + "px"breakcase "右":snakeArr[i].style.left = parseInt(snakeArr[i].style.left) + 50 + "px"break}if (i == 0) {snakeArr[i].value = snakeHead.value //当i=0的时候，那个元素其实就是蛇头} else {snakeArr[i].value = snakeArr[i - 1].value}}}switch (snakeHead.value) {case "上":snakeHead.style.top = parseInt(snakeHead.style.top) - 50 + "px"breakcase "下":snakeHead.style.top = parseInt(snakeHead.style.top) + 50 + "px"breakcase "左":snakeHead.style.left = parseInt(snakeHead.style.left) - 50 + "px"breakcase "右":snakeHead.style.left = parseInt(snakeHead.style.left) + 50 + "px"break}if (parseInt(snakeHead.style.left) < 0 || parseInt(snakeHead.style.top) < 0 || parseInt(snakeHead.style.left) > 350 || parseInt(snakeHead.style.top) > 350) {clearInterval(time)alert("撞墙,游戏结束！！！")}if (snakeArr.length > 0) {for (var i = 0; i < snakeArr.length; i++) {if (snakeHead.style.left == snakeArr[i].style.left && snakeHead.style.top == snakeArr[i].style.top) {clearInterval(time)alert("触碰到自己身体,游戏结束！！！")}}}if (snakeHead.style.left == snakeFood.style.left && snakeHead.style.top == snakeFood.style.top) {Score += 10snakeScore.innerHTML = "<h3>分数:" + Score + "</h3>"var bodyNode = createPic("body")snakeAll.push(snakeHead)var finallyNodeif (snakeArr.length > 0) {finallyNode = snakeArr[snakeArr.length - 1]} else {finallyNode = snakeHead}switch (finallyNode.value) {case "上":bodyNode.style.top = parseInt(finallyNode.style.top) + 50 + "px"bodyNode.style.left = finallyNode.style.leftbreakcase "右":bodyNode.style.left = parseInt(finallyNode.style.left) - 50 + "px"bodyNode.style.top = finallyNode.style.topbreakcase "下":bodyNode.style.top = parseInt(finallyNode.style.top) - 50 + "px"bodyNode.style.left = finallyNode.style.leftbreakcase "左":bodyNode.style.left = parseInt(finallyNode.style.left) + 50 + "px"bodyNode.style.top = finallyNode.style.topbreak}bodyNode.value = finallyNode.valuesnakeArr.push(bodyNode)snakeAll.push(bodyNode)var px = parseInt(Math.random() * 8) * 50var py = parseInt(Math.random() * 8) * 50for (var i = 0; i < snakeAll.length; i++) {if ((parseInt(snakeAll[i].style.left) == px && parseInt(snakeAll[i].style.top) == py)) {px = parseInt(Math.random() * 8) * 50py = parseInt(Math.random() * 8) * 50}}snakeFood.style.left = px + "px"snakeFood.style.top = py + "px"if (Score > 200) {clearInterval(time)window.location = "lastGame.html"}}}time = setInterval(move, 500)document.onkeydown = function (a) {switch (a.keyCode) {case 37:if (snakeHead.value = "右") {snakeHead.value = "左"}breakcase 38:if (snakeHead.value = "下") {snakeHead.value = "上"}breakcase 39:if (snakeHead.value = "左") {snakeHead.value = "右"}breakcase 40:if (snakeHead.value = "上") {snakeHead.value = "下"}break}}
</script>
</body>
</html>
2、贪吃蛇进阶bate2效果图：
2、贪吃蛇进阶bate2源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇高级</title><style>*{margin: 0;padding: 0;}td{width: 48px;height: 48px;border: 1px solid black;}#map{width: 700px;height: 700px;opacity: 0.4;position: absolute;background-color: rgb(29, 236, 10);/* 背景颜色是这个 */}div{position: absolute;width: 50px;height: 50px;}span{position: relative;width: 100px;height: 100px;}h1{margin-left: 300px;}button{margin-left: 150px;}</style></head>
<body>
<span id="score1"><h1>分数:0</h1></span>
<span><button onclick="changTime('100')">快</button><button onclick="changTime('300')">中</button><button onclick="changTime('1000')">慢</button></span>
<div id="map"></div>
<script>//首先创建地图 地图的规模是14*14即一行14格，共计14行document.write("<table cellspacing ='0'");for(var i=0;i<14;i++){document.write("</tr>");for(var j=0;j<14;j++){document.write("<td></td>");}}document.write("</table>")var map =document.getElementById("map") //获取地图的标签function createDiv(type){var node =document.createElement("div") // 一个创建函数，主要是创建一个小格node.style.left=parseInt(Math.random()*14)*50+"px" //随机生成一个距离左边的位置node.style.top=parseInt(Math.random()*14)*50+"px" //随机生成一个距离右边的位置map.appendChild(node) //将创建的div 50*50的一个颜色为传入的color的小格，添加到map地图中去switch(type){ //给创建的新的元素赋“含义” 红色的是蛇头 蓝色的是食物 黄色的是身体case "head":node.style.backgroundColor="red"break;case "food":node.style.backgroundColor="blue"break;case "body":node.style.backgroundColor="yellow"break;}return node}var arrAll =[] //放置蛇身体的元素var NodeAll=[] //放置所有的元素var score =0; //用来计分的var headNode =createDiv("head") //红色的是蛇头的颜色var spanScore =document.getElementById("score1") //获取计分数的，目的是当吃了一个食物后，就能够将分数进行更新var footNode =createDiv("food") //蓝色的是食物的部分headNode.value="下" //初始化蛇头的运动状态//创建函数，此函数主要功能是贪吃蛇的移动function move(){//贪吃蛇移动身体if(arrAll.length>0){for(var i=arrAll.length-1;i >= 0;i--){switch(arrAll[i].value){case "上":arrAll[i].style.top =parseInt(arrAll[i].style.top)-50+"px"breakcase "下":arrAll[i].style.top =parseInt(arrAll[i].style.top)+50+"px"breakcase "左":arrAll[i].style.left =parseInt(arrAll[i].style.left)-50+"px"breakcase "右":arrAll[i].style.left =parseInt(arrAll[i].style.left)+50+"px"break}if(i==0){arrAll[i].value=headNode.value //当i=0的时候，那个元素其实就是蛇头}else{arrAll[i].value=arrAll[i-1].value}}}//确定蛇头的移动方向，根据蛇头的移动方向，来确定移动方向switch(headNode.value){case "上":headNode.style.top =parseInt(headNode.style.top)-50+"px"breakcase "下":headNode.style.top =parseInt(headNode.style.top)+50+"px"breakcase "左":headNode.style.left =parseInt(headNode.style.left)-50+"px"breakcase "右":headNode.style.left =parseInt(headNode.style.left)+50+"px"break}//这个判断是如果蛇咬到了自己，那么就停止游戏if(arrAll.length>0){for(var i=0;i<arrAll.length;i++){if(headNode.style.left ==arrAll[i].style.left && headNode.style.top ==arrAll[i].style.top){clearInterval(time)alert("触碰到自己身体，游戏结束！！！")}}}//如果蛇碰到四周的墙壁，那么蛇就会死亡if(parseInt(headNode.style.left) <0 ||parseInt(headNode.style.left)>650 || parseInt(headNode.style.top) <0 ||parseInt(headNode.style.top)>650){//判断的条件是地图的四条边框线clearInterval(time) //在这里是清除定时器alert("撞墙，游戏结束！！！刷新重新开始游戏")switch(headNode.value){case "上":headNode.style.top =0+"px"breakcase "下":headNode.style.top =650+"px"breakcase "左":headNode.style.left =0+"px"breakcase "右":headNode.style.left =650+"px"break}//这个switch的作用是不让蛇头在死亡后再次移动}//重合检测 保证贪吃蛇不能够重合if(headNode.style.left ==footNode.style.left && headNode.style.top ==footNode.style.top){score =score +10spanScore.innerHTML="<h1>分数:"+score+"</h1>"var bodyNode =createDiv("body")NodeAll.push(headNode)var lastNodeif(arrAll.length >0){lastNode=arrAll[arrAll.length-1]}else{lastNode=headNode}switch(lastNode.value){case "上":bodyNode.style.top=parseInt(lastNode.style.top)+50+"px"bodyNode.style.left=lastNode.style.leftbreakcase "右":bodyNode.style.left=parseInt(lastNode.style.left)-50+"px"bodyNode.style.top=lastNode.style.topbreakcase "下":bodyNode.style.top=parseInt(lastNode.style.top)-50+"px"bodyNode.style.left=lastNode.style.leftbreakcase "左":bodyNode.style.left=parseInt(lastNode.style.left)+50+"px"bodyNode.style.top=lastNode.style.topbreak}bodyNode.value=lastNode.valuearrAll.push(bodyNode)NodeAll.push(bodyNode)var px =parseInt(Math.random()*14)*50var py =parseInt(Math.random()*14)*50for(var i=0;i<NodeAll.length;i++){if((parseInt(NodeAll[i].style.left) ==px &&parseInt(NodeAll[i].style.top) ==py)){px =parseInt(Math.random()*14)*50py =parseInt(Math.random()*14)*50}}footNode.style.left =px+"px"footNode.style.top=py+"px"}if(score>=300){clearInterval(time)window.open("finally.html")}}function changTime(speed){time =setInterval(move,speed)}//按住键盘的值，函数做出相应的反应 37对应的是左 38对应上 39对应右 40对应下document.onkeydown=function(e){switch(e.keyCode){case 37:if(headNode.value ="右" ){headNode.value="左"}breakcase 38:if(headNode.value ="下"){headNode.value="上"}breakcase 39:if(headNode.value ="左" ){headNode.value="右"}breakcase 40:if(headNode.value ="上"){headNode.value="下"}break}}
</script>
</body>
</html>
JavaScript实现贪吃蛇游戏相关推荐
- 用JavaScript实现贪吃蛇游戏_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>J ...
- html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）
先看结果截图(界面很丑,但是主要是为了贪吃蛇游戏算法设计和历史记录.排行榜功能的实现,希望以后不被产品经理打,哈哈) 功能描述: 1.开始游戏页面之前输入玩家姓名 2.历史记录:可以查看之前自己玩过的 ...
- JavaScript写贪吃蛇游戏，代码思路都有，想学的自己看
JavaScript写一个贪吃蛇的游戏(附源码) javascript群内每日课题-今日课题:JavaScript写一个贪吃蛇的游戏 PS:最近群内很多伙伴想要做游戏学学,练练自己的JavaScrip ...
- 基于单片机的贪吃蛇游戏设计_前端入门，基于html,css,javascript的贪吃蛇游戏
源代码: 贪吃蛇 .box1{ font-size: 15px; float:left; display: block; margin-right: 150px; } .box2{ font-size ...
- eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...
- 贪吃蛇javascript代码_源于Jquery开发贪吃蛇游戏——简单思路分析总结
前言 刚开始是学习前端那会,在熟悉 HTML+CSS+JS 后,我开始尝试去做贪吃蛇游戏.没想到在一顿瞎搞后还真搞出来了一个简陋版的贪吃蛇.哈哈!因为这是我刚开始学习前端的时候做的,所以代码有点简陋, ...
- JavaScript 贪吃蛇游戏的实现
JavaScript 贪吃蛇游戏的实现 前言 游戏介绍:贪吃蛇游戏是一款经典小游戏,既简单又耐玩.通过控制蛇头方向吃蛋,使得蛇变长,从而获得积分. 游戏玩法:上下左右控制蛇的方向,寻找吃的东西,每吃一 ...
- 原生JavaScript抒写——贪吃蛇小游戏
原生JavaScript抒写--贪吃蛇小游戏 文章目录 原生JavaScript抒写--贪吃蛇小游戏 前言 一.需求分析 二.效果展示 三.具体逻辑代码分析 1.首先创建一个html文件,然后我们利用 ...
- 如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接）
先来看游戏的最终效果: 3D网页版贪吃蛇游戏 下面来具体讲一下如何实现. 该游戏使用Hightopo的SDK制作,总共100多行代码,没有WebGL基础的同学们也可很快掌握. 场景初始化 首先,我们对 ...
- Javascript项目— 甜心教主《爱你》版 贪吃蛇游戏
0.项目展示 目录 0.项目展示 一,贪吃蛇游戏 1. 初始化及引入Game类 2.页面的初始化 3. 蛇类的初始化 4.蛇的运动更新与渲染 4.1 清屏操作 4.2 蛇的运动更新 基于以上,我们对运 ...
最新文章
- app.listen(3000)与app是不一样的
- 如何写一个通用的README规范 1
- 申请 SSL 证书 --Nginx 配置Https 最佳实践
- Python必备知识点：对Json的基本使用方法
- React开发（273）:异步调用的方式
- KANO模型，一个能解决你工作中90%烦恼的需求分析神器
- Android Activity设置全屏
- VS2010 MVC的 安装
- 【MATLAB】基于支持向量机的简单图像识别实现
- 蛋疼的时候写三消游戏（一）
- 第十五章 友元、异常和其他
- 只有手机号或者身份证能查出来绑定QQ号码？大神请赐教
- 武士道的精神，就是死（转自知乎）
- linux权限可被登录用户读取,Linux 用户及权限详解
- C++中string类函数常用函数大全
- 魔百盒CM201-2_YS、ZG、CH、(emmc,nand)_海思3798mv300_全套刷机固件
- 计算机动画关键技术,计算机动画关键技术综述ppt课件.ppt
- Windows与macOS水火不容？有了它一切搞定
- VW ware安装Ubuntu虚拟机及环境配置
- 计算机和音乐结合的作品,用计算机创作多媒体作品──音乐和声音张燕.doc