这里贪吃蛇游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js），
蛇行为类（Snake.js），食物类(Food.js)，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行)
贪吃蛇：链接：https://pan.baidu.com/s/1_gfxQOWZ5ktZXLARzcn6fA?
提取码：672a
其他游戏源码：俄罗斯方块https://blog.csdn.net/weixin_45851686/article/details/120242677
https://blog.csdn.net/weixin_45851686/article/details/120242677
游戏页面：
目录
1.html&css页面搭建：
index.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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#app {
position: relative;
}
table {
border-collapse: collapse;
margin: auto;
}
td {
width: 25px;
height: 25px;
border: 1px solid #aaa;
}
.fen {
position: relative;
width: 300px;
height: 100px;
margin: 0 auto 10px;
background-color: #ccc;
font-size: 14px;
}
p {
display: block;
width: 100%;
line-height: 35px;
text-align: center;
}
.fen span {
display: block;
float: left;
margin-left: 15px;
line-height: 25px;
}
.fen span:nth-of-type(3) {
margin-left: 15px;
}
#btn {
display: block;
margin: 12px auto;
clear: both;
}
</style>
</head>
<body>
<div class="fen">
<p>
键盘控制方向：
↑上
↓下
←左
→右
</p>
<span>分数：</span>
<span id="score">0</span>
<span>请选择游戏难度：</span>
<select name="" id="hard">请选择游戏难度
<option value="1">简单</option>
<option value="2">一般</option>
<option value="3">困难</option>
</select>
<button id="btn">开始游戏</button>
</div>
<div id="app">
</div>
</body>
</html>
<script src="./js/Game.js"></script>
<script src="./js/Snake.js"></script>
<script src="js/Food.js"></script>
<script>
var game = new Game();
</script>2.游戏类 Game.js：
实现功能：绘出游戏表格，控制蛇运动方向，游戏分数，设置游戏难度：
function Game() {
/*创建行列，难度，游戏页面初始化*/
this.row = 20;//行
this.col = 20;//列
this.hard = document.getElementById("hard");//获取难度选项卡
this.score = parseInt(document.getElementById("score").innerHTML);//获取分数
this.init();//初始化
this.snake = new Snake();
this.food = new Food(this);
this.btn = document.getElementById("btn");//获取开始按钮
this.start();//开始游戏
this.bindEvent();//绑定键盘事件
}
//初始化地图，创建表格，生成20行，20列
Game.prototype.init = function () {
this.table = document.createElement("table");
var tr, td;
for (var i = 0; i < this.row; i++) {
tr = document.createElement("tr");
for (var j = 0; j < this.col; j++) {
td = document.createElement("td");
tr.appendChild(td);
}
this.table.appendChild(tr);
}
document.getElementById("app").appendChild(this.table);
}
//设置颜色
Game.prototype.setColor = function (row, col, color) {
this.table.getElementsByTagName("tr")[row].getElementsByTagName('td')[col].style.backgroundColor = color;
}
//清除画布
Game.prototype.clean = function () {
for (var i = 0; i < this.row; i++) {
for (var j = 0; j < this.col; j++) {
this.table.getElementsByTagName("tr")[i].getElementsByTagName('td')[j].style.backgroundColor = "white";
this.table.getElementsByTagName("tr")[i].getElementsByTagName('td')[j].innerHTML = "";
}
}
}
//绑定事件，控制蛇运动方向
Game.prototype.bindEvent = function () {
var self = this;
document.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 37:
if (self.snake.dir != "R") {
self.snake.dir = "L";
}
break;
case 38:
if (self.snake.dir != "D") {
self.snake.dir = "U";
}
break;
case 39:
if (self.snake.dir != "L") {
self.snake.dir = "R";
}
break;
case 40:
if (self.snake.dir != "U") {
self.snake.dir = "D";
}
break;
}
})
}
//设置食物
Game.prototype.setHtml = function (row, col, html) {
this.table.getElementsByTagName("tr")[row].getElementsByTagName('td')[col].innerHTML = html;
}
//开始游戏
Game.prototype.start = function () {
//定时器每秒更新画面，按帧运动
this.btn.onclick = function () {
this.speed = 600 - game.hard.value * 150;//根据难度设置蛇运动速度
console.log("dfyhu");
game.timer = setInterval(function () {
// 每秒开始清屏
game.clean();
//更新蛇状态
game.snake.upDate();
//把蛇渲染到表格中
game.snake.render();
//渲染食物到页面
game.food.render();
}, this.speed);
}
}
3.蛇类 Snake.js
功能实现:初始化蛇的身体，颜色等，蛇运动状态的判断，判断死亡条件，吃到食物判断，以及根据不同游戏难度蛇的加分：
function Snake() {
/*初始化蛇的身体*/
this.sbody = [
{ "row": 3, "col": 5 },
{ "row": 3, "col": 4 },
{ "row": 3, "col": 3 },
{ "row": 3, "col": 2 }
];
this.dir = "R";
}
//更新蛇的状态(即蛇的运动)，蛇吃食物，蛇的死亡
Snake.prototype.upDate = function () {
// console.log(game);
//添加头,根据运动方向
switch (this.dir) {
case "R":
this.sbody.unshift({ "row": this.sbody[0].row, "col": this.sbody[0].col + 1 });
break;
case "L":
this.sbody.unshift({ "row": this.sbody[0].row, "col": this.sbody[0].col - 1 });
break;
case "U":
this.sbody.unshift({ "row": this.sbody[0].row - 1, "col": this.sbody[0].col });
break;
case "D":
this.sbody.unshift({ "row": this.sbody[0].row + 1, "col": this.sbody[0].col });
break;
}
// 撞到墙
if(this.sbody[0].col>game.col-1||this.sbody[0].row>game.row-1||this.sbody[0].col<0||this.sbody[0].row<0){
clearInterval(game.timer);
this.sbody.shift();
alert("撞到墙了，游戏结束，您的得分是"+game.score);
}
// 撞到自己
for(var i=1;i<this.sbody.length;i++){
if(this.sbody[0].row==this.sbody[i].row&&this.sbody[0].col==this.sbody[i].col){
alert("撞到自己了，游戏结束,您的得分是"+game.score);
clearInterval(game.timer);
this.sbody.shift();
}
}
//吃到食物
if(this.sbody[0].row==game.food.row&&this.sbody[0].col==game.food.col){
game.food=new Food(game);//新增食物
//根据游戏难度加分
if(game.hard.value==1){
game.score+=1;//简单
}
else if(game.hard.value==2){
game.score+=3;//一般
}
else if(game.hard.value==3){
game.score+=5;//困难
}
document.getElementById("score").innerHTML=game.score;//获得的分数
}else{
// 删除尾
this.sbody.pop();
}
}
//渲染蛇头部和身体颜色
Snake.prototype.render = function () {
// console.log(game);
game.setColor(this.sbody[0].row, this.sbody[0].col, "#cc0");
for (var i = 1; i < this.sbody.length; i++) {
game.setColor(this.sbody[i].row, this.sbody[i].col, "#996");
}
}4.食物类 food.js
实现功能:食物的随机产生，食物的更新等
function Food(para){
var self=this;
/*随机生成食物*/
do{
this.row=parseInt(Math.random()*para.row);
this.col=parseInt(Math.random()*para.col);
console.log(this.row,this.col);
}while((function(){
//判断生成的食物是否与身体重合
for(var i=0;i<para.snake.sbody.length;i++){
if(para.snake.sbody[i].row==self.row&¶.snake.sbody[i].col==self.col){
return true;//如果重合返回true，重新执行do语句
}
}
return false;
})());
}
//设置事务出现的行列和内容🍎
Food.prototype.render=function(){
game.setHtml(this.row,this.col,"🍎")
}