js+html+css贪吃蛇
2021/6/22 6:28:21
本文主要是介绍js+html+css贪吃蛇,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
- 思路
- 结果
- 代码
- HTML部分
- CSS部分
- JavaScript部分
- 说明
思路
蛇拥有的行为:
能移动、吃食物、变长(加尾巴)
1、蛇身:
编写蛇头、蛇身
通过计时间隔向某方向移动
检测有没有吃到食物,吃到则加尾巴
判断碰撞(蛇吃食物)
2、食物:
编写食物
随机出现
通过计时间隔某时间段出现一个
结果
代码
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="game.css"> <meta name="author" content="一只咸鱼"> <title>贪吃蛇</title> </head> <body> <script src="game.js"></script> </body> </html>
CSS部分
* { padding: 0; border: 0; margin: 0; } body { /* background: url("/image/uuu.jpeg"); */ background-color: #31A6FF59; } .head { position: absolute; z-index: 2; width: 30px; height: 30px; background: url("/images/dog.png") no-repeat 0; } .MainBody { position: absolute; } .body { clear: both; position: relative; top: 25%; left: 25%; width: 50%; height: 50%; background-color: red; border-radius: 15px; }
JavaScript部分
var arr = []; //蛇身 var bo = document.body; //获取主体,用于添加元素 //头 var t0 = document.createElement('div'); t0.className = "head"; t0.style.top = '300px'; t0.style.left = '408px'; t0.style.width = '30px'; t0.style.height = '30px'; arr.push(t0); bo.insertBefore(t0, bo.lastChild); //身体1 var t1 = document.createElement('div'); t1.className = "MainBody"; t1.style.top = '288px'; t1.style.left = '408px'; t1.style.width = '30px'; t1.style.height = '30px'; var t11 = document.createElement('div'); t11.className = "body"; t1.appendChild(t11); arr.push(t1); bo.insertBefore(t1, bo.lastChild); //身体2 var t2 = document.createElement('div'); t2.className = "MainBody"; t2.style.top = '276px'; t2.style.left = '408px'; t2.style.width = '30px'; t2.style.height = '30px'; var t22 = document.createElement('div'); t22.className = "body"; t2.appendChild(t22); arr.push(t2); bo.insertBefore(t2, bo.lastChild); //身体3 var t3 = document.createElement('div'); t3.className = "MainBody"; t3.style.top = '264px'; t3.style.left = '408px'; t3.style.width = '30px'; t3.style.height = '30px'; var t33 = document.createElement('div'); t33.className = "body"; t3.appendChild(t33); arr.push(t3); bo.insertBefore(t3, bo.lastChild); //身体4 var t4 = document.createElement('div'); t4.className = "MainBody"; t4.style.top = '252px'; t4.style.left = '408px'; t4.style.width = '30px'; t4.style.height = '30px'; var t44 = document.createElement('div'); t44.className = "body"; t4.appendChild(t44); arr.push(t4); bo.insertBefore(t4, bo.lastChild); //身体5 var t5 = document.createElement('div'); t5.className = "MainBody"; t5.style.top = '240px'; t5.style.left = '408px'; t5.style.width = '30px'; t5.style.height = '30px'; var t55 = document.createElement('div'); t55.className = "body"; t5.appendChild(t55); arr.push(t5); bo.insertBefore(t5, bo.lastChild); //身体6 var t6 = document.createElement('div'); t6.className = "MainBody"; t6.style.top = '240px'; t6.style.left = '408px'; t6.style.width = '30px'; t6.style.height = '30px'; var t66 = document.createElement('div'); t66.className = "body"; t6.appendChild(t66); arr.push(t6); bo.insertBefore(t6, bo.lastChild); //存储前一个部分的位置 var pathX = []; //left var pathY = []; //top for (j = 0, len = arr.length; j < len; j++) { pathX.push(null); } for (j = 0, len = arr.length; j < len; j++) { pathY.push(null); } var direction; //当前前进的方向 window.document.onkeydown = disableRefresh; function disableRefresh(evt){ //监听键盘方向键 var evt = window.event; if (evt.keyCode == 37) { //左 direction = 'left'; } else if (evt.keyCode == 38) { //上 direction = 'up'; } else if (evt.keyCode == 39) { //右 direction = 'right'; } else if (evt.keyCode == 40) { //下 direction = 'down'; } } volume = 30; //移动 setInterval(function() { //持续移动,根据direction控制方向 if (direction) { pathX[0] = arr[0].offsetLeft; pathY[0] = arr[0].offsetTop; //存储当前位置 if (direction == 'left' && arr[0].offsetLeft > 0) { //当前方向为左,则向左移动 arr[0].style.left = arr[0].offsetLeft - 12 + 'px'; } else if (direction == 'up' && arr[0].offsetTop > 0) { //当前方向为上,则向上移动 arr[0].style.top = arr[0].offsetTop - 12 + 'px'; } else if (direction == 'right' && arr[0].offsetLeft <= 1495) { //当前方向为右,则向右移动 arr[0].style.left = arr[0].offsetLeft + 12 + 'px'; } else if (direction == 'down' && arr[0].offsetTop <= 700) { //当前方向为下,则向下移动 arr[0].style.top = arr[0].offsetTop + 12 + 'px'; } k = 0; len = foods.length; k < len; flag = false; while (k < len) { //检测有没有吃到食物 if (! ((30 + foods[k].offsetTop) < arr[0].offsetTop || (30 + arr[0].offsetLeft) < foods[k].offsetLeft || (30 + arr[0].offsetTop) < foods[k].offsetTop || (30 + foods[k].offsetLeft) < arr[0].offsetLeft)) { child = document.getElementById(foods[k].id); child.parentNode.removeChild(child); foods.splice(k,1); len--; flag = true; ttt = document.createElement('div'); //添加尾巴 ttt.className = "MainBody"; ttt.style.top = arr[arr.length-1].offsetTop + 'px'; ttt.style.left = arr[arr.length-1].offsetLeft + 'px'; ttt.style.width = volume + 'px'; ttt.style.height = volume + 'px'; tttt = document.createElement('div'); tttt.className = "body"; ttt.appendChild(tttt); arr.push(ttt); pathX.push(null); pathY.push(null); bo.insertBefore(ttt, bo.lastChild); } k++; } len = arr.length; if (flag) { len--; } for (j = 1; j < len; j++) { //根据前一个的位置移动 pathX[j] = arr[j].offsetLeft; pathY[j] = arr[j].offsetTop; arr[j].style.left = pathX[j-1] + 'px'; arr[j].style.top = pathY[j-1] + 'px'; } } }, 20 //蛇移动的速度,单位为毫秒 ) // 食物 var foods = []; var num = 0; setInterval(function() { var imgName = Math.floor((Math.random()*4)+1); //随机取四个食物的中其中一个 var x1 = Math.floor((Math.random()*1495)+1); var y1 = Math.floor((Math.random()*700)+1); var food = document.createElement('div'); food.id = "food" + num; food.style = "position: absolute;width: 30px;height: 30px;background: url('/images/" + "food" + imgName + ".png');"; food.style.left = x1 + 'px'; food.style.top = y1 + 'px'; foods.push(food); bo.insertBefore(food, bo.lastChild); num++; }, 1000 //食物出现的速度,单位为毫秒 )
说明
其中的图片
文件存放
学习是让人愉快的事情!
这篇关于js+html+css贪吃蛇的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Vue新手入门教程:从零开始学习Vue框架
- 2024-11-23如何集成Ant Design Vue的图标
- 2024-11-23如何集成Ant Design Vue图标
- 2024-11-23使用vue CLI快速搭建Vue项目教程
- 2024-11-23Vue CLI多环境配置简单教程
- 2024-11-23Vue3入门教程:轻松搭建你的第一个Vue3应用
- 2024-11-23Vue3+Vite快速上手指南
- 2024-11-23Vue3阿里系UI组件入门指南
- 2024-11-23Vue3的阿里系UI组件入门指南
- 2024-11-23Vue3公共组件入门教程