原生js 实现小人吃豆豆小游戏

html代码：

<div id="count" style="text-align: center;font-size: 30px;color: blue;">你已经消灭了0个敌人</div>
<div style="text-align: center;margin: 20px 0;"><button type="button" id="start_btn">开始游戏</button><button type="button" id="restart_btn">重新开始</button>
</div><div id="container"><div id="link"><img src="data:image/ren_q_1.gif" alt="" id="people"></div><div id="isOver" style="position: absolute;left: 50%;top: 50%;font-size: 20px; color: red; font-weight: 500;text-align: center;transform: translate(-50%,-50%);">游戏结束您的得分为0分</div>
</div>

css代码：

*{margin: 0;padding: 0;box-sizing: border-box;
}
body {margin: 0;background-color: #d4d4d4;
}html {width: 100%;height: 100%;
}
#link {/* pointer-events: none; *//* width: 50px; *//* background-color: green; *//* height: 50px; */position: absolute;left: 0;top: 500px;
}#container {margin: auto;width: 1000px;height: 600px;position: relative;border: 10px solid #000;
}

js代码：

var start_btn = document.getElementById("start_btn");
var restart_btn = document.getElementById("restart_btn");
var container = document.getElementById("container");
var count = document.getElementById("count");
var link = document.getElementById("link");
var people = document.getElementById("people");
var isOver = document.getElementById("isOver");
var x = link.offsetLeft;
var y = link.offsetTop;var m = 0;    //统计移除div数目的变量
var countPeople = 0;    //统计一共随机生成div数目的变量
var timer = null;    //随机生成div的定时器isOver.style.display = "none";    //游戏结束分数统计提示框
//重新开始按钮，本质就是页面重新加载
restart_btn.onclick = function(){location.reload();
}
//游戏开始按钮，启动定时器
start_btn.onclick = function(){//生成小人timer = setInterval(turn,1000);
}function turn(){var ytop = 0;var d = document.createElement("div");container.appendChild(d);d.style.position = "absolute";d.style.left = parseInt(Math.random()*(container.clientWidth-link.clientWidth))+"px";d.style.top = "0px";d.className = "badPeople";countPeople++;var a = ["image/ren_q_1.gif","image/ren_r_1.gif","image/ren_l_1.gif","image/ren_h_1.gif"];var img = document.createElement("img");d.appendChild(img);img.src = a[parseInt(Math.random()*4)];var timer2 = setInterval(function(){ytop = ytop + 1;d.style.top = ytop + "px";if(countPeople <= 20){ytop = ytop + 1;d.style.top = ytop + "px";}else if(countPeople <=40){ytop = ytop + 2;d.style.top = ytop + "px";}else if(countPeople <=60){ytop = ytop + 3;d.style.top = ytop + "px";}else if(countPeople <=70){ytop = ytop + 5;d.style.top = ytop + "px";}else if(countPeople <=80){ytop = ytop + 7;d.style.top = ytop + "px";}else if(countPeople <=100){ytop = ytop + 9;d.style.top = ytop + "px";}if(ytop >= container.clientHeight - d.clientHeight){clearInterval(timer2);d.remove();}
//这里可以封装成函数，碰撞检测var imgCount = document.getElementsByClassName("badPeople");for(var i = 0;i < imgCount.length;i++){if(imgCount[i].offsetLeft <= link.offsetLeft + link.clientWidth && imgCount[i].offsetLeft + imgCount[i].clientWidth >= link.offsetLeft && imgCount[i].offsetTop <= link.offsetTop + link.clientHeight && imgCount[i].offsetTop + imgCount[i].clientHeight >= link.offsetTop){m++;count.innerHTML = "你已经消灭了"+m+"个敌人";// count.style.fontSize = "50px";imgCount[i].remove();      //移除被撞的divconsole.log(m);}}},10);
//一共随机生成100个随机的divif(countPeople == 100){var sum = m;clearInterval(timer);isOver.style.display = "block";isOver.innerHTML = "游戏结束您的得分为"+sum+"分";}}document.onkeydown = function(e){var e1 = e || window.event;// console.log(e1.keyCode);if(e1.keyCode == 39){    //键盘向右的键执行的事件x += 8;// console.log(x);people.src = "image/ren_r_1.gif";     //切换图片link.style.left = x+"px";      //每次向右移动的距离
//控制div的移动范围if(x >= container.clientWidth - link.clientWidth){x = container.clientWidth - link.clientWidth;}console.log(container.offsetLeft + container.offsetWidth - link.clientWidth);}else if(e1.keyCode == 37){      //键盘向左的键执行的事件x -= 8;people.src = "image/ren_l_1.gif";link.style.left = x+"px";if(x <= 0){x = 0;}}else if(e1.keyCode == 38){     //键盘向上的键执行的事件y -= 8;people.src = "image/ren_h_1.gif";link.style.top = y+"px";if(y <= 0){y = 0;}}else if(e1.keyCode == 40){        //键盘向下的键执行的事件y += 8;people.src = "image/ren_q_1.gif";link.style.top = y+"px";if(y >= container.clientHeight - link.clientHeight){y = container.clientHeight - link.clientHeight;}}//碰撞检测var imgCount = document.getElementsByClassName("badPeople");for(var i = 0;i < imgCount.length;i++){if(imgCount[i].offsetLeft <= link.offsetLeft + link.clientWidth && imgCount[i].offsetLeft + imgCount[i].clientWidth >= link.offsetLeft && imgCount[i].offsetTop <= link.offsetTop + link.clientHeight && imgCount[i].offsetTop + imgCount[i].clientHeight >= link.offsetTop){m++;count.innerHTML = "你已经消灭了"+m+"个敌人";// count.style.fontSize = "50px";imgCount[i].remove();console.log(m);}}

原生js 实现小人吃豆豆小游戏相关推荐

打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
html实现跳跳棋游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏一.总结一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）
今天江哥手把手带大家实现一个吃豆豆游戏关注江哥不迷路,带你编程上高速知识点 HTML + CSS + JS 实现思路:类似贪吃蛇游戏玩法,W A S D,控制方向,实现吃豆豆废话不多说,直接上 ...
前端每日实战：164# 视频演示如何用原生 JS 创作一个数独训练小游戏（内含 4 个视频）...
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mQYobz 可交互视频此视频是可 ...
原生js实现的金山打字小游戏
首先先来看一下效果图如果感兴趣的就来看一下Js源码吧 //计分板 var board = {dom: document.getElementById("score"),maxLo ...
基于 Python 制作吃豆豆小游戏（文档和源码~）
游戏简介: 玩家通过 ↑↓←→ 键控制游戏的主角吃豆人吃掉藏在迷宫内的所有豆子,并且不能被鬼魂抓到. 若能顺利吃完迷宫内的所有豆子并且不被鬼魂抓到,则游戏胜利,否则游戏失败. 实现过程~: Step1 ...
刚学玩原生JS,自己写了一个小游戏，希望在以后能不断地进步加以改善
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
c语言吃豆豆小游戏代码,高手帮我改下我的吃豆豆游戏吧
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 void LOST(){ flag=0; move=NO; clrscr(); getch(); clrscr(); false1 ...

原生js 实现小人吃豆豆小游戏

原生js 实现小人吃豆豆小游戏相关推荐

最新文章

热门文章