1.
先在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="开始" onclick="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所绘制图形的外框设置颜色
var snake = {
options:
{canvasSize: 300,
length: 5, //贪食蛇初始块数
speed: 1, //每次移动10个像素
width: 10, //每块是10*10的正方形
array: [[4,0],[3,0],[2,0],[1,0],[0,0]], //蛇分块
keyCode: 39, //初始默认蛇往右移动
forward: [], //蛇的前进方向
food: [],
gameOver: false,
score: 0,
},
draw: function() {
ctx.clearRect(0, 0, this.options.canvasSize, this.options.canvasSize);
var len = this.options.array.length;
for(var i = len - 1; i >= 0; i--){
this.drawDot(this.options.array[i]);
}
this.drawDot(this.options.food);
},
//调用drawDot函数绘制蛇的身体
createFood: function() {
var Rand1 = Math.random();
var Rand2 = Math.random();
var num = (this.options.canvasSize - this.options.width) / 10;
var left = Math.floor(num*Rand1);
var top = Math.floor(num*Rand2);
for(var i = this.options.array.length - 1; i >=0; i--) {
if(left == this.options.array[i][0] && top == this.options.array[i][1])
{
createFood();
return;
}
}
this.options.food = [left, top];
},
//注意：生成的食物不要在蛇身上
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();
}
}
};