贪吃蛇html游戏代码

拿来即用!

1代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>贪吃蛇</title><style>#map {width: 400px;height: 400px;border: 1px solid black;}/*地图的样式*/.divMap {width: 18px;height: 18px;margin: 1px;background-color: yellow;float: left;}/*//蛇身的样式*/.divSnake {width: 18px;height: 18px;margin: 1px;background-color: red;float: left;}/*//食物的样式*/.divFood {width: 18px;height: 18px;margin: 1px;background-color: green;float: left;}</style><script>var mapX = 20,mapY = 20; //地图边界，横向和纵向的div小格数量var arrMap = new Array(); //地图数组var snakeX = [4, 5, 6],snakeY = [2, 2, 2]; //蛇身var foodX = 9,foodY = 3; //食物var keyCode = 39; //蛇身移动方向，默认向右//创建地图function createMap() {var map = document.getElementById("map");for(y = 0; y < mapY; y++) {//第一层循环，y表示纵向轴arrMap[y] = new Array();for(x = 0; x < mapX; x++) {//第二层循环，x表示横向轴var div = document.createElement("div"); //div小格div.className = "divMap"; //初始化样式arrMap[y][x] = div; //将小格放入地图数组map.appendChild(div); //页面绘制}}}//创建蛇身 function createSnake() {var result; //判斷是否需要重新生成食物//改变地图中一串连续的div的底色for(i = 0; i < snakeX.length; i++) {arrMap[snakeY[i]][snakeX[i]].className = "divSnake";}}//创建食物function createFood() {result = false;do {foodX = parseInt(Math.random() * mapX);foodY = parseInt(Math.random() * mapY);//判断食物不能出现在蛇身上for(i = 0; i < snakeX.length; i++) {if(snakeX[i] == foodX && snakeY[i] == foodY) {result = true; //重叠了，需要从新生成一个食物break;}}} while (result);arrMap[foodY][foodX].className = "divFood"}//清除蛇身function claerSnake() {for(i = 0; i < snakeX.length; i++) {arrMap[snakeY[i]][snakeX[i]].className = "divMap";}}//蛇身运动function snakeMove() {//清除蛇身claerSnake();for(i = 0; i < snakeX.length - 1; i++) {snakeX[i] = snakeX[i + 1];snakeY[i] = snakeY[i + 1];}//                snakeX[snakeX.length - 1]++; //向右移动//每次移动。舌头增加1格，keyCode匹配键盘方向键switch(keyCode) {case 37: //向右snakeX[snakeX.length - 1]--;break;case 38: //向上snakeY[snakeY.length - 1]--;break;case 39: //向右snakeX[snakeX.length - 1]++;break;case 40: //向上snakeY[snakeY.length - 1]++;break;}//吃掉食物if(snakeX[snakeX.length - 1] == foodX && snakeY[snakeY.length - 1] == foodY) {//吃到食物snakeX[snakeX.length] = snakeX[snakeX.length - 1];snakeY[snakeY.length] = snakeY[snakeY.length - 1];//重新排列for(i = snakeX.length - 1; i > 0; i--) {snakeX[i] = snakeX[i - 1];snakeY[i] = snakeY[i - 1];}createFood(); //重新生成下一個食物}//超出游戲邊框if(snakeX[snakeX.length - 1] < 0 ||snakeX[snakeX.length - 1] > mapX - 1 ||snakeY[snakeY.length - 1] < 0 ||snakeY[snakeY.length - 1] > mapY - 1) {clearInterval(move); //停止移動alert("游戲結束");return;}createSnake(); //创建蛇身}function keyDown() {var newKey = event.keyCode; //键盘按键if(keyCode == 37 && newKey == 39 ||keyCode == 39 && newKey == 37 ||keyCode == 38 && newKey == 40 ||keyCode == 40 && newKey == 38) {//禁止掉头return;} else if(newKey >= 37 && newKey <= 40) {//用户按了某个方向键keyCode = newKey;} else {//其他按键}}//运行window.onload = function() {createMap(); //创建地图createSnake(); //蛇身createFood(); //创建食物move = setInterval("snakeMove()", 200); //每个两百秒蛇身移动document.onkeydown = keyDown; //捕获方向键}</script></head><body><div id="map"></div></body></html>

2效果

贪吃蛇html游戏代码相关推荐

贪吃蛇大作战代码java,贪吃蛇游戏，贪吃蛇java游戏代码讲解
贪吃蛇游戏,贪吃蛇java游戏代码讲解来源:互联网作者:佚名时间:2020-06-06 贪吃蛇源代码.txt这世界上除了我谁都没资格陪在你身边. 听着,我允许你喜欢我.除了白头偕老,我们... ...
python 贪吃蛇小游戏代码_10分钟再用Python编写贪吃蛇小游戏
Python编写贪吃蛇前不久我们公众号发布了一篇C++编写贪吃蛇小游戏的推文,反响空前.看来大家对这类简单易上手小游戏还是很喜爱的. 恰逢2018年IEEE Spectrum编程语言排行榜新鲜出炉, ...
贪吃蛇小游戏代码html,自制贪吃蛇小游戏代码
package game; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Game_St ...
python贪吃蛇小游戏代码_python 贪吃蛇小游戏代码
#!/usr/bin/python # -*- coding: UTF-8 -*- #作者:黄哥 #链接:https://www.zhihu.com/question/55873159/answer/ ...
Python使用pygame编写贪吃蛇小游戏
Python使用pygame编写贪吃蛇小游戏代码如下: # -*- coding:utf-8 -*- """ 贪吃蛇 """ import ...
100行代码，使用 Pygame 制作一个贪吃蛇小游戏！
作者 | 周萝卜来源 | 萝卜大杂烩相信我们大家都玩过贪吃蛇游戏,今天我们就从头一起来写一个贪吃蛇小游戏,只需要100多行的代码就完成了. 用到的 Pygame 函数贪吃蛇小游戏用到的函数功能 ...
python100行代码程序-100行python代码，轻松完成贪吃蛇小游戏
大家小时候都玩过贪吃蛇吧?小编小时候可喜欢拿爸妈的手机玩了,厉害着呢!今天,小编就来用100行代码实现一个简易版的贪吃蛇.在网上,贪吃蛇教程蛮多的,但要安装蛮多库的,而且也不够清晰,今天的代码比较短, ...
python100行代码-怎样写贪吃蛇小游戏？用100行python代码轻松解决！
大家小时候都玩过贪吃蛇吧?小编小时候可喜欢拿爸妈的手机玩了,厉害着呢!今天,小编就来用100行代码实现一个简易版的贪吃蛇.在网上,贪吃蛇教程蛮多的,但要安装蛮多库的,而且也不够清晰,今天的代码比较短, ...
bat贪吃蛇游戏代码_100行python代码，轻松完成贪吃蛇小游戏
来源:DataGo数据狗链接: https://mp.weixin.qq.com/s/fDcr1SfcbynLzHye7Q7VOg 大家小时候都玩过贪吃蛇吧?小编小时候可喜欢拿爸妈的手机玩了,厉 ...
Pygame实战项目：用300行代码写出贪吃蛇小游戏
贪吃蛇是一款逻辑清晰.操作简单.老少咸宜.备受欢迎的休闲小游戏. 下面就给大家介绍一下贪吃蛇游戏的基本原理,以及实现贪吃蛇所需要的相关方法. 一.主要思路我们的贪吃蛇游戏将主要包括三个核心模块,分别 ...

贪吃蛇html游戏代码

贪吃蛇html游戏代码相关推荐

最新文章

热门文章