用JavaScript实现贪吃蛇游戏

最新推荐文章于 2024-05-02 14:46:08 发布

lizhihong92

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量974

点赞数 2

分类专栏： javascript 文章标签： javascript canvas 游戏

本文链接：https://blog.csdn.net/lizhihong92/article/details/51629103

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先在index.html构建一个canvas画布，长宽设为300px

<body>
<div id="container">
<canvas width="300px" height="300px" id="canvas"></canvas>
<div>
已得分：
<input type="text" id="score" placeholder="0">
</div>
</div>
<div style="text-align:center;">
<p>贪吃蛇小游戏</p>
</br>
<p>作者:<a target="_blank"></a></p>
</div>
<div class="btn">
<input type="button" id="btn" value="开始" οnclick="snake()"/>

2.链接到层叠样式表snake.css上

*{
margin:0;
padding: 0;
}
#container{
width:300px;
margin:50px auto;
}
#canvas{
background: #eee;
}
.btn{
position:absolute;
left:900px;
top:200px;
}

3.编写JavaScript脚本代码

var canvas = document.getElementById("canvas");

//使用ID寻找canvas元素
var ctx = canvas.getContext('2d');

//通过canvas元素的getContext方法来获取上下文（Context)，即创建Context对象，以获取允许进行绘制的“2d"环境
ctx.fillStyle = "#0f0";

//使用fillStyle对canvas所绘制的图形填充颜色
ctx.strokeStyle = "#f00";

//使用strokeStyle对canvas所绘制图形的外框设置颜色

//注意：生成的食物不要在蛇身上
go: function() {
var len = this.options.array.length;
var keyCode = this.options.keyCode;
if(keyList[keyCode] && this.options.forward[0] != keyList[keyCode][0] && this.options.forward[1] != keyList[keyCode][1])
this.options.forward = keyList[keyCode];
for(var i = len - 1; i > 0; i--) {
this.options.array[i][0] = this.options.array[i-1][0];
this.options.array[i][1] = this.options.array[i-1][1];
}

this.options.array[0][0] += this.options.forward[0];
this.options.array[0][1] += this.options.forward[1];
this.gameOver(); //检测有没有碰撞
this.eatFood();
},
drawDot: function(pos) {
ctx.fillRect(pos[0]*10, pos[1]*10, this.options.width, this.options.width);
ctx.strokeRect(pos[0]*10, pos[1]*10, this.options.width, this.options.width);
},

//绘制小方块
gameOver: function() {
var len = this.options.array.length;
if(this.options.array[0][0] < 0 || this.options.array[0][1] < 0 || this.options.array[0][0] >= this.options.canvasSize / 10 || this.options.array[0][1] >= this.options.canvasSize / 10)
{
this.options.gameOver = true;
return;
}
for(var i = len - 1; i > 0; i--) {
if(this.options.array[0][0] == this.options.array[i][0] && this.options.array[0][1] == this.options.array[i][1])
this.options.gameOver = true;
}
},
eatFood: function() {
var len = this.options.array.length;
var last = [this.options.array[len-1][0], this.options.array[len-1][1]];
if(this.options.food[0] == this.options.array[0][0] && this.options.food[1] == this.options.array[0][1])
{
this.options.array.push(last);

this.options.score += 10;
scoreInput.value = this.options.score;

this.createFood();
}

}

};