01-使用Javascript和Canvas写一个贪吃蛇
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了01-使用Javascript和Canvas写一个贪吃蛇，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6378字，纯文字阅读大概需要10分钟。
内容图文
2021.2.10 Canvas+js实现贪吃蛇
贪吃蛇
完成贪吃蛇主要有如下几件事情：
- 利用canvas创建画布，即蛇和食物的活动范围
- 创建蛇
- 画出蛇
- 蛇可以自己动起来 setInterval
- 蛇可以根据键盘控制方向移动 键盘监听&改变蛇的坐标
- 蛇吃到食物会增长 蛇要更新
- 蛇碰到自己会死
- 蛇从边界出去可以从另一边进来
- 创建食物
- 在随机位置生成食物
- 画出食物
完成这几件事情，就完成了贪吃蛇。
教程参考b站：前端酱的日常
目前版本有以下问题：
- 起始蛇只有一节，应该有一节蛇身，一节蛇头
- 当蛇吃掉一个食物只有两节长度大小的时候，蛇吃自己的尾巴不会死
- 食物出现的位置可能在蛇身位置没有排除
- 当蛇走到边界比如向右快到边界的时候立刻向上或者向下蛇会消失可以在边界游走
- 当蛇吃掉自己身子的时候死了蛇应该重置回到起始位置并且暂停等待下一轮开始
- 只有点击start按钮蛇才会开始动，应该按方向键向右或者向下也可以开始游戏
- 当蛇身长度>=2时，比如向右走时突然向左，相当于蛇吃到自己它会死，而应该直接禁用或者按左没有反应
- 蛇的控制键只有上下左右，应该按w、a、s、d也可以
- 蛇死掉后有弹窗，弹窗上除了游戏结束，还应该有分数
- 贪吃蛇右边栏button底下可以有游戏分数排行榜。
- 可以有随机时间随机地点出现的特殊食物，吃到后有不同的奖励。
目前代码有点不理解的地方在于函数传参传的是对象，在解构赋值时有点不理解。
然后今天，看电脑脖子肩膀很酸痛很累，要注意休息。
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>贪吃蛇</title>
<link rel="stylesheet" href="./style.css">
<body>
<h2>Snake Game</h2>
<div class="container">
<canvas class="canvas" width="400" height="400"></canvas>
<div class="operations">
<div class="score">
Score:<span id="score">0</span>
</div>
<button id="start">Start</button>
<button id="pause">Pause</button>
</div>
</div>
<script src="./Target.js"></script>
<script src="./snake.js"></script>
<script src="./index.js"></script>
</body>
</html>
style.css
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
display: flex;
align-items: flex-start;
}
.canvas {
background-color: #3e3e3e;
box-shadow: 0 1px 10px #3e3e3e;
margin-right: 10px;
}
.operations {
display: flex;
flex-direction: column;
width: 85px;
}
.score {
margin-bottom: 15px;
}
button {
margin-bottom: 10px;
height: 25px;
background-color: #55c4d0;
border: none;
box-shadow: 0 1px 5px #55c4d0;
outline: none;
cursor: pointer;
color: #fff;
}
button:active {
transform: scale(0.9);
background-color: #04def7;
}
index.js
const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
//设置小方块大小
const size = 10;
const rows = canvas.height / size;
const columns = canvas.width / size;
//点击start按钮的时候小蛇开始移动
//获取start按钮
const startBtn = document.getElementById('start')
const pauseBtn = document.getElementById('pause')
//让蛇拿到canvas画笔
let snake = new Snake(size, { canvas, ctx })
let target = new Target(size, { canvas, ctx, rows, columns })
let timer = null
function init() {
target.genRandomLocation()
target.draw()
snake.draw()
}
init();
//写一个让小蛇开始动的start方法
function start() {
//用定时器让他动起来
timer = setInterval(() => {
//移动之前要清除一下canvas画布
ctx.clearRect(0, 0, canvas.width, canvas.height)
target.draw();
snake.update();
snake.draw()
//如果蛇吃掉食物
if (snake.eatTarget(target)) {
target.genRandomLocation();
}
//给蛇添加结束条件
snake.checkCollision()
//设置分数
document.getElementById('score').innerText = snake.targetNum * 10;
}, 100);
}
//给start按钮添加一个事件监听函数
startBtn.addEventListener('click', () => {
start()
})
//暂停就是取消定时器
pauseBtn.addEventListener('click', () => {
clearInterval(timer)
})
//给window添加事件监听函数，处理keydown
window.addEventListener('keydown', (event) => {
//console.log(event.key);
const direction = event.key.replace('Arrow', '');
console.log('direction:', direction);
snake.changeDirection(direction);
})
snake.js
function Snake(size = 10, canvasOptions) {
this.x = 0;
this.y = 0;
this.size = size;
this.xSpeed = size * 1;
this.ySpeed = 0;
//吃的食物总数
this.targetNum = 0;
//尾巴坐标值
this.tails = [];
this.canvasOptions = canvasOptions;
}
//蛇的draw()方法，画一条蛇
Snake.prototype.draw = function() {
const { ctx } = this.canvasOptions;
/* console.log(this.canvasOptions)
console.log(ctx); */
//console.log(ctx);
ctx.fillStyle = '#fff'
for (let i = 0; i < this.tails.length; i++) {
const { x, y } = this.tails[i];
ctx.fillRect(x, y, this.size, this.size)
}
ctx.fillRect(this.x, this.y, this.size, this.size)
}
//蛇的更新函数
Snake.prototype.update = function() {
for (let i = 0; i < this.tails.length - 1; i++) {
//console.log(this.tails.length);
this.tails[i] = this.tails[i + 1];
}
if (this.targetNum > 0) {
this.tails[this.targetNum - 1] = { x: this.x, y: this.y }
}
this.x += this.xSpeed;
this.y += this.ySpeed;
console.log(this.targetNum);
//判断边界
const { width, height } = this.canvasOptions.canvas
if (this.x > width) {
this.x = 0
}
if (this.y > height) {
this.y = 0
}
if (this.x < 0) {
this.x = width
}
if (this.y < 0) {
this.y = height
}
}
Snake.prototype.changeDirection = function(direction) {
switch (direction) {
//根据方向来修改横坐标与纵坐标的速度
case 'Up':
this.xSpeed = 0;
this.ySpeed = -size * 1;
break;
case 'Left':
this.xSpeed = -size * 1;
this.ySpeed = 0;
break;
case 'Down':
this.xSpeed = 0;
this.ySpeed = size * 1;
break;
case 'Right':
this.xSpeed = size * 1;
this.ySpeed = 0;
break;
/* case 'w':
this.xSpeed = 0;
this.ySpeed = -size * 1; */
}
}
Snake.prototype.eatTarget = function(target) {
if (this.x === target.x && this.y === target.y) {
this.targetNum++;
console.log(this.targetNum);
return true;
}
return false;
}
//蛇吃到自己就结束
Snake.prototype.checkCollision = function() {
for (let i = 0; i < this.tails.length; i++) {
if (this.x === this.tails[i].x && this.y === this.tails[i].y) {
this.targetNum = 0;
this.tails = []
alert('u are dead')
}
}
}
Target.js
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
//食物随机颜色
function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)]
}
//蛇要吃的东西
function Target(size = 10, canvasOptions) {
this.x;
this.y;
this.size = size;
this.canvasOptions = canvasOptions;
}
//生成随机位置
Target.prototype.genRandomLocation = function() {
const { rows, columns } = this.canvasOptions;
this.x = (Math.floor(Math.random() * columns - 1) + 1) * this.size;
this.y = (Math.floor(Math.random() * rows - 1) + 1) * this.size;
this.color = getRandomColor();
}
//画食物
Target.prototype.draw = function() {
const { ctx } = this.canvasOptions;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size)
}
内容总结
以上是互联网集市为您收集整理的01-使用Javascript和Canvas写一个贪吃蛇全部内容，希望文章能够帮你解决01-使用Javascript和Canvas写一个贪吃蛇所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】