原生JS实现一个简单的贪吃蛇小游戏

原生JS实现一个简单的贪吃蛇小游戏
利用javascript制作一个简单的贪吃蛇小游戏相信在我们90后的童年中你们肯定在电视上或者在诺基亚手机上玩过一款叫贪吃蛇的小游戏,今天我就用js来完成一个简单的贪吃蛇小游戏。首先在写代码之前我们得先知道贪吃蛇这个游戏运行的机制是什么:下面是效果图

利用javascript制作一个简单的贪吃蛇小游戏
相信在我们90后的童年中你们肯定在电视上或者在诺基亚手机上玩过一款叫贪吃蛇的小游戏,今天我就用js来完成一个简单的贪吃蛇小游戏。
首先在写代码之前我们得先知道贪吃蛇这个游戏运行的机制是什么:

(1)首先我们我们一打开游戏,是根据你屏幕的大小来控制贪吃蛇可活动的范围的,页面上会出现蛇还有蛇要吃的蛋。
(2)当你按下上下左右的时候,蛇会跟着你按的方向前进。
(3)当你的蛇头运动到蛋位置的时候,蛋就会消失,并且会在屏幕的另外一个地方重新产生一个蛋,并且你蛇的身子会变长。
(4)当你不小心控制蛇吃到自己的时候,那么游戏就结束了。这些规则相信大家都知道吧,其实代码编写也是按照这个规则顺序来执行的。并不会很难。

下面是蛇的样式和蛇的结构 (个人审美不行 所以可能样式并不是那么好看)

	<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
#pm{
position: relative;
box-shadow: 0 0 40px red;
background: black;
}
.snake{
width: 10px;
height: 10px;
position: absolute;
left: 0;
top: 0;
}
.head{
background-color: red;
}
.body{
background-color: greenyellow;
}

.egg{
width: 10px;
height: 10px;
background-color: magenta;
border-radius: 50%;
position: absolute;
}
</style>
<body>
<div id="pm">
<div class="snake head"></div>
<div class="snake body"></div>
<div class="snake body"></div>
</div>
</body>

下面是蛇如何运动,判断有没有吃到蛇蛋等。。。

<script>
var pm;//贪吃蛇活动范围
var ck_w;//活动范围的宽
var ck_h;//活动范围的高
var establishEgg;//蛇蛋
//蛇蛋坐标
var egg_x = 0;
var egg_y = 0;
//获取蛇头
var head = document.querySelector('.head')
//获取蛇的所有节点
var snakes = document.querySelectorAll('.snake')
snakes = [].slice.call(snakes);

//获取蛇身的每个坐标
var bodys = [];

//移动定时器
var snake_t = null;
//蛇移动的方向
var direction = 'right'
var x = 0,y = 0

//贪吃蛇可移动范围窗口初始化
function inpm(){
pm = document.querySelector("#pm");
ck_w = parseInt((window.innerWidth - 200) / 10)* 10;
ck_h = parseInt((window.innerHeight - 200) / 10)* 10;
pm.style.width = ck_w + 'px';
pm.style.height = ck_h + 'px';

//让游戏窗口在浏览器窗口居中
pm.style.marginLeft = (window.innerWidth - ck_w) / 2 + "px";
pm.style.marginTop = (window.innerHeight - ck_h) / 2 + "px";
}
inpm();

//创建随机的蛋
function egg(){
egg_x = parseInt(Math.random() * (ck_w - 10) / 10) * 10;
egg_y = parseInt(Math.random() * (ck_h - 10) / 10) * 10;
//创建蛇蛋
establishEgg = document.createElement('div');
establishEgg.className = 'egg';
establishEgg.style.top = egg_y + 'px';
establishEgg.style.left = egg_x + 'px';
pm.appendChild(establishEgg);
}
egg();

//移动
snake_t = setInterval(function(){
//移动坐标
switch(direction){
case 'right':
x = x + 10;
break;
case 'left':
x = x - 10;
break;
case 'top':
y = y - 10;
break;
case 'bottom':
y = y + 10;
break;
}
//判断有没有移出屏幕
if(x > ck_w - 10){
x = 0;
}else if(x < 0){
x = ck_w - 10;
}
if(y > ck_h - 10){
y = 0;
}else if(y < 0){
y = ck_h - 10;
}

bodys = [];
//蛇的身子跟着头
for(var i=snakes.length-1 ; i>0 ; i--){
var _left = snakes[i-1].style.left
var _top = snakes[i-1].style.top
snakes[i].style.left = _left;
snakes[i].style.top = _top;
bodys.push({
x: parseInt(_left),
y: parseInt(_top)
})
}

//蛇头位置改变
head.style.left = x + 'px';
head.style.top = y + 'px';

//判断头有没有碰到蛋
if(x == egg_x && y == egg_y){
//多一块身体
var _body = document.createElement('div');
_body.className = 'snake body';
_body.style.top = y + 'px';
_body.style.left = x + 'px';
//添加到页面中
pm.appendChild(_body);
//将新创建的身体添加到蛇身体中
snakes.push(_body);
//删除被吃掉的蛋
establishEgg.parentNode.removeChild(establishEgg);
//重新随机生成一个蛋
egg();
}

//判断是否吃到自己
var res = bodys.some(function(item){
return item.x == x && item.y == y;
})
if(res){
clearInterval(snake_t)
alert('游戏结束')
}
},100)

//方向盘
document.onkeydown = function(e){
var e = e||window.event;
var code = e.keyCode||e.which;
switch (code){
case 37:
if(direction == 'rihjt'){
break
}
direction = 'left';
break;
case 38:
if(direction == 'bottom'){
break;
}
direction = 'top';
break;
case 39:
if(direction == 'left'){
break;
}
direction = 'right';
break;
case 40:{
if(direction == 'top'){
break;
}
direction = 'bottom';
break
}
}
}
</script>

下面是效果图

原生JS实现一个简单的贪吃蛇小游戏
原生JS实现一个简单的贪吃蛇小游戏

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

原生JS实现一个简单的贪吃蛇小游戏

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 原生JS实现一个简单的贪吃蛇小游戏
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏