DDR爱好者之家 Design By 杰米
本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下
1.贪吃蛇的规则
作为一款经典游戏,很多人玩他其实就是一种怀念。但是他不应该那么单一,应该有更多新的元素出现。然后我是个新手,希望我以后继续学习的途中能够再次回头重写一遍贪吃蛇。他的规则是;a.超出边界会死 b.碰到自身会死 c.吃食物会变长。
值得注意的是:1.在函数里所调用的函数的顺序很重要。2.<script src="/UploadFiles/2021-04-02/mygame2.js">
2.实现图:
3.HTML的代码:
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>贪吃蛇第二版</title> <link rel="stylesheet" href="mygame2.css" rel="external nofollow" type="text/css"> </head> <body > <div class="container"> <div class="center"> <h1>snake</h1> <canvas id="myCanvas"></canvas> <script src="/UploadFiles/2021-04-02/mygame2.js">4.CSS的代码(mygame2.css):
*{ padding: 0; margin: 0; } .container { text-align:center; } .center { margin-left:auto; margin-right:auto; width:70%; } #myCanvas { border-style:solid; border-color:#A9A9A9; background-color: #E0FFFF; }5.js的代码(mygame2.js)
/** * Created by Administrator on 2017/6/30. */ //画布 var cvs=document.getElementById("myCanvas"); var cxt=cvs.getContext("2d"); cvs.height=600; cvs.width=800; var Snakesize=20; var cvsCridx=cvs.width/Snakesize;//格子化 var cvsCridy=cvs.height/Snakesize; var length=0; var wall_length=0; var Snakebady=[]; var dre =2; var food = {}; var direFlag = 0;//程序存在的bug,按上左会刷新界面,用标记解决 var speed=0; var wall=[]; //初始化 function init() { Snakebady=[]; length=0; dre =2; for(var i= 0;i<3;i++) { CreateSnakeNode(parseInt(cvsCridx/2)+i,parseInt(cvsCridy/2)); } drawSnake(); putfood(); } //放蛇身 function CreateSnakeNode(x,y) { Snakebady.push({x:x , y:y, color:length===0 "#000000" : "#778899" }); length ++; } //绘制蛇身(连续的蛇点) function drawSnake() { cxt.clearRect(0, 0, cvs.width, cvs.height); for( i=0; i<Snakebady.length; i++) { drawRect(Snakebady[i]); } drawRect(food); wall_location(); } //绘制单个蛇点 function drawRect(Snakenode) { cxt.beginPath(); Snakesize = 20; cxt.fillStyle = Snakenode.color; cxt.fillRect(Snakenode.x * Snakesize, Snakenode.y * Snakesize, Snakesize, Snakesize);//蛇的形状为方形 //cxt.arc(Snakenode.x * Snakesize,Snakenode.y * Snakesize,12,0,Math.PI*2,true);//蛇的形状为圆形 cxt.strokeStyle="#484848"; cxt.lineWidth = 4; cxt.stroke(); cxt.closePath(); cxt.fill(); } //绘制墙 function drawwall (x,y) { wall.push({x:x, y:y, color:"#FFFF00"}); wall_length++; cxt.beginPath(); cxt.fillRect(Snakesize *x,Snakesize *y,Snakesize,Snakesize); cxt.fillStyle = wall.color; cxt.strokeStyle="#484848"; cxt.lineWidth = 2; cxt.stroke(); cxt.closePath(); cxt.fill(); } //墙的位置 function wall_location() { var i,j; for( i= 2,j= 5;i<15;i++) {drawwall(i,j);} for( i=25,j=5;i<38;i++) {drawwall(i,j);} for( j= 6,i=14;j<15;j++) {drawwall(i,j);} for( j= 6,i=25;j<15;j++) {drawwall(i,j);} for( i= 9,j=17;j<26;j++) {drawwall(i,j);} for(i=29,j=17;j<26;j++) {drawwall(i,j);} for(i=10,j=25;i<29;i++) {drawwall(i,j);} } //放置食物,不超过画布,不放在蛇身上,不能放在墙上 function putfood() { var flog=1; while(1) { flog=1; var foodx = parseInt(Math.random()*cvsCridx); var foody = parseInt(Math.random()*cvsCridy); for(var i = 0; i < Snakebady.length; i ++) {if(Snakebady[i].x === foodx && Snakebady[i].y === foody) flog = 0;} for(var j=0; j<wall_length ; j++) { if(wall[j].x === foodx && wall[j].y === foody) flog = 0; } if(flog) break; } food = {x: foodx, y: foody, color: '#B00000'}; } //先用alert读出位置的ASCLL的值,然后再重新赋值进行定义 document.onkeydown = function(e){ if(direFlag) return; e.preventDefault();//清除页面的滑动带来的上下键的操作 if(e.keyCode===38|| e.keyCode===87) setDirection(1);//上 if(e.keyCode===40|| e.keyCode===83) setDirection(-1);//下 if(e.keyCode===37|| e.keyCode===65) setDirection(2);//左 if(e.keyCode===39|| e.keyCode===68) setDirection(-2);//右 if(e.keyCode ===32) speed=100;//**** } //蛇的移动 function SnakeMove() { var newSnakebady={x:Snakebady[0].x,y:Snakebady[0].y,color:Snakebady[0].color};//改变后蛇头的坐标,不能直接赋值 if(dre === 1)newSnakebady.y -=1;//蛇头根据键盘事件上下左右移动 if(dre === -1) newSnakebady.y +=1; if(dre === 2) newSnakebady.x -=1; if(dre === -2) newSnakebady.x +=1; for(var i=Snakebady.length-1;i>0;i--)//蛇身的更替,用后一个位置等于前一个位置的坐标 { Snakebady[i].x=Snakebady[i-1].x; Snakebady[i].y=Snakebady[i-1].y; if(Snakebady[i].x===newSnakebady.x&&Snakebady[i].y===newSnakebady.y)//判断撞自己 return goend(); } Snakebady[0]=newSnakebady; direFlag = 0; boundary(Snakebady[0]); isgetfood(Snakebady[0]); strike_wall(); } //得到食物后的蛇身在最后面加上一个蛇点 function isgetfood(nood) { if(nood.x===food.x&&nood.y===food.y) { putfood(); Snakebady.push({x:Snakebady[Snakebady.length-1].x, y:Snakebady[Snakebady.length-1].y,color:"#778899"});//增加蛇身 } } //判断墙 function strike_wall() { for(var i=0;i<wall_length;i++) { for(var j=0;j<length;j++) { if(Snakebady[j].x === wall[i].x && Snakebady[j].y === wall[i].y) return goend(); } } } //判断边界 function boundary(node) { if(node.x < 0 || node.x > cvsCridx - 1 || node.y < 0 || node.y > cvsCridy - 1) goend(); } //进行键位判断 function setDirection(dir){ direFlag = 1; if(Math.abs(dir)===Math.abs(dre)) return;//往上不能往下 dre=dir; } //******* function goend() { init(); } init(); speed=200-speed;//**** setInterval(function(){ SnakeMove();drawSnake();},150);//定时器,让蛇移动起来,可以设置他的速度。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]