金狮镖局 Design By www.egabc.com
本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下
<script> class Map{ constructor(){ this.w = 800; this.h = 400; this.c = "#ccc"; this.createEle(); } createEle(){ this.mapEle = document.createElement("div"); this.mapEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};margin:0 auto;position:relative;border:solid 10px black;`; document.body.appendChild(this.mapEle); } } class Food{ constructor(){ this.w = 20; this.h = 20; this.c = "red"; this.x = 0; this.y = 0; this.createEle(); } createEle(){ this.foodEle = document.createElement("div"); this.foodEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c}; position:absolute;left:${this.x * this.w}px;top:${this.y * this.h}px;`; m.mapEle.appendChild(this.foodEle); } randomPos(){ this.x = random(0,(m.w-this.w) / this.w); this.y = random(0,(m.h-this.h) / this.h); this.foodEle.style.left = this.x * this.w + "px"; this.foodEle.style.top = this.y * this.h + "px"; } } class Snake{ constructor(){ this.w = 20; this.h = 20; this.body = [{ ele:null, x:4, y:3, c:randomColor() },{ ele:null, x:3, y:3, c:randomColor() },{ ele:null, x:2, y:3, c:randomColor() }]; this.d = "right"; this.createEle(); } createEle(){ for(var i=0;i<this.body.length;i++){ if(!this.body[i].ele){ this.body[i].ele = document.createElement("div"); m.mapEle.appendChild(this.body[i].ele); } this.body[i].ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.body[i].c}; position:absolute;left:${this.body[i].x * this.w}px;top:${this.body[i].y * this.h}px;`; } this.body[0].ele.innerHTML = "0"; setTimeout(()=>{ this.move(); },300); } move(){ for(var i=this.body.length-1; i>0; i--){ this.body[i].x = this.body[i-1].x; this.body[i].y = this.body[i-1].y; } switch(this.d){ case "left": this.body[0].x -= 1; break; case "right": this.body[0].x += 1; break; case "top": this.body[0].y -= 1; break; case "bottom": this.body[0].y += 1; break; } if(this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > ((m.w-this.w) / this.w) || this.body[0].y > ((m.h-this.h) / this.h)){ alert("撞墙了"); return; } if(this.body[0].x === f.x && this.body[0].y === f.y){ this.body.push({ ele:null, x:this.body[this.body.length-1].x, y:this.body[this.body.length-1].y, c:randomColor() }) f.randomPos(); } for(var i=1;i<this.body.length;i++){ if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){ alert("撞到自己了"); return; } } this.createEle(); } direct(type){ switch(type){ case 37: if(this.d === "right") break; this.d = "left"; break; case 38: if(this.d === "bottom") break; this.d = "top"; break; case 39: if(this.d === "left") break; this.d = "right"; break; case 40: if(this.d === "top") break; this.d = "bottom"; break; } } } function random(a,b){ return Math.round(Math.random()*(a-b)+b) } function randomColor(){ return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})` } var m = new Map(); var f = new Food(); f.randomPos(); var s = new Snake(); document.onkeydown = function(eve){ var e = eve || window.event; var code = e.keyCode || e.which; s.direct(code); } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,贪吃蛇
金狮镖局 Design By www.egabc.com
金狮镖局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com
暂无js实现经典贪吃蛇小游戏的评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]