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

最新推荐文章于 2022-11-01 01:07:08 发布

游走走

最新推荐文章于 2022-11-01 01:07:08 发布

阅读量742

点赞数

分类专栏： web 学习笔记

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50320665

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

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

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

之后再完善吧

<!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.οnkeydοwn=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>