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

#学习笔记#(19)H5画布橡皮擦游戏-JS

2015-12-15 21:08 519 查看

原来是想模仿贪吃蛇......

然而，只做出了一个小黑点橡皮擦。。。

之后再完善吧

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇H5</title>
</head>
<body>
<canvas width="400px" height="400px" id="mycanvas" style="border:1px solid gray;"></canvas>
<script>
var c=document.getElementById("mycanvas");
var cxt=c.getContext("2d");
var x=y=8;
var size=8;
var size=8;
var time=80;
var derection;//蛇头朝向-键盘上下左右键
var fposx=200;//食物坐标
var fposy=200;
cxt.fillStyle="black";
cxt.fillRect(x,y,size,size);
window.setInterval(myf,time);//让蛇按照一定速度time移动
window.setInterval(food,10000);//每隔10s产生新的食物
cxt.fillRect(200,200,8,8);
document.onkeydown=function(e){//改变方向
switch(e.keyCode){
case 37:derection=1;break;//键盘左键
case 38:derection=2;break;//键盘上键
case 39:derection=3;break;//键盘右键
case 40:derection=4;break;//键盘下键
}
}
function myf(){
cxt.clearRect(x,y,size,size);//清除尾巴
switch(derection){
case 1:x-=8;break;//获取鼠标左键，并且蛇头向左
case 2:y-=8;break;//上
case 3:x+=8;break;//右
case 4:y+=8;break;//下
}
cxt.fillRect(x,y,size,size);//蛇头前进
if(fposx==parseInt(x) && fposy==parseInt(y)){
cxt.clearRect(fposx,fposy,8,8);
switch(derection){
case 1:size=size+8;break;//获取鼠标左键，并且蛇头向左
case 2:size=size+8;break;//上
case 3:size=size+8;break;//右
case 4:size=size+8;break;//下
}
food();
}
}//随机产生代表食物的小黑点
function food(){
cxt.clearRect(fposx,fposy,8,8);
fposx=parseInt(Math.random()*300);
fposy=parseInt(Math.random()*300);
cxt.fillRect(fposx,fposy,8,8);
}
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航