HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）

今天江哥手把手带大家实现一个吃豆豆游戏

关注江哥不迷路，带你编程上高速

知识点 HTML + CSS + JS
实现思路：类似贪吃蛇
游戏玩法，W A S D，控制方向，实现吃豆豆

废话不多说，直接上图

实现思路

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>代码情缘-小渔吃豆</title><link rel="stylesheet" href="css/index.css"><script src="js/SnakeMap.js"></script><script src="js/SnakeFood.js"></script><script src="js/Snake.js"></script>
</head>
<body>
<!--<div class="map"></div>-->
<script>let snakeMap = new SnakeMap();let snakeFood = new SnakeFood(100, 100, "images/body.png", snakeMap);snakeFood.render();let obj = {width: 100,height: 100,headImg: "images/head.png",bodyImg: "images/body.png",snakeMap: snakeMap}"images/body.png");let snake = new Snake(obj);snake.render();snake.update(snakeFood);
</script>
</body>
</html>

CSS 代码

*{margin: 0;padding: 0;
}
html,body{width: 100%;height: 100%;
}
.map{width: 1000px;height: 800px;background: url("./../images/map.jpg");position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);position: relative;
}

JS 代码封装

// Snake.js
class Snake {constructor(obj){obj = obj || {};this.width = obj.width || 100;this.height = obj.height || 100;this.headImg = obj.headImg || "images/head.png";this.bodyImg = obj.bodyImg || "images/body.png";this.snakeMap = obj.snakeMap || {};this.bodies = [{x: 2, y: 1, type: 1},{x: 1, y: 1, type: 0},{x: 0, y: 1, type: 0},];// 3.1获取地图的宽高let style = getComputedStyle(this.snakeMap.oMap);let mapWidth = parseInt(style.width);let mapHeight = parseInt(style.height);// console.log(mapWidth, mapHeight);// 3.2计算水平方向和垂直方向可以放下多少个食物this.colNum = mapWidth / this.width;this.rowNum = mapHeight / this.height;// console.log(colNum, rowNum);document.body.onkeydown = (event) =>{// console.log(event.key);this.key = event.key;// console.log(this);}}move(){// 1.修改蛇身的位置for(let i = this.bodies.length - 1; i > 0; i--){this.bodies[i].x = this.bodies[i - 1].x;this.bodies[i].y = this.bodies[i - 1].y;this.bodies[i].type = 0;}// 2.修改蛇头的位置let head = this.bodies[0];switch (this.key) {case "a": // 左head.x = head.x - 1;break;case "d": // 右head.x = head.x + 1;break;case "w": // 上head.y = head.y - 1;break;case "s": // 下head.y = head.y + 1;break;default:head.x = head.x + 1;break;}}inspection(snakeFood){let head = this.bodies[0];// 3.判断蛇有没有超出地图if(head.x < 0 || head.y < 0 || head.x >= this.colNum || head.y > this.rowNum) {// 提示用户alert("挂了");// 关闭定时器clearInterval(this.timer);return false;}// 4.判断蛇有没有吃到食物if(head.x === snakeFood.x && head.y === snakeFood.y){// 删除当前食物snakeFood.remove();// 重新生成食物snakeFood.render();// 拿到最后一节蛇身体的位置let lastBody = this.bodies[this.bodies.length - 1];// 新建一节蛇的身体let newBody = {x: lastBody.x, y: lastBody.y, type: 0};// 根据当前移动的方向调整蛇身体的位置switch (this.key) {case "a": // 左newBody.x = newBody.x + 1;break;case "d": // 右newBody.x = newBody.x - 1;break;case "w": // 上newBody.y = newBody.y + 1;break;case "s": // 下newBody.y = newBody.y - 1;break;default:newBody.x = newBody.x - 1;break;}// 将新建的身体添加到数组中this.bodies.push(newBody);}return true;}update(snakeFood){this.timer = setInterval(()=>{// 1.让蛇移动起来this.move();// 2.检查边界和食物let flag = this.inspection(snakeFood);if(!flag){return;}// 3.重新绘制蛇this.render();}, 500);}render(){// 1.删除过去的蛇let snakes = document.querySelectorAll(".snake");for(let i = snakes.length - 1; i >= 0; i--){let oDiv = snakes[i];oDiv.parentNode.removeChild(oDiv);}// 2.重新绘制蛇for(let value of this.bodies){// 1.创建蛇的某一个组成部分let oDiv = document.createElement("div");// 2.设置某一个组成部分的样式oDiv.style.width = this.width + "px";oDiv.style.height = this.height + "px";oDiv.className = "snake";if(value.type === 1){oDiv.style.background = `url(${this.headImg})`;}else{oDiv.style.background = `url(${this.bodyImg})`;}// 3.设置某一个组成部分的位置oDiv.style.position = "absolute";oDiv.style.left = value.x * this.width + "px";oDiv.style.top = value.y * this.height + "px";// 4.将某一个组成部分添加到地图中this.snakeMap.oMap.appendChild(oDiv);}}
}

// SnakeFood.js
class SnakeFood {constructor(width, height, img, snakeMap){this.width = width;this.height = height;this.img = img;this.snakeMap = snakeMap;// 3.1获取地图的宽高let style = getComputedStyle(this.snakeMap.oMap);let mapWidth = parseInt(style.width);let mapHeight = parseInt(style.height);// console.log(mapWidth, mapHeight);// 3.2计算水平方向和垂直方向可以放下多少个食物this.colNum = mapWidth / this.width;this.rowNum = mapHeight / this.height;// console.log(colNum, rowNum);}render(){// 1.创建食物let oDiv = document.createElement("div");// 2.设置食物的样式oDiv.style.width = this.width + "px";oDiv.style.height = this.height + "px";oDiv.style.background = `url(${this.img})`;// 3.随机生成水平方向和垂直方向上的值let {x, y} = this.generateLoaction();this.x = x;this.y = y;oDiv.style.position = "absolute";oDiv.style.left = x * this.width + "px";oDiv.style.top = y * this.height + "px";// 4.将食物添加到地图中snakeMap.oMap.appendChild(oDiv);this.oFood = oDiv;}remove(){this.oFood.parentNode.removeChild(this.oFood);}generateLoaction(){let x = getRandomIntInclusive(0, this.colNum - 1); // 0, 9let y = getRandomIntInclusive(0, this.rowNum - 1); // 0, 7// console.log(x, y);return {x: x, y: y};}
}
function getRandomIntInclusive(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;
}

// SnakeMap.js
class SnakeMap {constructor(){// 1.创建divlet oDiv = document.createElement("div");// 2.添加类名oDiv.className = "map";// 3.添加到body中document.body.appendChild(oDiv);this.oMap = oDiv;}
}

最后码字不易，点赞，转发，收藏，评论，一键四连支持

HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）相关推荐

教你用十分钟编写一个贪吃蛇小游戏
贪吃蛇,大家应该都玩过.当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎.今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果: 好了,先介绍一个思路所有的游戏最主要 ...
基于HTML5+CSS+JS的响应式圣诞老人过悬崖小游戏
基于 Python 制作吃豆豆小游戏（文档和源码~）
游戏简介: 玩家通过 ↑↓←→ 键控制游戏的主角吃豆人吃掉藏在迷宫内的所有豆子,并且不能被鬼魂抓到. 若能顺利吃完迷宫内的所有豆子并且不被鬼魂抓到,则游戏胜利,否则游戏失败. 实现过程~: Step1 ...
c语言吃豆豆小游戏代码,高手帮我改下我的吃豆豆游戏吧
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 void LOST(){ flag=0; move=NO; clrscr(); getch(); clrscr(); false1 ...
html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏一.总结一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
10分钟出一个块的BCH，可以作为日常支付？
中本聪创建比特币的初衷是希望其成为全球支付的货币,作为继承中本聪衣钵的比特币现金更是在这方面不断的努力.比特币平均10分钟出一个块,交易确认的时间也是10分钟左右.10分钟的支付确认时间对于日常支付来 ...
mysql connection闪退重连_玩家排位巅峰赛开局闪退，重连失败，10分钟后一个提示让他懵了...
#游戏圈中的春节# 王者荣耀排位赛460是经常的事情,不过闪退还是比较少见的,玩家排位巅峰赛开局闪退,重新登录游戏之后,重连一直失败,10分钟后一个提示让他懵了. 460的情况大家都经历过,这是很多原 ...
pythonhelloworld项目,10分钟搭建一个小型网页(python django)(hello world！)
10分钟搭建一个小型网页(python django)(hello world!) 1.安装django pip install django 安装成功后,在Scripts目录下存在django-ad ...
10 分钟实现一个自己的服务器监控器
需求最近需要给自己的服务器添加监控器,目的是监控服务器的内存.CPU.磁盘占用率,资源占用率过高的话能给自己发个提醒,当前主流的平台一般会提供邮件.短息.甚至会提供微信提醒,不过这类提醒包含的噪音太 ...

HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）

HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）相关推荐

最新文章

热门文章