JavaScript的小游戏—

通过上下左右的方向键控制

<!DOCTYPE html>
<!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;box-sizing: border-box;}#main {width: 360px;height: 420px;border: 10px solid #000;background-color: #b7d4a8;border-radius: 20px;margin: 50px auto;}#stage {width: 304px;height: 304px;border: 2px solid #000;margin: 20px auto;position: relative;}#snake>div {width: 10px;height: 10px;background-color: #000;position: absolute;border: 1px solid #b7d4a8;}#food {width: 10px;height: 10px;position: absolute;top: 100px;left: 120px;display: flex;/* 自动换行 */flex-flow: wrap;}#food div {width: 5px;height: 5px;background-color: #000;transform: rotate(45deg);}#info {width: 304px;margin: 0 auto;display: flex;justify-content: space-between;font: bold 20px Courier;}</style>
</head><body><div id="main"><div id="stage"><!-- 贪吃蛇的 --><div id="snake"><div></div></div><!-- 食物 --><div id="food"><div></div><div></div><div></div><div></div></div></div><div id="info"><div>SCORE:<span id="score">0</span></div><div>LEVEL<span id="level">1</span></div></div></div><script>// 获取snakeconst snake = document.getElementById("snake");// 获取snake里的divconst snakes = snake.getElementsByTagName("div");// 获取食物const food = document.getElementById("food");// 获取分数和等级的spanconst scoreSpan = document.getElementById("score");const levelSpan = document.getElementById("level");// 创建变量 存储分数和等级let score = 0;let level = 0;// 事物的坐标应该在0--290之间function changeFood() {// 生成0--29之间的随机数  //向下取整const x = Math.floor(Math.random() * 30) * 10;const y = Math.floor(Math.random() * 30) * 10;// 设置食物坐标food.style.left = x + "px";food.style.top = y + "px";}// 定义一个变量  存储运动的方向let dir;// 创建一个变量 记录按键的状态let keyActive = true;const keyArr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];// 创建对象const reObj = {ArrowUp: "ArrowDown",ArrowDown: "ArrowUp",ArrowRight: "ArrowLeft",ArrowLeft: "ArrowRight"}// 禁止掉头// 身体超过2，不能是相反的方向// 保持原来的方向不变（不修改dir的值）// 绑定按键事件keydown keyup//  键盘事件只能绑定给可以获取焦点的元素或者是doucumentdocument.addEventListener("keydown", (event) => {if (keyActive && keyArr.includes(event.key)) {if (snakes.length < 2 || reObj[dir] !== event.key) {// 设置方向dir = event.key;keyActive = false;}}})// 要想使得身体和头一起运动 只需将尾部的一个移动位置let isGameOver;setTimeout(function move() {keyActive = true;// 获取头部const head = snakes[0];// 获取头部坐标let x = head.offsetLeft;let y = head.offsetTop;switch (dir) {case "ArrowUp":y -= 10;break;case "ArrowRight":// 向右移动，让left增加x += 10;break;case "ArrowDown":y += 10;break;case "ArrowLeft":x -= 10;break;}// 检查是否吃到食物if (head.offsetTop === food.offsetTop &&head.offsetLeft === food.offsetLeft) {// 1改变食物位置，changeFood();// 2增加其身体长度snake.insertAdjacentHTML("beforeend", "<div/>")score++;scoreSpan.textContent = score;// 检查等级if (score % 10 === 0 && level < 14) {level++;levelSpan.textContent = level + 1;}}// 判断游戏是否结束// 撞墙if (x < 0 || x > 290 || y < 0 || y > 290) {// 游戏结束alert("撞墙啦，游戏结束~")return}// 撞自己if (dir) {for (let i = 0; i < snakes.length; i++) {if (snakes[i].offsetLeft === x && snakes[i].offsetTop === y) {alert("撞到自己啦，游戏结束~");return;}}}// 获取尾巴const tail = snakes[snakes.length - 1]// 移动的位置tail.style.left = x + "px"tail.style.top = y + "px"// 将尾巴移到最前面snake.insertAdjacentElement("afterbegin", tail);keyActive = true;setTimeout(move, 300 - level * 20);}, 300)</script>
</body></html>

JavaScript的小游戏——贪吃蛇相关推荐

用pygame做一个简单的python小游戏---贪吃蛇
用pygame做一个简单的python小游戏-贪吃蛇贪吃蛇游戏博客链接:(方法一样,语言不一样) c++贪吃蛇:https://blog.csdn.net/weixin_46791942/artic ...
微信小游戏——贪吃蛇
博客简介本篇博客介绍的是微信小游戏贪吃蛇的案例,详细的开发过程,并且提供代码压缩包下载. 案例简介布局构建对象响应事件蛇头对象的移动蛇身的移动食物刷新绘制得分碰撞检验开始界面和结束 ...
JAVA课程设计（小游戏贪吃蛇）完整源码附素材（二）
目录 JAVA课程设计(小游戏贪吃蛇)完整源码附素材(一) JAVA课程设计(小游戏贪吃蛇)完整源码附素材(二) JAVA课程设计(小游戏贪吃蛇)完整源码附素材(三) 前言 1. 任务描述 1.1 ...
小游戏贪吃蛇的c++源代码
小游戏贪吃蛇的c++源代码,快来看看,还带解释 #include #include #include #include #include <conio.h> #include #inclu ...
C#winform 经典小游戏贪吃蛇V1.0（一）
关于V1.0 为什么我给这个版本定义为V1.0嘞,因为在这个版本中仅仅实现了蛇的自动行进,按键对蛇的行进方向的操作和吃掉食物蛇身的增长等操作. 但是任何事情都必须一步一步来,当我们完成这个乞丐版的 ...
Python命令行小游戏—贪吃蛇
Python命令行小游戏-贪吃蛇前言一.贪吃蛇游戏初始界面及地图 1.游戏初始界面 2.游戏地图二.命令符的设置.输出刷新和按键检测 1.库支持 2.c语言代码 3.Python代码(变量初始化 ...
我的小游戏——贪吃蛇
我的小游戏--贪吃蛇简介最近学习了Java的GUI编程写一个贪吃蛇的游戏来玩玩. 游戏主要涉及到Java的GUI编程和多线程等技术. 游戏一共有两种模式:窗墙模式和撞墙模式,默认是窗墙模式,选择不 ...
GUI编程详解：小游戏贪吃蛇
GUI编程 1.简介 Gui的核心技术:Swing.AWT 界面不美观需要jre环境为什么要学习? 可以写出自己想要的小工具工作时候,也可能需要维护到swing界面了解MVC架构,了解监听 ( ...
做一个简单的java小游戏--贪吃蛇
做一个简单的java小游戏–贪吃蛇贪吃蛇游戏博客链接:(方法一样,语言不一样) c++贪吃蛇:https://blog.csdn.net/weixin_46791942/article/detail ...

JavaScript的小游戏——贪吃蛇

JavaScript的小游戏——贪吃蛇相关推荐

最新文章

热门文章