我们一起写个Web贪吃蛇小游戏吧（一） | 新手向 ⛵
【摘要】 这只是大学生博主记录完成Web大作业的全过程。欢迎各位指点，谢谢!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake</title></h...
这只是大学生博主记录完成Web大作业的全过程。欢迎各位指点，谢谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
</head>
<body>
<button onclick="gamaStart()">Start</button>
<h1 id="score_id">0</h1>
<canvas width="400" height="400" id="canvas_id"></canvas>
</body>
</html>
第一步 页面主干
首先写一个开始游戏的按钮：
<button onclick="gamaStart()">Start</button>
当点击按钮时，开始游戏。
然后因为我希望分数能够显示出来，于是用了h1标签显示分数。
然后新建一个400*400像素的画布。
第二步 设置背景
var gameInterval
function gamaStart() {
gameInterval = setInterval(gameRoutine, 1000)//每1000毫秒，执行一次
}
function gameRoutine(){
updateCanvas() //更新画布
}
function updateCanvas(){
var canvas = document.getElementById('canvas_id') //取画布
var context = canvas.getContext('2d') //取得画布的context
context.fillStyle = 'black' //用黑色填满
context.fillRect(0,0,canvas.width,canvas.height) //填充的范围
}
执行开始游戏函数是先取出画布，画布用黑色填充。
然后为画布设置每1000毫秒也就是1秒更新一次。
下面开始进入游戏的主逻辑
第三步 画蛇
var BLOCK_SIZE = 20 //每格是20个像素
var BLOCK_COUNT = 20 //20个格子
var gameInterval
var snack
function gamaStart() {
snack ={
body: [
{ x:BLOCK_COUNT/2 , y:BLOCK_COUNT/2 }
],
size: 1,
direction:{ x:0 , y:-1}
}
gameInterval = setInterval(gameRoutine, 1000)//每1000毫秒，执行一次
}
}
var BLOCK_SIZE = 20 代表每格是20个像素
var BLOCK_COUNT = 20 代表总共有20个格子。
snack ={
body: [
{ x:BLOCK_COUNT/2 , y:BLOCK_COUNT/2 }
],
size: 1,
direction:{ x:0 , y:-1}
}
其中body代表身体区块的每一个坐标，size代表长度，direction代表初始方向向上。
function gameRoutine(){
moveSnack() //蛇移动
updateCanvas() //更新画布
}
function moveSnack(){
var newBlock = {
x: snack.body[0].x + snack.direction.x, //新区块 x坐标
y: snack.body[0].y + snack.direction.y //新区块 y坐标
}
snack.body.unshift(newBlock) //加在数组最前面
while(snack.body.length > snack.size){
snack.body.pop() //蛇移动后 尾巴断掉
}
}
function updateCanvas(){
var canvas = document.getElementById('canvas_id') //取画布
var context = canvas.getContext('2d') //取得画布的context
context.fillStyle = 'black' //用黑色填满
context.fillRect(0,0,canvas.width,canvas.height) //填充的范围
//为每一个格子填充颜色
for(var i=0;i<snack.body.length;i++){
context.fillRect(
snack.body[i].x * BLOCK_SIZE,
snack.body[i].y * BLOCK_SIZE,
BLOCK_SIZE,
BLOCK_SIZE
)
}
}
编写一个moveSnack函数，用于给蛇移动，将头添加，将蛇尾巴去掉，然后更新画布，蛇就在移动了。
updateCanvas()里面用了一个for循环画蛇。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）