马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 千公子 于 2020-4-16 10:52 编辑
Index.html
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<link rel="stylesheet" href="game.css">
<title>贪吃蛇</title>
</head>
<body>
<p id="score">得分：<span id="score_number">0</span></p>
<table cellpadding="0" cellspacing="0" id="playground"></table>
<script src="game.js"></script>
</body>
</html>
game.css
#playground{
border-collapse: collapse;
margin: auto;
}
#playground td{
width: 15px;
height: 15px;
border: 1px solid gainsboro;
}
#score_number{
color: tomato;
font-size: larger;
}
.black{
background: black;
}
.white{
background: white;
}
.food{
background: greenyellow;
}
game.js
// 地图宽
var map_width = 30;
// 游戏定时器
var timer;
// 蛇对象
var snake;
function setClass(id, cn) {
$(id).removeClass();
$(id).addClass(cn);
}
// 产生食物
function createFood() {
let x, y;
let idName;
do {
x = Math.floor(Math.random() * map_width);
y = Math.floor(Math.random() * map_width);
idName = '#' + x + '_' + y;
} while ($(idName).hasClass('black'));
setClass(idName, 'food');
}
// 创建蛇对象
function Snake() {
// 初始长度3
this.snakeBody = [
[1, 3],
[1, 2],
[1, 1]
];
// 初始方向
this.direction = "right";
// 初始化小蛇
for (let i = 0; i < this.snakeBody.length; ++i) {
let x = this.snakeBody[i][0];
let y = this.snakeBody[i][1];
let idName = '#' + x + '_' + y;
$(idName).removeClass();
$(idName).addClass('black');
}
this.autoMove = function() {
function move() {
let x = snake.snakeBody[0][0];
let y = snake.snakeBody[0][1];
switch (snake.direction) {
case 'up':
x -= 1;
break;
case 'down':
x += 1;
break;
case 'left':
y -= 1;
break;
case 'right':
y += 1;
break;
}
let idName = "#" + x + "_" + y;
// 判断撞墙或者吃到自己身体
if (x < 0 || x >= map_width || y < 0 || y >= map_width || $(idName).hasClass('black')) {
alert("游戏结束");
clearInterval(timer);
return;
}
// 蛇身前移
snake.snakeBody.unshift([x, y]);
// 吃到食物
if ($(idName).hasClass('food')) {
$(idName).removeClass('food');
// 更新分数
let score = parseInt($("#score_number").text()) + 10;
$("#score_number").text(score);
// 0.5秒后出现新的食物
setTimeout(createFood, 0.5);
} else {
// 没吃到食物删除尾巴
let p = snake.snakeBody.pop();
let popIdName = '#' + p[0] + '_' + p[1];
setClass(popIdName, 'white');
}
// 新位置为蛇身
setClass(idName, 'black');
}
// 200ms移动一次
timer = setInterval(move, 200);
}
}
// 网页加载时执行
window.onload = function() {
// 创建地图
for (let i = 0; i < this.map_width; ++i) {
let tr = document.createElement("tr");
for (let j = 0; j < this.map_width; ++j) {
let td = document.createElement('td');
td.setAttribute("class", "white");
td.setAttribute('id', i + '_' + j);
tr.appendChild(td);
}
$("#playground").append(tr);
}
// 1秒后创造第一个食物
setTimeout(createFood, 1000);
// 创造蛇对象
snake = new Snake();
snake.autoMove();
// 全局按键事件
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37:
if (snake.direction != 'right') {
snake.direction = "left";
}
break;
case 39:
if (snake.direction != 'left') {
snake.direction = "right";
}
break;
case 38:
if (snake.direction != 'down') {
snake.direction = "up";
}
break;
case 40:
if (snake.direction != 'up') {
snake.direction = "down";
}
break;
case 32:
// 空格暂停
if (timer != null) {
clearInterval(timer);
timer = null;
} else {
snake.autoMove();
}
}
console.log("蛇(" + snake.snakeBody[0][0] + "," + snake.snakeBody[0][1] + ")的方向: " + snake.direction);
});
}
https://blog.csdn.net/qq_38203808/article/details/105528442
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-4-16 10:50:58
置顶卡
千斤顶
显身卡
楼主
发表于 2020-4-16 13:50:06
棒