原生js+canvas实现贪吃蛇效果
程序员文章站
2022-06-22 11:46:56
本文实例为大家分享了canvas实现贪吃蛇效果的具体代码，供大家参考，具体内容如下效果展示：源码展示：页面布局展示：worm.html...
本文实例为大家分享了canvas实现贪吃蛇效果的具体代码，供大家参考，具体内容如下
效果展示：
源码展示：
页面布局展示：worm.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
<style type="text/css">
canvas{
border: 1px solid black;
}
div{
width: 50px; height: 50px;
border: 1px solid black; cursor: pointer;
text-align: center; line-height: 50px;
}
</style>
<script type="text/javascript" src="node.js" ></script>
<script type="text/javascript" src="worm.js" ></script>
<script src="stage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function load () {
//创建一个舞台 调用print方法打印
stage=new stage();
//获取ctx
var mcanvas=document.getelementbyid("mcanvas");
ctx=mcanvas.getcontext('2d');
stage.print(ctx);
startprint();
}
function changedir(dir){
dir=dir;
}
var task;
var stage;
var ctx;
function startprint () {
task=window.setinterval(function () {
stage.worm.step();
stage.print(ctx);
}, speed);
}
function endprint () {
window.clearinterval(task);
}
</script>
</head>
<body onload="load()">
<canvas id="mcanvas" width="500" height="500">
</canvas>
<table>
<tr>
<td></td>
<td>
<div onclick="changedir(up)">up</div>
</td>
<td></td>
</tr>
<tr>
<td>
<div onclick="changedir(left)">left</div>
</td>
<td></td>
<td>
<div onclick="changedir(right)">right</div>
</td>
</tr>
<tr>
<td></td>
<td>
<div onclick="changedir(down)">down</div>
</td>
<td></td>
</tr>
</table>
</body>
</html>
节点类的js ：node.js
/* 节点类 */
function node (x, y) {
this.x=x;
this.y=y;
this.equals=function (i, j) {
return this.x==i && this.y==j;
};
}
舞台类js：stage.js
/** 舞台类 */
function stage () {
this.width=50;
this.height=50;
this.worm=new worm();
/* 在canvas中绘制舞台的内容 */
this.print=function (ctx) {
for(i=0; i<this.width; i++){
for(j=0; j<this.height; j++){
//如果当前节点是蛇身子的一部分
//那么换一种颜色绘制
if(this.worm.contains(i,j)){
ctx.fillstyle="#ab55ff";
ctx.fillrect(i*10, j*10, 10, 10);
}else if(this.worm.food.equals(i, j)){
ctx.fillstyle="#000000";
ctx.fillrect(i*10, j*10, 10, 10);
}else{
ctx.fillstyle="#dddddd";
ctx.fillrect(i*10, j*10, 10, 10);
}
}
}
//在舞台的左上角绘制分数
ctx.font="30px arial";
ctx.fillstyle="#880000";
ctx.filltext("score:"+score, 10,40);
};
}
蛇类js：worm.js
/** 蛇类 */
var up=0;
var down=1;
var left=2;
var right=3;
var dir=up;
var score=0;
var speed=300;
//蛇类初始化的形状
function worm () {
this.nodes=[];
this.nodes[this.nodes.length]=new node(20,10);
this.nodes[this.nodes.length]=new node(20,11);
this.nodes[this.nodes.length]=new node(20,12);
this.nodes[this.nodes.length]=new node(20,13);
this.nodes[this.nodes.length]=new node(20,14);
this.nodes[this.nodes.length]=new node(20,15);
this.nodes[this.nodes.length]=new node(21,15);
this.nodes[this.nodes.length]=new node(22,15);
this.nodes[this.nodes.length]=new node(23,15);
this.nodes[this.nodes.length]=new node(24,15);
this.nodes[this.nodes.length]=new node(24,16);
this.nodes[this.nodes.length]=new node(24,17);
this.nodes[this.nodes.length]=new node(24,18);
this.nodes[this.nodes.length]=new node(24,19);
/* 蛇会走一步 */
this.step=function () {
//计算出头结点 把头节点添加到nodes数组中
var oldhead=this.nodes[0];
var newhead;
switch (dir){
case up:
if(oldhead.y-1<0){
newhead=new node(oldhead.x, 49);
}else{
newhead=new node(oldhead.x, oldhead.y-1);
}
break;
case down:
if(oldhead.y+1>49){
newhead=new node(oldhead.x, 0);
}else{
newhead=new node(oldhead.x, oldhead.y+1);
}
break;
case left:
if(oldhead.x-1<0){
newhead=new node(49, oldhead.y);
}else{
newhead=new node(oldhead.x-1, oldhead.y);
}
break;
case right:
if(oldhead.x+1>49){
newhead=new node(0, oldhead.y);
}else{
newhead=new node(oldhead.x+1, oldhead.y);
}
break;
}
this.nodes.unshift(newhead);
if(!this.food.equals(newhead.x, newhead.y)){
//把尾节点删掉 (在没有吃到食物的时候)
this.nodes.pop();
}else{
//吃到了食物 重新生成食物
this.food=this.randomfood();
score+=10;
speed-=50;
endprint();
startprint();
}
};
/* 判断i，j节点是否是当前蛇身子的一部分 */
this.contains=function (i, j) {
for(k=0; k<this.nodes.length; k++){
var node=this.nodes[k];
if(node.x==i && node.y==j){
return true;
}
}
return false;
};
//声明生成食物的方法
this.randomfood=function () {
var x;
var y;
do{
x=math.floor(math.random()*50);
y=math.floor(math.random()*50);
}while(this.contains(x, y));
return new node(x, y);
};
//声明食物
this.food=this.randomfood();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： js实现登陆与注册