您的位置：首页 > Web前端 > JavaScript

用JavaScript实现贪吃蛇游戏

2016-06-10 22:45 447 查看

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();
}

}

};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript canvas 游戏

相关文章推荐

新的分享

章节导航