前言

周末大热天窝在家里无聊，想温习一下前端开发，所以用javascript + css + html开发了个贪吃蛇小有效，分享给大家，一起进步。

游戏功能

绿色方块的食物会每隔3秒出现在一个长方形的地图框里面，蛇是一个由红色的方块（代表头）和两个黄色的小方块（代表身体）组成，如果蛇在移动的过程中撞到食物，就代表把食物吃了，身体长长一块，分数也得一分。蛇撞到地图的边框，游戏结束。
游戏有个开始按钮，点击开始，然后按钮变灰色，等游戏结束后重新使能。

游戏设计

游戏设计有两个对象，一个蛇对象，有绘制方法和移动方法；另一个对象是食物对象，有删除方法和绘制方法。
游戏一启动，5个食物随机出现在地图上，小蛇出现在开始位置，玩家可以通过方向键改变蛇游动的方向，食物每隔3秒消失，然后再次随机出现。

游戏主页代码

<!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>Snake Food Game.</title><style>.map {height: 600px;width: 800px;position: relative;background-color: whitesmoke;border-width: 2px;border: 2px solid black;}.title {vertical-align: middle;line-height: 100%;margin: 20px 0px;}.title h2 {display: inline;}.title span {font-size: 1.5em;}#start {position:absolute;top: 20px;left: 730px;width: 80px;}</style>
</head>
<body><div class="title"><h2>得分:</h2><span>0</span><input type="button" value="Sart" id="start"></div><div class="map"></div><script src="snake.js"></script>
</body>
</html>

游戏中的js代码（snake.js)

function Food(width, height, color, x, y) {this.width = width || 20;this.height = height || 20;this.color = color || "green";this.x = x || 0;this.y = y || 0;this.food = document.createElement("div");this.food.style.position = "absolute"}Food.prototype.draw = function (map) {this.x = parseInt( Math.random() * (map.scrollWidth / this.width) );this.y = parseInt( Math.random() * (map.scrollHeight / this.height) );this.food.style.width = this.width + "px";this.food.style.height = this.height + "px";this.food.style.backgroundColor = this.color;this.food.style.left = (this.x * this.width) + "px";this.food.style.top = (this.y * this.height) + "px";map.appendChild(this.food)};Food.prototype.remove = function (map) {this.food.remove();
}function Snake(x, y, direction) {this.width = 20;this.height = 20;this.headx = x || 3;this.heady = y || 1;this.direction = direction || "right";this.body = [{x:3,y:1,color:"red"},{x:2,y:1,color:"yellow"},{x:1,y:1,color:"yellow"}];this.body.forEach(part => {var bodypart_div = document.createElement("div")bodypart_div.style.position = "absolute";part.bodydiv = bodypart_div;});
}Snake.prototype.draw = function ( map ) {this.body.forEach(part => {var bodypart_div = part.bodydivbodypart_div.style.width = this.width + "px";bodypart_div.style.height = this.height + "px";bodypart_div.style.backgroundColor = part.color;bodypart_div.style.left = part.x * this.width + "px";bodypart_div.style.top = part.y * this.height + "px";bodypart_div.style.position = "absolute";map.appendChild(bodypart_div);});
};Snake.prototype.remove = function () {this.body.forEach(part => {if( part.bodydiv ) {part.bodydiv.remove();}});};Snake.prototype.move = function ( map, interval, foods, scorediv, btn) {var that = this;var foodtimer = setInterval(function () {foods.forEach( food => {food.draw(map);});}, 3000);var fun = function () {that.remove(map);var index = that.body.length - 1;while (index > 0) {that.body[index].x = that.body[index-1].x;that.body[index].y = that.body[index-1].y;index--;}switch(that.direction) {case "right":that.headx ++;break;case "left":that.headx --;break;case "top":that.heady --;break;case "bottom":that.heady ++;break;default:console.log(that.direction);}if (that.headx >= map.scrollWidth / that.width ||that.heady >= map.scrollHeight / that.height ||that.headx < 0 ||that.heady < 0 ) {clearInterval(foodtimer);clearInterval(timerid);that.remove();foods.forEach(food => {food.remove();});btn.removeAttribute("disabled");scorediv.textContent = "0";alert("Game over!");} else {for( var i=0; i < foods.length; i++) {if (foods[i].x == that.headx && foods[i].y == that.heady) {var obj = {color:"green"};obj.x = that.body[that.body.length - 1].x;obj.y = that.body[that.body.length - 1].y;var bodypart_div = document.createElement("div")bodypart_div.style.position = "absolute";obj.bodydiv = bodypart_div;that.body.push(obj);scorediv.textContent = `${that.body.length - 3}`;foods[i].draw(map)break;}}that.body[0].x = that.headx;that.body[0].y = that.heady;that.draw(map);}};var timerid = setInterval(fun, interval);
};(function () {var startbtn = document.querySelector("#start");startbtn.addEventListener('click', (event) => {var foodcount = 5var snake = new Snake();var foods = new Array();var scorediv = document.querySelector(".title span");var map = document.getElementsByClassName("map")[0];startbtn.setAttribute("disabled", true);for(var i=0; i < foodcount; i++) {foods.push(new Food());}document.addEventListener("keydown",function (evt) {switch (evt.key) {case "ArrowUp":snake.direction = "top";break;case "ArrowDown":snake.direction = "bottom";break;case "ArrowLeft":snake.direction = "left";break;case "ArrowRight":snake.direction = "right";break;}});foods.forEach( food => {food.draw(map);});snake.move(map, 200, foods, scorediv, startbtn);});} ());

游戏运行界面

用前端技术实现贪吃蛇的小游戏相关推荐

贪食蛇php,贪吃蛇网页小游戏的代码
贪吃蛇网页小游戏的代码 ::selection { color:#FFFFFF; background:transparent; } ::-moz-selection { color:#FFFFFF; ...
前端技术搭建贪吃蛇小游戏（内含源码）
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 写在前面上周我们实通过前端基础实现了井字游戏,今 ...
在家用c++实现贪吃蛇——c++小游戏
伪代码: 地图为二位数组 int main(){ 死循环刷新地图生成水果获取键盘移动头部判定死亡.吃到水果 if(没有吃到水果) {移动尾部 } 等待指定秒数清屏 } 首先,我们因该可以把 ...
隐藏窗口 java swing_Java简单实现贪吃蛇经典小游戏（附源代码）
在我们学习java的时候,为了提高我们的兴趣,我们经常会使用所学到的知识去做一些小游戏,这篇blog就介绍了一个经典而且好理解的小游戏-贪吃蛇. 一.使用知识 Jframe GUI 双向链表线程二 ...
贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作
贪吃蛇是以前我们经常在手机里玩的一个小游戏,现在要是把它搬到网页上也会让人更回味.这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏.在游戏中你可以使用键盘的上下左右来控制蛇的运动方向.现在要列出的是 ...
最终幻想游戏java_Java简单实现贪吃蛇经典小游戏（附源代码）
在我们学习java的时候,为了提高我们的兴趣,我们经常会使用所学到的知识去做一些小游戏,这篇blog就介绍了一个经典而且好理解的小游戏-贪吃蛇. 一.使用知识Jframe GUI 双向链表线程二. ...
100行实现《贪吃蛇》小游戏详解（Qt）
目录游戏说明游戏效果展示游戏代码详解关键数据结构初始化游戏界面游戏部分提示部分蛇逻辑小蛇的初始化边界判断蛇吃食物判断随机生成食物是否撞到自己小蛇的移动游戏主体逻辑定时 ...
javaswing 贪吃蛇双人小游戏
游戏截图代码 Java14写的哦低版本会报错文件列表 package Sys;import javax.swing.*; import java.awt.*; import java.awt.ev ...
html5小游戏 typescript,使用TypeScript和Canvas编写移动端贪吃蛇大作战游戏
基本介绍一款移动端贪吃蛇大作战游戏.(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项目结构.如果你有好 ...

用前端技术实现贪吃蛇的小游戏